Front-end framework learning-basic & front-end separation

Front-end knowledge stack

1. Three front-end elements: HTML, CSS,JS
   • HTML is a structural layer of the front end. HTML is equivalent to the framework of a house, which can be compared to 毛坯房only one structure.
   • CSS is a style layer on the front end. With CSS decoration, it is equivalent to a house decoration.
   • JS is a behavioral layer at the front end. With JS, the house can be connected to water, electricity and gas, so that the house can have various resources.
2. In order to simplify development at the front end, there are various frameworks
   • JavaScript framework
     1. The JQuery framework simplifies DOM operations, but when the DOM is operated too frequently, it will affect the front-end performance
     2. The Angular framework moves the back-end MVC pattern to the front-end, adding a modular development concept. The disadvantage is that the iteration is unreasonable
     3. The React framework proposes the concept of [Virtual DOM] to reduce DOM operations. Virtual DOM in memory improves front-end rendering efficiency.
     4. Vue framework, a progressive JavaScript framework, realizes modularization, routing, and state management. Combining the advantages of Angular (modularization) and React (virtual DOM)
     5. Axios framework, front-end communication framework.
   • UI framework
     1. Ant-Design, a React-based UI framework
     2. ElementUI, a Vue-based UI framework
   • JavaScript widget tool
     1. Babel: Js compilation tool
     2. WebPack: module packager, mainly used for packaging, compression, merging and loading

Separation of front and rear ends

1. In the web1.0 stage, the pages on the browser are fixed. All content needs to be written on the page, including the structure. Later, the display of the page was enriched, and then there were some simple page interactions. These are all returned to the page with a single request, and after the content of the page is published, everyone sees the same thing.
2. Later, there was dynamic page technology. The content on the page can be dynamically changed according to the data in the backend. For example, in the JSP stage, the front-end code and the back-end code are mixed together at this time. The jump of the page is forwarded or redirected through the backend ModelAndView.
3. Based on AJAX, the front and back ends can be independently developed through interface agreement. Improve development efficiency.
4. The front-end implemented by NodeJS can also be started independently as a service, and the front-end can only focus on page content, style and behavior code.