Thoughts on the evolution of large-scale website Technology (15)--site static processing-front and back separation-medium (7)

In the previous article I talked about a front-end separation scheme, this set of solutions in front of the server developers than in front of the Web front-end developers may get more applause, I think many senior front-end engineers see such a technical solution may have a kind of contradictory mood, When my work gradually toward more and more professional front-end development, I am often confused by this set of front-end separation scheme, recently I finally understand the source of this confusion where, that is, the front and back end of the separation scheme is actually a service-driven front-end separation Solution , Its realization means from the service side of the MVC architecture evolution, so the biggest problem is that it does not fundamentally change the Web front end from the server side of the passive situation. So the question is, is there a front-end separation scenario driven by the Web front-end that allows the Web front-end capabilities to be released even more? The answer is absolutely there. This article is about the front -end decoupling solution driven by the web.

The first thing to mention is JAVASCRIPTMVC, the following I excerpt is wikipedia on the interpretation of JAVASCRIPTMVC, specifically as follows:

The first is a brief introduction:

JAVASCRIPTMVC is a diverse set of open source Internet application frameworks based on JQuery and OpenAjax. JAVASCRIPTMVC uses the MVC architecture and tools to extend these library functions for development and testing. Because JAVASCRIPTMVC does not require any server-side mates, it can integrate with any of the Web services interfaces and programming languages, such as ASP. NET, Java, Perl, PHP, Python, or Ruby.

Next is history:

2.0 was released in June 2009 and is based on JQuery. The main development goal is to maintain the code's brevity and focus on its unique features. 3. Version 0 was released in December 2010. The MVC architecture "Canjs", which was isolated from Javascriptmvc, was released in April 2012.

　　From Wikipedia, we will find the following revelations, which are as follows:

Revelation One: JAvascriptmvc is the name of an application framework, which is the same as jquery's name, so here I declare that the JAVASCRIPTMVC in this series do not refer to this framework, Instead, it refers to the MVC framework of a type of Web front end that is implemented using JavaScript language, and the meaning of JAVASCRIPTMVC and front-end MVC in this series is consistent.

Revelation Two: from the JAVASCRIPTMVC history we can see the first version of JAVASCRIPTMVC produced in 2008, this history is much earlier than the time of Nodejs, which shows that the front-end MVC is not because of the emergence of Nodejs , it should be nodejs to promote the application and popularization of the front-end MVC framework.

Revelation Three : There is an explanation in Wikipedia:

Because JAVASCRIPTMVC does not require any server-side mates, it can integrate with any of the Web services interfaces and programming languages, such as ASP. NET, Java, Perl, PHP, Python, or Ruby.

This passage illustrates that a very important feature of front-end MVC is that the front-end MVC can get rid of the binding of the service-side language to be true independence, while the front-end MVC and any server-side language can be integrated, we can imagine if we develop the front end of the Web application to reach the level of MVC, Then the company in the recruitment of Web front-end engineers will not ask you, "You will Java?" "or" Do You know PHP? "If the front-end engineer will have a service-side language capability that does not match the company, the interviewer will not hesitate and shake his head."

Revelation three at the same time also implies a question, why the good front-end MVC framework can be done with any service-side language to cooperate with it? One of the solutions I mentioned earlier in the first phase of the front-end separation scheme, that is to solve the Unified message format and interface of the unified technical means , only such a front-end MVC and server-side flexible docking will no longer be a problem. But this means is still not enough, we have to meet this demand also need to solve a problem, the problem is to take the service-side MVC occupy the Web front-end of the work to rob back. How do you rob it?

In the previous article, I analyzed the service-side MVC view layer problem, the service-side MVC view layer technology, such as Java JSP Technology, this technology is the HTML and Java Code Integration Technology, Java Web container after the JSP parsing finished the most lifetime HTML file sent to the browser, The browser parses the HTML to show the final effect to the user. So we're going to get back to the Web front end of the service. We have to analyze what these dynamic page technologies do, especially those that encroach on the Web front end.

Here first we want to talk about the role of the server in the dynamic page, in fact, the service side for the dynamic page is a single function is to provide the site needs to show the data, the server will not create a new page. The type of data provided by the server is also very uniform, or it is the basic data types provided by the service-side language such as characters, numbers, dates, and so on, or the data types of complex points such as arrays, lists, key-value pairs, etc., but a dynamic page belonging to the server also needs the service-side language to help do something, That is, the data provided by the server is integrated into the page, resulting in a browser can parse the HTML page, this operation is nothing more than using the server-side language can construct the file's ability to build a compliant HTML file. However, the need for dynamic changes in a page is often only a part of the dynamic page development of the server when we can directly write HTML code, these HTML code is equivalent to the template on the construction of the page, and the blank space of the template is to use the server-side data filling, Therefore, in Java Web Development, the view layer technology has produced velocity,freemark such technology, we call it the origin of template language.

