Dmitriy N. Full-Stack Developer

How to develop a web app in 8 steps

If you're seriously considering developing your web app, first answer two questions:

1. What task will this application be used for?

2. How will the application be developed?

The first is that a web application is always developed to solve a specific problem, usually one. It has to be responsive, and the simpler and shorter the response time, the more viable the web application is.

The second is that there are at least 6 ways to develop a web application, the most advanced of which is to implement the frontend as a single page application, where contact with the backend is implemented through REST APIs. This way the creation of a web application is achieved in 8 steps.

1. Working with backend business logic

There are two ways of doing this: you can group the backend business logic into a single service or implement each of its components in a separate microservice. If you work with a small project, use the first method, and if you work with a large project, the second would be ideal.

2. Choosing a programming language

If you are less concerned about the web application performance, write in Python (Django, Flask frameworks), Node JS (Express JS, Koa JS, Gatsby JS frameworks), Ruby (Ruby on Rails, Grape frameworks). If speed is a priority - use Golang (Gingonic, Beego, Revel frameworks). You can also use Microsoft's popular programming language C#, pronounced "c-sharp". It was developed as an application layer language for the CLR. C# has absorbed much from C++, Modul, Delphi, Smalltalk, and Java, but the difference is that C# eliminates models that have proven to be problematic in SAR development. For example, C#, unlike C++, does not support multiple class inheritance, but does allow multiple implementations of interfaces. The main thing, whichever language you choose, should be on you are well versed in.

3. Implementing the business logic

Focus on MVC pattern at first, and when you find that the business logic starts to get complicated, use presenter and interactor. But remember that presenter and interactor are at different levels and perform different semantic and functional loads.

Presenters handle user interface (UI) events and act as callbacks from internal layers (Interactors). Presenters are easy to test and their task is to take information from the web application and transform it to bring presenters to the screen using a view.

Interactors actually house the web application's business logic, i.e. checking conditions and handling information. Interactors work in the background and move events and information to the top layer, presenters, with callbacks.

4. QA testing of the backend

Testing is a must-do so that you know if the business logic of your web application is working properly, and so that you don't have to constantly "manually" check the code's functionality. Use automated testing for modules and libraries, UI/UX and API compliance. Write out multiple testing options. Develop a roadmap for the platform to manage testing for all types of testing. Make sure to plug in tools to track current code coverage to make sure your web application doesn't "hang" and runs without bugs or interruptions.

5. Adding Swagger Support

Swagger is a "smart" documentation RESTful web-API. Essentially, it's a framework for the REST API specification, giving you the ability to not only view the specification interactively, but also send requests, called Swagger UIs. Now about the web application.

Suppose you've already started developing the frontend of your web application. How do you figure out what parameters and requests to send to the server? Look in the backend code? Trust me, this is not a good solution.

I recommend that you add swagger support, and it's great if the swagger also supports generating through tests. That way it helps you document the API.

6. Working with frontend business logic

The complexity of working with frontend business logic is that there are so many frameworks. Usually in modern programming we use Angular, React, Vue. They all have their advantages as well as their disadvantages. But I recommend you to choose React for your frontend work because it is lighter, simpler and more flexible.

7. QA testing the frontend

The frontend is tested by two main types of tests - logic and mapping. Logic tests verify the logical implementation of functions and classes. Display tests ensure that the content is presented to the user in the way you intended when writing the frontend. For frontend QA testing, use frameworks such as Mocha, Chai, Jest, Ava, Enzyme, Jest - they are the best-selling, easiest to use, and most understandable of all.

8. Monitoring the quality of the web application

When you've completed step seven, you can say your web application is ready. Well, or it's at the final stage of being 98% ready. What do you need to know as a result? Naturally, the first thing you need to know is how well the application is implemented, how it will work, and how long its durability will last. Lighthouse, an automated, open-source tool for monitoring the quality of your web application, can help you do just that. Lighthouse conducts system audits of web application performance and availability for the average user to understand.

The data collected with Lighthouse helps you to further tweak your web application, change details, or add and optimize new features as needed.

Keep in mind that when you start developing a web application you will need to study all the pitfalls of each stage, and be patient, because the development itself can take you a few days, but the testing and fine-tuning and removing bugs can take up to many months. Be prepared for anything and keep in mind the two first and most important questions: always set a concrete task, which your application has to solve, before you start developing, and choose the most convenient and easy method of development, in which you are well-versed. After all, developing a web application is when you should take the path of least resistance.