HTML5 mobile Web single page application practice--Start mobile reading

At first, I made an Android novel reading client in the form of hybrid, called 4G reading. Then due to business needs, to quickly realize the pure mobile HTML5 version, so directly in the original client embedded in the Web page, the rapid implementation of the optimization process later found that the more changes more and more ...

Note that this web app only supports browsers in Android and iphone, as well as browsers that support HTML5 such as Chrome,safari,firefox on PCs or Macs. IE10 above browser

This is a trial version of it, have not done so before.

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

First, there's a real picture.

file structure and routing

HTML

Index.html

The base of the entire application framework, including the header, the trailing HTML, and the container of the main parts of each page (Content-panel)

Load the corresponding content page in AJAX mode according to the hash route and add it to the corresponding Comtent-panel

The following is the main content module (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

The use of less when writing CSS, especially when modified, especially useful

PUBLIC.CSS contains most of the application styles

IDANGEROUS.SWIPER.CSS Switch The plugin's style file

The style of the content page can be added to itself within the page itself

Javascript

Avalon.js

Using this mv* framework here, it is primarily convenient to render JSON data to the DOM

Jquery.js

Very want to use zepto such as light DOM framework, but eventually chose the jquery2.0, because of the convenience of extension plug-ins, many plug-ins are incompatible with zepto, in fact, the size of the JS file is far less than you imagine the impact of Web application performance, in fact, CSS rendering more influence, the lesson of blood. About JS file too big problem, in fact, the application is basically in 3G or wifi situation, you have to use in 2G environment, that dry hemp without WAP version ...

Idangerous.swiper.js

Very powerful carousel plugin, can actually achieve a lot of things. So choose it to implement the carousel

Mango-decoupling.js

Very useful message plug-in for the decoupling design in the program, and its message mechanism is very powerful

Config.js

Because the application is distributed to different channels, and different channels have different configuration requirements, Config.js is used to configure some properties

Core.js

The core of the whole framework universal JS, including local storage, communication, common events and methods

In order to facilitate the implementation, and reduce the number of JS files, the various content modules of the JS business logic are directly written in their own HTML fragments. The content module should send a finished message to the frame after rendering, or execute the framework to open the rendering API, such as "Page_ready", to facilitate the framework to handle the global control of loading.

Local Storage

1, offline storage Cloudary.appcache, as far as possible to the Css,js,image, and HTML code fragment files are stored offline to local. All relevant files are offline to local and accessed again at the first visit, and the files that are offline to local will be read first.

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 when the dynamic Data interface is first accessed, the data returned by the whole interface will be stored locally using localstorage, and the local data will be read first when it is accessed again. Then the background will silently update the data into the Localstorage, because the application is not so high real-time requirements, so this scenario is feasible.

Hash Route

The entire application of the content module Content-panel is actually by the origin of the hash link together, constitute the so-called single-sided application, that is, do not refresh the entire page. The first use of the popstate to achieve, the results found in the next page in the Chrome browser will trigger a popstate event, more wonderful, this problem is found after the application is completed, Fortunately Popstate event is encapsulated in the core.js, I will be in the package Popstate event to replace the Hashchange event, so the external API is to have a distrust of the attitude, as far as possible to encapsulate the separation, in case of changes, change up quickly. When loading different content modules, through the wndow.history of Pushstate and replacestate to achieve the change of the hash value, in the first page when you have to make a page of their own replacestate, to add themselves to the history queue, Otherwise the history queue will be messy (a big pit ah, anyway I have not replacestate when I met, how also bad management queue).

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

Home route:

Index Stroll

Category categories

Rank Rank

Discovery found

Child page Routing:

Channel Channel

Category-detail Category Details

Topic Special Topics

Detail Details

Search searches

Bookshelf Bookshelf

Catalog Directory

about speed optimization of routing

1, a lot of content module opened once again after open again completely do not need to request again, so have to decide whether to open, open the application again to no longer request the corresponding HTML fragment, directly display the previous requested HTML fragments, such as Index,category,rank, Discovery,topic,bookshelf,search these several content modules

2, for the module that needs to update the content, such as the Detail,channel module, the first request to the HTML fragment can also be cached, the next time each request for new content only need to update the DOM through the JSON data, that does not need to clear the DOM and re-create the new DOM. This optimization is especially important on mobile devices where performance is poor, and when implemented, the request data requires a custom message to be sent when the route changes (such as: Refresh_with_new_data), and the data request is sent when the custom message is received. The contents of the DOM are updated after the message is received.

3, even for the need to update the content, the same link, continuously opened, because the data has not changed completely, so it can not request data at all, so-called "seconds Open"

techniques that should theoretically be used but not used

1, backbone, is a more extensive MVC framework, itself provides the routing function, but personally feel the need to write the 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 lot of code and the corresponding JS file.

2, Requirejs or Seajs

itself in the application of the first page of these JS files, finished, there is no need to add an additional JS file request

3. Some new CSS3 properties

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

4, High content module display, that is, scroll to the next render to the DOM, the background does not provide broken load API, second, the adaptive layout to increase the difficulty of implementation, finally, the wood has enough time

Insufficient

1, development time is too short, a lot of company's common problems

2, the product in the design did not consider the single page application scenario, the hierarchy too deep page now or refresh the entire page

3, some functions have not been implemented in accordance with the above framework, such as dynamic interface local storage only made index home, etc.

4, compare ugly, look ugly, code implementation is also more than glue

no Zuo no die

Why didn't I add some animations like the native app switch during the content module switchover?

Because the Android model has no flower eight doors, performance is uneven, CSS3 animation support, a lot of hybrid application is to make up for such shortcomings. Layout with HTML, toggle animations using native. If your web app only needs to run on the iphone and other tall devices, you can use CSS3 to make the interface switch animation, if you want to run on all platforms, then ... It's time to take the medicine and kiss.

If you have to try, then you should feel what is no Zuo no die

Concluding remarks

Optimization is a systematic project, from all aspects, from product design-"UI design-" front-end code implementation-"Background data interface provides

Now the optimization is only a fur bar, not only the front-end part needs to be optimized, and the background data interface speed is too slow also seriously caused the response speed.

Purely mobile Web single-page applications have done relatively little, experience too little, need to continue to study hard.

Yard farming Ah ...

There are students who see this article welcome suggestions, optimization aspects especially

========================================================

Reprint Office Please specify: Blog Park (Wang Yidou) [email protected]