Article directory
The love and hate between the front and back ends
undivided era
MVC design pattern
MVC is a classic design pattern, whose full name is Model-View-Controller, that is, model-view-controller. Roughly:
Model and view need to be glued through the controller. For example, when the user sends an HTTP request, the request will first enter the controller, then the controller will obtain the data and encapsulate it into a model, and finally pass the model to the view for display. It should be noted that this View can also use template engines such as Velocity and Freemaker. The use of these template engines can make the division of labor in the development process clearer and improve development efficiency.
From MVC to front-end and back-end separation
Separation of front and back ends
The front-end is responsible for developing the page, obtaining data through the interface (Ajax), using Dom operations to bind data to the page, and finally the front-end renders the page.
Front-end and back-end separation and coupling architecture
Why are the front and back ends separated?
"Separation of front-end and back-end" has become an industry benchmark for Internet project development. Through Tomcat+Ngnix (you can also have Node.js in the middle), you can effectively decouple it. And the separation of front-end and back-end will lay a solid foundation for future large-scale distributed architecture, elastic computing architecture, micro-service architecture, and multi-terminal services (multiple clients, such as browsers, vehicle-mounted terminals, Android, IOS, etc.).
The core idea of front-end and back-end separation (decoupling) is: the front-end Html page calls the back-end RestFul API through Ajax and interacts with Json data.
In the Internet architecture, there are generally two types of servers
- Web server: Generally refers to servers such as nginx and apache. They generally can only parse static resources.
- Application server: generally refers to servers such as tomcat, jetty, and resin that can parse dynamic resources and static resources, but the ability to parse static resources is not as good as a web server. (Generally, only the web server can be accessed by the external network, and the application server can only be accessed by the internal network.)
Generally, the company's back-end developers directly take care of the front-end work, implementing the API interface while developing pages, switching between the two, and dynamically splicing pages according to different URLs, which also greatly increases the development pressure on the backend. The front-end and back-end work is unevenly distributed. Not only is development efficiency slow, but the code is difficult to maintain. If the front-end and back-end are separated, the problem of uneven division of labor between the front-end and the back-end can be well solved, and more interactive logic can be assigned to the front-end for processing, while the back-end can focus on its own work, such as providing API interfaces and controlling permissions. and perform computational work. Front-end developers can use nodejs to build their own local server, develop directly locally, and then forward API requests to the backend through some plug-ins, so that they can completely simulate online scenarios and decouple from the backend. The front-end can independently complete the entire process of interacting with users. Both can start working at the same time without relying on each other. The development efficiency is faster and the division of labor is relatively balanced.
Advances in technology and architecture
From the classic MVC era of JSP+Servlet+JavaBean, to the Java framework era of SSM (Spring + SpringMVC + Mybatis) and SSH (Spring + Struts + Hibernate), to the front-end framework (KnockoutJS, AngularJS, vueJS, ReactJS)-based In the MV* era, and then the full-stack era led by Nodejs, technology and architecture have been advancing. Although the "full-stack development based on NodeJS" model is very exciting, there is still a long way to go to turn full-stack development based on Node into something stable and acceptable to everyone. The road of innovation will not stop. Whether it is the front-end and back-end separation model or other models, they are all to solve the needs more conveniently, but they are just a "transit station". The front-end project and the back-end project are two projects, placed on two different servers, requiring independent deployment, two different projects, two different code bases, and different developers. The front-end only needs to focus on the style of the page and the parsing and rendering of dynamic data, while the back-end focuses on specific business logic.
Template engine - front and back separation
What is EJS template engine
Template Engine is a tool that combines page templates with data to be displayed to generate HTML pages. If the routing control method in express mentioned above is equivalent to the controller in MVC, then the template engine is equivalent to the view in MVC. The function of the template engine is to combine the page template and the data to be displayed to generate an HTML page. It can run on both the server side and the client side. Most of the time it is parsed directly into HTML on the server side and then transmitted to the client after the parsing is completed. Therefore, the client cannot even determine whether the page was generated by the template engine. . Sometimes the template engine can also run on the client side, that is, in the browser. The current mainstream is still to run the template engine on the server. In MVC architecture, the template engine is included on the server side. After the controller gets the user request, it gets the data from the model, calls the template engine to combine the data with the template, generates the final HTML page, and then returns it to the client.
Template engine in front-end and back-end separation
In an architecture where the front and back ends are separated, due to the clear division of labor between the front and back ends, the front end is responsible for developing pages and the back end provides data interfaces. Therefore, traditional server-side template engines are not commonly used in this case. The front-end usually chooses a modern JavaScript framework (such as Vue.js, React, etc.) as the view layer, and uses a front-end template engine to handle data binding and render the page.
A front-end template engine is a tool that combines data and HTML templates to generate the final page. It can render data into HTML templates through dynamic binding of data to generate pages with interactivity and dynamic content. Front-end template engines are often used in conjunction with front-end frameworks to make page development easier and more efficient.
Template engines that separate front-end and back-end usually include the following features:
- Data binding: The template engine can bind data to the page template to achieve dynamic updating of data and rendering of the page.
- Conditions and loops: The template engine supports conditional judgments and loop statements, which can display different content or repeatedly render a certain block based on different conditions.
- Template componentization: The template engine supports the componentization of templates, which can split the page into multiple reusable components to improve development efficiency and page maintainability.
- Client-side rendering: The front-end template engine usually renders on the client side and executes the template code through JavaScript to generate the final HTML page.
Commonly used front-end template engines include Mustache, Handlebars, EJS, Vue.js template syntax, etc. These template engines provide rich syntax and functions to facilitate developers for data binding and page rendering.
To sum up, the template engine in the front-end and back-end separation architecture is a tool in front-end development, which is used to combine data and HTML templates to generate the final page. It can realize functions such as dynamic binding of data, conditional judgment, loop rendering, and template componentization, making front-end development more efficient and convenient.