中国领先的IT技术网站
|
|

挨踢部落直播课堂第二期:移动互联网产品中如何用好HTML5?

51CTO携手APICloud为广大开发者分享“移动互联网产品中如何用好HTML5”,邀请到APICLoud技术专家许志锋老师做直播分享课。内容涵盖移动互联网时代产品的整体架构,HTML5 For App 需要功能扩展、优化渲染、开发技巧、跨平台产品选取等。

作者:许志锋、51CTO开发者交流群来源:51CTO|2017-06-30 16:13

【51CTO活动】8.26 带你深度了解清华大学、搜狗基于算法的IT运维实践与探索


【51CTO.com原创稿件】51CTO携手APICloud为广大开发者分享“移动互联网产品中如何用好HTML5”,邀请到APICLoud技术专家许志锋老师做直播分享课。内容涵盖移动互联网时代产品的整体架构,HTML5 For App 需要功能扩展、优化渲染、开发技巧、跨平台产品选取等。

直播间:QQ群312724475

内容简介:

1、移动互联网时代产品的整体架构

2、HTML5 For App 需要功能扩展

3、HTML5 For App 需要优化渲染

4、HTML5 For App 一些开发技巧

5、HTML5 For App 跨平台产品

一、移动互联网时代产品的整体架构

移动互联网时代下的产品整体架构,一种理想的架构是端到端架构,客户端到云端。客户端专注产品功能、UI展示以及用户体验;云端提供数据及服务,两者之间通过开放API进行交互,耦合度越来越低。

整体架构

系统结构

移动互联网背景下,一个典型的产品其系统架构核心应该是API,云端通常需要提供基本数据服务(NoSQL、MySQL等),系统服务(Redis、消息队列等),聚合第三方开放平台服务(IM、PUSH、支付、LBS等)等能力,并通过开放标准规范的API对外提供服务能力。
而客户端通常需要包含3个端,APP端,Web端(即H5端)和微信端(微信公众号)。APP功能全面,满足所有功能需求,但开发周期长,成本高,难为护;H5网站开发简单,周期短,版本迭代速度快,成本低,但功能相比APP存在不足;微信公众号其实也是H5,但运行在封闭的微信体系内,相比H5功能限制更大。

二、HTML5 For App 需要功能扩展

接下来向大家分享,如何避开H5的不足,将H5有效的应用于APP中,实现APP的低成本快速开发。

功能扩展

如何将HTML5完美的应用到APP中,我们认为,HTML5在现阶段无法直接应用于APP,它需要进行扩展。

H5不能直接应用于App

HTML5现阶段还存在种种不足。HTML5作为一个工业标准,是一个静态标准,迭代速度非常慢,远远滞后于OS、硬件技术的发展,同时微软,Google,苹果等浏览器引擎厂商各自为据,多年以来形成的商业体系难以在短时间内凭借一项标准的更新而改变,这造成了HTML5在实际使用过程中的渲染、动画、交互不理想等兼容问题,同时HTML5是一项与平台无关的静态标准,基本无扩展性(比如接入推送、支持IoT等)。尤其在移动端,更是因为硬件设备的参差不齐,致使用HTML5技术实现的web产品功能及体验远不及APP。

需要扩展

我们认为可以通过对HTML5进行原生模块扩展,并且开放API的方式,使用HTML5 + 原生模块的APP开发模式来弥补HTML5的不足,解决HTML5功能有限,且无法扩展的问题。

扩展App

需要扩展的模块包括UI(ListView、scrollPictrue等)、设备本地功能(摄像头、重力感应等)、数据存储(fs、db等)、网络(http、socket、download等)、第三方服务(支付宝、微信、融云、机制云等)等等。通过封装模块扩展API给JS调用,原生APP具备的功能,HTML5也完全可以实现。

三、HTML5 For App 需要优化渲染

优化渲染

另外一方面,为解决HTML5渲染效率低的问题,提升用户体验,还需对HTML5进行渲染优化。我们从HTML5和原生APP的渲染原理两方面进行介绍。

