Setting Up Your Development Environment

What it is

Your development environment is the set of programs and tools installed on your computer that you use to do software development. Everyone’s is slightly different and there’s lots of tools out there. We’ll cover the basics of what you’ll need.

Why it matters

Sites like CodePen are handy when you are first learning because it sucks to have to learn a bunch of tools before writing your first line of code. However, the time has come to leave that playground and start writing code like a real developer would.

What you'll learn

• How to set up your computer for software development
• The standard software used to write, run, and deploy code
• How to choose an editor
• The shell
• Interpreters
• FTP
• Source Control

How to learn it

Nothing I found online covered this well, so I wrote it myself.

It is time to set up your development environment, the set of programs and tools that you use to write software.

There are lots of different programs and tools available, and setting up a new machine is complex process that is often overlooked. Choosing the best tools is a highly subjective and personal process, and every dev’s machine is slightly different.

We’ll ignore secondary stuff like your email or project management software and just focus on what you’ll use to write code. Regardless of what type of programming you are doing, it boils down to three things: you’ll need tools to write the code, to run it, and to do something with it when it is finished.

Writing code

First and foremost, you need a text editor. Your editor is your axe and you’ll be staring at it all day, every day. The previous tutorials had you set up with Atom, but there are a lot of other choices out there. Here’s the developer survey of the most popular options.

There are two broad categories of editors: lightweight text editors and IDEs, or integrated development environments.

Lightweight Text Editors

Lightweight editors are small, easy to use programs whose features center around manipulating text. They offer simple features like syntax highlighting and hotkeys. The advantage of this type of editor is that since it is so minimalistic, its fast and easy to use. Think windows notepad.

I’m not joking: Nodepad++, it’s souped up cousin, is the most popular editor on the market.

Integrated Development Environments

IDEs take the opposite approach. Instead of being small and simple, they try to be comprehensive. They understand your code on a much deeper level than a mere text editor, and therefore provide lots of advanced and useful features. IDE’s can, for instance, detect bugs and place an error message on the exact line that caused the issue.

Unlike a text editor, an IDE can run the code you write, letting you capture the whole coding process in a single app. Based on what we’ve seen so far, it would be kind of like having the browser developer tools rolled right into Atom.

The downside of using an IDE is that they are heavier and take a longer time to learn. For a web developer, since our code is executed in the web browser, the additional functionality an IDE provides is not as useful. IDEs for web development like (shudder) Dreamweaver exist, but the vast majority of web developers prefer to use something like Sublime Text or Atom.

IDEs are more popular for writing code that needs to be compiled, like Java or C++, since it provides a convenient way to run and test the code.

Step up your game

Once you start coding professionally, you’ll spend a lot of time with your editor. Eventually, it will become a good idea to invest some time to really understand how to use it well because it’ll save you time in the long run. You should at least memorize the hotkeys and learn the editor’s special features.

The most popular editors also are highly extensible and let you download custom plugins and add-ons to make the editor even better. Good plugins are a huge productivity multiplier. For instance, check out emmet. Cool eh? There’s loads of them, and Google will give you good lists of the most popular plugins for whatever editor you go with.

Vim and Emacs

If you want to be a cool kid, you’ll eventually want to upgrade your editor game to include vim or emacs. These are some of the oldest editors out there, and you run them directly from the command line. You’ll need a basic understanding of one of them because they are the standard. If you, for instance, are remotely logging into a server from the command line, you won’t be able to use your fancy IDE because it isn’t installed there. You’ll have to use vim or emacs.

Vim is for wizards only, fools

Despite their austere appearance, vim and emacs are popular because they are deceptively powerful. The learning curve is steep: the most popular question of all time on Stack Overflow is about merely trying to quit vim. (Esc :!q? You must be joking.)

However, if you master them, you’ll look like a wizard when you type. They have a full set of commands for moving around text, searching, copying, etc. The idea is that once you’ve mastered it, you don’t need a mouse. If your hands never need to leave the keyboard, code will fly onto your screen as fast as you can think it.

Since Vim and Emacs are so old, mutually exclusive, and hard to learn, competition between the two has escalated into a holy war. Pick one or the other. (As long as it isn’t emacs, you filthy casual).

Choosing an editor

Coding with a fully customized editor that you know well is to typing normally as typing normally is to pecking out text with one finger. Once you put in the time to master your editor, writing any kind of text will feel painfully slow using any other program. I haven’t used Microsoft Word in years.

Picking one comes down to personal preference. If you’ve been using Atom up until now and that is working for you, that is great. I personally have been using Sublime Text with plugins and the vim mode for years, but to each their own.

Don’t worry about pimping out your editor yet. At this stage, there are far more important things to learn. It is not the case that being able to write twice as fast will make you twice the programmer: knowledge is far more valuable than nimble fingers. Pick any editor you like and only worry about upgrading your tools once they are slowing you down.

Running your code

The process of programming boils down to writing some code, running it, seeing what happens and repeating. We can write code now, so how do we run it?