Thus, the service-side MVC framework of the looting of the Web front-end work is to seize the work of building HTML templates, then we design the Web front-end of the MVC framework for the service side of the interface with the server to maintain the data provided by the feature. From these discussion, we found that the front-end MVC framework to solve the core problems should have these two, they are:

Core issue One: let the template technology to the browser to do, so that the server only provide pure data services.

Core issue two: template technology by the browser to assume, then the dynamic of the page is based on different server data for the page partial refresh to complete.

The solution to these two core problems is the use of Ajax technology, which is inherently compatible with the technical means of solving these problems.

To make the Web front-end template technology, you have to use JavaScript template technology, the current JavaScript template technology is flourishing, the various schools of thought, many friends have been amazed by these technologies, in fact, to explore its origin is simply a JavaScript-based implementation of a JSP , Velocity just, if a friend has not touched the JavaScript template technology, you can search in Baidu under the "JavaScript template engine", this article does not start talking about.

The front-end MVC discussion comes up with a new question, and the way I talk about solving the two core problems of front-end MVC is Ajax, Ajax is an asynchronous request, so is it that we can implement the front-end MVC and solve all of the site's problems by using asynchronous requests for the site?

The answer to this question is, of course, impossible. A web site is never able to get rid of the synchronous request relative to the asynchronous request, even if there is a Web site to achieve the ultimate asynchronous, but it also can not get rid of the user first access to the browser address bar to fill in the URL address of the Web site of the synchronization request problem, Web site to do the ultimate asynchronous operation is nothing more than to make the site a purely single page form.

Purely single-page site a lot of people feel good when they hear it, very avant-garde, very powerful, to the front-end people will also think of a single page also means to use more JavaScript programming and DOM programming, the front-end code will greatly enhance the difficulty, Good single page application if the application also contains complex business logic, then single-page front-end development is likely to use today's very popular JavaScript module technology such as Requirejs or SEAJS technology, single page sound is too perfect, but we calm down to think about, is the single page really perfect? Below I would like to pour cold water on a single page, specifically as follows:

Splash Cold water One: A single page actually refers to the site only a portal, but does not mean that users see the page is a look, a single page will also have a lot of page switching, but no matter how the shape of the page changes, the address of the browser address bar will not change, Can do this is attributed to the super power of Ajax, single page different appearance of the display is implemented in JavaScript code, then the problem, the single page for the search engine web crawler is very unfriendly, because the web crawler is based on the URL crawl page, After fetching the JavaScript code will be ignored, then the single page design will lead to SEO optimization can only be used for the homepage, and the site other pages will be nothing more than effective SEO technology optimization.

Splash Cold water Two: a website made of a single page after the site of a different display is under a URL, but if some users are only a part of the site features are interested, and this part of the function is not the only page of the synchronization request to show the content of the homepage, Then the result is that these users every time you log on to the site manually to enter their own desired function page, if the first page into the functional pages of the operation step is more cumbersome, then this will inevitably lead to the decline of the site user experience.

So how can the above problem be broken?

Here I first talk about the solution of the second problem, the second problem of water splashing the core is to record the status of a single page, this state can help the homepage can quickly switch to the specific function page, to make the client page state the most commonly used means is a cookie, if the browser supports HTML5, Then the means of preserving the state is more, and the ability is stronger. But this method is tightly coupled with the client, then if this situation, the means will be problematic, such as if there is a personal discovery of a single page site A very interesting feature, when he happened to chat with friends QQ, he told his friend, his friend also interested, let him send the link, Then this friend will have to repeat the operation from the home page, this shows that the cookie means does not solve the problem comprehensively, then we have other means?

The answer is really, that is, the use of the HTML anchor chain, the anchor chain connection form is as follows:

http://www.baidu.com/#sharpxiajun

Here is my excerpt from Baidu Encyclopedia to the anchor chain connection explanation:

