Architecture Design: Web Front end architecture design for front and back end separation

In the previous article I talked about the front and back of the separation of some views, this view is from a macro point of view, no concrete landing to achieve, today I will continue the topic of the previous article, from the front-end of the architecture design point of view of the front-end separation of a specific implementation of the program and I originally conceived a great change, But the core idea has not changed, is the control layer belongs to the Web front-end.

In the previous article I said that the core of the separation of the front and back is the MVC control layer as part of the front-end, the concept of the original plan in the actual production development is difficult to do, I think the core is the control layer and the view layer of the technical heterogeneity, such consequences make the system transformation involves too large, resulting in project team, communication Coordination and management costs relatively high, with the development of the front-end technology, the front-end development of the project volume is more and more, the difficulty is also more and more high, so the project of the front-end project, engineering and independence is more and more people pay attention to, so there is a lot of JavaScript MVC rich application. If JavaScript can do the MVC pattern, then the front-end framework can abandon the control layer of the heterogeneous language and be truly independent.

To take the traditional C layer of MVC off the front end, we must first understand the C layer of MVC is what the control layer does, the role of the control layer is the model layer and the view layer of communication, the model layer further specific point is the data layer, the point of view layer is the data presented to the user's way, Let's look at how the control and view layers are coupled in Java's web application. The first response of a Java web Developer is to embed a lot of Java code in the page or use a JSP tag or a template language such as Velocity,freemark, which people naturally classify as service-side, but they appear in the view layer, So the view layer and the control layer can not be decoupled, in fact, in addition to this there is a very familiar to everyone but rarely it is the view layer and the control layer of the coupling factor, this factor is the page jump, using the Ajax angle to describe this factor is the page synchronous submission, These two factors form the core application of the control layer (the Bridge of Application Data and page presentation).

To be independent of the front-end, control layer into the front-end is an immutable law, if the service side of the people too arrogant, will not let off the control layer, then the front-end must do their own control layer, then the front-end to do the control layer of the difficulty is to solve the front-end technology to solve the service data display and sometimes Solving the service-side data display problem is to find the JavaScript language to replace the Java code, JSP tags and velcity such a template language technology, fortunately, JavaScript does have such a technology, This is Microsoft's contribution to the jquery template language Jquery-tmpl, whose access address is:

Https://github.com/BorisMoore/jquery-tmpl

Baidu Search Address:

Http://www.baidu.com/s?wd=jquery%20tmpl&rsv_spt=1&issp=1&rsv_bp=0&ie=utf-8&tn=baiduhome_pg &rsv_sug3=8&rsv_sug4=1397&rsv_sug1=8&oq=jquery%20tm&rsv_sug2=0&f=3&rsp=0& inputt=13948

With JavaScript template technology, we can not write to the server on the page to any thing, so that the heterogeneous language control layer and front-end separation, so as to abandon the service side of the control layer. While the template language needs data can be sent through the AJAX request to the page, Ajax after receiving the data transmitted to the JavaScript template language can eventually achieve the server data on the page display, using this way to demonstrate the data benefits are not limited to the control layer and the view layer decoupling, It also improves the responsiveness of the page, because in this way, the data and service-side exchanges no longer require the view display feature as the server to send pages directly, or a fragment of the page, and then manipulate the DOM so that these views of the things on the page behavior, and now the server only need to transfer the data to transfer the line , so that the amount of data transmitted by an HTTP request is greatly reduced, reducing the size of the HTTP request is one of the important indicators to improve the load efficiency of the site, and if the transmission only needs the most necessary data, then the interaction between the server and the front end can achieve a unified message format, using a unified message specification, This will lead to a qualitative leap in project management, system operation and maintenance.

The second step in making the control layer fully categorized as a Web front end is to make the Web application's synchronous commit operations completely dead, while traditional synchronous commits can only assume the functionality of the portal of the entire Web application. When it comes to this, I think if the people who have experienced the development of Web front-end to see the above sentence can easily associate with the very fire of the single page development, yes I do speak single page development, in fact, the highest level of JavaScript MVC is a single page mode.

Although the current Web application is the world of Ajax, but if we want to completely abandon the idea of synchronous submission of requests really applied to the practice, the developer will find it often become a thankless thing, why it is a thankless thing, I think the main embodiment in two aspects:

The first aspect: The AJAX request is often as a pure data transmission, then the display of the page effect requires the developer to operate the DOM, using a variety of javascript development skills, which greatly increase the difficulty and complexity of page development, for a market-ready Web application, Its cost and risk are conceivable.

On the other hand: the synchronous submission page gives the user a very top-level user experience, which is the browser's forward and backward experience, which can be an impossible task if Ajax is to move forward and backward, especially if users and websites interact with a large number of sites.

Here I first talk about how to solve the problem of forward and backward, in the browser's request URL address has a very important feature is the hash attribute, for example, we write the page often write this statement:

1	<ahref=”#” onclick=”ftn()” id=”btn”>btn</a>

