What is the front end engineering, modularity, component

Introduction

Refers to the front-end is often a lot of people's image is simple, HTML, CSS plus one weeks can basically get started, JS difficult but also can quickly write some simple small effect, in the online random search for various special effects code free, a novice front-end can also be in a short period of time to write cool page effect, However, the simple introduction does not mean that the front end of the bowl of rice is very tasty, do accustomed to transduction, layout, buckle effects of the front-end new students in the way forward to feel more and more difficult, without any programming ideas and software development base many people on the front-end engineering, components, modularity, MVC these "tall" vocabulary foggy.
This article uses the simplest language to introduce me to the engineering, the component, the modularization understanding, facing the object is the front-end novice, therefore I use the best understanding way to say, inevitably will have many "childish" the expression, please the Big God Light spray.

This article focuses on the idea does not involve too much direct technology, if the novice students understand the idea can be a lot of Baidu, Google to learn the specific technology, I will also be in the follow-up article to do some introduction and we learn together.

Front-end Engineering

Remember when I wrote the front-end code in the earliest, often a page is a file, Html/css/js all written together, and later know should be the structure, style and action separation, I think this is my first front-end engineering ideas, so-called front-end engineering I think is

The front-end project as a system engineering analysis, organization and construction to achieve a clear project structure, a clear division of labor, teamwork tacit understanding, development efficiency improvement.

Engineering is a thought rather than a technology (of course we use some technology to achieve engineering), which is not specific enough, for example:

To build a building, if we do not carry out engineering considerations that is a brick trowels, bricks on the dry, until the building, it often means that there will be errors in the middle, to overturn or cover the structure after the problem but do not know where the responsibility will even fall on one day, If we use the idea of engineering to do, we will draw the drawings, determine the structure, determine the materials and budget and the duration of the work, in addition to what kind of work how many people and so on, we will first hit the foundation and then build the framework and then fill the wall so the last building is a solid compliance, Where something went wrong, we could find the source and the person in charge.

Earlier I said that contact with the earliest engineering thinking is "structure, style and movement separation", in small projects with only a few pages we just need to use these simple practices to organize the project well, However, in a large Web project often have more complex structure and a lot of pages require many people even multiple teams to work together to get the project done, we need more rigorous and complex engineering thinking to organize the structure. From the higher level of the project organization to see us to do the various specifications of the project, technology selection, project construction optimization and so on, at the level of code we also need to use the Js/css module, UI components and other development methods.

Then use a common word to summarize the front-end engineering: The front-end engineering is used as engineering thinking to look at and develop their own projects, and no longer directly from the sleeves of a page to write a page

Front-end modularity

We mentioned that in the organization of the code will be used in modular and component, we should understand that the front-end engineering is a high-level thinking, and modularity and assembly is a relatively specific development of engineering ideas, so it can be simple to think that modularity and assembly is an engineering form of expression.

That specific what is modular, or to give a simple example, we want to write a function to implement the JS code, this function in other locations of the project also need to use, then we can think of this function as a module in a certain way to the modular writing, can be used to achieve reuse can also divide and conquer, the same time when writing style , if we need some kind of special style, will be applied in many places, then we can also adopt a certain way to CSS modular, specifically, JS Modular scheme many have AMD/COMMONJS/UMD/ES6 module, CSS Modular development is mostly in less, Sass, stylus and other pre-processor import/mixin characteristics supported by the implementation of the specific technology we learn by ourselves.

In general, modularity is not difficult to understand, the focus is to learn the relevant technology and flexible use.

Front-end Assembly

As we mentioned earlier, the component is also an engineering form of expression, so what is the front end of the component?

Each individual, visual/interactive area on the page is treated as a component;
Each component corresponds to a project directory, and the various resources required by the component are maintained near this directory;
Because the component is independent, the component can be freely combined with the component;
A page is simply a container of components, which is responsible for forming a fully functional interface;
You can delete/replace the entire directory when you do not need a component, or if you want to replace the component.

The component treats the page as a container, and the individual parts of the page, such as head, navigation, focus, sidebar, bottom, etc., are considered as independent components, and different pages can form a complete page depending on the needs of the content.

PS: One of the most immediate benefits of modularity and assembly is reuse, and we should also have a concept, modular and component-based, apart from multiplexing, we are able to modify a separate module or component as needed without affecting other code, Therefore, in many places we do not have a strong need for reuse in a timely manner or according to the requirements of the Division of the modular or component development.

What is the front end engineering, modularity, component