基于HTML5技术跨平台混合式应用开发解决方案UniSDP

背景：

笔者2004～2008年初，从事移动互联网开发，学习使用了J2ME、Brew、Symbian等开发技术。08年加入东软商用，从事JavaEE、RIA企业应用和智能设备开发，主要使用ActionScript、JavaScirpt、iOS、Android、linux平台上开发技术。笔者感到，在学些各种开发语言和平台开发技术时，花费了太多的时间和精力。无法将更多的精力投入到更深层次技术学习、以及业务积累和以及创新、创意中去。2010年笔者在Adnroid、iOS、Linux平台上测试了对HTML5的支持情况，发现可以尝试利用HTML5来改变这一情况。2010年我们在开发某DLNA相关产品分别在Linux、Meego、iOS、Android平台进行开发。在平台移植、程序架构、程序逻辑和用户界面方面重复性开发浪费了很多资源，UniSDP最初就是为了解决这一问题而起始的。

这篇文章不会讨论过多的技术细节，而是把我们在多平台应用开发经验，以及智能家电嵌入式领域研发方向的最新动态与大家分享。

一．Hybrid Application：

混合式应用程序采用Web开发技术与Native系统技术相结合的方式开发的应用程序。 由于HTML5标准尚未正式发布，基于HTML5技术的WebAPP尚不能完全实现Native APP的全部功能，因此Hybrid APP在相当长一段时间内是全面解决跨平台问题的最佳方案。

相关厂商内容

如何建立拥有公有云品质与运维的私有云平台？

数据分析与企业架构

InfoQ中国运营团队倾力打造—EGO超级极客邦

利用OpsWorks管理多层Web应用程序

AWS安全性最佳实践

Native APP、Web APP、Hybrid APP特性对比表：

	NativeApp	WebApp	HybridApp
开发成本	高	低	低
跨平台	否	是	是
需要安装	是	否	首次安装
实时增量更新	支持	支持	是
系统API调用	能	否	能
开发灵活度	中	中	高
对AppStore依赖	高	低	低

二．UniSDP定义：

UniSDP (Unified Smart Device Development Practices)项目启始于2010年12月，它是一个用于构建支持PC和智能设备混合式应用开发的整体解决方案，它是由开发框架，运营平台，公共构件和方法学组成的。

UniSDP是NeuSoft Smart TV TurnKey Solution的核心技术之一，我们在UniSDP在Neusoft DTV解决方案基础上构建Android、Linux通用的Smart TV解决方案。通过UniSDP来集成各领域的中间件，支撑构建跨平台的资讯、影音、游戏的应用平台。目前我们与合作伙伴共同研发的很多产品和项目，都采纳了UniSDP的设计思路，整体或部分使用了UniSDP的相关技术。

三．UniSDP的开发理念：

1. UniSDP是Hybrid APP开发及运营的整体解决方案。
2. UniSDP可以支持PC、手机、平板、Smart TV、车载系统等硬件平台开发。
3. UniSDP能实现跨平台统一的或接近系统原生的用体验。
4. 基于UniSDP开发，效率高、成本低、学习曲线低。
5. UniSDP集成了众多专业领域原生组件，开发者无需掌握专业即可开发相应产品。
6. UniSDP的HybridAPP只需首次安装，可以支持集中控制，统一发布。
7. UniSDP能实现在运行期实时的、增量更新。
8. UniSDP拥有敏捷软件工厂和开发者体系结构。
9. UniSDP Hybrid APP Store是NativeApp模式新颖，商业前景广阔。

四．UniSDP的开发SDK：

UniSDP的开发框架由HTML5、JavaScirpt、CSS3和UniSDP核心组件构成。UniSDP的开发SDK在不同的系统和硬件平台上都有不同的版本，使用者可以根据具体项目需求进行剪裁或补充。UniSDP保证对于最上层的应用开发者在各个平台上相同功能的编程接口的一致性。

五．UniSDP的核心组件：

UniSDP核心组件是由下图所示六大核心组件共同组成的。此外UniSDP最新在正在开发提供针对不同系统和硬件平台,提供图形、影音硬件加速的浏览器核心，来进一步提升图形图像性能。

UniSDP核心组件构成图

UniSDP核心组件说明

Native MiddleWare：原生系统中间件层，该层实现各个系统平台如Linux，Android、iOS等平台上与本地系统API接入和资源的访问、设备调用以及各个平台扩展中间件的。

1. 各个平台的文件系统，数据库扩展、网络io、文件上传、Socket增强（用于不支持webSocket）情况。
2. 设备调用、摄像头、麦克风、传感器等多媒体接等。
3. 原生UI组件调用接口、比如图层控制、WebView行为控制、等等。
4. 中间件扩展如DLNA(数字家庭网络联盟)、DTV(数字电视相关接口)、语音识别、人脸识别、SDM(智能设备管理)、DCM（设备连接管理）等。

Hybrid App Engine：混合式应用支撑层，通过该层衔接浏览器（WebAPP）与各平台系统的Native接口。

