Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what are the advantages of template exploration based on web front-end separation", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "what are the advantages of template exploration based on the separation of front and rear ends of web"?

Benefits of browser-side rendering

We are all aware of the benefits of browser-side rendering, such as

Get rid of the coupling and confusion of business logic and presentation logic in the Java template engine.

For multi-terminal applications, it is easier to take the form of interface. Different templates are matched on the browser side to present different applications.

Page rendering is not only html, but rendering at the front end can more easily provide functions in the form of components (html + js + css), so that the front-end components do not have to rely on the html structure generated by the server.

Break away from the dependence on the back-end development and development process.

It is convenient for joint investigation.

Disadvantages caused by browser-side rendering

But while enjoying the benefits, we are also faced with the disadvantages of browser-side rendering, such as:

Templates are separated in different libraries. Some templates are placed on the server side (JAVA) and some on the browser side (JS). The front and back end template languages are not interlinked.

You need to wait for all templates and components to be loaded on the browser before you can start rendering.

* * enter the time when there will be a blank screen waiting for rendering, which is not conducive to the user experience.

When developing a single-page application, the front-end Route does not match the server-side Route, which is very troublesome to deal with.

The important content is assembled at the front end, which is not conducive to SEO.

Reflect on the definition of front and back end

In fact, when we think about it, when we extract the rendering work from the Java side to the JS side, our goal is to clearly divide the front and back end responsibilities, not the browser rendering.

Just because in the traditional development mode, out of the server to the browser, so the front-end work can only be limited to the browser side.

As a result, many people assume that back-end = server-side front-end = browser-side, like the following figure.

In the midway island Midway project currently carried out by Taobao UED, by building a NodeJS intermediate layer in the middle of JAVA-Browser, we try to re-distinguish the front and back end of the split line according to the job responsibilities, and distinguish it according to the hardware environment (server & browser).

Therefore, we have the opportunity to achieve the sharing of templates and routing, which is also the most ideal state in the front-end division of labor.

Taobao Midway Island Midway

In the midway project, we moved the line that separates the front and rear ends from the browser side to the server side.

With a Nodejs layer easily controlled by the front end and common to the browser, the front and back ends can be separated more clearly.

You can also let the front-end developers decide the most appropriate solution for different situations. Not everything is handled on the browser side.

Division of responsibilities

Midway Island is not a front-end project trying to grab a job at the back end, but only to cut the fuzzy zone of the template clearly and achieve a clearer division of responsibilities.

Backend (JAVA), focusing on

Service layer

Data format, data stability

Business logic

Front end, focus on

UI layer

Control logic, rendering logic

Interaction, user experience

Instead of sticking to the differences between the server side or the browser side.

Template sharing

In the traditional development model, the browser side and the server side are developed by two different front and rear teams, but the template is in the fuzzy zone between the two. Therefore, more and more complex logic is inevitable on the template, which is ultimately difficult to maintain.

With NodeJS, back-end students can focus on business logic and data development at the JAVA layer. The front-end students focus on the development of control logic and rendering. And choose these templates to render on the server (NodeJS) or browser.

Using the same template language XTemplate, the same rendering engine JavaScript

Render the same result in different rendering environments (Server-side, PC Browser, Mobile Browser, Web View, etc.).

Route sharing

Also because of the NodeJS layer, routing can be controlled in more detail.

If you need to do browser-side routing at the front end, you can configure the server-side routing at the same time to change pages on the browser side or server side, and you can get a consistent rendering effect.

At the same time, it also deals with the problem of SEO.

The practice of template sharing

Usually when we render a template on the browser side, the process is nothing more than

Import template engine (xtmpleate, juicer, handlerbar, etc.) on the browser side.

To load the template file on the browser side, you may have

Use. Print on the page

Use the module loading tool to load template files (KISSY, requireJS, etc.)

Other

Get the data and use the template engine to generate html

Inserts the html into the specified location.

From the above process, we can see that in order to achieve cross-end sharing of templates, we should focus on the consistent module selection.

There are many popular module standards in the market, such as KMD, AMD, CommonJS. As long as you can export NodeJS template files to NodeJS through consistent module specifications, you can do basic template sharing.

The following series of articles will further discuss the proxy and sharing of Model.

Case discussion

Because of the middle layer of Midway, there are better answers to some of the questions in the past, such as

Case 1 complex interactive applications (such as shopping cart, order page)

Status: all HTML are rendered at the front end, and only interfaces are provided on the server side.

Problem: when you enter the page, there will be a short white screen.

Answer:

* enter the page, render the full page on NodeJS, and download the relevant template in the background.

Subsequent interactive operation to complete local refresh on the browser side

Use the same template to produce the same result.

Case 2 single page application

Status: use the Client Side MVC frame and change the page in the browser.

Problem: rendering and paging are completed in the browser, directly enter the URL or f5 refresh, can not directly render the same content.

Answer:

Share the same Route settings on the browser side and the NodeJS side

When changing pages on the browser side, Route changes and page content rendering are performed on the browser side.

When you directly enter the same URL, perform page frame + page content rendering on the NodeJS side

Whether it is changing pages on the browser side, or directly entering the same URL, you will see the same content.

In addition to increasing the experience and reducing the complexity of logic. It also solves the problem of SEO.

Case 3 pure browsing page

Status: the page provides only information with little or no interaction

Problem: html is generated on the server side, and css and js are placed in another location and are dependent on each other.

Answer:

Unified management of html + css + js through NodeJS

If you need to expand to a complex application or a single-page application in the future, it can also be easily transferred.

Case 4 Cross Terminal Page

Status: the same application presents different interfaces and interactions at different endpoints

Problem: it is not easy to manage html. It often produces different html on the server side and different processing on the browser side.

Answer:

Cross-terminal pages are rendering issues, which are handled uniformly by the front end.

Through the NodeJS layer and back-end service, we can design solutions for this type of complex applications.

At this point, I believe you have a deeper understanding of "what are the advantages of template exploration based on web front-end separation"? you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.