Planning and Research of v1.0
Hi! In 2017, I completed my first open source project! This post is for you if you ask questions like “How to make software ?”, or “How do I make a window and GUI stuff through code ?”. This article will give you an idea of how to approach a project and a glimpse of how I built my project. On the way, I’ll be sharing stuff like how to choose a programming language, resources to get started with, etc. Well, what did I make? It’s a lightweight IDE for competitive programming. Yes, source code editors like Sublime Text and VS Code exist. However, I needed minimalism, with just the right tools and shortcuts so I focus only on problem-solving. This project is a combination of Windows TextPad and Sublime Text.
Before beginning with the “How to create the window and a button ?”, I’ll broadly, separate the components of the application and choose the languages and frameworks accordingly. What do we need during a competitive programming contest:
- Source Code Editor (example Notepad++, Sublime Text)
- File Manager
- Execute terminal commands
- GUI to wrap all the above in a window
Draw multiple layouts, even if you think that layout won’t work, look at other similar projects. I felt that my first layout was the best one, however, it was the worst :(. Besides, while drawing, think about how you’re going to implement it through code. This helps immensely in the coding phase. For example, I’m building a File Manager inside Side-Menu. There are multiple Tabs, static tabs(title), expandable(folder), movable(files and folders). All of them have one thing in common: Text inside a rectangle, with an optional button on their left, and do something on being clicked. Their onClick behavior is what is different for every tab. Creating a Class looks like an option. Takes some time to decide the attributes and methods.
Next, research about each of the components. You have 2 broad choices: Reinvent the wheel: Build everything from scratch and take full control or Use Open Source Code: You can modify other’s code based on their license/permissions on the use of their code. Let’s tabulate the data and see what you need to build from scratch. This is what I found…
| MY OPTIONS | Source Code Editor | GUI | Back-End / File Manager Tools | Compile / Execute Tools |
|---|---|---|---|---|
| REINVENT THE WHEEL | Use HTML, CSS, JS, Any good framework | Use Java (Swing / JavaFX), C++(Qt), Use HTML, CSS, JS with any framework(eg: Bootstrap) and display it using Java/C++ Use Electron Framework | Make shell scripts or use Node.js | Make shell scripts or use Node.js |
| USE OPEN SOURCE | Monaco Editor, Ace-Editor, CodeMirror | No need. | File Browser, File Manager | Couldn’t find relevant stuff |
Initially, I chose Java to build the GUI. Why not C++? Although it's closer to the machine, is faster than Java and all, Java already has plenty of inbuilt methods that I can use and the project didn't need much processing power. I never tried the Qt library for C++ as I knew Java already. If you can handle pointers and manage memory well, go give it a try. Now, Swing or JavaFX ? Swing is, in my opinion not needed when you don't want access to every pixel on screen. With JavaFX, animations and transitions are a lot easier now. Besides we can use CSS to design the components. You can use Web engine class to load the webpage as a GUI-component and create your other components normally as needed.
Electron framework gives you a window when you execute the code. The window displays a webpage that you defined in some file. Moreover, you get all the chrome inspection tools for debugging. So, if you're familiar with web development, you know how easy it has become to build the GUI.
Aaand I got an additional advantage.. Electron uses NodeJS. This gave me access to NodeJS file system File System module. File Handling and Execution of terminal commands is easy now(for compilation, execution of code). The choice is very clear now, what to choose for GUI..
| CHOSEN OPTIONS | Source-Code Editor | GUI | Backend |
|---|---|---|---|
| The Chosen One | Used Ace-Editor. Here, I made a mistake. I should have chosen Monaco Editor. It has quite a lot pre-built in features, like (Goto Line which Ace-Editor didn’t have at the time I built). Codemirror was difficult to modify, couldn't follow up with its documentation, so, I had to rule it out. | Used Electron Framework. Initially, I built using JavaFX. However, it seemed there are infinite exceptions and interfaces! Electron made it easy to use NodeJS and allowed me to use web technologies. | Used NodeJS as it already has the required built-in functions. |
| Why am I The Chosen One ? | Use open Source: No point in rewriting the source code editor. Instead, integrate it into your own ‘Components’. | HTML is easy?;-; | This depends on your project. I plan to add some more features to the file manager. Tinkering would only make the code difficult to edit. |
- Electron Tutorial: David Cameroon | Youtube
- HTML, CSS, JS Tutorial: W3Schools
- NodeJS File System Module: Docs
Once you are familiar with the languages, the coding phase is real smooth. Just in case you’re stuck: StackOverflow is who you call for help. Before asking a question, do a thorough search on the site, most probably, someone has already encountered the problem that you’re facing. PS: Use GitHub or any other Version Control System (VCS). It’s a backup of every saved instance of your code.
How much time did the coding phase take ? ...1 month :). Before writing the code, have an image of what you are actually building. Have you used those lines of code before? Why not make a function. Code is cumbersome or too many attributes ? Why not make a class ?
That’s all folks. BoiBoi