1. 统一的UI显示，比如Android和iOS系统的UI和操控有很大不同，如果基于系统原生组件开发将非常困难实现相同UI显示。UniSDP采用HTML5技术开发跨平台的通用的UI，构建与众不同的用户体验。
2. 统一的系统行为,HTML5控件在不同系统下行为会有差异，比如video标签。在移动设备上往往是全屏播放，无法嵌入在页面显示。UniSDP统一了此类行为。
3. 安全认证：所有Web与系统底层的接口的访问都必须经过授权认证，来自远程页面发起的访问认证在访问时申请，会话内有效。
4. 原生API开发：基于原生组件的开发增强。举例DLNA组件是基于标准C开发，在集成到iOS、与Android时分别基于ObjectC和Java开发相关功能。
5. Web与Native调用方式，UniSDP在不同平台可以采用下列方式
   • 拦截Web浏览器URL解析。
   • 扩展js引擎、和tag解析。
   • 通过本地HTTP或Socket服务。

   UniSDP可以采用自己的定制跨平台的增强浏览器内核实现更强大的功能。

6. Web增强，UniSDP针对很多HTML5做了web增强。比如音频和视频标签与系统原生媒体播放时的是否可以同时播放。

WebApp Engine：由HTML5、CSS3、JS框架组成,包括UI框架、公共组件和WEB桌面系统，用于支撑Web APP开发。

1. Cloud Service Engine：用于服务继承，版本控制、开放认证，更新控制支持云服务开发。
2. Hybrid App Store：提供Hybrid App的应用商店，及版本管理。
3. Cloud Device Management：完成设备的的云端管理功能。

七．UniSDP Hybird APP 运行模式：

首次安装UniSDP程序后，在Online模式下，程序可以在后台自动与服务器同步更新，可以按照用户设定或云端设置按照页面单元、模块、文件、程序组等维度，在Hybrid App运行期进行增量、实时更新。在Offline 模式下，程序仍可使用非网络功能，访问本地资源正常使用。

八．Unisdp的开发模式：

敏捷软件工厂和开发者体系结构

我们使用UniSDP开发SmartTV相关产品的项目时，是由TV领域专家、Linux、Adnroid嵌入式专家，UniSDP核心组件开发人员，云服务开发者和应用开发者共同协作开发的。开发者开发测试自的模块根据约定的接口进行装配和测试。开发者无需掌握其他模块全部知识，能专注自己喜欢的领域，工作效率更高，掌握程度更深。对于应用开发者可以完全不懂iOS、Android、Linux等开发技术，也不需要过多了解诸如DTV、DLNA等专业领域知识，只需掌握HTML5、JavaScript、CSS调用UniSDP相应开发SDK即可完成应用开发。

九．UniSDP与PhoneGap的区别：

• 使用场景上的区别：
  • PhoneGap主要是用来支持跨平台的应用程序开发的解决方案，PhoneGap希望开发者只需要懂得web开发技术即可开发跨平台应用程序。
  • UniSDP是用来满足在智能设备及PC上用来研发操作系统、应用平台、应用程序等企业级开发和第三方开发者开发需求的。它是包含大量专业领域的中间件DTV、DLNA、CDM、MDM等，以及混合式应用商店、云服务平台等。UniSDP开发，往往是由领域专家、嵌入式开发者、UniSDP开发者、云服务开发者、应用开发者协同工作的。希望能为第三方开发者提供更多专业领域的API来简化开发。
• 设计原理上的区别 ：
  • PhoneGap是单页面应用程序（Single Page Application），整个应用程序是运行在WebView中，一个应用是在一个Web页面完成的，全面Ajax化，整个程序运行在一个WebView中。
  • UniSDP 在开发时可以根据实际情况选择基于Web开放技术和Native开发技术采用多个HTML页面和多个WebView来解决问题。有开发者反应WebView在Android系统下长时间运行后内存使用量消耗过多，导致系统出现各种问题。采用多页面或多WebView方式可以采取多种办法来缓解或解决这一问题。

UniSDP:通过UniSDP在Native扩展控件实现不同控件之间数据交互。

1. WebView1内通过HTML5实现EPG功能，与MediaPlayer完成交互。
2. js调用UniSDP组件动态调用MediaPlayerController。
3. WebView1的DIV调用UniSDP控件实现与底层系统交互，完成视频播放控制，相机调用等。
4. 通过WebView2独立加载第三方web页面。
5. WebView上通过UniSDP动态调用相机接口，创建SufaceView ，完成相片拍摄。
6. MediaPlayerController的控制条。
7. WebView1中加载JQuery相册，非常简单的实现相册功能。

PhoneGap：单纯采用Web技术通过单页面方式开发。

十. 相关演示

如果你对UniSDP感兴趣，可以到http://www.youku.com/playlist_show/id_17105254.html 查看相关演示视频，其中包括：

1. 语音控制UniSDP HTML5 SmartTV Demo，HTML5相关展示。
2. 语音控制平板电脑 UniSDP HTML5 Tablet Demo
3. UniSDP Hybrid APP Sotre 运行期安装新应用
4. UiniSDP HTML5 Auido 扩展
5. HTML5 EPG Demo
6. HTML5 Smart TV SNS社交&多设备协作

关于作者

孙广宇，东软集团(大连)有限公司运营经理 商用软件事业部 产品经理、UniSDP首席架构师。HTML5研究小组大连负责人。

---

感谢侯伯薇对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。

Geekbang【微信群免费直播】全球架构师峰会四大专题知识【微信群免费直播】。1、互联网金融 2、大数据背后的价值 3、数据分析与企业架构 4、研发体系构建。扫描下方二维码回复“报名”即可进入报名通道或加geekbang01公众号后回复“报名”即可进入报名通道。