To do so, you’ll need an interpreter (or a compiler, depending on the type of programming language). The interpreter reads the file, which at this point is just text, and converts it into instructions for that the computer can execute.

Typically, you run the interpreter from the command line, also known as the shell (There's some minor technical differences, but most use the terms interchangeably). On Windows, the shell program is called the “Command Prompt”, and on a Mac it is called the “Terminal”. The shell is the text interface that people used to interact with computers before graphical UIs (with their movable “Windows") came along.

The Shell

The shell is going to be your second most used tool after your editor, so don’t be afraid of it. You don’t need to use the built in shell, by the way: it is just another program. If you are on a Mac, I’d reccommend you upgrade from the default Terminal program to something like iterm.

You’ll need to learn your way around the shell. It's basic commands let you move around the file system and execute programs, but the shell has its own programming language that will allow you to automate complex tasks. This is called scripting.

For various reasons, nearly all real servers run the Linux operating system. The Linux shell is built on top of a programming language called BASH. Fortunately, the MacOS shell is also BASH, so you only have to learn one new thing.

Unfortunately, Windows uses PowerShell, which is a whole separate beast. This reason alone is enough to make many developers prefer working with Linux or Macs over Windows. I won’t open that can of worms, but if you do use a Windows machine, which is perfectly fine, you should consider downloading cygwin to allow you to use a BASH-based shell instead. Windows 10 (finally) includes a BASH-based shell out of the box, and I’m growing tempted to jump back over.

Running an interpreter

You typically run the interpreter by typing the name of the program followed by the file you want to run into your shell. In python, for instance, you’d enter:

> python myFile.py

If you are on a Linux or Mac, you already have the python interpreter installed. For Windows, or for any other new language you want to run, just go to that language’s website and download and install the interpreter like any other program.

Other ways to run your code

The shell is not the only way to run code you’ve written. As mentioned before, IDEs are powerful because the interpreter is built right into the editor. For this reason, many IDEs are tailored to a specific programming language, like NetBeans is for Java.

So what about web development? As mentioned in the first lesson, your interpreter is the web browser itself! This is the difference between frontend and backend web development: frontend code is run in the browser, and backend code is run on the server. A frontend developer typically writes their code and then refreshes the browser page to see the changes, while a backend developer restarts the server and reads the output in the shell.

When writing a website, the simplest way to run your code is to open your HTML file right in your web browser as we did in the previous lessons. Once your site starts getting more complex, however, you’ll want to run a local server instead. That is the topic of the next lesson.

Delivering the code

So we can write code and we can run it. Finally, we need some tools to let us do something with that code. Taking your working code and putting it onto the computer that is going to run it is called deployment.

As explained in the first lesson, the simplest static web servers just read files of their hard drives. In this simple case, deploying your code just requires using something like FTP or an FTP client to transfer the files from your machine onto the server.

99% of the time, you do not want to directly transfer files from your machine to your running server. What if the code didn’t work? What if the transfer messes up? Breaking your server will bring down your website, and this is a Bad Thing.

Instead, developers move their completed code into a Source Control repository. This is a centralized system that protects and manages the codebase shared by a group. It’s primary function is to back up your code, but it also has advanced features, such as being able to support multiple versions of code. This way you can work on your mainline production code and your experimental beta branch simultaneously. It also includes mechanisms for resolving problems such as when, for instance, two developers edited the same file at the same time.

From there, there’s complex toolchains that detect changes in your source control, build and test your new code, and deploy it automatically. Modern developers often use a set of tools and practices to achieve continuous integration, where your code edits pass through an automated pipeline of testing and staging servers before being deployed. These systems can be very sophisticated and vary job to job. This is just a sneak peek at the systems development lifecycle.

Summary

Whew! We've covered a lot of ground. No matter what kind of code you are writing, you’ll need to set up a development environment that gives you a way to write, run, and deploy your code.

The primary tools include an editor, a shell, a deployment tool and source control. How you specifically set up your development environment is largely a matter of taste: everybody’s is slightly different. You’ll discover the tools that help you be more productive over time, so don’t get preoccupied.

Next we’ll cover how to use the shell to launch a local server and how to use source control to back up your code. That is all you need to get started!

Comprehension

• What is a development environment?
• What are the two main types of editors? Whats the difference?
• Why do most web developers prefer a lightweight editor to an IDE?
• What are Vim and Emacs? Which is better?
• What is an interpreter?
• What is a shell?
• What is scripting?
• What program is the interpreter for a website’s HTML, CSS and Javascript?
• What is the difference between frontend and backend web development?
• What is deployment?
• What is FTP? What is it for?
• What is Source Control?

Tasks

Open your shell and run the Python interpreter by typing python. You may need to install it first. With the interpreter running, write your first program:

> print "Hello, World!”

It did the thing! Exit python with:

> quit()

Download and play around with an editor. Read through the editor’s website to learn it’s basic features.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.