欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  网络运营

HTML5定稿一周年 你必须要重新认识HTML5了

程序员文章站 2022-06-19 11:18:46
去年此时,W3C定稿了HTML5。我曾发表一篇文章《HTML5终于定稿,为什么原生App世界将被颠覆》,这文章转载量很大,它阐述了HTML5的来龙去脉,分析了HTML5的优劣势并对未来发展做了一些预测。时隔一年,我们看看HTML5产业都发生了什么,那些基于理论的预测,哪些被实践了,结果又如何?201...

去年此时,w3c定稿了html5。我曾发表一篇文章《html 5终于定稿,为什么原生app世界将被颠覆》,这文章转载量很大,它阐述了html5的来龙去脉,分析了html5的优劣势并对未来发展做了一些预测。

时隔一年,我们看看html5产业都发生了什么,那些基于理论的预测,哪些被实践了,结果又如何?

2015年初,facebook宣布推出react native开源框架。2015年初,腾讯微信推出了js sdk。2015年中,阿里巴巴公司的judy zhu入选w3c advisory board,这是中国人在w3c组织中话语权最高的位置。2015年中,html5中国产业联盟举行扩大会议,引入十几家会员单位2015年中,firefox副总宫力离职创业h5os并获得巨额融资。腾讯qq玩吧成为重要的html5手机游戏平台。360手机助手与dcloud合作推出流应用,开启html5替代原生的序幕。

从整体来看,2015年是各个巨头进军html5领域的探索年,不同的公司通过不同的方式在探索html5如何为其所用,在推进、验证、纠错、继续推进中不停迭代,并出现了一些非常亮眼的突破。

facebook回归并发布react native,并非拥抱html5

扎克伯格在2013年放弃html5的声明是html5历史上黑暗的一幕。2015年,facebook终于回来了。不过这种回归略微尴尬的是:react native并非拥抱html5,而是准备干掉html5。react native虽然仍然是js,但并不兼容html5。通过facebook的自定义语法,react native实现了更高效率的渲染引擎,提升了性能表现。

react native从年初召开发布会,然后发布ios版,直到9月份android版推出,中间也是在不停试水。

facebook基于动态语言构建生态链的动力是十足的,作为全球最大的社交基础平台,facebook的web版本上活跃着广泛的三方应用,但手机上这套体系搬过不来。

facebook自己的app是原生开发的,但三方应用如果也使用原生开发,是无法成为facebook移动生态的一部分的。而基于html5的三方应用,在手机上的表现实在不佳,严重打击用户在手机上使用、购买这些三方应用的热情。而facebook极大的盈利来源恰恰是从三方应用的收入中获取分成。

虽然基于动态语言构建生态系统的动力十足,但facebook为何要另起炉灶呢?

当初facebook放弃html5,就是因为html5的渲染效率在手机上达不到流畅标准,facebook认为罪魁祸首是dom和css3。而react native的原则就是no dom,使用了完全不同的绘制引擎。

当初css3被设计的超级复杂,很大程度上是为了替代flash在html4年代酷炫的交互效果。在pc上硬件资源没问题,css3虽然复杂也能跑得流畅。但手机不同于pc,dom和css重绘在低端机上并不流畅。

但无论如何,自建标准是比较难的事情,如果仅在facebook生态里自然没别人管,但如果做大了就又会像flash一样遭遇巨头联合绞杀。但是react native确实在倒逼浏览器引擎开发商反思渲染引擎应该如何优化。

腾讯在微信和qq两大生态中,运用不同思路探索html5

腾讯也是社交巨头,和facebook有类似的需求,围绕着腾讯巨大的用户群,有众多三方应用在这里掘金。不过腾讯有微信和qq两套生态,这两个生态做html5的思路还并不相同。对微信而言,公众号就是它的生态,为了增强公众号的能力,微信推出了js sdk,它本质上是一种轻应用,强化了js的能力,补充了十几类常用的api。公众号是以服务内容和应用为主的,js sdk的强化基本没有考虑html5游戏的需求。

虽然微信强化了js sdk,但公众号的性能和体验还是让用户不太爽的,切换页面的长时间等待、back错乱等很多问题让人烦躁。从这个角度看,还是落后facebook一筹。

