Building a Desktop Application from Scratch

This is actual game engine footage;_;

Hi! Last year, 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. You can find its source code here.

BREAKING DOWN THE TASK

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

WIREFRAMING

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.

This is another real game engine footage;_;

CHOOSING THE LANGUAGES

Next, research about each of the components. You have 2 broad choices:

1. Reinvent the wheel: Build everything from scratch and take full control.
2. 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…

Idk why medium doesn't allow tables

Graphical User Interface

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 the 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 the NodeJS file system module. File Handling and Execution of terminal commands are easy now(for compilation, execution of code). The choice is very clear now, what to choose for GUI.

Meh

LEARN THE LANGUAGES

Electron Tutorial: David Cameroon-Youtube
HTML, CSS, JS Tutorial: w3schools
NodeJS File System Module: Official Docs

Web Frameworks(if needed): Angular, Vue, Bootstrap

Hopefully, wireframing will help you decide which framework to use.

CODING PHASE

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