Personal technical blog, wechat official account, video account and design portfolio of the blogger

Quote: Mentioned the front-end often simple introduction to the impression of a lot of people is just a “drawing”, HTML, CSS, and can basically about a week to fit in with JS hard but can also quickly to write some simple little effect, various special code to use a random search on the Internet, a new front end can in a very short time to write cool page effect, Introduction to simple does not mean that the front end, however, that this bowl of rice is delicious, do spoil the cutting diagram, layout, buckle effects the front end of the new students feel increasingly demanding on the way forward, without any programming thought and the software development based on a lot of people for the front-end engineering, modularization, modularity, automation and MVC and MVVC and MVVM these “tall” vocabulary fog.

​

Front-end engineering

  • When writing front-end code in the earliest stage, often a page is a file, HTML/CSS/JS all write together, later know should be the structure layer, performance layer and behavior layer separation;
  • Later, as the project became more complex, many problems arose, such as: how to effectively collaborate with many people? How to ensure project maintainability? How to improve the efficiency of project development?
  • This is where the idea of front-end engineering was born. The so-called front-end engineering, in my opinion, is to analyze, organize and construct the front-end project as a system engineering so as to achieve the purpose of clear project structure, clear division of labor, tacit teamwork and improvement of development efficiency.

Front end modularization

Templating is the splitting of code and resources at the file level. It is to split a large file into small interdependent files, and then assemble and load them in a unified way.

The specific what is modular, A simple example, we want to write an implementation of A function of the JS code, other position also need to use this feature in the project, then we can see the function as A module adopts modular written in the form of A certain can not only realize reuse can also divide and rule, in the same way at the time of writing style, If we need a particular style that will be applied in many places, then we can also modularize CSS in certain ways. Specifically, JS modular solutions are many AMD/CommonJS/UMD/ES6 Module, etc., CSS modular development is mostly in less, Sass, stylus and other preprocessor import/mixin feature support to achieve.

Modularity is easy to understand. The key is to learn the technology and use it flexibly.

Front-end componentization

Componentization is the separation of the UI at the design level.

Componentization considers a page as a container. The independent parts of the page, such as the header, navigation, focus diagram, sidebar, bottom, etc. are regarded as independent components. Different pages can form a complete page by holding relevant components according to the needs of the content.

Components are independent, so components can be freely combined with each other. An entire directory can be removed/replaced when a component is not needed or if you want to replace it.

Front-end automation

Automation means that there are many automation tools (GLUP, WebPack) to do it for us, such as continuous integration, automated build, automated deployment, automated testing, etc. It will be introduced in detail in the following article

Front-end normalization

The quality of the project planning in the early stage has a certain impact on the later development. The specifications included are:

Directory structure formulation, coding specifications, front and back end interface specifications, document specifications, component management, code package management (SVN, Git), commit code remarks description specifications, periodic codeReview, visual icon specifications…….

In short: these concepts in software engineering are very basic common sense, mainly front-end development is fast, large demand, flexible change, only from the simple front-end page development into front-end engineering, developers still need to continue to learn, do not advance is to fall back.

Wechat Official Account: FrontendApe