When the user clicks on this link, the Click event will be clicked, and many people may not be aware that a # number will be added after the URL of the page request, for example: www.cnblogs.com/#, if we change this link, as follows:

1	<ahref=”#sharpxiajun” onclick=”ftn()” id=”btn”>btn</a>

Then click on this link, we will find that the link has become www.cnblogs.com/#sharpxiajun, the front #sharpxiajun is the URL of the Hash,url hash is not sent to the server, However, there are special events in the browser to hear it, this event is the Hashchange event, it is a window event, the browser's forward and backward support URL hash change, while window can listen to the event, So we can simulate the synchronous submission of the page by changing the hash of the URL and the AJAX request, and the request can use the browser's forward and backward operations.

Using the hash property of the URL to simulate the URL of the synchronization, then we can change the URL of the page to a hash URL address, such as the traditional site registration page address should be: www.cnblogs.com/ Register.html, you can now change to Www.cnblogs.com/#!/register, if the upstream page of the registration page is www.cnblogs.com/, Then when we click the Fallback button on the registration page, the page will jump to www.cnblogs.com/.

If we have the above-mentioned technology in the Web front end, then a Web application control layer can be completely translated to the Web front-end, and the Web front-end can be truly project-independent, when the Web front-end as long as the server to establish the appropriate message specification, using the popular JSON data format, You can complete the development of Web applications, so that the real separation of the front and back of the Web application.

Using the technology I've talked about, the browser's communication will be Ajax, which can be divided into two types of Ajax by application: A type of Ajax that simulates synchronous commits, a request for a view, a page, a function that can be used as a routing function, which is the control layer's manipulation of the view layer. Another Ajax is the acquisition of data, Ajax acquisition of data, through the JavaScript template technology to transform, and finally the control layer will transform the data and view layer together, and ultimately the full page to the site's users.

JavaScript does the control layer is actually through the hash of the URL, the core is to use the window Hashchange event, there is a web front-end development of the most headache, is not all browsers support Hashchange event? The answer is: The new browser is supported, the most hateful ie, more than 8 including 8 support, then we want all browsers can use hashchange how to do? jquery has a plugin that allows a lower version of the browser to support Hashchange events, and interested people can baidu a bit, but if you're developing web apps on a mobile device, don't worry about compatibility issues at all.

I used a url:www.cnblogs.com/#!/register,#!/xxx with a hash is I recommend to everyone's writing form, the reason is: we do a site need to give a search engine, but the search engine crawler is crawling static page, The static page of the AJAX request is often powerless, so we have to let the search engine crawler can find our page so after # Add!/, a lot of advanced search engine will crawl the content of our web page, here is mainly refers to Google, Baidu is not a similar ability, I do not know, This will have to ask the Niang.

I previously shared with my blog a JavaScript framework that I wrote myself, when I used a file, a library to complete my framework, a framework that could actually be a collection and summary of what is common in a web development. In other words, the previous framework is a large collection of tool classes, but to the JavaScript framework I'm talking about today in the Web front end, such a tool class is not enough to meet our needs because the control layer is moved to the Web front end, In this way, the data model of the Web application and the routing function of the model layer and control layer to the view layer also migrated to the Web front-end, then the corresponding data model of a page and the corresponding views page should have a distinct boundary between it and other data model and corresponding page. In the implementation of a view and a page corresponding to the JavaScript code should be modular, so we'd better a page for a JavaScript file, so we will be the JavaScript code to manage the module, To introduce Requiejs or domestic seajs tools, the specific use of interested children's shoes can be Baidu or Google a bit.

What if we don't use Requiejs and Seajs? The JavaScript code and CSS code of a large web site are merged into a small number of files as much as possible in production, so I recommend that you organize your JavaScript code in an object-oriented way. Here I recommend a JavaScript framework template that is similar to the jquery architecture:

1234567891011121314151617181920212223242526272829303132333435

（function（$，params）{    functionMyObj = {        returnthis._init.apply(this,arguments);}myObj.fn = myobj.prototype;myObj.fn = function(){    return {        _init:function(){// 初始化方法            this.setting = arguments;returnthis;},_bindEvt:function(){// 事件绑定代码…    returnthis;},_pageLoad:function(){_bindEvt();    代码…    returnthis;}}}；// 给类添加属性或方法，相当于静态变量myObj.extend = function(obj){    varextended = obj. extended;    for (vari inobj){        myObj.fn[i] = obj[i];}if(extended) extend(myObj);};myObj.load = function(param){    returnnewmyObj(params)._pageLoad();}returnmyObj;}）（jQuery，params,undefined）

The Load method of the framework is equivalent to the main function of Java, where we build objects using the technology of JavaScript objects, then the object is easily extended to the outside, Each prototype prototype method returns the this pointer so that the method concatenating in jquery can be written.

In fact, such a structure can finally be applied to the Requiejs and seajs inside, so the written JavaScript code is more structural and hierarchical, more extensibility.

All right, the article is finished, this article one go, inevitably there are missing the wrong place, to the time also please serious child shoes timely pointed out.

Architecture design: Front-end separation of the Web frontend architecture design