编程知识 cdmana.com

Development history of front end architecture

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
  • The age of dynamic effect : The front end starts writing some simple JavaScript Script to animate , Such as a round advertisement
  • 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 .

版权声明
本文为[jafeney]所创,转载请带上原文链接,感谢

Scroll to Top