Based on the separation of front and rear end
In recent years the site based on Web terminal adapter in full swing, the industry also developed relying on various technical solutions.Like a browser-based native range of Media Query response type design, "cloud adaptation scheme based on the cloud intelligent rearrangement, etc.This article mainly discusses in front end separation under the basis of many terminal adapter.
About before and after the separation
In about end separate solution before and afterUA detection
For many terminal adapter is UA detection problem to solve first, for a request, we need to know the type of the device can output corresponding to the content of it.Now on the market has been very mature compatible with a large number of equipment User Agent feature library and detection tools,Here are the Mozilla finishing a list.Among them, both run in the browser, there are also running on the server code layer, and even some tool provides Nginx/Apache module, responsible for parsing UA information per request.
In fact, we recommend a way finally.Based on the separation of front and back end project determines the UA detection can only run on the server side, but if the code detection and feature library coupling in the business code is not a friendly enough.We go on to the behavior, hung on Nginx/Apache, they are responsible for parsing UA information for each of the request, through the way such as HTTP Header is passed to the business code.
Doing this there are several benefits:
1. Our code without having to pay close attention to UA inside how to
parse, and directly from the upper after parsing the information.
2. If there are multiple applications on the same server, can use the
same Nginx parsed UA information, save the resolution loss between
the different applications.
From Tmall share UA detection scheme based on Nginx
Taobao's Tengine Web server provides a similar
Be worth what carry is, choose UA detection tools must be considered when the maintainability of the feature library, because more and more new types of equipment on the market, each device has its own User Agent, so the feature library must provide good update and maintenance strategy, to adapt to the constantly changing equipment.
Based on the MVC pattern of several kinds of adaptation scheme
Obtain UA information, we will consider if the terminal adapter according to the specified UA.Even in NodeJS layer, although do not have most of the business logic, however, we still put inside is divided into the Model/Controller/View Model of the three.
We first use of the figure above, to resolve some existing terminal adapter. Based on the Controller adaptation scheme
This solution should be the most simple and crude processing method.By routing (Router) transfer the same URL unified to the same control layer (Controller).Control layer again by UA information data and Model (Model) distributed logic to the corresponding display (View) rendering, rendering layer is several terminal by prior agreement to provide the adaptation of the template.
The benefits of this approach is that maintain the unity of the data and control layer, business logic can only deal with once applied on all
terminals.But this scenario is only suitable for low interaction type applications such as display page, once the business is more complex, the terminal Controller may have their own processing logic, if still share a Controller, can cause the Controller is very heavy and difficult to maintain, this is a wrong choice.
Based on the Router adaptation scheme
In order to solve the above problems, we can classify the equipment on the Router, and distributed to different according to different terminal Controller:
This is also one of the most common solution, mostly in different terminal using a set of application independently.Such as PC taobao taobao homepage and WAP version on the home page, different devices to www.taobao.com, the server will be through the control of the Router, redirect to WAP version of taobao home page or the PC version of the taobao homepage, each is completely independent of two sets of the application.
But this approach certainly create a problem of data and some logic can't sharing, between various terminal can't share the same data and business logic, to produce a large number of repetitive work, inefficient.
In order to alleviate the problem, some people put forward the optimized scheme: is still within the same set of applications, each data source abstraction into each Model, provide for the use of different terminal Controller combinations:
This scheme solved the problem of the front data cannot be Shared.On the terminal Controller or are independent of each other, but can be used together with a number of data sources, at least on the data need not for independent interface terminal type development.
Above two kinds of schemes based on the Router, as a result of the Controller independently, the terminal can be for their own pages for different interaction logic, ensures that the terminal itself enough flexibility, which is why the main cause of most of applications using this solution.
Based on the View layer adaptation scheme
This is taobao order page using the scheme, but the difference is that the order page will render of the whole layer on the browser side, rather than a NodeJS layer.But whether the browser or NodeJS, the overall design train of thought or consistent:
In this scheme, the Router, Controller and Model are needed to pay attention to the equipment information, terminal type judgment to completely show layer to deal with.Figure in the main module is "View Factory", the Model and the Controller will be data and rendering logic, after passed through the View the Factory according to the equipment information and other state (not just UA information, also can be the network environment, users, etc.) from a pile of prefab components (the View Component) in the scraping of the specific components, then assembled into the final page.
This scheme has several advantages:
1. Upper level needed to pay attention to equipment information (UA),
video or more terminals referred to and finally show the biggest
relationship View layer to handle;
2. Is not only more terminal adapter, in addition to the UA information,
each View Component can also be determined according to the state
of the user's own output what template, such as the default hidden
pictures, designated area under low speed output activity Banner.
3. Each View Component between the different templates can decide
whether to use the same data, business logic, provide flexible ways
But obviously, this scheme is also the most complex, especially to consider some rich interactive application scenario, the Router and the Controller may not be able to remain so pure.Especially for some overall stronger business, itself cannot be broken down into components, this solution may not be applicable;And for some simple business, using this architecture may not be the best choice.
The above several kinds of solutions, each in one or more parts of the MVC model, if a project does not meet the demand in our business, more can take multiple solutions at the same time using way.Or can be understood as the complexity of the business and interactive attribute determines the product more suitable for more than what the terminal adapter.
Contrast responsive design scheme based on the browser, because most of the terminal detection and rendering logic moved to the server, so in NodeJS layer for adaptation undoubtedly brings better performance and user experience;In addition, relative to some of the so-called "cloud adaptation" scheme to bring the transformation of the quality problem, based on the separation of front and back side "customised" scheme will not exist.Before and after the end of the separation of adaptation scheme has a natural advantage in these areas.
Finally, in order to adapt to a more flexible strong adaptation needs, based on the separation of front and back side adaptation scheme will face more challenges!