On single page Web application +restful protocol [top]

Single Page Web application

Overview

A single page Web application is not a new technology that suddenly comes into being, but rather an attempt at Web presentation. It limits all actions to a Web page and loads the JavaScript and CSS that the site needs when loading the site's homepage. A single-page Web app does not reload pages or page jumps as a user does, but instead responds to user actions by dynamically transforming HTML content in the back-end JavaScript. A single-page web app can provide a very fluid user experience and a native app experience in mobile hybrid applications.

Principle

URLs can be decomposed into protocol://domain/path:port?param#hash according to the description of URLs in RFC 1738

That is, a URL is usually composed of a protocol, a domain name, a path, a port, a parameter, a hash.

If you change the protocol, domain name, path, port, parameter will cause the page reload, but update the hash value in it will not cause the page reload. The hash value in the previous page is usually used as a point of targeting the page content, but now further, the hash can be used as a voucher to switch pages. You can switch to a different page by listening to the hash in the browser URL that is worth changing.

Knowledge points

Page rendering

In general, there are the following processes:

Therefore, both for the client and the server to the HTTP request is a cost, can save the AH. A single-page web app only initiates requests for resources on the page when the page is first loaded, and subsequently asynchronously requests data through AJAX, increasing the user experience while reducing the number of HTTP requests.

Transfer values between pages

There are several ways to pass values across multiple pages in ASP, but there is a relatively small number of methods in a single-page application. I recommend using Localstorage to hold the parameters between pages, while Localstorage can also store the parameters and results of the AJAX request, which can be used as a cache.

Data source

Separate the pages from the number and use Ajax to get the JSON data provided by the RESTful API. Discussed in detail below in the RESTful statute.

Advantages and disadvantages of single page Web application

The emergence of a single-page Web program is an inevitable result of the development of rich clients, but the technology has some limitations, so it is necessary to understand its advantages and disadvantages before adoption.

Advantages:

1. A good interactive experience

The user does not need to re-refresh the page, get the data is also asynchronously obtained through AJAX, the page display smooth.

2. Good front-end working separation mode

A single-page Web application can be used in conjunction with the RESTful protocol, providing interface data through the rest API, and using AJAX for asynchronous fetching, which helps to decouple client and server-side work. Further, the client can also be decomposed into static pages and page interaction two parts.

Disadvantages:

1. SEO is more difficult

Because all the content in a page dynamically replace the display, so in the SEO has a natural weakness, so if your site on the SEO is very important, and to use a single page application, then do some static page for the search engine use it.

2. Forward and backward management

Because a single-page Web app displays all of the content in one page, you can't use the browser's forward and backward functionality, and all of the page transitions need to be built up for stack management.

3. Time-Consuming initial loading

In order to realize the function and display effect of single page Web application, it is necessary to load the JavaScript and CSS uniformly when loading the page, and some pages can be loaded when needed. Therefore, the JavaScript and CSS code must be combined compression processing, if you use a third-party library, it is recommended to use some large companies CDN.

RESTful architecture

Understanding RESTful

The main purpose of restful is to unify a structure that is clear, standard-compliant, easy to understand and easy to expand. It can be mainly understood as "resource representation State transformation". Resources generally have "new", "Modified", "View" and "delete" is a state, corresponding to the HTTP method is Post,put,get,delete.

In general, the RESTful architecture uses a URI to represent a resource, which is manipulated by different method.

For example, the contact information is designed by the restful schema URI as follows:

Get all contact information under a single user: get-http://xxx/uid/contacts/

Add a contact information for a single user: post-http://xxx/uid/contacts/

Get a contact information for a single user: Get-http://xxx/uid/contacts/cid

Modify a contact information for a single user: Put-http://xxx/uid/contacts/cid

Delete a contact information for a single user: Delete-http://xxx/uid/contacts/cid

CORS ( cross-domain request Resource)

A restful architecture can provide resource information for different platforms, but there are cross-domain issues if you expose this resource to a third-party site reference. For cross-domain access to the RESTful interface, refer to the article "deep parsing of an option request" that was written earlier, which is not explained here.

References:

Http://msdn.microsoft.com/zh-cn/magazine/cc507641.aspx

http://www.ibm.com/developerworks/cn/web/1302_xiaohh_onepagedojo/

Http://www.ietf.org/rfc/rfc1738.txt

http://lovenblog.com/ued-2/276/

Http://www.ruanyifeng.com/blog/2011/09/restful.html