First we look at what is a single-page application? The so-called single-page application, refers to the integration of multiple functions on a single page, or even the entire system is only one page, all of its business functions are sub-module, through specific way attached to the main screen. It is further sublimation technology AJAX, AJAX without refreshing the play mechanism to the extreme, it can create a smooth user experience comparable with a desktop program.
In fact, one-page application no stranger to us, a lot of people wrote ExtJS project, which implements a system, it is natural to have a single page, and it was also achieved something similar with jQuery or other frameworks. With a variety of JS framework, even without the frame, they are able to achieve a single-page application, it's just an idea. Some framework applicable to the development of such a system, if you use them, you can get a lot of convenience.
First, the development framework
May be referred to as a first generation ExtJS exemplary application framework of a single page, it encapsulates the various UI components, primarily using JavaScript user to complete the entire tip portion, even layout. With the function gradually increased, ExtJS volume gradually increases, even for the development of internal systems, sometimes cumbersome, not to mention the development of more than one such system running on the Internet.
Because of the emphasis jQuery DOM manipulation, its plug-in architecture and relatively loose, so this system is more suitable than ExtJS one-page system developed in the public network running the entire solution will be relatively lightweight and flexible.
However, due to jQuery mainly for upper operating, it is the lack of organization code constraints. How to control each block of code in the case of rapid expansion cohesion, and generates the appropriate data transfer and sharing between modules, it has become a challenging matter.
To solve the problem code logic to increase the size of single-page application time, there have been many MV * framework, their basic idea is to create a module in the JS layer delamination and communication mechanisms. Some of MVC, some MVP, some MVVM, and they almost had a variation on these models to adapt to the characteristics of the front-end development.
Such frame includes Backbone, Knockout, AngularJS, Avalon like.
Second, component-based
The front end doing layered framework to promote the components of the so-called component-based code in traditional Web products, means more UI components, but in fact the component is a broad concept, the traditional Web product high proportion of UI components the reason is lack of its thickness, with the increase of the proportion of the client code, a considerable portion of the front end of the business logic, thereby created a great number of non-interface type components occurs.
One advantage of hierarchical bring is more specific responsibilities of each layer, and thus, covering unit tests can be made thereto, in order to ensure its quality. Traditional testing the UI layer is the most troublesome problem UI logic layer and mixed together, such changes tend DOM remote callback request, after the introduction of a layered, these things can be separately tested, then the test is ensured by the scene the overall process.
Third, the code isolation
Compared with traditional page-based Web site development process to achieve a single-page application, there are some more points of particular concern.
Features a single page from the application point of view, it is more dependent than page-based Web site in JavaScript, and because of the one-page JavaScript code, various functions of the pages gathered in the same scope, so the code isolation, modular becomes Very important.
In a single-page application, the use of page templates is very common. Many built a framework of specific template, and some framework needs to introduce a third party templates. This interface is the template fragments, we can put them into analog JavaScript module, which is another type of assembly.
The same template isolation needs. Not isolated template will cause the problem? Conflict between the template found mainly in the id attribute, if a template contains a fixed id, when it is batch rendering time, will result in the same scope have multiple pages id of the same elements, resulting in unpredictable consequences. Therefore, we need to avoid the use of id in the template, if there is demand access to the DOM, it should be done by other selectors. If a component of the degree of a one-page application is very high, probably throughout the application did not use id of the element.
Fourth, the code is merged with the loading strategy
It tolerance for a single page load time system with a different Web page, if they are willing to wait for a page to load shopping 3 seconds, there might be willing to single-page application is first loaded to wait 5-10 seconds, but after that, use various functions should have relatively smooth, all sub-pages as much as possible to switch the function successfully within 1-2 seconds, otherwise they will feel that the system is slow.
From these characteristics, we can put more into the public function first loads, to reduce the amount of load each load, there are some sites even put all the interfaces and logic all loaded into the home, every business interface when switched, the data request is generated only, so that the response is very rapid, such as Yun console did.
Usually a single page application, without having to type website like products, in order to prevent obstruction render file is loaded, the html js loaded into the back, basically because its interface is dynamically generated.
When switching function, in addition to producing data request, also need to render the interface, this new interface components is generally rendered interface templates, it come from? Source but two, one is the immediate request, as requested by the data as AJAX get over, the other is the main interface built into certain positions, such as script tags or invisible textarea, the latter at the time of switching the speed advantage, but increased the burden on the main page.
In the conventional type of website pages between pages they are isolated from each other, and therefore, if the reusable code is present between the pages, usually extracted into a separate file, and may need to be combined according to the needs of each page .
Single page application, if the total amount of code is small, the overall package can be loaded once in the home, if a large load to a certain size, and then make run, loaded particle size can be made relatively large, there is no duplication between different blocks section.
Management V. routing and state
We see the beginning of several online applications, some routes were managed, and some do not.
What is the purpose of routing management is it? In order to reduce the cost of the user's navigation. For example, we have a function, we have experienced more than one click navigation menus, just presented.
If the user wants to share this functional address to others, how can he do that?
Traditional products page is not an issue, because it is based on page units, and some time, server processing this route all.
But in the one-page application, which became a problem, because we have only one page, the various functional blocks on the interface is dynamically generated. So we have to manage the routing through to achieve this function.
Specific approach is to put the product into several functional states, each mapped to a corresponding route and then by such a mechanism to pushState, routing dynamic resolution, to match the function interface.
With After routing, our products can be single page forward and back, just like between different pages.
In fact, in addition to Web products, has long been routing management technology solutions, AdobeFlex, it will put such TabNavigator, even drop-down box checked corresponds to the url, because it is also a single "page" product mode, face on the same issues.
When the Status complexity to a certain extent, the route they become difficult to apply, because the management of the state is extremely troublesome, such as the beginning of our presentation c9.io online IDE, it is not the state corresponds to the url.
Sixth, caching and local storage
In the operating mechanism of the single-page application, the cache is a very important aspect.
Since the front end portion of such systems are almost all static file, so it can have the opportunity to take advantage of the browser's caching mechanism, such as dynamic loading and interface templates, also can do some custom caching mechanism, for the first time at the request of the non direct access to the cached version to load faster.
Indeed, there have been a number of programs at the same time dynamic loading of JavaScript code, they also cached. For example AddyOsmani this basket.js, on the use of cache HTML5localStorage made js and css files.
In a single-page product, service code is also often need to deal with local storage to store temporary data, you can use localStorage or localStorageDB to simplify their business code.
Seven, the server communication
Traditional products generally use Web and server communication such JSONP or AJAX, but in the one-page Web applications, using WebSocket such a large part of real-time communication.
Compared to HTTP-based communication mechanism WebSocket and tradition, it has a great advantage. It allows the server is very convenient to use a reverse push, the front did produce only responds to business event data, over and over again to reduce meaningless AJAX polling.
Since WebSocket is supported only on more advanced browsers, some libraries offer a compatible program in a different browser, such as socket.io , it does not support AJAX, etc. will be downgraded to use or JSONP manner WebSocket browser , completely transparent to the business code, compatible.
Eight, memory management
The traditional Web pages generally do not need to consider the management of memory, because the residence time users is relatively small, even if a memory leak occurs, the refresh operation may soon be washed away like the page, but the single-page application is different, its users was likely to put it open all day, so we need them to DOM manipulation, network connections and other parts with care.
Nine, the style of planning
In a single-page application, because the high integration of the page, all pages gathered in the same scope, the style of planning is also becoming important.
Style is planning major aspects:
1, the reference style separation
there is basic agreement includes browser-style reset, global font settings, layout and responsive support.
2, component-style division
there are two levels of planning, starting with style interface components and their various sub-elements, followed by some modified form. Style assembly should be minimized interdependent, styles of the components allow for redundancy.
3, stacking order management
features traditional elements of Web pages is more, but less hierarchical, one-page application is somewhat different.
In a single-page application, you need to order in advance for various UI components stacking plan, which is the z-index, for example, we may have all kinds of dialog boxes, pop-up floating layer, they may be combined into a variety stacked state. The new dialog box z-index higher than the old need to ensure that the cap on top of it. And so on, all we need for these possible cover for planning, then, how to plan it?
Understand the communication of knowledge of people, should know that different frequency bands are allocated to different communication methods used in some countries, the use of airspace is also divided, we can also be pre-segmented in the same way, different types of components z-index fell to a respective section, to avoid their collision.
Ten, one-page application form products
We mentioned at the beginning, there are a lot of new Web products, the use of single-page application way of building, but in fact, these products not only exist on the Web. Opening the Chrome store, we'll find a lot of off-line applications, these products can be reflected in a single page application.
In addition to a variety of browser plug-in that shell platforms such as node-webkit, we can build the main part of local application, the product is still the familiar single-page applications using Web technologies.
The prevalence of single-page application is gradually increasing, if we focus on a number of start-up Internet companies, you will find much of the model is the product of a single page. This model can give the user a smooth experience in the development stage, higher skill level requirements for JavaScript.
Single-page application development process, the front and rear end is a natural separation of the two sides to the API as a dividing line. As a front-end consumer services, as a back-end service providers.
In this mode, the front will promote the services of the backend. When the back-end no longer bear the template rendering, when the output page works like this, it can be more focused on the implementation of the API provided, but in this case, Web front-end position with a variety of other mobile devices, gradually so that the rear end of the API need not be designed to differentiate each end.
Changing XI deployment model
In this day and age, we can already see the emergence of a product, and that is "no back-end" of Web applications. What kind of things? Based on this idea, your product probably only need to write your own static Web pages, in some BaaS (BackendasaService) customized cloud platform and cloud storage server API, SDK integration platform provides , by dealing with AJAX etc., to achieve registration certificate, social, push messaging, real-time communication, cloud storage and other functions.
We look at this model, the front and rear end will find that deployment has been completely separated, front-end code is completely static, which means they can be placed on the CDN, access will be greatly accelerated, while the server is hosted on BaaS cloud, development those who do not have to pay attention to some of the tedious details of the deployment.
Suppose you are an entrepreneur, is doing a real-time collaborative product of a single page, in the cloud platform can be quickly customized back-end services to most of the precious time spent on the development of the product itself.
Twelve, one-page application defects
The most fundamental flaw single-page application that is not conducive to SEO, because the vast majority of the interface is dynamically generated, so the search engines index it is not easy.
Challenge XIII, the product of a single page brings
A single page of the product you want, above all, it has to fit a single page form. Secondly, in this process, the development model will produce some change, the development skills will have some requirements.
Developers of JavaScript skills must pass, and needs to have a better understanding of the components, design patterns, his face is no longer a simple page, but a run in the browser environment desktop software.
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.
Wish everyone in the programming this road, farther and farther.