Multi-dimensional exploration of HTML5 technology to create the best application experience and practical sharing

In the golden October, the hazy autumn colors bring with them a harvest, a memory, and a perfect season. Ten years ago, no matter how complex the layout was, it was not a problem in front of the magical table. We were amazed that the magical Yahoo could perform so well under IE5. After the standardization of the Web, people began to focus on the performance optimization and interactive experience of the website. The popularity of various responsive and CSS3, SVG and WebGL, made H5 enter people's eyes. In this golden autumn season in the cloud, can H5 still bring us a little bit of novelty?

On October 31, 51CTO held the seventh offline open class at Beijing Ideal Country Entrepreneurship Cafe. The theme of this salon focused on high-quality HTML5 application development, and continued to explore how to create H5 applications with the best user experience at low cost in the cloud era after the H5 standard was finalized.

[[154479]]

For this open class, 51CTO sincerely invites front-end technology experts from three emerging H5 companies to explore H5 in different fields, sharing their technologies from the perspectives of novel HTML5/WebGL 3D modeling, cloud-based Web technology stack selection, and how to use H5 to surpass native application experience.

[[154480]]

Du Changyu, Senior Development Consultant at Autodesk

The first speaker was Du Changyu, a senior development consultant from Autodesk. The theme of his speech was "The Web Enters the 3D Era - 3D Model Browsing Technology Based on HTML5/WebGL". He is currently responsible for the support and promotion of his company's cloud technology, focusing on HTML5, WebGL, NodeJs and 3D model display technology on the Web.

3D stereoscopic model effect display

[[154481]]

Teacher Du demonstrated to developers several interactive 3D stereo model effects on the Web. After seeing such effects, the developers on site must have made up their minds on how to choose between two-dimensional and three-dimensional.

Online 3D model browsing tool

Teacher Du said that using WebGL to create 3D effects does not require any plug-ins and is supported by almost all modern browsers, but WebGL is not that simple. There is a simple way to know the online 3D model browsing tools shown above, among which Autodesk Viewer can be browsed in browsers and mobile devices, which is simple and free to use.

Autodesk Viewer

Autodesk Viewer supports many data formats such as ipt, neu, stla, stl, xlsx, jt, jpg, skp, prt, dwf, xls, png, sldas, etc., and the number of supported formats is still increasing. The above picture shows the model + attribute data, and also provides the programming interface View and Data API. Possible application scenarios include property management, e-commerce product display, online virtual experience of exhibits, production management, equipment operation monitoring, games, virtual reality, etc.

LeanCloud Senior Engineer Neo

The next speaker is Neo (Wang Xiao), a senior engineer from LeanCloud. The theme of his speech is "Building a Cloud on the Cloud". He is currently responsible for the LeanCloud JavaScript SDK and Web products, and has rich experience in Web product and technical product development.

Review of Cloud Services Analysis of Cloud on Cloud

[[154482]]

In the past, developing a product required four steps: Designer, FE, BE, and OP. Later, OP was replaced by many cloud services. With BaaS (Cloud Service 2.0), BE and OP can also be saved, making it easier to write programs and faster to iterate products. Based on LeanCloud's own needs and services, we began to consider the product and technology aspects comprehensively. For example, the issue of product browser compatibility needs to be weighed at the technical level.

Technology stack and division of labor

From Mr. Neo's speech, developers can understand how to choose the technology stack if the development of Web products changes. He also discussed the technology development model with developers. Making more products, improving technical capabilities, trying new technologies, and becoming a leader are the development directions of front-end technology and career development.

LeanCLoud

Typical users of LeanCLoud are Zhihu, Uber (China), Kung Fu Cat, Battle of Cat Planet, etc. Mr. Neo said that front-end engineers will become technology leaders, and front-end engineers should improve their technical capabilities, try new technologies, and make more products.

Cui Hongbao, Senior Front-end Engineer at Dcloud

***The speaker is Cui Hongbao, a senior front-end engineer from Dcloud. The theme of his speech is "Multi-terminal publishing and streaming applications, HTML5's weapon to surpass native". He is currently working on how to make HTML5 achieve the native App experience.

MUI —High-performance front-end framework

MUI — A high-performance front-end framework with numerous UI extension plug-ins and templates, featuring small size, native style, and smooth experience.

HBuilder Tools

As an HTML5 development tool, HBuilder has advantages such as multi-language editing, offline login, and one-click search.

HTML5-based streaming applications will eventually surpass native

HTML5 applications are comparable to native applications in terms of function and performance. HTML5 applications have unique advantages such as cross-platform, dynamic execution, and low cost. Mr. Cui said that the production of HTML5 streaming applications will eventually surpass native applications.

[[154483]]

Developer Questions

After each lecturer finished his presentation, the developers on site actively put forward their own opinions and communicated with the three lecturers. The technologies that everyone was relatively concerned about included 3D model display, hybrid, 5+ runtime engine, and streaming applications. Due to time constraints, the lecturers answered a limited number of questions and left their contact information for subsequent communication with developers. Later, MDSA will also share the PPTs shared by the teachers with the majority of developers.

The conference ended with an elaborate lucky draw, which was drawn from questionnaires collected from all developers on site. After three lucky draws, the developers on site were excited, and the prizes were a Razer gaming keyboard and mouse set and two smart sports bracelets.

[[154484]]

After the whole salon ended, the developers were still not satisfied and were still discussing the content of today's speech with the teachers.

Written in ***:

Two days have passed since the World Wide Web Consortium (W3C) announced the completion of HTML5 standards. Over the past 15 years, HTML5 has developed rapidly, and many people are developing products such as HTML5-based advertising, mobile applications, and mobile web games. Pure HTML5 is in its adolescence, and it has a broader future, waiting for developers to explore it step by step. At the same time, there are also some problems that developers need to overcome. HTML5's revolutionary influence on mobile applications has deeply attracted many developers to move forward. In the next year and in the future, HTML5 will become more popular. I believe that developers who come to participate in the offline open class of the Mobile Developer Service Alliance (MDSA) have already felt the power of HTML5, and look forward to meeting you again at the next open class.

MDSA offline open classes are held once a month, striving to help developers solve problems encountered in all aspects of mobile development. We also hope that more developers will pay attention to 51CTO and MDSA. We will continue to invite the most authoritative lecturers in the industry to share the most valuable dry goods for developers! See you next time!

MDSA offline open class PPT download address:

◆ Multi-terminal publishing and streaming applications, HTML5 surpasses native copy

◆ Building a cloud on the cloud

◆ Web has entered the 3D era - Discussion on 3D model browsing technology based on HTML5/WebGL