Anchor link is actually linked text, also known as anchor text. It can be understood as: Hyperlinks with text are called anchor links. Anchor text can be evaluated as the content of the page where the text link is located. Generally speaking, the added anchor link in the website page is bound to the content of the page itself. Website construction of the industry site will be added to some of the peer site links or some of the site construction of well-known design site links; On the other hand, the anchor text can be used as an evaluation of the page pointed. Anchor text can accurately describe the content of the page, the personal site to add Google links, anchor text "search engine." This is through the anchor text itself can be known that Google is a search engine.

Then in the single page function switch when we change the URL of the anchor text, on the other hand, using anchor text router, so that it can be routed to the corresponding function page the above problem can not be solved. About anchor chain I want to add some knowledge here, the first anchor chain is url# text, the anchor is the starting mark is the # number, the content of this # is in fact belong to the browser side, that is, # including the # number after the content is not sent to the server, then we want to change the anchor chain can only be done at the client, But the traditional anchor chain changes are difficult to be monitored by the JavaScript language, until the emergence of HTML5 to fundamentally solve the problem, HTML5 provides the Hashchange event, the event can monitor the change of the anchor chain, Since the JavaScript language can monitor the changes in the anchor chain, it is possible to use the Anchor Routing feature page, so what should be done with the lower version of the browser? This is mainly IE problem, in fact, IE8 including IE8 support Hashchange event, and then must not not, but jquery has a plug-in can let the low version of IE support Hashchange event, interested children shoes can Baidu under AH.

It seems to pour cold water two problem is a solution, then pour cold water how to solve it? My answer is basically no solution, the crux of the problem in the network crawler side, if we passively solve this problem, it can only be discarded JavaScript, this joke on the big, so we have to pray that the major search engines can be more intelligent and more powerful point. Add a digression here, I suddenly realized a problem in recent days, that is, the Web front-end technology I must strengthen the thinking of SEO, because the vast majority of sites will be the search engine as the portal lifeline, this is a difficult problem to avoid, no matter how good our site, if the user is difficult to find it, It will all be a match, and in front of the design to add SEO thinking, which will inevitably lead to major changes in the entire architecture. This is a question I will focus on when I look at the front-end separation program in terms of static Web sites.

Front-end MVC discussion Here we will find that we are missing a link that is the MVC m layer model layer, the Web front-end to intrusion into the model layer, which is not equal to the Web front-end to rebel, it is not only to change the fate of the slave service side, but also to rob the server part of the function, Let the server become the browser corresponding storage system, this is not tantamount to eat, in the current service is so strong in the big environment, this idea is simply live impatient, haha, of course this is a joke, do technical engineering or to stress a reasonable and logical, technology and engineering are really things very reasonable, As long as the reason to stand up to the foot how a practice is second, back to the problem itself, I personally feel that in the PC-side discussion of the Web front-end model layer is often more than the harm, in terms of security, the model layer means there is a lot of business logic goes to the Web front end, then the security of the difficulty will increase, The Web front-end to make the model layer will make JavaScript programming huge complex, so to make this decision must be combined with the business to make a careful tradeoff, in fact, I now contact some of the front-end framework containing model layer capabilities in the actual application of the model layer function or use too little, but this problem if put on the mobile side, or the PC and mobile fusion may be a little different, this problem I will be in this series of Saga to talk about, here is not exhausted.

To summarize here, the front-end MVC should not be equal to single page development, the front-end MVC is not to use AJAJX to the extreme, according to the actual business scenario, we need to properly combine the synchronous request and asynchronous request. If the front-end MVC contains more synchronization requests, then there is a higher requirement for the C layer in MVC, the control layer. Front and back end separation topic there is a next chapter, I will also mention a front and back end separation scheme that is the use of Nodejs, and the use of Nodejs is closely related to the control layer, I mentioned in the previous Nodejs is the catalyst for the front-end separation solution, In fact, I personally think that the front-end separation scheme of Nodejs is a more perfect front-end separation scheme, one of the reasons for this perfect evaluation is from the front-end to assume the role of control layer thinking, so the front-end control layer of this content I will put in the next discussion.

Well, this article is finished, from this chapter we can see the history of the front-end MVC is very early, it appeared earlier than Nodejs, which shows that the front-end MVC is not a new technology, but it is now only to be valued by everyone, and improve its people are more and more. From this article we also found that the front-end MVC is not perfect, the problem is many, the most deadly is the web crawler unfriendly, so we need to consider the SEO technology involved in the front-end separation program.

Finally, I wish you all good night.

Thoughts on the evolution of large-scale website Technology (15)--site static processing-front and back separation-medium (7)