JavaScript is the most popular programming language according to Stack Overflow review 2020. The review of 2021 is now being held, but we assume JavaScript will not lose its leading positions. In this article, we will shortly explain how to implement the principles of object-oriented languages, which is JavaScript, in the UI development process. We will focus on the idea of separating tasks, modules, and elements and formulate the reasons why separation is the key to success.
Being an object-oriented programming language, JavaScript represents any program as a structure of connected objects. Such an approach of information structuring leads to better management of the whole system. When all the parts of a complex program have their position in it and solve one particular task each, it is easier to fix the structure, as well as to enhance it, to develop, or to use it as a baseline for a new project.
At the beginning of the 2000s, the acronym SOLID was introduced for better remembering the main principles of object-oriented programming. Here are the principles:
- Single responsibility principle. This idea means that every module, class, or component should be responsible for only one task. If a class solves several tasks, all the subsystems of this class become intertwined. So, the changes in one place cause the changes all over. A chain reaction is not something a programmer wants to see in the code.
- Open-close principle. The principle says “Software entities should be open for extension, but closed for modification.” It means that whenever you need a change, you add new code to the existing one, but you do not change the code that already works.
- Liskov substitution principle. This principle means that the inheritance classes can be used instead of the parent classes from which they are derived, without disrupting the program. The violation of this rule leads to the violation of the previous one, as the modification of the entity will happen.
- Interface segregation principle. This one stands for the idea that “Many client-specific interfaces are better than one general-purpose interface.” In the word segregation, we trace the initial idea of separation, mentioned at the beginning of the article. We only do what is needed, we do not complement any additional functionality.
- Dependency inversion principle. When the functionality of the application does not fit a single module anymore, a developer should deal with the dependencies. The dependencies should follow the rules: high-level modules shouldn’t depend on low-level modules; abstractions shouldn’t depend on details; details should depend on abstractions.
Studying thoroughly those 5 principles, you can notice a common idea underneath. That’s where we come back to the point of separation. One task for a class, no changes within a working code, a new interface for a new client, only one-way dependencies – all those SOLID principles follow the idea of separate tasks and one task at-a-time.
Now let’s proceed with the ideas of how and what to separate while creating the JS user interface of an application.
-
Separation in the development
MVC, which stands for Model-View-Control, suggests splitting the whole application into three parts.
- Model – is the data you are using across your application.
- View – is the user interface. It allows users to interact with the interface.
- Control – is the connector between the two. Some data comes to the user from the Model, the user interacts with it in the View, and the Control sends the request to the backend and, when received, renders it through the Model in the View.
The whole MVC reflects the first SOLID principle. Each part is responsible for one task only. If you need to change something, you adjust only one part. If your app consists of parts A, B, C, and D, and you are setting the D part, nothing will happen to the other three. Besides, the team of the developers can be divided, and every person will be responsible for only one part of the project, making it easier to manage.
-
Separation for the sake of speed
Any web application is built with the help of HTML, CSS, and JavaScript. HTML heads the structure and contents, CSS manages the style and the look, JavaScript makes everything interactive. All the three are connected, but they are built separately not to overload the process and, as a result, to accelerate it.
-
Separation for easier fixing
If you keep your HTML, CSS, and JavaScript in one file, they are loaded at once. At some point in the rendering process, a function may throw an error. As a result, nothing will be rendered and the whole project will crash. At the same time, if you keep all those three parts of your project in separate files and render them separately, it will guarantee at least part of the project will be rendered despite the error that occurred. Thus, by separating the JavaScript from the HTML and CSS the developer can be sure that, if the application crashes, the user will have a visible user interface, which, even though it might not be fully functional, is way better than having a blank screen.
-
Separation for readability
This one is quite a logical point which comes as a consequence of all the above-mentioned information. If you keep all your codes in one file, there must be more than 1000 lines of code, which is quite difficult to read and maintain. A more convenient solution is to separately have, for instance, 300 lines of code in the HTML, 300 in the CSS, and 600 in JS.
Those four points are important to consider while building a UI from scratch. There are also convenient tools at the market designed to facilitate the work of a developer. By those tools, we mean JavaScript UI libraries. For example, Webix JavaScript UI Library. This library is full of ready-made widgets and complete single-page applications, that can be used as parts of any project. Such libraries are usually initially designed for inner purposes, so the developers create them based on the SOLID principles and the idea of separation. The UI library may become a handy tool both for building the UI and for studying the JS programming.
Conclusion
The SOLID principles of object-oriented programming show the general idea of the importance of task division. If we eat an elephant one bite at a time, the whole process looks easier and more logical. With JavaScript in the leading position, it is highly recommended for programmers to follow those principles in application development. It will guarantee they stay well-armed and ready to maintain their projects fast and efficiently in any situation.
Interesting Related Article: “10 Reasons to learn Java Programming Language and its Career Benefits“