JavaScript is the most popular programming language according to Stack Overflow 2020 review. The 2021 review is underway, but we assume JavaScript will not lose its leadership positions. In this article, we will briefly explain how to implement the principles of object-oriented languages, namely JavaScript, into 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 to structuring information leads to better management of the entire system. When all the parts of a complex program have their place and each solve a particular task, it is easier to fix the structure, as well as to improve it, develop it or use it as a reference for a new project. .
In the early 2000s, the acronym SOLID was introduced to better remember the main principles of object-oriented programming. Here are the principles:
- Principle of single responsibility. This idea means that each module, class or component should be responsible for a single task. If a class solves more than one task, all the subsystems of that class intertwine. So, changes in one place cause changes everywhere. A chain reaction is not something a programmer wants to see in code.
- Opening-closing principle. The principle said “Software entities must be opened for extension, but closed for modification. This means that whenever you need a change, you add new code to the existing code, but you don’t change the code that is already working.
- Liskov substitution principle. This principle means that inheritance classes can be used in place of the parent classes from which they are derived, without disrupting the program. Violation of this rule results in violation of the previous one, because the entity change will occur.
- Principle of interface segregation. This represents the idea that “many customer-specific interfaces are better than a single general-purpose interface.” In the word segregation, we find the initial idea of separation, mentioned at the beginning of the article. We only do what is necessary, we do not complete any additional functionality.
- Dependency inversion principle. When the functionality of the application no longer corresponds to a single module, a developer must manage the dependencies. Dependencies must follow the rules: high level modules should not depend on low level modules; abstractions should not depend on details; the details should depend on the abstractions.
By carefully studying these 5 principles, you may notice a common idea below. This is where we come back to the point of separation. One task for a class, no change in working code, a new interface for a new client, only one-way dependencies – all of these SOLID principles follow the idea of separate tasks and one task at a time.
Now let’s see how and what to separate when creating the JS UI of an application.
-
Separation in development
MVC, which stands for Model-View-Control, suggests dividing the entire application into three parts.
- Model – is the data you use in your application.
- Show – is the user interface. It allows users to interact with the interface.
- Control – is the connector between the two. Some data arrives to the user from the model, the user interacts with it in the view, and the control sends the request to the backend and, once received, outputs it through the model in the view.
The MVC set reflects the first SOLID principle. Each party is responsible for a single task. If you need to change something, you only adjust one part. If your app consists of parts A, B, C, and D and you set part D, nothing will happen to the other three. In addition, the developer team can be divided, and each person will be responsible for only part of the project, which makes it easier to manage.
-
Separation for speed
Any web application is built using HTML, CSS, and JavaScript. HTML directs structure and content, CSS manages style and appearance, JavaScript makes everything interactive. All three are connected, but they are built separately so as not to overload the process and, therefore, speed it up.
-
Separation for easier fixing
If you keep your HTML, CSS, and JavaScript in one file, they are loaded at the same time. At some point in the rendering process, a function may generate an error. As a result, nothing will be returned and the entire project will crash. At the same time, if you keep these three parts of your project in separate files and render them separately, this will ensure that at least part of the project will be rendered despite the error that occurred. So by separating JavaScript from HTML and CSS, the developer can be sure that if the application crashes, the user will have a visible user interface, which although it may not be fully functional , is much better than having a screen.
-
Separation for readability
This is a completely logical point that follows from all of the information mentioned above. If you keep all of your codes in one file, there must be over 1000 lines of code, which is quite difficult to read and maintain. A more practical solution is to have separately, for example, 300 lines of code in HTML, 300 in CSS and 600 in JS.
These four points are important to consider when building a user interface from scratch. There are also handy tools on the market that are designed to make a developer’s job easier. By these tools we mean JavaScript user interface libraries. For example, Webix JavaScript UI Library. This library is full of ready-to-use widgets and complete one-page apps, which can be used in any project. Such libraries are usually initially designed for internal purposes, so developers create them based on SOLID principles and the idea of separation. The user interface library can become a handy tool both for building the user interface and for studying JS programming.
Conclusion
The SOLID principles of object-oriented programming show the general idea of the importance of division of labor. If we eat an elephant one bite at a time, the whole process seems easier and more logical. With JavaScript in a leadership position, programmers are strongly recommended to follow these principles in application development. This will ensure that they remain well armed and ready to maintain their projects quickly and efficiently in any situation.
Interesting Related Article: “10 Reasons To Learn The Java Programming Language And Its Professional Benefits”