Copyright notice: This article is originally published BY the blogger. It follows the COPYRIGHT agreement CC 4.0 BY-SA. Please attach the link of the original source and this statement. This paper links: gudepeng. Making. IO/note / 2020/0…
Development history of front-end technology
1. Primitive times
In the Web1.0 era, there was no front-end concept, everyone was using JSP, PHP, ASP. Because JSP is powerful, the development of small and micro projects can be developed quickly, but relatively, the preparation of large projects when the problem will be obviously exposed shortcomings: business system increases, debugging difficulties JSP mixed business, difficult to maintain the front and back end responsibilities are not clear (or do not distinguish responsibilities)
2. Back-end MVC era
In order to make the code more maintainable due to 1.0 issues, in order to clarify the responsibilities of the front and back end. At this time, MVC framework (Spring, Structs, etc.) appeared in the back end, and the front end was developed in the form of templates. The back end then writes the logic into the template. Disadvantages: Inefficient front-end development and unclear front-end responsibilities
3. Separate the front and rear ends
In the Age of Ajax, the advent of Ajax makes the responsibilities of the front and back ends more clear, because the front end can send requests through Ajax for data interaction. The front end developers only need to develop the content of their own pages, and the data can be provided by the background. Ajax also allows partial page refreshes, greatly reducing the number of pages that previously had to be developed repeatedly. Front-end libraries are also slowly evolving, most notably jQuery.
3. Front-end frameworks — MVC, MVP, MVVM
MVC
The front-end MVC should be similar to the back-end, with views, Controllers, and Models. Model: Saves application data and synchronizes it with back-end data Controller: is responsible for service logic and modifies Model data according to user behavior View: is responsible for View display and visualization of data in Model.
MVP
MVP is close to MVC. The P stands for Presenter, a middleman who is responsible for the flow of data between the View and the Model and prevents the View from communicating directly with the Model
MVVM
MVVM is short for model-view-viewModel. Model-view-viewmodel. Model refers to the data passed by the back end. View refers to the page seen. 【 Viewmodel 】 The core of the MVVM pattern, which is the bridge between view and Model. It has two directions: one is to convert the [model] into the [view], which is to convert the data passed by the back end into the page to be seen. This is done by data binding. The second is to transform [view] into [model], that is, to see the page into back-end data. This is done by DOM event listening. Both directions are implemented, which we call bi-directional data binding. The three mainstream frameworks angular2, Vue, and React implement this pattern.
3. X micro front end
Due to the increasing volume of front-end development, more and more content, more and more slow packaging, more and more developers, complex product functions, frequent code conflicts, large impact area. So a microfront-end architecture was developed to solve these problems.
What is a micro front end
The micro front-end is mainly to transform a whole into the aggregation of services or applications that can be independently run, independently developed, independently deployed and independently maintained, so as to meet the needs of rapid business changes and parallel development of multiple teams.
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. — Micro Microfrontend is a technical approach and strategy by which multiple teams work together to build modern Web applications by publishing functions independently.
-
Stack independent The main framework does not restrict access to the application stack, sub-applications have full autonomy
-
Independent development, independent deployment of the sub-application repository independent, the front and back end can be independently developed, after the deployment of the main framework automatically complete synchronization update
-
Incremental upgrade In the face of a variety of complex scenarios, it is usually difficult to upgrade or reconstruct the existing system technology stack completely, and the micro front end is a very good method and strategy to implement the incremental reconstruction
-
Independent run time state is isolated between each child application and run time state is not shared
Fyi: Probably the most complete microfront-end solution you’ve ever seen
Three. Micro-front-end architecture practices
1.iframe
- The URL is not synchronized. The browser refresh iframe URL status is lost, and the back forward button is unavailable.
- The UI is not synchronized and the DOM structure is not shared. Imagine a pop-up with a mask layer in the bottom right corner of the iframe, and we want the pop-up to center the browser and automatically center the browser when resize.
- The global context is completely isolated and memory variables are not shared. Iframe internal and external system communication, data synchronization and other requirements, the cookie of the main application should be transparently transmitted to the sub-applications with different root domain names to achieve the effect of free registration.
- Slow. Each child application entry is a process of browser context reconstruction and resource reloading. And the thickness of iframe load seriously affects the performance of the viewer
2. Secondary domain name
- Common modules for each project
- Communicate through top-level domain names to pass messages
3. Micro front-end framework
- Stack independent The main framework does not restrict access to the application stack, sub-applications have full autonomy
- Independent development, independent deployment of sub-application repository independent, the front and back end can be independently developed, after the deployment of the main framework automatically complete synchronization
- Incremental upgrade In the face of a variety of complex scenarios, it is usually difficult to upgrade or reconstruct the existing system technology stack completely, and the micro front end is a very good method and strategy to implement the incremental reconstruction
- Independent run time state is isolated between each child application and run time state is not shared
The next article will take you through the actual development of a microfront-end project. The qiankun framework is mainly used here
Reference for this article:
Probably the most complete microfront-end solution you’ve ever seen