The second issue of the Aiti Tribe live broadcast class: How to make good use of HTML5 in mobile Internet products?

[51CTO.com original article] 51CTO and APICloud have joined hands to share with developers "How to use HTML5 in mobile Internet products" and invited APICloud technical expert Xu Zhifeng to give a live sharing class. The content covers the overall architecture of products in the mobile Internet era, HTML5 For App requires functional expansion, optimized rendering, development skills, cross-platform product selection, etc.

Live broadcast room: QQ group 312724475

Contents:

1. The overall architecture of products in the mobile Internet era

2. HTML5 For App requires functional expansion

3. HTML5 For App needs to optimize rendering

4. Some development tips for HTML5 For App

5. HTML5 For App cross-platform products

1. Overall architecture of products in the mobile Internet era

The overall product architecture in the mobile Internet era is an ideal end-to-end architecture, from client to cloud. The client focuses on product functions, UI display, and user experience; the cloud provides data and services, and the two interact through open APIs, with the coupling becoming increasingly lower.

In the context of mobile Internet, the core of a typical product's system architecture should be API. The cloud usually needs to provide basic data services (NoSQL, MySQL, etc.), system services (Redis, message queues, etc.), aggregate third-party open platform services (IM, PUSH, payment, LBS, etc.), and provide external service capabilities through open standard APIs.
The client usually needs to include three terminals: APP terminal, Web terminal (i.e. H5 terminal) and WeChat terminal (WeChat official account). APP has comprehensive functions and meets all functional requirements, but the development cycle is long, the cost is high, and it is difficult to maintain; H5 website development is simple, the cycle is short, the version iteration speed is fast, and the cost is low, but the functions are insufficient compared to APP; WeChat official account is actually H5, but it runs in the closed WeChat system and has greater functional limitations than H5.

2. HTML5 For App requires functional expansion

Next, I will share with you how to avoid the shortcomings of H5, effectively apply H5 to APP, and achieve low-cost and rapid development of APP.

How to apply HTML5 best to APP? We believe that HTML5 cannot be directly applied to APP at this stage, it needs to be expanded.

HTML5 still has many shortcomings at this stage. As an industrial standard, HTML5 is a static standard with a very slow iteration speed, which lags far behind the development of OS and hardware technology. At the same time, browser engine manufacturers such as Microsoft, Google, and Apple are independent of each other. The business system formed over the years is difficult to change in a short period of time with the update of a standard. This has caused compatibility issues such as poor rendering, animation, and interaction in the actual use of HTML5. At the same time, HTML5 is a static standard that is independent of the platform and has basically no scalability (such as access push, support for IoT, etc.). Especially on the mobile side, due to the uneven hardware devices, the functions and experience of web products implemented using HTML5 technology are far inferior to APP.

We believe that we can make up for the shortcomings of HTML5 and solve the problem of HTML5's limited functions and inability to expand by extending HTML5 with native modules and opening APIs, and using the HTML5 + native module APP development model.

The modules that need to be extended include UI (ListView, scrollPictrue, etc.), local device functions (camera, gravity sensor, etc.), data storage (fs, db, etc.), network (http, socket, download, etc.), third-party services (Alipay, WeChat, RongCloud, Jijiyun, etc.), etc. By encapsulating the module extension API for JS to call, the functions of the native APP can also be fully realized by HTML5.

3. HTML5 For App needs to optimize rendering

On the other hand, in order to solve the problem of low rendering efficiency of HTML5 and improve user experience, it is also necessary to optimize the rendering of HTML5. We will introduce the rendering principles of HTML5 and native APP from two aspects.

Let's briefly introduce how the browser engine renders an HTML5 page. The browser usually renders an HTML5 page in five steps:
1. Get HTML from remote or local, HTML contains elements such as body, header, footer, etc.
2. Parse HTML into DOM data structure
3. Perform layout operations based on the attributes of DOM elements to implement layout data structure for final rendering
4. Push the layout stream to the rendering hardware (GPU, CPU, etc.)
5. Finally, the HTML is drawn to the display device, such as the mobile phone screen, etc.

The interface rendering of the APP is composed of various view components provided by the system or customized by the developer, such as ActionButton, TabBar, ImageView, etc. The layout, positioning, and division of levels and regions of the view components are realized through the properties defined by the developer, and finally displayed on the device screen.

APICloud combines the rendering of HTML5 and native APP to form a hybrid rendering mechanism.
The UI layout of APICloud APP is composed of HTML5 + native UI modules, which not only uses the simple and fast development capabilities of HTML5, but also combines the efficient rendering capabilities of native UI components, making the APP development process simple and easy, while achieving native effects in terms of functions and experience.

IV. Some development tips for HTML5 For App

Here are some tips on how to effectively improve app performance and user experience when developing apps using HTML5.

Fully respect and utilize the features of HTML5. Remove the default browser styles (such as the focus box of the input box); use div instead of a tag for clickable areas; use semantic tags, such as header and footer, which are conducive to code readability and maintenance; give full play to the new features of HTML5 and CSS3, such as the Video tag to play multimedia, and CSS3 rounded corners.

***Screen adaptation. Each HTML page must add a viewport to adapt to the device screen; the UI output size should be 1280×720; the image size standard should be 2x, i.e. 1280/2 | 720/2; the CSS layout should use box layout to automatically adapt to the screen.

