西西木科技-专业的shopify liquid开发机构-前端JS丨react后端丨API接口丨shopify plus丨外贸独立站
摘要：随着移动设备的迅速崛起，APP出现了爆发式的增长。 在智能终端的冲击下，原有的WAB软件已经跟不上时代的步伐。 由于新一轮技术变革，APP移动客户端成为人们的新宠。 APP正在产生巨大影响，游戏、艺术品、零售、新闻媒体、旅游等行业都发生了深刻的变化。 因此，对于新闻媒体领域的领头羊人民网来说，开发自己的移动平台非常重要。 然而原生Android和iOS互不兼容，同时开发相同功能的App需要两种技术，这无疑会增加开发和维护成本。 HTML5的出现正好解决了这个问题！ 本文通过对HTML5技术本身和当前应用案例的分析，介绍了HTML5技术，同时也为人民网的移动化开发提供建议。
关键词：HTML5； 人民网； 移动开发
一、简介
HTML5是超文本标记语言（HTML）的第五次重大修改，HTML是万维网核心语言标准通用标记语言下的应用程序。 它最大的优点之一就是可以应用于移动终端的开发，实现跨平台开发，即可以一次开发，多平台使用。 那么，这项技术能否引入到新闻媒体领域的人民网呢？ 并应用它？ 本文对HTML5技术本身进行了分析和介绍，并结合HTML5目前的使用案例，为人民网移动化开发提出了一些建议。
二。 HTML5
1.HTML5简介
HTML5是HTML的最新修订版本。 该标准由万维网联盟（W3C）于2014年10月完成，目标是取代1999年制定的HTML 4.01和XHTML 1.0标准，以期使网络标准适应当代互联网应用快速发展的网络需求。 广义上的HTML5，实际上是指包括HTML、CSS和JavaScript在内的一组技术组合。 它希望减少网络浏览器使用基于插件的富互联网应用程序（RIA）的需要，例如Adobe Flash、微软Silverlight和Oracle JavaFX，并提供更多可以有效增强网络应用程序的资源。 一套标准。
2.HTML5的发展历史
2004年6月，Mozilla基金会和Opera Software在万维网联盟（W3C）主办的研讨会上提出了一项联合提案。 这个提案主要是为了让技术向后兼容浏览器，同时还可以拓展出更多的新技术，包括提出的Web Forms 2.0的初步规范草案。 但由于W3C一直专注于XHTML的发展，该提案以8票赞成、14票反对的结果被否决。 这引起了一些人的不满。 不久之后，一些厂商宣布成立Web超文本技术工作组（WHATWG）组织来继续推动该规范的开发。 该组织再次提出了Web应用程序1.0规范草案。 后来这两个规范逐渐融合成了今天的HTML5。 2007年，被W3C接受，并成立了新的HTML工作组。 2012年9月，W3C提出计划在2014年底发布HTML5推荐标准，在2016年底发布HTML5.1推荐标准。
3. HTML5的优缺点
1）HTML5的优点
网络标准
HTML5本身是W3C推荐的。 它的开发是谷歌、苹果、诺基亚、中国移动等数百家公司酝酿出来的技术。 该技术最大的优点是它是一种开放技术。 换句话说，每一个公共标准都可以追溯到W3C数据库。另一方面，W3C采用的HTML5标准意味着每个浏览器或每个平台都会实现它。
多设备、跨平台
使用HTML5的主要优点是该技术可以跨平台使用。 比如你开发一款HTML5游戏，你可以很方便的移植到UC的开放平台、Opera的游戏中心、Facebook的应用平台，甚至通过封装技术分发到App Store或者Google Play，所以是跨平台的。 该平台非常强大，也是大多数人对 HTML5 感兴趣的主要原因。
总结 HTML5有以下优点：
1. 提高可用性和用户友好体验；
2.有几个新标签将帮助开发定义重要内容；
3、可以为网站带来更多的多媒体元素（视频和音频）；
4.可以很好的替代FLASH和Silverlight；
5. 在网站抓取和索引方面非常有利于SEO；
6.将广泛应用于移动应用和游戏。
2）HTML5的缺点
移动浏览器的编程模型仍然是20世纪90年代流行的单进程单线程，但原生实现的应用程序（例如使用Object C）可以使用多线程。 在移动端编写APP时，可以使用多线程。 第一个线程称为主线程。 编程的首要原则是不要让主线程过载。 通常只允许处理UI事件等，其他繁重的工作由其他后台线程完成。 但浏览器只有一个线程，却能完成所有事情。 在桌面上，浏览器编程没有太多问题移动端开发，因为它足够快； 但在移动端，这个缺点就很明显了。
例如，如果您使用浏览器查看朋友的照片，您的评论将发送到服务器。 这时，你用手指向下拉屏幕。 此时服务器返回信息，评论发布成功，浏览器中唯一的线程可能会停止处理屏幕滚动来处理服务器返回的信息。 由于移动设备的处理器（尤其是单进程浏览器只能使用单核，甚至是多核手机！）和内存（为了省电的原因移动端开发，使用低耗电的DDR1，与所用的DDR3相差甚远）在现在的PC上，还不够强大，完全可能会造成滚动处理不连续，通常手机的刷新率为60MHZ，即每帧不超过15ms，如果处理延迟大大超过15ms，就会出现跳帧的情况因此，如果你的APP比较静态，不需要大量的照片处理、多点触控、多向拉动，完全可以用HTML5实现；如果不是的，比如信息流、游戏等的展示，最好使用原生实现。（HTML5实现已经是超过50%的iOS APP的选择，相信处理能力的提升会提高移动设备处理能力差带来的体验。 而这种处理能力的提升，很大程度上将取决于低功耗高性能CPU/内存的出现，或者电池技术的巨大进步。 在这一天到来之前，可能有10%的APP无法使用HTML5实现。 并不代表就是安全网络应用开发工程师。 在学习新技术时，需要时刻牢记网络安全。 使用 HTML5 构建的网页与使用其他语言编写的网页一样容易泄露敏感数据。 欧洲网络和信息安全局（ENISA）警告称，HTML5 可能不够安全。
三。 HTML5应用可行性分析
1 理论分析
HTML5规范中还有一些技术规范仍在补充和完善中，有些规范已经变得更加稳定； 下表列出了那些技术规范更全面或者浏览器支持范围更广的技术：
表1 技术规范相对全面或浏览器支持范围较广的技术
HTML5技术仍在缓慢发展
表2 缓慢发展的技术
HTML5技术仍处于细化阶段
表3 HTML5技术的完善阶段
通过上表分析我们可以看出，对于人民日报这样的新闻媒体来说，采用HTML5技术开发是非常可行的。 对于新闻类应用来说，首先对手机的性能要求不是很高。 问题可能出在视频、音频播放上，而在这两方面，HTML5技术的支持都很好，而手机浏览器的支持程度中等。 因此，在新闻移动终端上开发HTML5应用是没有问题的。
2. 实用分析
目前，许多互联网公司已经开始利用HTML5技术开发自己的移动应用程序。 我在这里举一个例子——手机淘宝。
淘宝是亚洲最大的综合性网上购物平台。 淘宝商城整合了数千家品牌商家。 淘宝客户端依托淘宝强大的自身优势，整合旗下团购产品，与淘宝商城融为一体，为用户提供每日最新的购物信息； 还具有搜索比价、订单查询、购买、收藏、管理、导航等功能，为用户带来方便快捷的移动购物新体验。
手机淘宝自2009年推出以来，DAU从100万增长到1亿多，它面临的问题，包括研发支持需要解决的事情都是不同的。 随着用户数量和业务复杂度的线性增长，架构也随之演变。 如下图所示，可以分为四个阶段：
1、第一阶段，手道的前身WAP网站业务新成立，变化快，需要快速发布。 采用HTML模板和单体应用，最大程度满足快速发布和修改的需求； 甚至不需要更改后端业务代码。 只需对之前的模板进行一些修改即可。
2、第二阶段，随着DAU的快速增长以及WAP/Android/iOS多个平台业务的兴起，需要在多个平台上快速进行业务复制和业务控制，统一API网关出现。
3、第三阶段，DAU进一步增长，上线系统越来越多，业务需求的多样性更多体现。 基于HTML5的一整套解决方案推出，更多的业务形态和API在HTML5和Native之间混合。 网关进一步优化和扩展，提供更便捷的接入方式。
4、第四阶段，当DAU达到100M时，整个集团的业务需要在淘宝上曝光。 更多IDC机房部署API网关。 如何更系统地进行有效的研发和接入 多种业务、更有效的业务监控需要更系统的架构治理。
图2 手机淘宝发展历程
对于手机淘宝来说，它实现的功能相当复杂。 手机淘宝有商品游览，类似于新闻浏览，也有多媒体技术。 其复杂度并不低于人民网手机APP的复杂度。 HTML5在手机淘宝上的成功实施表明，人民网如果想引入HTML5技术，是绝对有可能的！
四、人民网引入HTML5技术
1. HTML5应用方法及场景
虽然HTML5技术有很多优点，但是完全使用HTML5技术开发APP是不可行的。 首先，HTML5本身有一些缺点，上面已经提到了，这里不再赘述。 另一种是针对ios的。 另一方面，如果一个应用完全使用HTML5技术开发，它就无法通过应用商店审核，这意味着你无法发布自己的产品。 另外，还存在很大的性能问题，用户体验无法保证！ 因此，需要采用混合开发，一部分使用HTML5开发，一部分使用原生技术开发。
以下是我在使用混合开发模式时想到的场景：
1.网络新闻
单篇新闻的具体形式是规范统一的，即图文结合的形式，而网络新闻则是另一种新闻模式。 在编辑后台发布此类新闻时，只需填写一个URL，点击该新闻即可显示该新闻。 URL对应的网站。 本网站的内容可以根据具体的内容需求开发预期的效果。
2.新闻小部件
网络新闻使用HTML5来呈现整个报道，而新闻小部件可以在标准新闻中插入一些动态和交互式的HTML5组件。 最常见的应用，比如外滩踩踏事件的报道，可以在底部放花。 您献花的地方还可以告诉您当前有多少人正在献花。 同样，通过改变皮肤，你可以点燃蜡烛并祈祷。
这还是最基本的。新闻小部件还可以直接在文章内进行投票、注册等更多交互功能操作。
新闻小部件的核心价值在于能够以每日报道的最小粒度整合新闻和服务。 试想一下这些场景：当你看到一篇关于银行贷款利率降低的新闻文章时，有一个贷款计算器。 输入您的贷款金额和期限，它会立即告诉您每月可以少还多少； 或者在一篇关于交通事故的报道中，可以实时看到路口的交通状况移动端开发；HTML5——人民网在移动端的技术应用方向，让用户最直观地了解事故对交通的影响……那是一种多么美妙的感觉！
3、服务平台
充分利用HTML5接入简单的优势，只需一个URL即可在“人民网”服务版块轻松上线服务。 “人民网”APP可以对服务进行排序、上传、删除、修改图标和名称等功能。 具体服务由每个服务提供商开发、开发和维护。
表4 三种开发方法对比
2.如何引入HTML5
引入 HTML5 有两种方法。 一种是自己重新搭建框架，但这种方式成本相当高，需要大量的人力物力。 对于早期来说，不建议采用这种方式实现，因为没有经验，所以开发难度相当大，所以我推荐使用第二种方式，开发现有的HTML5移动开发框架。 目前，很多大型互联网公司都开发自己的HTML5开发框架，并且都已经在自己的公司中使用。 其中的产品，在性能方面，是经得起用户考验的。 同时，其中很多都是开源的，所以建议前期使用这些开源框架，在使用过程中根据自己的需求开发自己的框架。 以下是一些目前主流的HTML5框架：
1.加速器
Appcelerator 的 Titanium开发平台允许开发通过 HTML、PHP、JavaScript、Ruby 和 Python 等 Web 编程语言开发适用于手机、平板电脑和台式机的本机应用程序。 它的优点是允许用户轻松访问300多个API以及位置信息。
2.API云
APICloud是一个“云合一”移动开发平台，信奉“云合一”理念，重新定义移动应用开发。 APICloud为开发提供“云”和“端”两个方向的API，简化移动应用开发技术，将移动应用开发周期从1个月缩短到7天。 APICloud由“云API”和“端API”两部分组成，可以帮助开发快速实现移动应用开发、测试、发布、管理和运营的全生命周期管理。
图3
3.PhoneGap
PhoneGap 是一个免费的开源开发环境，允许开发开发在 Android、Palm、BlackBerry、iPhone、iTouch 和 iPad 等设备上运行的应用程序。 它使用标准的Web开发语言，例如HTML和JavaScript。 开发使用PhoneGap进行开发liquid开发，可以调用加速度计、GPS/定位、摄像头、声音等功能。
4.NativeScript
NativeScript利用移动平台的JavaScript引擎进行跨平台开发。 当然逻辑部分就不用多说了。 关键在于如何使用平台功能。 NativeScript通过反射获取所有平台API，并对其进行预编译，然后将这些API注入到JavaScript运行环境中。 然后它会在 Javascript 调用之后拦截该调用并运行本机代码。 NativeScript 使用大量 Web开发技术来进行应用程序开发。 由于工具链和语言非常熟悉，受到很多前端开发的欢迎。
五、总结
HTML5的新特性为移动互联网产品的发展提供了新的可能性，推动移动互联网产品从本地应用向Web、云、混合等方向发展； 另一方面，HTML5实现了应用的跨平台开发和统一的客户体验跨境独立站，降低了移动互联网产品开发的门槛。 可见，HTML5技术的出现将为移动互联网领域带来巨大的变革。 人民网作为国内新闻媒体的领头羊，应该充分利用新兴技术助推业务发展，不断为用户提供优质新闻！
六、参考文献
【1】HTML5、百度百科
【2】HTML5，维基百科
[3] 卢刚、李惠云，HTML5技术应用现状及发展趋势研究
[4] HTML5技术研究与应用综述，
【5】原生APP与HTML5混合开发模式，
西西木科技是shopify官方合作伙伴，通过了Shopify Partner Academy认证，具备多年shopify lic主题开发经验，熟悉Liquid和各项计算机语言。