另一方面,如何推进开发商使用js sdk也是一件挠头的事情。本来滴滴出行内嵌在微信里的版本是可以通过微信js sdk来展现地图和语音输入的,但滴滴并没有强化微信内嵌版的体验。这里就暴露了微信的另一个问题:当一个app厂商自己也是巨头或者想成为巨头时,它必然不会依赖和强化微信里的入口,它会希望主推自己的独立入口。

回想张小龙做微信公众号的理念“再小的个体也有自己的品牌”和“消除中介”,这一切也是顺理成章。

与微信不同,qq是另一套思路,qq用户低龄化,爱玩游戏,通过html5游戏变现是qq空间这个产品更关注的事情,于是腾讯在qq空间app里推出了玩吧栏目,专门汇聚html5游戏,给这些游戏导流量,然后获取分成收益。目前玩吧汇聚了各种主流html5游戏,包括普通html5游戏和使用cocos2d-html5、egret等引擎的游戏。

2015年有不少渠道在探索html5游戏,包括浏览器和一些超级app,甚至包括滴滴出行也开设了游戏中心。但就目前的情况,大多数渠道都没有亮眼成绩。玩吧在众多渠道的胜出反映一个现状:html5游戏目前比较适合基于社交属性的轻度游戏。

业内还有一些开发商尝试把html5游戏引入到互动营销、客户服务以及多屏互动领域,这些有意义的探索或许在未来能给消费者和商家带来新的体验。

将html5应用于应用市场,360等企业寻求新突破点

应用市场对待html5与社交平台不同。应用市场不存在通过社交用户建立开放平台并变现的需求,应用市场是比较*和单纯的发行渠道。

但原生应用的发行是一个很简单的工作,无法差异化的,各家就是拼自己的资源和流量占入口。于是应用市场也在寻找自己的突破点。360手机助手在2015年初上线了生活助手栏目,汇总了各种o2o厂商的服务,但不是让用户下载这些o2o厂商的原生app,而是直接打开html5网页。年中360还宣布对html5服务免流量,目前360生活助手里访问这些o2o厂商的html5 app可以不花通信流量费,费用由360买单。

o2o服务的集成发行其他巨头也很重视,百度在宣布200亿砸向o2o后,手机百度及各条产品都很注重o2o厂商的html5服务引入;小米也推出了小米生活,华为也在做华为生活,也都是类似思路。于是今年o2o厂商们有一个忙碌的工作就是把html5页面集成到各家渠道。由app分发升级为服务分发,这是应用市场自己的动力,但用户使用习惯的养成还需要时间。

os国产化,从html5入手

2015年中,html5中国产业联盟举行扩大会议。这个联盟其实2013年就成立了,无奈当时整个产业太冷。随着基础环境的变化,越来越多的公司开始重视html5,并加入html5中国产业联盟一起推动产业发展。目前联盟的会员们已经形成从开发、测试、发行、培训、外包、融资、媒介宣传的一条龙html5产业服务能力。这也让中国的html5开发者有更强的信心和更方便的服务。

2015年中,firefox副总裁、firefox os的核心人物宫力博士,宣布辞职创业做h5os,并获得紫光国际1亿美金的巨额投资。这笔巨款着实令人吃惊,且不说上半年疯狂股市是否引发泡沫,但h5os指向的是紫光国际看好的中国*国产化os市场。自从斯诺登事件后,中国*就反复强调国产化。在*信息化领域围绕着很多it公司,都试图从中寻找到新机会。

关于os的国产化,有些人从linux入手,另有一些人,从html5入手。鉴于google和中国*的关系,chrome os是没人敢碰的,于是不少人在接触firefox os,宫力博士的创业也在情理之中。

此外,华为也推出了国产安全手机,从芯片到系统都是国产的。

但手机上的os比pc上的os难做。做一个操作系统本就很难,操作系统出来后要建生态更难。pc上大多数业务本就是基于web的,但手机上目前大多数优质app都是native的,缺少优质的应用是目前所有做手机html5 os的尴尬。如果希望在html5的os上有足够好的体验,必然涉及扩展html5,但如果各家定义自己的扩展规范,让开发者为每家单独开发,这个事基本就无法推动了。产业各方合力,把扩展标准统一,才可能有机会。

流应用,html5产业又一大亮点

2015年在html5产业里最大的亮点是360和dcloud公司推出的流应用,它对于html5缺陷的弥补和优势的发挥,可以说做得淋漓尽致。

