first , There is no architecture at the front end , Because the simple code has no architecture . Through a simple jQuery Library operation DOM The work that can be done , There is no need for complex design patterns and code management mechanisms , And there is no need for architecture to support applications .
The development history of front-end development is divided into the following stages ：
- The classical age ： Render the front end from the back end HTML, use Table Layout , use CSS Do simple assistance
- Ajax Asynchronous communication era ：2005 year ,Google In many Web Asynchronous communication technology is used in the application, such as Google Map , Open the Web A new era at the front end
Once the front-end application needs to get data from the back end , That means that the front-end application dynamically renders content at runtime , This is Model（ Model ）UI Layer decoupling .jQuery Can provide DOM Methods of operation and model engine, etc . At this point, developers need to do the following two things ：
- Dynamic generation HTML. What is needed to return from the back end to the front end HTML, And then dynamically replace the page DOM page . The early typical architectures were jQuery Mobile, Write the template and rendering logic in front of you , The user's behavior triggers the background and returns the corresponding data to render the file
- Template separation . Used by the back end API Go back to the front end and JSON data , And then the front end calculates and generates these HTML. Front end template reuse HTML, It's using things like Mustache Such a template engine to render HTML
because HTML Dynamic generation of 、 The independence and separation of templates , Front end applications are starting to get complicated . Back end MVC Architecture further affects front-end development , A series of exercises were born MVC frame , Such as Backbone、Knockout etc. . meanwhile , stay Ryan Lienhart Dahl And others have developed Node.js after , The software function of the front end is constantly improved ：
- Better build tools . Born like Grant and Gulp And so on
- Package management . A package management tool for the front end Bower and Npm
- Module management . There have been AMD、Common.js Different module management solutions
With the popularity of single page , The front and back separation framework has also become a standard practice in the industry . thus , The front end has entered a new era , There are more and more things to consider ：
- API management , Used things like Swagger Of API Management tools , All kinds of Mock Server It's also a standard practice .
- Big front end , Develop cross platform mobile application framework by front end , Use such as Ionic、React Native、Flutter Other framework .
- Componentization , From then on, the front-end application is composed of small components , Instead of being a big page component .
The system is getting more and more complex , Architecture is becoming more and more important in the front end .MVC Can't meet the needs of developers , So the component architecture was adopted . And componentization + MV Can't deal with large front-end applications , The micro front end appears in front of us again , It solves the following problems ：
- Cross framework . Run on a page , You can use multiple front-end frameworks at the same time .
- Applied resolution . Break down a complex application into several tiny applications , Similar to microservices .
- Legacy system migration . Let the old front end frame , It can be embedded directly into existing applications .
Complex front-end applications have developed for so long , There are also a series of applications that need to evolve ： Consider rewriting 、 transfer 、 restructure , wait .