The thinking and practice of the separation of the front and back ends of (fine) (II.)

research on the template based on the separation of front and back Preface

In doing the front and rear separation, the first concern is the rendering, that is, View this level of work.

In the traditional development mode, the browser-side and server-side is developed by the different front and rear two teams, but the template is in the middle of the Blur area. As a result, the template is inevitably more and more complex logic, ultimately difficult to maintain.

And we chose the Nodejs as the middle layer of the front and back end. Try to nodejs the View-level work by the.

Make the front and back end division of labor more clear, so that the project better maintenance, to achieve a better user experience. This paper

Rendering this piece of work, for the front-end developers of the day-to-day work, occupies a very large proportion, but also the most easily with back-end development of the confusing place.

Looking back over the past few years, View this level of work, after many times of changes, such as: Form Submit full page refresh => Ajax local Refresh service-side continuation + MVC => client rendering + MVC traditional page Jump => single page should Use

It can be observed that over the years, everyone is inclined to render this matter, from the server end to the browser side.

The server side focuses on the service and provides the data interface. Benefits of browser-side rendering

The benefits of browser-side rendering are clear, like decoupling and confusion from the business logic and rendering logic in the Java template engine. For multiple terminal applications, it is easier to interface with the form. In the browser side with different templates, rendering different applications. Page rendering is not only HTML, in the front-end rendering can be more easily in a modular format (HTML + JS + CSS) to provide functionality, so that front-end components do not depend on the server generated HTML structure. Detach from the dependency on the backend development and the process of the announcement. Convenient for the joint adjustment. the downside of browser-side rendering

But while enjoying the benefits, we also face the disadvantage of browser-side rendering, such as: template separation in different libraries. Some templates on the server (JAVA), and some on the browser side (JS). The front and back end template language is not connected. You need to wait for all templates and components to start rendering after browser-side loading is complete, not to be seen. The first entry will have a white screen waiting for rendering time, not conducive to user experience development of a single page application, front-end route and server-side route does not match, dealing with a lot of trouble. Important content in the front-end assembly, not conducive to SEO rethinking the definition of the front and back

In fact, when we put the rendering of the work from the server (Java) to the browser side (JS), our goal is to clear the front and rear responsibility division, is not a non-browser rendering can not.

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

So many people have identified the backend = Server Front-End = browser-side, just like the following picture.

And in the current Midway Is. Midway project of Taobao Ued, by building a nodejs middle tier in the midst of Java–browser, trying to differentiate the front and back end of the line, rather than the hardware environment to differentiate (server & browser).

So we have the opportunity to do the template and route sharing, but also a front and back end of the most ideal state of division of labor. Taobao Midway Is. Midway

In the Midway Is. project, we moved the line between the front and back ends to the server side from the browser end.

With a NODEJS layer, which is easily controlled by the front end and common to the browser, the front and back separation can be accomplished more clearly.

You can also allow the front-end development to determine the most appropriate solution for different situations. And not everything is handled in the browser side. Division of responsibilities

Midway Is. is not the front end to try to rob the back-end of the project, the purpose is to cut the template this fuzzy zone clear, to achieve a clearer division of responsibilities. Back-end (JAVA), focus on service layer data format, data stability business logic

Front end, focus on UI layer control logic, rendering logic interaction, user experience

And no longer rigidly adhere to the server or browser-side differences. stencil Sharing

In the traditional development mode, the browser-side and server-side is developed by the different front and rear two teams, but the template is in the middle of the Blur area. As a result, the template is inevitably more and more complex logic, ultimately difficult to maintain.

With Nodejs, back-end students can focus on business logic and data development in the Java layer. And the front-end students are focused on the control logic and rendering development. and choose these templates to be rendered on either the server (NODEJS) or the browser side.

With 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.) Routing Sharing

Also because of the NODEJS layer, you can control the routing more carefully.

If you need to do browser-side routing in the front-end, you can configure the server-side routing, so that it in the browser-side page change or service-side page change, can be consistent rendering effect.

At the same time also deal with the problem of SEO. the practice of stencil sharing

Usually when we render a template on the browser side, the process is nothing more than to load the stencil engine in the browser (xtmpleate, juicer, Handlerbar, etc.) in the browser-side loading template files, the method may have the use of <script type= "Js/tpl" > ... </script> printed on the page using the module load tool, load template files (Kissy, Requirejs, etc.) Other get data, use the template engine to generate HTML to insert HTML into the specified location.

From the above process can observe, want to do the template of the cross-end sharing, the focus in fact in the same module selection this matter.

The market has a wide range of modular standards, such as KMD, AMD, Commonjs, as long as the Nodejs template file through the consistent module specification output to the Nodejs end, you can do the basic template sharing.

And the follow-up series of articles will be for model of proxy and sharing, do further discussion. Case Study

Because of the Midway Is., there are better answers to some of the past problems, such as the case of a complex interactive application (such as a shopping cart, a single page) condition: All HTML is rendered on the front-end, and the server provides only the interface. Problem: When entering the page, there will be a brief screen. Answer: First enter the page, at the Nodejs end of full-page rendering, and in the background to download the relevant template. Subsequent interaction, the browser-side to complete local refresh with the same template, resulting in the same result case two single page application status: Use the client Side MVC framework, in the browser page change. Problem: Rendering and page-changing are done in the browser, directly enter the URL into or F5 refresh, can not directly present the same content. Answer: In the browser side and the Nodejs side share the same route browser end page change, in the browser side route change and page content rendering directly input the same URL, at the Nodejs end of the page frame + page content rendering whether it is browser-side page change, or directly enter the same URL, All the things you see are the same. In addition to increasing the experience and reducing the complexity of the logical complex. More solve the problem of SEO case Three Pure browsing page status: The page only provides information, less or no interaction problems: HTML in the server generation, CSS and JS placed in another position, with each other rely on. Solution: Through NODEJS, unified management HTML + CSS + JS later if need to expand into a complex application or single page application, can also easily transfer. case four-span terminal page status: The same application to the different endpoints to render different interface and interaction problems: HTML management is not easy, often in the server to produce the same HTML, browser end to do the same processing solution: cross-terminal page is a rendering of the problem, unified by the front-end to deal with. Through the NODEJS layer and backend service, can be designed for this type of complex applications, the best solution. Summary

The past Ajax, Client-side MVC, SPA, two-way Data Binding and other technologies, are trying to solve the front-end development encountered bottlenecks.

The emergence of the Nodejs middle tier is also an attempt to resolve the limitations of the current front end being equator to the browser end.

This article focused on the front and back end template sharing, but also hope that we can discuss how in the Nodejs middle tier of this architecture, how we can improve our workflow, how to match with the backend, to the front-end this work better.

zhuan:http://ued.taobao.org/blog/2014/04/xtpl/