在360手机助手里搜索“大众点评外卖”,看到的按钮不是“下载”,而是“秒开”。

HTML5定稿一周年 你必须要重新认识HTML5了

 

流应用?这是轻应用换个概念炒冷饭吗?

当然不是,点击秒开后并不是在线打开一个网页,仍然是安装一个客户端app,仍然如原生app般强大和流畅。只不过这个客户端app是js代码,并像流媒体一样流式发行、边用边下,实现了5秒内完成客户端app的下载、安装、启动。app二次使用仍然在桌面点图标启动,应用使用体验也与传统原生app没有区别。

一定要注意,对于用户而言,使用app的功能体验与之前的原生方式并没有区别,但是获取app却秒开了。

读者肯定会问,怎么实现的?

这个新概念包括的新技术有点多,本文不负责科普所有实现过程。大概讲讲html5为何能达到原生的功能和体验。

流应用使用了一种强化的js引擎(html5+),这种引擎能让js调用操作系统的40万api,并将之前html5体验不佳的交互都改进为原生体验。

不同于react native的反html5方案,html5+采取的方案是强化html5。

html5+兼容html5,并扩充40万原生api。对于dom和css3动画效果不佳的部分场景,使用原生动画补足,比如窗体切换、下拉刷新的动态交互效果,不采用css3动画,而是通过js调用了原生view动画。

相比react native,强化html5的方案对开发商更友好,开发商只需把现有的html5版本做简单强化改造即可,而不是重新写一套no dom的代码。

html5定稿后一年的业内大事基本整理完毕,接下来我想深入分析流应用这个里程碑产品会给产业带来什么变化。

html5出现这几年,在pc上已经广为应用,但在手机上,始终是备胎。

流应用的出现颠覆了大众对html5 的认知。以往提到html5,大多数人都会认为html5有5个问题:

html5的性能不行,不如原生;html5的api不够,很多功能实现不了;html5没法离线运行,断网就不能用了,即使有离线缓存,三方软件清理垃圾后也不能用了;html5只能在浏览器里用,没法直接在桌面启动;通过html5强化引擎(如phonegap/cordova)开发跨平台app,那是小公司为了省钱做的事,大公司还是要用原生。

现在,这五个常规认知被终结了。

好吧,听起来大家真的需要重新认识html5了。

基于强化引擎运行的html5,功能、性能、离线运行、桌面启动,均和原生一样了(至少用户感觉不到差别)。

以大众点评外卖流应用为例,它的窗体切换pop-in动画、流畅的下拉刷新,均是原生标准,还有一个流应用叫“36kr资讯”,还可以手机进入飞行模式后再次从桌面启动该app,一样可以用而不会出现白屏或404。

为了消除大家对html5的五个错误认知,特地录了36kr流应用的操作视频,演示在飞行模式和手机清理垃圾后仍然可正常使用,让大家眼见为实:

当html5这五个问题被消除后,这个世界就变了,但还变的不够,因为其实html5还有很多强于原生的地方可以发掘。

我在去年html5定稿时写的文章提到html5有5个原生也比不了的优势:

跨平台快速迭代开源生态发达更容易推广天生开放非孤岛,可方便互联

这五个技术优势,都如何应用呢?

html5的跨平台,不是常规意义上的跨android和ios平台。对于很多应用开发商而言,原来至少有3拨团队,分别负责android、ios、微信公众号的开发。

能不能一套代码,跨多个平台,且在各个平台都有最佳体验呢?

答案是可以的。挑食火锅是一个o2o创业公司,他们只有一套html5代码,通过mui框架和条件编译技术,编译出了六个平台的版本,ios的ipa包、android的apk包、html5浏览器版、微信公众号版、百度直达号版,以及流应用版。

对于缺钱少人的创业公司,这是极具诱惑力的解决方案。

可能有人觉得,对于不差钱的大公司而言,html5的跨平台优势不够明显。那么往下看。

任何大app厂商,都在追求快速迭代、热更新、a/b测试,在这些领域,使用html5都比原生要方便的多。

这益处仍不够多?再看html5的第四个优势:更容易推广。

用户获取应用,一般通过应用商店或扫码下载。

应用商店里点下载原生app,从下载到app真正启动,折损50%,也就是100次下载只有50个app启动激活。

而二维码扫描,折损高达90%!很少有人在没wifi的时候下载十几m的原生包。

