Single Page Web application:

Concept:

Web Application:

WEB applications are generally B(browser)/S(server) mode. Web applications are first "applications", and programs written in standard programming languages, such as C,C+ + , are not inherently different. Web applications, however, have their own unique place, that is, it is Web -based , rather than running in traditional ways. In other words, it is the product of a typical browser / server architecture.

Understand what a browser is/server architecture, you understand what isWebapplication. Common counters, message boards, chat rooms and forumsBBSand so on, all areWebapplications, but these applications are relatively simple andWebthe real core of the application is the processing of the database,Management Information System (Management information System,abbreviationMIS) is the most typical application of this architecture. MIScan be applied to a local area network, or can be applied toWan. Based onInternetof theMissystemWith its low cost, easy maintenance, wide coverage, easy to implement and many other characteristics, get more and more applications.

Web app:

WebApp refers to Web - based systems and applications that publish a complex set of content and functionality to a wide range of end users.

In fact, most of these services are Web apps. I often ask myself, "Does this program complete a task?" ”。 Even if it does a very small task, it is also a Web App. Google's search engine is a Web App, which is essentially no different from a phone query service.

In this way, not all websites are web apps. If the site does not perform any tasks, then it is not a web App.

Single page Web application:

Spas are WEB applications or Web sites that fit on a single scrollable web page , and they dynamically load the right content to respond to user actions. They enable rich interaction with multiple components on a single page.

Single page Web application, as the name implies, is only one Web page application. The browser loads the necessary HTML,CSS , and JavaScriptat the beginning, and all the operations are done on this page, all from JavaScript to control. Therefore, a single page Web application will contain a large number of JavaScript Code, the complexity of the imagined, modular development and design of the importance of self-evident.

Multi-page Web application comparison SPA:

Traditional Web applications are typically composed of static content, where users navigate between pages and need to load full pages and transfer data between the client and server.

Because it is delivered as a page to the browser, SPA does not need to reload the page, even if the customer is moving from part of the application to another.

Because SPA separates data from the presentation of data, they can redraw Any part of the UI without needing a server round trip to retrieve the HTML. As a result,SPA provides a smoother user experience, faster navigation, and more efficient network transmission.

Benefits of SPA:

1. It provides a more engaging user experience. Single-page applications can be double benefit: the immediacy of desktop applications and the portability and accessibility of web sites.

2. Single page apps can be rendered just like desktop apps-a single page app simply redraws the parts of the interface that need to change . In contrast to traditional Web sites, many user operations redraw the entire page, and the result is that when the browser fetches data from the server, the page is suspended and "flashing", then redrawing everything on the page. If the page is large, the server is busy, or the network connection is slow, this "flashing" phenomenon lasts for several seconds or even longer, and the user has to guess when the page is ready to be used again. This is a scary experience compared to fast rendering and instant feedback for single-page applications.

3. Single page applications can have the same responsiveness as desktop apps-as much as possible to transfer (temporary) work data and processing from the server to the browser side, the single page application thus minimizes the response time . A single-page application has a lot of data and business logic that needs to be judged locally, so it's fast. Only data validation, authorization, and persistent storage must be placed on the server, for reasons we will discuss in chapters 6 to 8 . Most of the traditional Web site application logic on the server side, response to most of the user input, they must wait for a "request / response / redraw " cycle. This can take a few seconds compared to a single-page application that is close to instant response.

4, single page applications and Web sites, but also cross-platform.

Disadvantages of SPA:

1. The spa also has some legacy issues (mostly for HTML5 improvements) and SEO. There are still some controversies about the technology, but this is not the point, because this type of architecture provides a great deal of usability for SaaS Web apps.

2, the search engine is not friendly , the single page application is actuallythe viewrendering from the server to the browser, theserver only provides JSON -formatted data, views, and content are organized and rendered through local JavaScript. and search search engine crawl content, need to have complete HTML and content, single page application architecture of the site, and does not support the search well.

A single pageWebThe application is aWebapplication, but the structure is different. The most important of these are: at the time of the first request, all markup languages ( HTML) has been transferred to the client, the rest of the requests are obtained through the rest API , the transfer of data through Web Socket API or a remote procedure call. single-page applications can be said to be splitWebThe final step in technology--by separating(CSS)content, improve the architecture (XMLand theXSLT), call the server (AJAX) to the structure of the navigation page of the decompression application. Therefore, this isWebDevelopment is a historic turning point.

The structure of a single-page Web application is simple: Pass the HTML document framework first, and then modify the page using JavaScript , and then pass more data from the server and then modify the page, so loop. From a performance perspective, single-page Web apps in modern browsers are already comparable to normal applications, and almost all operating systems support modern browsers. Using html+css+javascript to write applications allows more people to join the program development.

This is enough to indicate that in the Web design process , the Web will present a new trend that takes a detached functional layer as an API and uses the presentation layer The form of the APP (HTML5 or Native):

# in the URL of the SPA

Single page application has only one page, the change of view is usually driven by route (Route), first of all, let 's talk about the # number in the URL of a single page application , This symbol appears in many URLs that use a cell-structured web site .

# in the URL of the browser is an anchor point, the current page changes the # Number of parameters, the page will jump to the location of the anchor point, through JavaScript We can get to The number after the # parameter:

after changing the # parameter, the page does not reload, so most single-page schema sites use the # number in the URL as the URL address for the current view , for example:

Symbol #! , Twitter had been in URL Use this identity. This logo is proposed by Google (AJAX Crawl: Webmaster and Developer Guide 1):

Because a complex single-page architecture page is more difficult for Google to crawl, it gives developers a specification:

1, the site to submit sitemap to Google;

2,Google found that there are #! symbols in the URL , such as EXAMPLE.COM/#!/DETAIL/1, so Google began to crawl example.com/?_escaped_fragment_=/detail/1;

_escaped_fragment_ This parameter is named by Google, if the developer wants to submit the site content to Google, You must generate a static page from this parameter.

As a result, the Server needs to generate static content for Google to crawl.

The following is a brief introduction to the single-page architecture, when the crawler accesses the root directory if the server -side route is configured.

Judging crawlers

When Google accesses 119.28.4.22/#!/detail/1 , it is automatically converted into http://119.28.4.22/?_escaped_ FRAGMENT_=/DETAIL/1, in the case of Nginx :

/api for the background service interface, has Nodejs As an example, the proxy settings are as follows :

So, we rewrite Google 's access to the /api interface, and then the Server 's /api Processing requests to output static content.

Sitemapgoogleof this specification, must haveSitemapsupport, because there may be a single page schema of the site, the index page is alsoJavaScriptrendered. SubmitSitemap, you don't have to pay attention_escaped_fragment_This parameter name, only the hash symbol is submitted.URL, such as:

Technology trend of the pace of rapid, single-page applications,URL Hashing is not rendering the way has actually been popular for a long time, in foreign countries, many user data is better, developers will choose the HTML5 history API of the pushstate feature development, discard #!in URL. But IE6,7 and other low-end browser users of the site,# can be very good compatibility. discussion is also welcome on the scenario of using the HTML5 history API to architect a single page application .

Single Page Web application: