"Go" mobile Web single page application development Practice--page structuring

1. Preface

When developing mobile Web applications for modern smartphones, there is no way to avoid the fact that you need to develop a single page application (WEBAPP). For different system requirements, the granularity of a single page application may be different, either the entire system is loaded with one page, or it may be divided into separate pages by module. One of the first things to deal with when developing a single-page application is page structuring, and since multiple functions are concentrated on a single page rendering, it is necessary to consider how to implement multiple view layouts. How can I animate transitions between views? and other issues.

Let me tell you about the mobile phone Sohu front-end team in the single page application development of the page has done some attempts and efforts.

2. Page view

Before the page is structured, you need to understand the concept of the view, which is the most common form of single-page application development, often in a single-page application, where multiple views exist, each of which can handle a subset of the business functions, and the feature set of all views is the maximum ability of a single page application to handle the business. Here are a few of the most frequently seen views in a single page application.

2.1 Single View Layer

A three-segment structure is the most basic layout of a single view, such as:

A single view does not necessarily have head or foot, so headers and footer are represented by dashed lines. In most applications there will also be navigation bars (Navigatior), but in general the navigation bar will be counted as part of the header or content, and will not exist independently.

2.2 Side Sidebar

Sidebar is a special view, when not displayed, the current view is covered in the sidebar first, when it is exhaled, the view part of the slide out of the screen, the sidebar is displayed, its height is equal to the height of the page viewable area.

Before display:

After display:

2.3 Cover Diagram

The cover map is similar to the sidebar and is a special view. Cover drawings usually appear at the beginning of the page, then disappear and disappear. It has the highest view level and is completely covered by other page elements, and its height is greater than or equal to the height of the viewable area.

3 Multi-View layouts

One of the first things to think about in a single page application is: How do you implement a multi-view layout? Usually we set the position of the view toposition:absolute, which is a simple and useful method. On a time node, the viewable area of the page can have only one visible current view, and a dashed line represents another view that is not visible outside the viewable area of the page (display:none), such as:

Use pseudo-code to represent:

Css

. view {        position:absolute;        top:0;        left:0;        z-index:99;        Display:none;        width:100%;        height:100%;    }    . Current {        z-index:100;        Display:block;    }

Html

<div class= "View current" ></div><div class= "View" ></div>

At this point, we need to think about another question: how do I scroll the content area of the current view? The view's style height is set to set theheight:100%view height to one screen high to facilitate the effect of the View animation toggle (The View animation toggle is detailed later). But doing so causes another problem, and a high height of one screen means that the browser scroll bar is invalidated and the page cannot be scrolled using the browser scroll bar.

3.1 Multi-view layouts based on Iscroll

A more popular solution now is to use the Iscroll component for fixed-area scrolling, which will solve the scrolling problem in the content area, as was done in the early projects of mobile Sohu. In addition, the use of Iscroll provides additional benefits, such as:

• Header area can be fixed at the top of the page, not because the content area scrolling causes the header to be top up;
• The single-view height control is high in one screen, which facilitates animation switching between views.

For this kind of structure application, it is very good to use the view switch, use CSS3 's transition to complete the animation switch, such as:

Use pseudo-code to represent:

Css

. current.out {        -webkit-transition:-webkit-transform 400ms;        -webkit-transform:translate3d ( -100%,0,0);    }    . Next {        display:block;        -webkit-transform:translate3d (100%,0,0);    }    . next.in{        -webkit-transition:-webkit-transform 400ms;        -webkit-transform:translate3d (0,0,0);    }

Html

<div class= "View current Out" ></div><div class= "view Next in" ></div>

The animation effect of view switching can be customized according to business requirements, such as: swipe left to right, from right to left, top to bottom, right down to top. When you are finished switching animations, set the status of next view to current, as follows:

<div class= "View" ></div><div class= "View Current" ></div>

Is the one used in the project to toggle the effect from the bottom up:

3.2 Iscroll The sidebar under the page structure

Using Iscroll's page structure, whether it's a sidebar or a cover view, is very well implemented, looking at pseudocode:

Side bar, default state