渲染机制

简单介绍一下浏览器引擎如何渲染一张HTML5页面。浏览器渲染HTML5页面通常分为5个步骤:
1、从远程或者本地获得html,html包含body、header、footer等元素
2、将html解析为dom数据结构
3、根据dom元素的属性进行排版运算,实现layout数据结构,用于最终渲染
4、将layout流推送给渲染硬件(GPU、CPU等)
5、最终html被画到显示设备上,如手机屏幕等

机制

APP的界面渲染由系统提供或者开发者自定义的各种视图组件构成,比如ActionButton、TabBar、ImageView等。通过开发人员定义的属性实现视图组件的排版,定位以及层次和区域的划分,最终展示到设备屏幕。

UI结构

APICloud则将HTML5及原生APP两者的渲染结合到一起,形成一种混合渲染机制。
APICloud APP的UI布局由 HTML5 + 原生UI模块 构成,既使用到HTML5简单快速开发的能力,又结合原生UI组件的高效渲染能力,使得APP的开发过程变得简单容易,同时功能和体验达到原生效果 。

四、HTML5 For App 一些开发技巧

技巧

下面分享一些使用HTML5进行APP开发过程中,可有效提升APP性能和用户体验的技巧。

特性

充分尊重和利用HTML5的特性。去掉浏览器默认样式(比如输入框的focus框);可点击区域应使用div而非a标签;使用语义化的标签,如header、footer等,有利于代码的可读性和维护;充分发挥HTML5及CSS3的新特性,比如Video标签播放多媒体,比如CSS3圆角等。

页面加载

屏幕适配

最佳屏幕适配。每个html页面都必须加viewport,自适应设备屏幕;UI出图尺寸使用1280×720;量图标准适用2倍图,即1280 / 2 | 720 / 2;CSS布局应使用box布局,自动适应屏幕。

避免使用一些功能大而全的重型JS/CSS框架,可以使用一些简单的,移动优先场景下的框架,建议自己总结封装合适APP使用的框架。

框架使用

加速网络数据加载和提升数据交互体验。使用api.ajax,实时监听网络状态,合理使用下拉刷新和加载更多,并适当的进行数据缓存,在断网的情况下也可以保证有离线数据。

数据加载

图片处理

合理的使用图片。根据不同场景使用原图和缩略图,减少内存占用;图片的大小应尽量与img标签的宽高属性匹配,减少图片缩放带来的性能损失;可借助第三方存储处理图片,比如根据不同屏幕的手机使用不同分辨率的图片。

交互响应

提升点击速度,优化事件响应。响应click事件的元素应增加tapmode属性,可消除HTML5默认的300毫秒延迟;使用扩展手势事件、全局事件管理响应操作;使用tapmode实现原生APP的点击效果。

遵循系统特性。应当在适当的时候更新UI,理解窗口切换和HTML5渲染之间的关系,避免在窗口动画过程中更新HTML5;避免body级别的背景图片,可使用APICloud提供的原生方式高效实现,节省资源和复用;页面之间传参应避免过大,控制在数KB级别内。

系统特性

五、HTML5 For App 跨平台产品

选择HTML5跨平台产品的一些核心要素,引擎性能(能否开发出原生APP的体验)、功能覆盖范围(能否像原生APP一样满足所有需求)、开放服务集成(是否支持推送、IM、支付、LBS等第三方服务的集成)、扩展机制(使用有标准的模块扩展机制)、主流开发工具的支持(尊重开发者使用习惯,是否使用任意HTML5开发工具均可实施)、学习成本(学习曲线如何,是否快速入门)、开发者社区服务(遇到问题时是否能够得到及时有效的技术支持)、生态完整度(比如Cordova,由adobe长期支持和维护,有开发者贡献代码)。

核心要素

目前市面上主流的框平台产品分为两个方向。一个是围绕HTML5,以HTML5+原生的混合模式,典型代表为APICloud,PhoneGap等,开发简单,跨平台;另一个是以中间语言编译的方式,典型代表为RN、Xamarin,开发方式为原生开发,学习成本高,开发复杂。

