Next, I will analyze some detailed rules of front-end architecture and key points of interaction between front and back end in different stages, one by one

Front-end architecture Concepts

The increasing complexity of Web applications, especially the popularity of single-page applications. Componentization, engineering, automation has become the trend of front-end development. Or that’s what front-line Internet companies are doing. Generally speaking, architecture refers to architectural patterns, and there are very few self-created architectures. Understand the architecture pattern, and be willing to deal with the development of the project.

Front-end engineering phase

Stage 1: Library/framework selection (addressing development efficiency)

Animate.css

jQuery

vue.js

underscore.js

React.js

Backbone.js

Bootstarp

zepto.js

jade

normalize.css

compass

Angular.js

Stage 2: Simply build and optimize the overall rendering

Select a build tool, compress the code, validate it, and then simply merge resources on a page by page basis. All page code is placed in an HTML document suitable for individual lab projects. Create a new file, quickly validate a feature or develop a component, and port it to the development environment. Advantages: fast development speed, lack of clear execution process: it is not easy to work with others

The third stage: separation of structure behavior and JS/CSS modular development

ADM/CDM/UMD/ES6 Module CSS Module: less, sass

Stage 4: Plugins

The response to the demand is fast, the UI style of the page is realized faster, and the front end realizes the page layout more quickly, so that the front end focuses on the business logic

Stage 5: Modules

The main modules are: (1) AMD specification (user client, RequireJS implementation) (2) CommonJS specification (server, Browserify implementation) (3) EcmaScript 6 Module

js

ES6 has now specified a module system at the language level that can replace the existing CommonJS and AMD specifications, and is fairly simple to use and has statically loaded features.

1. Use ++Webpack + Babel++ to pack all modules into a file for synchronous loading, or use multiple chunks for asynchronous loading; 2. Use ++System+Babel++ is mainly divided module asynchronous loading; 3. Use the browser < script type=”module”> load.

css

Although preprocessors such as SASS, LESS, and Stylus implement file splitting of CSS, they do not solve an important problem of CSS modularity: global contamination of selectors.

Logically, a modular file should hide the internal scope and expose only a few interfaces to the user. With current preprocessors, importing a CSS module risks overwriting existing styles. While rewriting styles is an advantage of CSS, it is not conducive to multi-player collaboration

Modularization of resources

Webpack is powerful not only because it unifies the various JS module systems, replacing Browserify, RequireJS, SeaJS. More important is its universal module-loading concept that all resources can and should be modular.

After the resources are modular, the advantages are:

Dependency simplification. All CSS and images and other resources rely on the JS route, without additional processing of CSS preprocessor dependency, also do not need to deal with the code migration of the image merge, font images and other path problems; Resource processing integration. Loaders can now be used to do various things with various resources, such as complex vue-loaders and so on; Clear project structure. With Webpack, your project structure can always be represented as a function like dest = Webpack (SRC, config).

Stage 6: Front-end engineering

The front-end engineering project is divided into three modules

  1. Node services, which provide data proxy, routing, and server rendering, communicate with the back end through restful apis.
  2. Web application development, focusing on web interactive experience.
  3. Front-end operations: including construction, testing, deployment and monitoring.

Static resources connect to Node:

  • The front-end static resource building work is separated from the Node service. The Node service reads the static resource mapping table generated by the front-end build during startup.
  • Static resource mapping table generation:
  • Precompilation: ES6 syntax escape, CSS precompiler handling, source quality review, testing
  • Module dependency resolution
  • Compressed, static resource version number

Stage 7: componentization

Components Components are not a new concept, but react.js enforces componentization, which is why they seem so new. It repackages JavaScript, CSS, HTML. Each fully functional structural unit that contains template (HTML)+ style (CSS)+ logic (JS) separated from the UI is called a component. Single responsibility principle: A class should have only one reason for change. Rule of composite/aggregate reuse: use composition/aggregation rather than inheritance whenever possible.

The following “conventions” are encouraged:

  • Ajax requests are brokered from the Node side, not the specific back-end service.
  • JavaScript, CSS, and HTML are encouraged to be viewed as “assembly” of the front-end domain.
  • Pay attention to front-end page state management, recommended solutions are Redux, VUex and MobX, etc.
  • Emphasis on componentization, component-oriented development.
  • Project scaffolding to build the development environment of the project.