这些不合理,以往似乎被人忽视了,但这些不合理终将被解决。

不管是50%还是90%的折损,通过流应用都可以避免。

除了降低折损,流应用还有一个推广方面的特点,就是可以充分利用社交网络推广。

用户分享一个流应用,就像分享一个消息,可以进朋友圈,也可以短信、微博分享。别人点击就可以获得这个流应用。

在原生应用体系里,这是不可想象的。以前我们怎么分享app?我说:hi,这个app不错,推荐给你;你说:ok,回头有wifi时我去应用商店下一个。这种土鳖场景想想就够了,未来终于可以美好一些了。

然后再看html5的第五个优势:天生开放非孤岛,可方便互联。

这会带来什么场景变化?

有3个很好玩的应用模式:广告直通车、扫码直通车、分享直通车,这给app打开了一个通过内容带动应用发行的新途径。

分享直通车:如果你的朋友在朋友圈里分享了一个好吃的饭馆,你点击后立即秒开流应用并自动进入该饭馆,继续点外卖、或团券,这是多么方便的体验!这个看似未来的东西已经实现。在360手机助手里搜索“大众点评外卖”,在里面分享一个饭馆,就是这个效果。扫码直通车:公交站牌或电梯广告经常有电商特价购物,如果此时放一个扫码购,用户扫描后只需几百k流量秒开了流应用,并且直接进入特价购物界面买单。广告直通车:我们经常在应用市场看到广告banner图,显示某知名电影票特价10元一张,点击该广告图后提示下载某电影票购票app。大多数用户会在这里折损掉。而广告直通车,则可以点击广告图后,直接秒开流应用并进入到这个电影的购票界面。

内容拉动发行,这扇窗打开,相信很多有创意的运营人员,可以玩出各种花样来吸引用户。

刚才说了html5对开发者而言,有5个原生也比不了的优势。但对于最终用户而言,html5是一个陌生的技术名词,开发商跨平台开发了,成本下降了,可最终用户没有直观感受。他们如何感受html5的好处?

流应用给普通手机用户带来了5个好处:

省时间:获取流应用是秒开,边用边下;省流量:流应用的体积一般都是几百k,比原生app小10倍,而更新包体积都是几k,没有门槛的轻易获取新服务,也不会看到那么多更新角标头疼;省空间:手机有空间,不如拍照片。把iphone6换成6s的唯一原因是你之前的iphone6是16g的(有没有戳中你?);省电、不卡:如果android手机装上100个传统原生应用,那这手机基本就废了,会变的很卡很费电。而流应用,装上1000个也不会让手机变卡变费电;场景串联:

出差订了机票后,就可以去航空公司app值机,然后去打车app里订去机场的出租车,然后去天气app里看当地天气……你不需要反复切回主屏启动不同的app,并输入明明上一个app里已经记录的查询条件。

之所以说流应用是html5产业的里程碑事件,是因为从此后我们可以重新审视html5 vs native之争:

html5的5个缺点被解决了;html5对开发商有5个原生比不了的优势;html5对用户有5个原生比不了的优势。

我们先不争论原生是否会消失,但在2015年,html5产业确实取得了突破性进展。

我们不再是只能干巴巴的说:“手机硬件、网络都在提升,html5是趋势”这种年年都在说的“真理”了。

一些产品真正解决了html5的缺陷,并利用html5的优势让开发商和用户,实打实的感受到了html5给他们的带来的价值。

众多从业公司,众多产品和思路,谁能最终胜出仍然未知。但看着未来越来越近是令人欣喜的,并且更欣喜的是中国公司在这场变革中引领了很多创新。

html5的崛起,可能会让一些原生开发工程师不安,欢迎大家一起理性讨论,但求不要未经思考或验证的乱喷。我个人也是程序员出身,会多种编程语言,我总觉得一个开发者需要经常适应语言大战的变迁。我的微博,weibo.com/wangan2000。

再次欢迎大家体验流应用

在360手机助手里搜索“大众点评外卖”、“36kr资讯”。没有体验条件的可看如下视频:

视频1 应用市场秒开流应用:

视频2 快码,扫描立即秒装app:

视频3 分享,通过社交网络快速传播app:

视频4 流应用不是web网页,断网时照样使用:

作者简介:王安,dcloud ceo,html5产业专家,w3c会员。