主流跨平台产品

核心要素1

前端框架

HTML5在微信开发中的应用:微信是一个独立的APP,运行于移动设备,因此HTML5既受限于设备性能,同时受限于微信的封闭体系,因此在选择JS/CSS框架时应更多的考虑移动优先的框架。

UI核心要素

主流移动UI框架

这是一个APICloud上的典型的端到端的项目,该项目为Intel硬享公社,千万级别的项目,主要为Intel在IC领域提供垂直服务。他包括服务端 + APP端 + 微信端 + HTML5端。其中APP端通过APICloud使用HTML5耗时一个月快速实现。

项目

应用架构

Q&A

1、Q:H5-君-大连:以前用的1写的APP的代码,怎么导到APICloud Studio 2 中?

A:APICloud-许志锋:直接用APICloud Studio 2 重新检出即可使用了。

2、Q:天津-前端-小恐龙:APICloud 未来会不会和Vue 这样的MVVM框架整合?

A:APICloud-许志锋:恩 ,其实现在 就是支持 Vue.js 的。

3、Q:Java-刘飞-南京:安全怎么保证呢?这个在手机端具体怎么弄呢?

A:APICloud-许志锋:App 安全,可以使用HTTPS协议,必要时可以进行双向认证。你搜,App 双向认证,简单说就App中内置一个 HTTPS证书, 服务器也是HTTPS服务器。

4、Q:天津-前端-小恐龙:直接引入 vuejs 这个脚本这样去使用吗 ?

A:APICloud-许志锋:Webpack 预编译为.js

5、Q:天津-前端-小恐龙:APICloud的代码如何直接转成Web H5 有没有相关的方法?如何直接把 App的代码转成Web 和H5 直接可以使用的?

技术栈

A:APICloud-许志锋:也可以把样式写在单独的CSS里。

App的代码,如果是非原生模块部分的话,可以直接在 Web 浏览器里打开。

6、Q:天津-前端-小恐龙:APICloud 如何实现ajax 跨域请求的?如果我想把App的项目,直接转成一套H5的,还是要搞一个服务器 ?

A:APICloud-许志锋:Native 就是直接拿到 Cookie 发请求;如果是想在 Web中用,那就得服务器本身支持跨越了,浏览器本身是不能跨越的 , 如果服务器不允许跨域访问。

7、Q:成都-前端-莽哥:我的HTML页面,在Chrom浏览器里预览是正常的,海马模拟器中预览上看布局就全乱了,运用的是display:flex的布局,在APICloud里样式都是写在HTML里,用Postcss处理的话,有没有方便快捷的方式?

A:APICloud-许志锋:应该是你写法可能不太兼容。

8、Q:H5-君-大连:那个box布局怎么用?

A:APICloud-许志锋:可以考虑用PostCSS处理下。

9、Q:北京-unicorn-数据:接口是Rest API。是否有Graphql ?

APICloud-许志锋APICloud Studio 操作说明的视频教程可以看这里>> 

欢迎加群学习:312724475

【51CTO原创稿件,合作站点转载请注明原文作者和出处为51CTO.com】

【编辑推荐】

  1. 挨踢部落直播课堂第一期:起航2017——拥抱大数据
【责任编辑:何星 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月最赞

视频课程+更多

HTML5和CSS3新特性视频教程

HTML5和CSS3新特性视频教程

讲师:Helen老师 - 姚环402300人学习过

C语言程序设计

C语言程序设计

讲师:谭科50215人学习过

VMware服务器虚拟化视频课程之入门篇

VMware服务器虚拟化视频课程之入门篇

讲师:王春海82189人学习过

热门职位+更多

读 书 +更多

非常网管——网络服务

本书使用通俗易懂的语言,通过大量的实例,从实际应用的角度出发,全面系统地介绍了网络服务操作系统平台、电子邮件系统、Web站点和FTP站点...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× Python一种神奇的语言