HTML5 mobile Web single page application practice--starting point mobile reading

The beginning of the hybrid form to do an Android novel reading client, called 4G reading. And then because of business needs, to quickly realize pure mobile phone HTML5 version, so directly in the original client embedded in the Web page to be revised, rapid implementation in the process of optimization found that more and more change more and more ...

Note that this Web application supports only Android and iphone browsers, and HTML5 browsers such as Chrome,safari,firefox on PCs or Macs. IE10 above browser

This is a trial version, it has not been done before.

Mobile Access http://crapi.4gshu.com:8096/4g-read-qd/

First figure, there is a picture of the true image

file structure and routing

Html

Index.html

The entire application framework consists of the head, tail HTML, and the main sections of each page (Content-panel)

Load the corresponding content page by means of the hash route via Ajax and add to the corresponding Comtent-panel

The following are the main content modules (content is HTML fragment)

Index-c.html Stroll

category-c.html classification

Rank-c.htm ranking

Discovery-c.html found

channel-c.html male frequency, female frequency ...

Search-c.html Search

Bookshelf-c.html Bookshelf

catalog-c.html Directory

Css

Less is used when writing CSS, especially when modifying.

PUBLIC.CSS contains most of the application styles

IDANGEROUS.SWIPER.CSS Switch Plug-in style file

The style of the content page can be added on its own page

Javascript

Avalon.js

Use this mv* framework here, primarily to facilitate the processing of rendering JSON data to the DOM

Jquery.js

Very want to use zepto, such as the light DOM framework, but eventually chose the jquery2.0, because it is convenient to expand Plug-ins, many plug-ins are incompatible zepto, in fact, the size of the JS file is far less than you imagine the impact of Web application performance, in fact, the rendering of CSS influence more, blood lessons ah. About JS file too big problem, in fact, the application is basically in 3G or WiFi use, you have to use in the 2G environment, the dry linen without WAP version ...

Idangerous.swiper.js

Very powerful carousel Plug-ins, in fact, can achieve a lot of things. So choose it to implement the carousel

Mango-decoupling.js

Good use of the message plug-in, for the program decoupling design, the message mechanism is also very powerful

Config.js

Because this application is distributed to different channels, and there are different configuration requirements for different channels, Config.js is used to configure some properties

Core.js

The core of general JS for the entire framework, including local storage, communication, common events and methods

In order to facilitate implementation, and reduce the number of JS files, each content module JS business logic is directly written in their respective HTML fragments. The content module should send a finished rendering message to the frame after rendering, or implement the API of the framework to open the rendering, such as "Page_ready", and facilitate the global control of the framework processing loading and so on.

Local Storage

1, off-line storage cloudary.appcache, as far as possible the css,js,image, and HTML code fragment files are stored offline to the local. All related files are taken offline to the local area on the first visit, and then accessed again, giving priority to offline to local files

2, Localstorage storage interface data. During the development process, it is obvious that the speed of the data interface provided by the background obviously affects the performance of the whole application, so the data returned by the whole interface will be stored locally in the initial access to the Dynamic Data interface, and the local data should be first read in the Localstorage. Then the background will silently update the data into the Localstorage, because the application is not so high real-time requirements, so this scheme is feasible.

Hash Route

The entire application of the content module Content-panel is actually by the origin of the hash link, which constitutes the so-called single-sided application, that is, not refreshing the entire page. The beginning of the use of popstate to achieve, the results found in the Chrome browser next page will trigger a popstate event, more exotic, this problem is found after the application is completed, fortunately Popstate events are encapsulated in the core.js, I will be in the package to replace the Popstate event Hashchange event, so that the external API or to have a distrust of the attitude, as far as possible to package the separation, in case of changes, change up quickly. When loading different content modules, through the wndow.history of Pushstate and replacestate to realize the change of the hash value, in the first page, you have to make a replacestate of its own page, to join the history queue, otherwise History queue will be disorderly (a big hole ah, anyway, I have not replacestate before is met, how also manage bad queues).

Depending on the design and functionality on the UI, I split the route into two categories,

Home Page Routing:

Index Stroll

Category classification

Rank ranking

Discovery found

Sub-page Routing:

Channel Channel

Category-detail Classification Details

Topic Special Topics

Detail Details

Search searches

Bookshelf Bookshelf

Catalog Directory

about speed optimization for routing

1, a lot of content modules opened once again when it is completely no longer request, so to determine whether opened, open the application again open when it will no longer request the corresponding HTML fragment, directly display the previously requested HTML fragment, such as Index,category,rank, Discovery,topic,bookshelf,search these several content modules

2, for the need to update the content of the module, such as the Detail,channel module, the first request to the HTML fragment can also be cached after each request for new content, only through the JSON data to update the DOM can be, that is, do not need to clear the DOM and recreate the new DOM. This optimization is especially important for poorly performing mobile devices, which, when implemented, requires a custom message (such as Refresh_with_new_data) to be sent when the route changes, to receive a custom message, to send a data request, and then to be updated after the message is received. The contents of the DOM.

3, even for the need to update the content, the same link, continuously opened, because the data is completely unchanged, so you can not go to request data, can do the so-called "seconds open"

techniques that should theoretically be used but not used

1, backbone, is a more extensive MVC framework, itself provides a routing function, but the individual feel the need to write the amount of code is too large, if the team used to standardize the code is OK, if the individual use, I think it is too heavy. Write a simple function on a large stack of code and corresponding JS files.

2, Requirejs or Seajs

itself in the application of the home page of these several JS files, finished, there is no need for more than one additional JS file request

3. Some new CSS3 properties

Some of the more useful CSS3 properties have limited support on the mobile side, so they are not used, such as justification of the layout

4, a higher content module segmentation display, that is, after scrolling to the DOM, first, the background does not provide break-load API, and secondly, adaptive layout increased the difficulty of implementation, finally, the wood has enough time

Insufficient

1, the development time is too short, many company's common problems

2, the product design is not considered a single page application scenarios, the level of the page is too deep now or refresh the entire page

3, some functions have not been implemented according to the above framework, such as dynamic interface local storage only do index home and so on

4, ugly, ugly, code to achieve more than glue

no Zuo no Die

Why not add some animation effects like the native application switch during content module switching?

Because of the Android model no flower eight doors, uneven performance, CSS3 animation support is different, many hybrid applications to make up for such shortcomings. Layout with HTML, toggle animation using native. If your web app only requires running on a big device like the iphone, you can use CSS3 to animate the interface, if you want to run on all platforms ... It's time to take a pill and kiss.

If you have to try, then you should realize what is called No Zuo no die

Concluding remarks

Optimization work is a systematic project, from all aspects, from product design-"UI design-" "Front-End Code Implementation-" The background data interface to provide

Now the optimization is only a fur bar, not only the front-end part of the need to optimize, and the background data interface speed is too slow also seriously lead to response speed.

Pure Mobile Web single page application has done relatively little, experience is too little, need to continue to study hard.

Code Farmers ah ...

The students who have seen this article are welcome to make suggestions and optimize the aspect especially