The evolution of front-end development

This article introduces the history and trends of front-end development to help you understand what React is solving.

Static page stage

In the early days of the development of the Internet, the front-end and back-end development of websites were integrated, that is, the front-end code was part of the back-end code.

1. The backend receives a browser request
2. Generate static pages
3. Send to browser

At that time, the front-end pages were static, and all the front-end code and data were generated by the back-end. The front end is just a pure display function, and the role of the script is only to add some special effects. For example, it was very popular to use scripts to control the ads flying around the page.

The website development at that time adopted the back-end MVC model.

• Model (model layer): provide / save data
• Controller (control layer): data processing to implement business logic
• View (view layer): display data and provide user interface

The front end is just the V of the back end MVC.

AJAX stage

In 2004, AJAX technology was born, changing front-end development. The emergence of revolutionary products like Gmail and Google Maps has led developers to discover that front-ends are more than just displaying pages, they can also manage data and interact with users.

AJAX technology means that the script requests data from the server independently, and after processing the data, it processes and updates the web page. Throughout the process, the back end is only responsible for providing data, and everything else is handled by the front end. The front-end is no longer a template for the back-end but implements the complete business logic of “get data —” process data-“display data.

It is from this stage that the front-end script becomes more complicated and is no longer just a toy feature.

Front-end MVC stage

The front-end code has functions such as reading and writing data, processing data and generating views. Therefore, auxiliary tools are urgently needed to facilitate developers to organize the code. This led to the birth of the front-end MVC framework.

In 2010, Backbone.js, the first front-end MVC framework, was born. It basically moves the MVC model to the front end, but only M (read and write data) and V (display data), and no C (processing data). Because Backbone believes that the front-end Controller is different from the back-end and does not need and should not process business logic. It only needs to handle UI logic in response to the user’s every move. Therefore, data processing is placed on the back end, and the front end only handles UI logic (user actions) with event responses.

Later, more front-end MVC frameworks appeared. Other frameworks propose the MVVM pattern, replacing the Controller with a View Model. The MVVM pattern also divides the front-end application into three parts.

• Model: read and write data
• View: display data
• View-Model: data processing

The View Model is a simplified Controller. All data logic is placed in this part. Its only purpose is to provide processed data for the View, without other logic. In other words, after the Model gets the data, the View Model processes the data into the format required by the View layer and displays it in the View layer.

The characteristic of this model is that View is bound to View Model. If the data of the View Model changes, the View (view layer) also changes; and vice versa, if the user changes the data in the view layer, it is immediately reflected in the View Model. The entire process does not require manual processing at all.

SPA stage

The front end can read and write data, switch views, and interact with users. This means that the web page is an application, not a pure display of information. This single-page application is called a SPA (single-page application).

The so-called SPA refers to simulating a multi-page application on a single page through a good experience. The user’s browser only needs to load the webpage once, and then all operations can be completed on this page, with quick response and virtual page switching.

With the rise of SPA, after 2010, front-end engineers have gradually changed from developing pages (cutting templates) to developing “front-end applications” (applications running in the browser).

At present, the most popular front-end frameworks Vue, Angular, React, etc., belong to the SPA development framework.

React’s positioning

Our Antd tutorial is based on the React framework, so we will introduce React’s positioning in the front-end technology.

React’s positioning is simple, it is a solution for web components. In other words, it only solves how to split complex pages into components, and then how to assemble independent components into web pages that can cooperate.

Components are neutral, and any application architecture can be used. Therefore, React can be used in MVC architecture, MVVM architecture, or other architectures.

The community has proposed many architectural solutions for React applications, the most popular of which are the Flux architecture proposed by Facebook and the Redux architecture based on Flux. This tutorial uses the Redux architecture, but we have encapsulated it so that everyone can develop a React application the simplest, because the Redux architecture involves many concepts, and the amount of code that needs to be written is relatively large and complex. With our packaged tools, development workload can be greatly simplified.