Css

    . sidebar {        z-index:50;        Display:block;        width:80%;    }    . Sidebar.show +. Current {        -webkit-transition:-webkit-transform 400ms;        -webkit-transform:translate3d (80%,0,0);    }    . Sidebar.hide +. Current {        -webkit-transition:-webkit-transform 400ms;        -webkit-transform:translate3d (0,0,0);    }

Html

<div class= "View sidebar" ></div><div class= "View Current" ></div>

When the side bar is displayed

<div class= "View Sidebar show" ></div><div class= "View Current" ></div>

When the sidebar is hidden, remove the hide style when the Hide animation finishes

<div class= "View sidebar hide" ></div><div class= "View Current" ></div>

3.3 Iscroll page structure under the cover map

The implementation of the cover diagram is similar to the sidebar.

Cover diagram, default state

Css

. cover {        z-index:200;        Display:block;        Visibility:hidden;        opacity:0;    }    . cover.show {        visibility:visible;        -webkit-transition:opacity 400ms;        opacity:1;    }    . cover.hide {        visibility:visible;        -webkit-transition:opacity 400ms;        opacity:0;    }

Html

<div class= "View cover" ></div><div class= "View Current" ></div>

When the cover view is displayed

<div class= "View cover Show" ></div><div class= "View Current" ></div>

When the cover chart is hidden, remove the hide style when the Hide animation finishes

<div class= "View cover Hide" ></div><div class= "View Current" ></div>

Implementation results in the project:

3.4 Iscroll support for content refresh

There is also good support for content refresh Iscroll in the contents area, which can be found directly in the example provided by Iscroll: http://lab.cubiq.org/iscroll/examples/pull-to-refresh/

Note:Iscroll has now been updated to the 5.0 version, so you can focus on the GitHub project https://github.com/cubiq/iscroll/

4. Multi-view layout, new exploration

For single-page applications, Iscroll is really a great solution, but Iscroll lacks one of the biggest flaws-slow, scrolling performance is significantly sluggish on low-end mobile devices compared to browser-native implementations, which I've also mentioned in another blog post. Mobile Web products front-end development of the formula-"fast".

Note: There is a new trend, browser after a couple of years of development, Android has been optimized pretty good, iscroll on some of the lower end of the mobile device, performance is much better than before, such as 1, The early rice 1 is still running uc7.x version, Iscroll obvious card, now under Uc9.x, Iscroll can run more smoothly.

4.1 fixed+ Native Scroll

Under this, we have also made some new attempts, the first attempt is to abandon the use of the Iscroll component. After giving up the first problem encountered, how to make the header fixed position at the top? As a result, we have used native CSS featuresposition:fixed, such as:

Fixed on some mobile device browser compatibility issues, I found a can detect whether the browser support Position:fixed method, this also sent a blog post "Mobile Web development, 4 lines of code detection browser support Position:fixed", When detecting that the browser does not support fixed, you can use absolute as an alternative to listen to the window's scroll event, and at the end of each scroll action, recalculate the top value of the header and position it at the top of the page.

The relatedposition:fixedbug is summarized in another blog post "Mobile Web page Use position:fixed problem summary".

Also, do not use input or textarea elements directly in the fixed area. After the input in the fixed element gets the focus, popping the soft keyboard brings up a lot of additional problems, such as:

• Soft keyboard Popup under iOS, fixed positioning will be problematic;
• The eject of the software disk under Android may cause the input area to be obscured;

Clicking input to pop up a new view to complete the subsequent input is a good solution and is a iscroll-based page structure implementation:

4.2 View toggle under native Scroll

After using the native scroll, the biggest change is the change in the view switching animation. With Iscroll's page structure, the view is highly fixed andposition:absolutepositioned, making it easy to switch views.

After replacing the native scroll, it is very difficult to use a more moderate animation transition effect, the optional animation effect is very limited, after many experiments, finally choose to use fade-fade animation effect, this is a compromise method. At first, when the implementation of this animation, the encoding method is relatively simple, is to fade the current view, the next view fades, such as:

Later, after more attempts, a more compatible fade-fade animation transition was developed. The technical point is to use a curtain layer (mask) to achieve the fade-in effect, after the mask has finished fading, and then complete the actual switch of the view, the following steps are as follows:

