The introduction

I’m sure many developers have been exposed to Web development at some point or another, and will find similarities and differences in the architecture. The reason for this is historical. In the eight years since the beginning of the 21st century, there have been numerous languages and architectures for Web development. For example, Java, from Servlet management of Request and Response respectively, to JSP front-end and back-end fusion technology, and then to EJB, Struts and Spring systems to migrate business logic functions backward. The browser from Microsoft’s IE browser and Netscape (Netscape browser) began to fight, put forward a lot of front-end optimization, such as VBScript, JavaScript, JScript, CoffeeScript and XHR(XMLHttpRequest) technology. Along with the creation of FireFox and the Creation of the Chrome project, KDE’s KHTML, Apple’s WebKit, FireFox’s SpiderMonkey, and Google’s Chrome project with its V8 engine. From there, the front-end technology gets stronger and stronger. But there are a lot of good scaffolding tools out there, like JQuery, Bootstrap, Foundation, ChartJS, etc. The most interesting thing is that Ryan Dahl developed Node.js based on the Chrome V8 engine and libuv library. This tool enables the front and back ends to be developed using the unified language JavaScript. This initiative is sure to make front-end developers ecstatic.

As the community grew more active, there were frameworks like NPM, Bower, Gulp and Browserify. On the other hand, as PC hardware advances and the ios/Android camp expands, engineers at Google (GOOG) and FaceBook (FB) are starting to wonder:

  1. Whether the front end can be managed through MVC architecture like the back end;
  2. Whether the business logic can be moved forward from the back end to improve performance.

So they came up with VirtualDOM technology and implemented the concept of MVVM, leading to Google’s AngularJS, FaceBook’s React and Yu’s Vue. And there are professional packaging tools Webpack, Rollup, Snowpack, Vite and so on. Today, browsers have formed consortiums to set common standards, and the front end is no longer representative of the B\S system. It has bigger ambitions. Tools such as desktop application development Electron and mobile App development React Native are also emerging in our current Web world, gradually becoming cross-platform pioneers.

Front – end separation architecture

In the face of such passion, I can’t help but admire them. Let me explain the basics of a Web framework. I’m sure many of you have seen this picture. The principle is that the browser will send the Request to the server based on the HTTP URL (the actual process is very complicated), and the server’s application service will parse the Request into a Response based on the business logic (this is what we back-end developers wrote). Here I’ll use Python’s Flask to demonstrate:

The code is as follows:

from flask import Flask app = Flask(__name__) @app.route("/") def hello_world(): return "<p>Hello, World! </p>"Copy the code

Obviously the Response returned is the string “

Hello, World! < / p > “. The usual back-end development front end is through Render to Render HTML pages, in this process to achieve the back-end of the HTML dynamic processing. Examples are Ninja in Python and CSHTML in C#. This is obviously a synchronous render. With the continuous popularization of XHR and Ajax asynchronous request technology, the development mode of the front and back end gradually forms a separation. The backend only needs to provide the API interface to return JSON information. The front end rerenders the page control based on the returned JSON.

Therefore, the research on the separation of front and back ends has been centered on the optimization of API interface. Fetch of AXIOS and ES6 appeared in the front end, and forms such as Restful API, OpenAPI, GraphQL and gRPC appeared on the interface.

At first, MY idea based on the network was that the front end should run and render through NodeJS, and the back end should handle THE DB data and provide the front and back end interaction through the interface, but this mode is actually a form of microservice. The advantage is that the front-end and back-end developers communicate interface details with each other and develop their own functionality independently, but unless you have a very large business with load-balanced server clusters that guarantee each other very high bandwidth, it’s just an elephant in a fridge.

However, with my in-depth research and thinking on Web MVC, the hybrid programming mode may be more suitable for lightweight project development. The codes belong to the same directory, and the project manager is responsible for maintaining the collaborative work of front-end and back-end development. After unifying the interface and document details, back-end engineers develop data interfaces and interface tests. The front end engineer is responsible for developing the tests for pages and interface calls, and emulates the interface data himself via Node.js. The backend service and node.js service Render unify a View layer file. But the View layer file should use the MVVM framework architecture. This provides code unity and development independence. It works well with the testing framework.

Recently studying React and Vue, I found that MVVM framework for the front end and microservice framework for the back end are the mainstream development constructs. It also effectively utilizes the browser’s rendering and URI requests to achieve a true separation of the front and back ends. It also ensures that the front end focuses more on page implementation and UI experience design, while the back end provides better data, and data is stored in the browser, facilitating progressive Web development.

future

At present, cloud technology is becoming more mature, as well as the development of DevOps and 5G, the front end will still be the pioneer of cross-platform in the future, and the development of front and back end separation will become increasingly fierce. But I think there’s a lot of growth in the back end as well. Such as network system research and development, distributed cluster architecture, big data, cloud computing, blockchain and artificial intelligence. I think technology will be more and more interesting in the future.

Thank you

Thank you very much, Microsoft. NET architecture, which gives me a comprehensive understanding of development technologies in a variety of fields, and thanks to the people who continue to contribute ideas and share ideas to open source projects, as well as the creators of Python, C/C++, Node.js and Java.

supplement

2021-7-2 I’m really sorry for my lack of consideration before, so I changed this article again today.