Blog

What is an Integrated Development Environment (IDE) and How Do They Work?

July 28, 2020

What is an integrated development environment (IDE)? Now that was a mouthful. It sounds like a term used for a science research lab. Here in this article, we will tackle exactly what an IDE is and how we use them.


An IDE is very simply a software application in which developers write and edit code. You can download an IDE to your computer, like Visual Studio Code or Atom, and develop your entire project in that software, or you can use a web-based IDE like Codepen Projects.


Here are some of the features of an IDE that will prove to be invaluable for you when you work on your next project:

1. A text editor — where you actually write your code

2. Source control editor — where you can keep track of the changes you’ve made to the files you’re working on

3. Build automation tools — this includes your package managers and compilers to make your code run

4. And a debugger — finally some help to the find bugs in code!! (aka, something you will use often :)

Let’s break it down even further. I’ll go over each feature of an IDE in more detail.

Text Editor

A text editor is where you write your code. If you only want a text editor, Codepen is a great place to start. Codepen is a web application, meaning that it is only available in your browser. There is no software to download. This is perfect for small projects, beginners, or for those who just want to play around with come code and make it work.

To clarify, the text editor is a ‘development environment’ because you can write and format code in it. It’s where you do most of your work. But what sets an IDE (integrated development environment) with a built-in text editor apart from simply a text editor (development environment) is all the other tools that come with it. You can develop your entire project from A to Z without leaving your software. All your HTML. All your JavaScript. All your Python. All your libraries that you are working with. All your debugging and source control. Everything that makes your code run can be found in this integrated development environment.

Source Control Editor

Source control is a way of tracking changes to code and provides a viewable history of the changes made. It is extremely helpful and very important especially if you are going to be working on a large project, whether by yourself or with others. I would recommend using source control (like GitHub) and practice using it on small projects, as soon as you feel comfortable delving into that.

It was a few years for me before I understood what source control was. Up until then, I had worked on small projects on my own in either Codepen or a text editor on my computer. I found that sometimes I would accidentally delete an essential piece of code, with no way to go back to a previous version. Or I would make a change that didn’t end up working and I couldn’t remember where I had started in the first place. That’s when I started using Github to help me track the changes I was making and inevitably recover a previous version of my code…if something went awry.

Github has some great step by step tutorials on how to set up your account, how to set up a repository, commit your code to your repository, and how to collaborate with others on your project. You can check that out at www.github.com.

Build Automation Tools

Okay, some more big words…. build automation tools are for compiling the code you have written into code that the computer can understand. Compiling is almost like translating. The compiler translates your code into machine code. Machine code is what the computer reads and in turn, can run the code you’ve written.

These automation tools also help check code for conflicts with the other files in your project, especially if you’re working on a large project or the same project with multiple people. I have found that even when I’m working on a project on my own, I like being able to check for errors and mistakes by using these tools. It saves a lot of time and effort by processing your code before you integrate it into your whole project.

Debugger's

We all have had the struggle of tracking down that bug that is causing the code we wrote to error out and stop running. The frustration is definitely real. I could not believe it the day I finally tapped into the power of a debugger. I was finally able to see approximately where the bugs where; oh, the relief!

A debugger tests your code and checks it for errors. These could be simple syntax errors (typing mistakes, forgotten semicolons, etc.) or bigger flaws, like an infinite loop or another larger issue. The most awesome thing about debuggers though, is that it will give you an idea of where the bug is. It helps save a whole bunch of time, searching and searching. By no means are debuggers perfect…but they are an extremely helpful tool. Debuggers to the rescue!

BONUS ROUND: What is my favorite IDE?

When I first started looking at IDE’s, I wanted to learn how to develop my projects locally on my laptop. I live in a rural area and internet connections are not always reliable. I wanted to be able to work on my project offline and then re-connect to the internet later, when I was ready to push changes to Github. So I downloaded a few IDE’s and took each of them for a spin, so to speak.

My favorite IDE by far is Visual Studio Code (VSC). I recommend it to everyone. It’s super lightweight (doesn’t take up a lot of space on your computer), it’s easy to navigate, neat and organized, completely customizable, and yet powerful to run all the code you could imagine. It’s also not exclusive to any particular programming language. For example, PyCharm is set up for programming with Python. With VSC, you can code in any language you prefer, whether it’s JavaScript, C++, C#, or Python.

My favorite part about VSC is that there’s not a lot of clutter around your workspace. There is literally one section off on the left-hand side that is your ‘explorer’, where you can navigate to your files and open folders. There is also another set of icons further to the left that enables you to use source control, download your build automation tools, and download extensions for VSC. Overall, it’s a great easy to use program. You can click the link below to download it for PC, Mac, or Linux users.

Visual Studio Code

In conclusion, every developer is going to have their preference on what IDE or programming language is right for them. I would encourage anyone who is looking for the right IDE to do what I did… download as many of them as seems interesting to you. Try them all out. And you don’t have to just pick one either! Maybe you like one IDE for this project, and maybe another IDE for a different project. It’s completely up to you. Most of all, have fun coding and developing yourself and your skills. That’s what’s most important.


GitHub CodePen

Created with HTML5, CSS3, Bootstrap3 &. JavaScript