Development history of front end architecture


At first, there was no architecture for the front end, because there was no architecture for simple code. Through a simple jQuery library to operate DOM can complete the work, there is no need for complex design patterns and code management mechanism, also do not need architecture to support the application.

The development history of front-end development is divided into the following stages:

  • Classical era: render the front-end HTML from the back end, use table layout, and use CSS for simple assistance
  • Dynamic era: the front end began to write some simple JavaScript scripts to do animation effects, such as round robin advertising
  • Ajax asynchronous communication era: in 2005, Google used asynchronous communication technology in many web applications, such as Google maps, which opened a new era of Web front-end

Once the front-end application needs to obtain data from the back-end, it means that the front-end application dynamically renders the content at runtime, which is the model UI layer decoupling. JQuery can provide DOM operation method and model engine. At this time, developers need to do the following two things:

  • Generate HTML dynamically. The back-end returns the HTML required by the front-end, and then dynamically replaces the DOM page of the page. Early typical architectures, such as jQuery mobile, wrote templates and rendering logic in the front end, and the user’s behavior triggered the background and returned the corresponding data to render the file
  • Template separation. The back-end uses the API to return the JSON data required by the front-end, and then the front-end calculates and generates these HTML. The front-end template uses HTML, but uses a template engine such as mustache to render HTML

Due to the dynamic generation of HTML and the independence and separation of templates, the front-end application becomes more complex. The back-end MVC architecture further affects the front-end development, and a series of MVC frameworks are born, such as backbone, knockout, etc. At the same time, it was developed by Ryan Lienhart Dahl et al Node.js After that, the software function of the front end has been improved continuously

  • Better build tools. Building tools such as grant and gulp were born
  • Package management. Bower and NPM are the package management tools for the front end
  • Module management. There are also AMD Common.js And other different module management solutions

With the popularity of single page applications, the front-end and back-end separation framework has become a standard practice in the industry. As a result, the front-end has entered a new era, and more and more contents should be considered

  • API management, using API management tools such as swagger, all kinds of mock server has become a standard practice.
  • Large front-end, the front-end to develop cross platform mobile application framework, such as ionic, react native, fluent and other frameworks.
  • Componentization, the front-end application from then on by a small combination of components, rather than a large page component.

As the system becomes more and more complex, the role of architecture in the front-end is becoming more and more important. MVC can not meet the needs of developers, so it adopts component architecture. However, componentization + MV cannot cope with large-scale front-end applications. Micro front-end appears in front of us again. It solves the following problems:

  • Cross framework. Running on a page, you can use multiple front-end frameworks at the same time.
  • Apply split. A complex application is disassembled into multiple micro applications, which is similar to microservices.
  • Legacy system migration. The old front-end framework can be directly embedded into the existing application running.

With the development of complex front-end applications for such a long time, there are also a series of applications that need to be evolved: Considering rewriting, migration, reconfiguration, and so on.

This article is published by openwrite, a blog multi post platform!