Avoid using some heavy JS/CSS frameworks with large and comprehensive functions. You can use some simple frameworks for mobile-first scenarios. It is recommended that you summarize and encapsulate frameworks suitable for APP use.

Accelerate network data loading and improve data interaction experience. Use api.ajax to monitor network status in real time, use pull-down refresh and load more appropriately, and cache data appropriately to ensure offline data even when the network is disconnected.

Use images reasonably. Use original images and thumbnails according to different scenarios to reduce memory usage; the image size should match the width and height attributes of the img tag as much as possible to reduce performance loss caused by image scaling; third-party storage can be used to process images, such as using images of different resolutions according to different screen phones.

Improve click speed and optimize event response. Elements that respond to click events should add the tapmode attribute to eliminate the default 300 millisecond delay in HTML5; use extended gesture events and global events to manage response operations; use tapmode to achieve the click effect of native apps.

Follow the system characteristics. Update the UI at the appropriate time, understand the relationship between window switching and HTML5 rendering, and avoid updating HTML5 during window animation; avoid body-level background images, and use the native method provided by APICloud to efficiently implement, save resources and reuse; avoid passing parameters between pages too large, and control them within a few KB.

5. HTML5 For App cross-platform products

Select some core elements of HTML5 cross-platform products, including engine performance (whether it can develop the experience of native APP), functional coverage (whether it can meet all needs like native APP), open service integration (whether it supports the integration of third-party services such as push, IM, payment, LBS, etc.), extension mechanism (using a standard module extension mechanism), support of mainstream development tools (respecting developers' usage habits, whether it can be implemented using any HTML5 development tool), learning cost (what is the learning curve like, whether it is quick to get started), developer community service (whether you can get timely and effective technical support when encountering problems), and ecological completeness (such as Cordova, which is supported and maintained by Adobe in the long term and has developers contributing code).

At present, the mainstream framework platform products on the market are divided into two directions. One is centered around HTML5, with a hybrid mode of HTML5+native, with typical representatives such as APICloud, PhoneGap, etc., which is simple to develop and cross-platform; the other is based on the intermediate language compilation method, with typical representatives such as RN and Xamarin, which is a native development method with high learning cost and complex development.

Application of HTML5 in WeChat development: WeChat is an independent APP that runs on mobile devices. Therefore, HTML5 is limited by both device performance and WeChat's closed system. Therefore, when choosing a JS/CSS framework, more consideration should be given to mobile-first frameworks.

This is a typical end-to-end project on APICloud. The project is Intel Hardware Community, a special project that mainly provides vertical services for Intel in the IC field. It includes server side + APP side + WeChat side + HTML5 side. The APP side was quickly implemented in one month using HTML5 through APICloud.

Q&A

1. Q: H5-Jun-Dalian : How can I import the APP code written in 1 into APICloud Studio 2?

A: APICloud-Xu Zhifeng : Just use APICloud Studio 2 to re-check out and use it.

2. Q: Tianjin-Front-End-Little Dinosaur : Will APICloud be integrated with MVVM frameworks such as Vue in the future?

A: APICloud-Xu Zhifeng : Well, actually it supports Vue.js now.

3. Q: Java-Liu Fei-Nanjing : How to ensure security? How to do it on the mobile phone?

A: APICloud-Xu Zhifeng : The App is secure and can use the HTTPS protocol, and two-way authentication can be performed when necessary. You search, App two-way authentication, simply put, an HTTPS certificate is built into the App, and the server is also an HTTPS server.

4. Q: Tianjin-Front-End-Little Dinosaur : Is it possible to use the vuejs script directly?

A: APICloud-Xu Zhifeng : Webpack precompiles to .js

5. Q: Tianjin-Front-end-Little Dinosaur : How can I convert the APICloud code directly into Web H5? Is there any related method? How can I directly convert the App code into Web and H5 so that it can be used directly?

A: APICloud-Xu Zhifeng : You can also write the style in a separate CSS.

The App code, if it is a non-native module, can be opened directly in a web browser.

6. Q: Tianjin-Front-end-Little Dinosaur : How does APICloud implement ajax cross-domain requests? If I want to convert the App project directly into an H5 one, do I still need to build a server?

A: APICloud-Xu Zhifeng : Native means directly getting the cookie to send a request; if you want to use it on the Web, the server itself must support the cross-domain access. The browser itself cannot cross the domain if the server does not allow cross-domain access.

7. Q: Chengdu - Front-end - Brother Mang : My HTML page is normal when previewed in the Chrome browser, but the layout is messed up when previewed in the Haima simulator. The display: flex layout is used. In APICloud, the styles are all written in HTML. If I use Postcss to process it, is there a convenient and quick way?

A: APICloud-Xu Zhifeng : It may be that your writing style may not be compatible.

8. Q: H5-Jun-Dalian : How to use that box layout?

A: APICloud-Xu Zhifeng : You can consider using PostCSS.

9. Q: Beijing-unicorn-data : The interface is REST API. Is there Graphql?

APICloud-Xu Zhifeng : Video tutorial of APICloud Studio operation instructions can be viewed here>>

Welcome to join the group to study: 312724475

[51CTO original article, please indicate the original author and source as 51CTO.com when reprinting on partner sites]