As passionate developers we occasionally enjoy discovering and learning new programming languages.
However, when comes the "hands-on" time, we usually have to go through the routine of downloading all the necessary tools/compilers, and in most cases setup the associated development environment.
This takes some time and effort, not without mentioning the fact that once we are done playing around with the language we have to go through the pain of cleaning everything related to the language environment from our machine.
Also, needless to say that if we want to use the languages from another machine, we'll have to setup the development environment all over again.
I've always dreamed I had an IDE that I could open from any machine, choose any language I'd like to have fun with, and immediately be able to do so, without having to go through the manual pain of setting up the required environment and cleaning up afterward.
Recently a few cloud based IDEs have emerged, allowing us to create projects in almost any language, and to code directly from within our browser, keeping all of our projects source code and compilers remotely inside the cloud.
Dream fulfilled !
Most of these products (Cloud9, Codeanywhere, Koding ... just to name a few) are commercial ones, even if with their free offers we can really try-out a lot of languages out of the box, without any hassle.
In this article we are going to build our own cross-platform & cross-language IDE. The end-product won't for sure come with all the full blown features which comes with the aforementioned commercial solutions, but at the end of this series we should have a simple IDE allowing us to choose our language, write a single source code file within the editor, compile it (if compiled language), run it and see the output. As a bonus we will also expose a REPL for languages supporting such interactive execution.
It will be up to you then to add features on top of it to make it even better. Once the foundations are correctly laid, then this is just a matter of time and dedication to build what you'd like on top of them.
That being said, let's dig a bit more into it !
First of all, when I am working on a project which is exposed to the end-user through a UI, I like to wireframe how the final UI should look like. Here is a quick one I made, which should give you a pretty good idea of what we will end up with once we reach the end of this article series.
The IDE can be seen as a Single Page Application consisting of 4 distinct sections :
- At the top of the IDE, the
languages listsection will allow us to select at any time the language we wish to play with.
code editorsection will allow us to actually write some source code in the selected language. It should support syntax highlighting for the chosen language.
outputsection will show the console output resulting from the compilation and execution of the code. Errors should use a specific text color (red should be a good standard).
REPLsection will be displayed only if the selected language support interactive execution. Otherwise the
outputsection will take the whole width of the window. This repl will allow us to enter statements for immediate evaluation, and the result to be automatically displayed.
This project will consist of a server side, in charge of compiling/running the code, and a client side being the IDE itself.
We'll focus first on the server implementation, then we will build the client side on top of it (bottom-up approach).
In this series we will make use of a few languages/frameworks/environments and tools. This series won't go deep into the specifics of these (this is not the purpose of this writing), but will rather focus on the design and architecture of the whole solution and the choices made along the way.
Each part containing code will come with a GitHub link to the full source code accompanying the chapter.
I hope that you are as excited to follow this project as I am working on it !
See you soon in Part I of this series, where we will discuss about the back-end, especially what technologies we are going to use to build it, briefly presenting them and see how they fit into the overall picture and setting up our environment, getting ready for development !