Web App Contest in a Week: Take-Aways and Thoughts

Recently, I participated in the Telegram contest about building XY charts from the data organizers provided. They offered three platforms: Swift/iOS, Java/Android and JS/Web. I chose the last one because I was interested in a hobby project with some challenges inside. Telegram gracefully provided gifs with the design. The target was to make a sleek and fast application for various devices/browsers:

However, while looking for answers online it was challenging to find a tutorial on starting the web project from the very beginning under a tight deadline. This is why I decided to write this article, to walk through my steps — and who knows, maybe it will help someone with similar questions.

I will divide my path into several stages:

1. Vanilla JS
2. Decoupling
3. NodeJS + webpack
4. Babel + ES2016

After that, I will mention the project tools I used & talk about the next steps.

Vanilla JavaScript

In the world of hundreds of JavaScript frameworks, there is a rare beast nowadays called Vanilla JS. In simple words, it is a JavaScript without any jQuery, React and even NodeJS. If you want to have a super sleek web solution, you will definitely end up with doing something like:

document.getElementById('root')

instead of jQuery’s code:

$("#root")

I have started the project with the idea of making it as simple as possible with just three HTML/CSS/JS files. Traversing DOM and making all the changes in a functional programming style was cool in the beginning until I found out that my JS code is already 300 lines of code for just having the chart and minimap with the content. I started to re-think the architecture.

Decoupling

When it comes to complex systems, the most logical solution is to start separating to modules. Here is an example of how it was done previously before classes came in ECMAScript.

However, from my perspective, this is an outdated approach for creating modules and it is much more interesting and beneficial to use more contemporary tools for the development as a professional. JavaScript added so many features while being one of the main important languages for the web.

NodeJS + webpack

It sounds quite logical to start using NodeJS from the beginning, but I was trying to be minimalistic as possible in the beginning. I failed with that, obviously because the basic HTML+CSS+JS way is not convenient to work with because they were invented just on the rise of the Internet.

Modern tools give you scalability and ease of development. VSCode is a perfect editor to work with NodeJS, webpack, and others. To start your new web project with NodeJS you need to:

1. Install the latest node with npm (https://nodejs.org/en/)
2. Open your terminal
3. Create a folder and go there
4. Just type:

npm init

After that, you are just following the instructions of the command line tool. After that, you can install webpack with the below command:

npm install --save-dev webpack webpack-cli webpack-dev-server

The flag ‘save-dev’ is a very important one. It gives you an ability not to serve this in a future production-ready application. So, webpack is now a part of your project. To configure it, you will need just to create webpack.config.js in the root folder of your project. Here is the example of my very basic one:

In your package.json file, it is better to have index.js at the same location as an entry in a wepack configuration file. DevServer gives a great possibility to start a local server in order to have hot redeployment and see your changes in the code almost instantly.

Babel + ES2016

I was pretty happy with that until I have understood that I still could not use any of the latest ECMAScript features. I have started digging again and remembered. Now, it’s time to connect Babel transpiler. It will add two advantages:

• with using that awesome compiler you can write modern JavaScript code which will still work in old browsers with the hassle-free configuration
• you can use many experimental features. For example, you can write code like:

{
   projectId //means that 'projectId' key and value are one word
}

The setup is pretty straightforward. You just need to run this command:

npm install --save-dev @babel/core @babel/preset-env babel-loader babel-preset-es2016

After completing the installation, all these dependencies will be added to your package.json. In the example above on webpack configuration file, we already have preset with babel. You can find it in the rules/options/presets part.

Next Steps

Since the contest had a strict deadline, I did not put the effort into writing any unit tests. I was thinking that it is not needed on the stage of this fast prototyping work. For the unit tests, I usually use a tool called Jest making JS testing delightful and easy.

In terms of front-end in my application, I was not sure about sleekness and SVG to support. That is why I skipped the React framework this time which I really like to write my other projects on. Its benefits include modular ideology, reusable components, and reactive approach.

I think good old JavaScript also can be changed to Typescript which gives you superpowers in terms of development and type safety. The language also has the object-oriented ways of writing code.

In terms of beautifying the code while saving it in the editor, my favorite tool is Prettier. You are just creating a .prettierrc file with minimal settings from the documentation and installing the extension to VSCode. Also, make sure to turn on ‘format on saving’ in the settings of the editor.

Project tools

Even when you are working alone it is crucial to track the progress of the project. In my case, the thinking process sometimes can be chaotic and I generate random ideas while coding. In order to not lose track of what I was doing, I have decided to create a Trello board.

Basically, it is a super simple Kanban board but with some small tweak. There is a lot of useful information on the internet. I do not like to use bookmarks in the browser because the storage of them became a trash bin quite fast in my experience. After finishing some project or research on the topic, bookmarks became obsolete pretty fast. I will not use them in the future with 70 percents probability. That was the reason why I have chosen to store really good web links in the same Trello board. On the screenshot, there is a real example of my project:

Trello board of my charting project

Before this charting contest, I did my hobby projects with the philosophy ‘do now, think about the design later’ — I did not have a ready UI prototype to refer to. Telegram gave the graphical design from the beginning. It was a really great gif file in fantastic quality. Therefore, tracking own progress was quite easy and measurable.

My outcomes

From the experience in this project, ‘less is more’ philosophy does not work all the time. I have wasted a lot of time introducing new tools because of the minimalistic idea in my head. Next time, I will definitely start with the tools I mentioned above. To sum up, here is my recommendation on what could be used to simplify the development process:

• Visual Studio Code
• NodeJS
• Typescript (main language)
• React (front-end framework)
• Jest (unit testing and mocking)
• Prettier
• Trello (to track the progress)
• UI prototype (even rough and very basic)

I will be happy to read your suggestions on what can be used in modern web development. The code for that project could be found here.

This is my article on software development. Please, clap, if you like the article and follow my account to read other stories about motivation and tech. In another one, I am telling my story about becoming a software developer.