Nodejs How to separate the front end from the back end

The company develops a App,app details page or the web to show the specific content, some similar to the news page, text mixed with what the Web is the most suitable for this, so the team decided to use the Web to implement the details page.

The team's requirements for Web pages are:

The page can still be viewed offline after it has been accessed.

The first screen display speed is fast, do not allow long time screen or loading.

Project status

The backend provides a JSON-formatted API interface for use by the native side, as well as a JSON-formatted API interface for the Web

That means that the Web workflow is

Open the Web, load basic resources such as CSS,JS, etc.

Initiate an AJAX request to the server to request the data while displaying the loading

Get the JSON-formatted data and then render the "Dom string" based on the logical selection template

Inserts a DOM string into the page WebView renders the DOM structure

These steps are implemented progressively by the device that the user is using, which means that the user's device performance is more closely linked to the app's speed of operation.

In other words, if the user's device is low, the app will be able to open the page more slowly.

If it's on a PC-side browser, it's basically not a problem because browser performance is already very good. But the WebView performance on low-end Android machines is hard to say.

And offline after you have to view the visited pages, the best way is to use HTML5 offline storage technology, but offline storage is the entire page of HTML and resources, do not save JSON data

Save JSON data with local data inventory? It's too complicated ...

Only the server-side directly outputs the HTML structure rendering page, not the API output JSON and then the client renders the page.

Let the server staff write the page?

It's true that you can write your own HTML static page to the server, and then the JSP or PHP server language, but ...

Errors often occur because the service-side personnel are unfamiliar with the nested code for the front-end HTML structure. And it is difficult to find the bug, I believe that the end of the program ape should have experienced.

There are also a lot of front-end staff have to start learning jsp or PHP to cope with such a scene, the entire stack of engineers Mody-_-!..

A compromise solution

I've seen some of the pages of some companies in the first screen page

I guess probably want to save the first screen to launch the AJAX request, directly to the JSON output to the page, by JS to complete the DOM build.

This improves the first screen rendering speed to some extent, and the front-end staff does not have to write the server program

I do not use this way, because no one cares about me, I am so willful.

Er ... More radical Solutions

Pay attention to Nodejs for a long time has not how to use, and Nodejs has been developed for many years, now large companies to apply more and more, you can refer to the Nodejs application Company List-"

As a front-end staff, Nodejs is really easy to get started, grammar is JavaScript.

I heard that Taobao ah what the front-end staff has started to do with Nodejs, the big company is advanced AH. Well, our grand literature is also a big company-_-!, so go on the year of Sao!

Use Nodejs as the JSON for the bridge server-side API output. As shown in figure:

The browser (webview) no longer directly requests the JSP API, but

Browser requests server-side Nodejs

Nodejs again to initiate HTTP to request JSP

JSP is still the same as API output JSON to Nodejs

Nodejs to render HTML page after receiving JSON

Nodejs HTML page directly flush to the browser

In this way, the browser gets the normal HTML page, instead of sending Ajax to request the server.

The benefits of doing this:

App's web page enables offline storage technology

Page first screen rendering faster

Because Nodejs and page under the same domain name, so do not need to cross domain, and do not HTML5 output header information in such a way to achieve cross-domain

Both the server and client logic are controlled by the front end people are using the JavaScript language, the front-end program ape can better control and optimize, set the page what is not easy to make mistakes

True server-side program personnel need not care about the rendering logic of the page, only care about data processing

The disadvantage of doing this:

Increases the work of the front-end staff

Front-End personnel need to have a certain understanding of the server-side program

Service side needs to NODEJS service

There must be some loss in communication time through Nodejs rack-and-socket service

Fortunately Nodejs installation is relatively simple, a variety of plug-ins are also very rich

Practical application experience in Project

Using EXPRESSJS framework to build NODEJS Web services feel awesome!

Really very simple, Shine on the deal, I am such a dish of people can, it is really very simple!

Note the point:

Dynamic Data in a page, such as comments, readings, people, etc, still need AJAX requests

These dynamic data need to be inserted into the DOM dynamically otherwise the data will be stored offline to the cache, and the same data will not be updated every time it is opened.

Unless. appcache file update, this is not reasonable, yes, it is unreasonable

So those dynamic data can be based on the original logic to directly request JSP or PHP and other services provided by the API interface, of course, across the scope of what the project needs and project environment.

The default template in Expressjs is Ejs, and in the browser I'm using arttemplate.js, okay, I really like arttemplate.js.

A check found Arttemplate also have Nodejs version, so that the server and browser can use Arttemplate to do as a rendering template, can be said to be seamless ah, hehe

The last thing to say

The first time in the formal project to use the Nodejs is still very excited, feeling the front end of the path to another.

The first time hemp, all nervous, both quickly ....

Er.. It is feared that due to the lack of understanding of Nodejs the final cause of fatal errors, resulting in the project extension.