• Create a curtain layer<div class="mask"></div>, mask isposition:absolutepositioned, initially transparent, the background is set to white or other colors, and the mask is covered on the current view;
• Mask uses transition to achieveopacity:1the animation transition, when the animation is finished, mask will be the current view completely obscured;
• Finally, the current view is hidden directly, and the next view is displayed;
• Hide mask After all actions are completed;

：

4.3 Native scroll sidebar under page structure

The structure of the sidebar has become a bit more complicated, after using the native scroll, the body height will be high by the content area, but the sidebar still must be high. So I control the height of the HTML and body to a screen high when the sidebar is displayed, which prevents the page from scrolling. Use pseudo-code to represent:

Side bar, default state

Css

. frame {        height:100%;    }    . sidebar {        background-color:red;        Position:absolute;        z-index:50;        width:80%;        height:100%;    }    . scroller {        background-color:green;        position:relative;        z-index:100;        height:2000px;    }    . Sidebar-show body,. Sidebar-hide body {        height:100%;    }    . Sidebar-show. scroller {        Overflow:hidden;        height:100%;        -webkit-transition:-webkit-transform 400ms;        -webkit-transform:translate3d (80%,0,0);    }    . Sidebar-hide. scroller {        Overflow:hidden;        height:100%;        -webkit-transition:-webkit-transform 400ms;        -webkit-transform:translate3d (0,0,0);    }

Html

	



	



	



	



	Add a style to the HTML element when the sidebar is displayed sidebar-show


	




	



	



	



	



	When the sidebar is hidden, replace the style on the HTML element with Sidebar-hide, and when the Hide animation finishes, remove the hide style


	




	



	



	



	



	The actual effect in the project:


	



	



	



	



	



	In addition, setting the sidebar asposition:fixedpositioning is another way to implement it.


	


4.4 Native Scroll cover diagram under Page structure

	



	The implementation of the cover diagram is similar to the sidebar, using pseudo-code:


	



	



	Cover diagram, default display status


	



	



	Css


	


 
    . Frame,. Frame body {        height:100%;    }    . Cover {        background-color:red;        Position:absolute;        z-index:200;        width:100%;        height:100%;    }    . scroller {        background-color:green;        position:relative;        z-index:100;        height:2000px;    }    . Cover-show body,. Cover-hide body {        height:100%;    }    . Cover-show. scroller {        Overflow:hidden;        height:100%;    }    . Cover-hide. Cover {        -webkit-transition:opacity 400ms;        opacity:0;    }



	



	Html


	


 



	



	



	



	



	When the cover view is hidden, replace the style on the HTML element with Cover-hide, and when the Hide animation finishes, remove the hide style


	




	



	



	



	



	Applications in the project:


	



	



	



	


4.5 Native Scroll page structure, the implementation of content refresh

	



	In general, we will put a load more buttons at the bottom of the page, let the user click the button to load the next page of content, such as:


	



	



	



	



	



	Alternatively, listen to the window's scroll event, and when the page scrolls, monitor whether scrolling to the bottom of the page automatically loads the next page of content. Both of these are good solutions for loading the next page of business requirements, but for loading the latest or refreshed operations you can only place a refresh button on the page to complete the business requirements.


	



	



	The operation of pull Up/down request is almost impossible under the native scroll. But I still hope to find a way to implement pull request operation.


	



	



	Now I'm working on a solution that simulates the pull operation, which has a prototype and implements some functionality. The following example does not use any of the Iscroll techniques to implement page scrolling entirely using native scroll, and to scroll to the bottom of the page to complete the pull up operation, such as:


	



	



	



	



	



	The implementation of this technique is not complicated, that is, when the page scrolls to the bottom, create a blank layer to simulate the pull-up gesture drag the page effect.


	



	



	



	



	



	I'll wrap it up as a component on GitHub and share it with everyone.


	


5 concluding remarks

	



	Mobile Sohu is still a young front-end team, in the mobile phone Sohu 1.5 time, accumulated and a lot of experience on mobile Web development, write this article hope to be able to share some of the experience of mobile web to everyone, at the same time, also hope that more mobile web developers can communicate with each other.


	



	



	Https://github.com/maxzhang/maxzhang.github.com/issues/8


	



	



	"Go" mobile Web single page application development Practice--page structuring