What is front-end engineering, modularization, componentization, and front-end modularization?

What is front-end engineering, modularization, componentization, and front-end modularization?
Introduction

When it comes to front-end, many people often get started with simple images. HTML and CSS can be used together for a week. JS is a little difficult, but it can quickly write some simple and small effects, you can search for various special effects codes on the Internet at will. A newbie's front-end can also write cool page effects in a short time. However, simple entry does not mean that the front-end bowl is delicious, new front-end students who are used to cutting pictures, layout, and special effects are increasingly struggling to move forward, without any programming ideas and software development basics, many people are confused about front-end engineering, componentization, modularization, and MVC words.
This article introduces my understanding of engineering, componentization, and modularization in the simplest language. The oriented object is a beginner at the front end, so I would like to explain it in the best way, there will inevitably be a lot of "naive" expressions. Please give it a try.

This article focuses on the ideas that do not involve too many direct technologies. If new students understand the ideas, they can learn more about specific technologies from Baidu and Google, I will also make some introductions in subsequent articles to learn from you.

Front-end Engineering

I still remember that when I wrote the front-end code in the earliest days, a page was usually a file, and HTML, CSS, and JS were all written together. Later I knew that the structure, style, and action should be separated, I think this is my first idea of front-end engineering. The so-called front-end engineering I think is

The front-end project is used as a system project for analysis, organization and construction, so as to achieve the goal of clear project structure, clear division of labor, tacit understanding of team cooperation, and improved development efficiency.

Engineering is an idea, not a technology.(Of course, we will use some technologies to implement engineering.) This is not specific enough. For example:

To build a building, if we do not consider engineering, we just need to roll up the knives and bricks until the building is built up. This often means errors may occur in the middle, if we want to reinvent or build a structure with problems in the future, but do not know where the responsibility will even collapse one day, if we want to do it with engineering ideas, we will first draw drawings, determine the structure, determine the materials and budget, and the construction period. In addition, we will need to determine the type of work and the number of people, we will first build the foundation, then build the framework, and then fill the wall. In this way, the newly established tall buildings are stable and compliant. We can also find the source and owner in any case of problems.

As I mentioned earlier, the earliest engineering thinking is "separation of structure, style and action ", in small projects with only a few pages, we only need to use these simple practices to organize the project well, however, in a large web project, there are often more complex structures and a lot of pages that require the cooperation of many people or even multiple teams to complete the project, we need more rigorous and complex engineering thinking to organize the structure. From the perspective of higher-level project organizations, we need to develop various project specifications, technical selection, and project construction optimization. At the code level, we also need to use JS/CSS hosts, UI componentization, and other development methods.

Let's use a plain sentence to summarize the front-end engineering:Front-end engineering is to look at and develop your own projects by thinking about engineering, instead of directly setting up your sleeves and opening a page

Frontend Modularization

Previously we mentioned that modularization and componentization are used in code organization. We should understand that front-end engineering is a high-level idea, modularization and componentization are relatively specific development methods under engineering ideas. Therefore, modularization and componentization can be simply considered as engineering expressions.

So what is Modularization? Let's take A simple example. We need to write a js Code that implements the function. This function is also required in other places of the project, therefore, we can regard this function as a modular writing of a module in a certain way, which can be reused and managed separately. Similarly, when writing a style, if we need a special style that will be applied in many places, we can also modularize CSS in some ways. Specifically, many JS modular solutions include AMD, CommonJS, UMD, and ES6 modules. CSS modular development is mostly implemented under the support of the import/mixin features of less, sass, stylus, and other preprocessors, you can learn specific technologies on your own.

In general, modularity is not hard to understand. The focus is to learn related technologies and use them flexibly.

Front-end componentization

As we mentioned earlier, componentization is also a manifestation of engineering. So what is front-end componentization?

Each Independent, visible/interactive area on the page is considered as a component;
Each component corresponds to a project directory, and various resources required by the component are maintained nearby under this directory;
Components are independent, so they can be freely combined;
The page is just a component container and is responsible for combining components to form a complete functional interface;
If you do not need a component or want to replace it, You can delete or replace the entire directory.

The page is regarded as a container by componentization. Each independent part of the page, such as the header, navigation, focus chart, sidebar, and bottom, is regarded as an independent component, complete pages can be formed by adding related components.

PS: one of the most direct advantages of modularization and componentization is reuse. At the same time, we should also have an idea that modularization and componentization, in addition to reuse, also involve governance, we can modify an independent module or component as needed without affecting other code, therefore, in many cases, we do not need to reuse the data in a timely manner. We can also implement modular or componentized development based on the demand of Governance Division.