Hybrid App走向“轻混”,剖析WeX5开源高性能HTML5 App开发框架

WalkingManMa 8年前
   <p>4月23日上午,HTML5应用开发工具WeX5的首席技术运营官王洁在Qcon上做了《Hybrid App走向“轻混”,剖析WeX5开源高性能HTML5 App开发框架》的演讲,分享了 WeX5在架构选型、开发历程上的一些技术痛点和心得体会。</p>    <p>分享内容分为三部分:</p>    <ul>     <li>Hybrid App从“重混”到“轻混”的发展历程</li>     <li>构建高性能HTML5 App跨端框架</li>     <li>WeX5可视化快速开发实践</li>    </ul>    <h2>一、Hybrid App从“重混”到“轻混”的技术发展历程</h2>    <p>王洁说,Hybrid App的发展历程基本上从早期的多元化走向了只有Android和iOS两个系统的环境。对于开发者来说,就意味着一个App需要制定两套实现方案,这对开发成本和维护成本都是非常大的挑战。基于这样一个现实,其解决方案就是想办法实现套代码跨端运行,所以Hybrid APP混合应用模式应运而生。在Hybrid App整个开发框架上,有各种各样的框架,各种各样的技术选型,而现在主要的技术就是Web技术,不仅简单, 更容易实现UI, 开发者人数也比较多。</p>    <p>大部分的框架是使用Web+Native实现组合的,王洁分享的内容范围是基于Web和Native Hybrid APP的框架。在Hybrid APP发展早期,Web运行性能是当时的主要的瓶颈。Web在性能方面有缺陷,Web不够就用Native来凑,就是选择了用原生技术来弥补Web上的性能不足,其实就是多WebView。王洁说混合的单WebView最大的障碍就是页面切换,闪白很明显。手机里面又讲究用户交互体验,从一个页到另一个页想做个平滑的动画,用纯Web技术在当时的条件下是非常难以实现的,其实目前大多数框架也是这么做的,就是采用多WebView,这样可以平滑的转场。</p>    <p>因为早期硬件比较差,浏览器性能也一般般,所以有一些比较复杂的组件在实现一些功能的时候,速度比较慢。当时框架里是用NativeUI组件来弥补的,配合Web来实现这些功能。这种模式被定义为“重混”,用原生的能力去弥补UI,或者技术更偏Native的框架就被定义为重混的Hybrid App框架。</p>    <p>重混框架优缺点很明显,优点是提升了运行性能、增强了交互。缺点是Web和Native技术交叉混杂,增加了开发人员的工作难度。但是,当下的手机硬件配置已经有了很大的改善,包括浏览器技术的发展也很重要,在GS引擎方面都有长足的进步。实现功能的时候用Web的技术的前提下已经不再需要Native技术来弥补了,随着技术的发展,性能已经不再是瓶颈。</p>    <p><img src="https://simg.open-open.com/show/4049dd5180a4dd7534dd6eabc4da2130.png"></p>    <p>另一个改变了移动应用这一领域的进程事件不得不提到。王洁说,自从微信推出以后,相当于重新定义了移动应用的概念,通过它的服务号、公众号、企业号,微信本身变成了一种应用平台。包括微信最新的版本更新,它浏览器内核的升级,包括对游戏的支持,都和大量的移动App开发有着莫大的关联。而这个时候重混的框架就显得多余了,因为在重混框架里面很多性能的解决是依赖Native的原生部分。而到了微信里面,多WebView和NativeUI都没有了。原来在重混框架里面很强的一些能力完全就消失了,这时候在微信里面就有很多能力就不能用了。</p>    <p>于是,轻混就成了目前真正要跨端Hybrid App的必然选择,这时候轻混的UI部分必须用纯Web技术,在底层的设备接口上,GS无法完成的原生部分需要Native技术来弥补。需要强调的是,Native的技术是不应该去侵入UI的,这样的一个框架就是我们所说的轻混Hybrid App框架,这才是真正的HTML5 App框架。</p>    <p><img src="https://simg.open-open.com/show/098d21b0c036a8d5936afd0674d573e7.png"></p>    <h2>二、构建高性能HTML5 App跨端框架</h2>    <p>伴随着以上的观点,接下来谈谈如何构建轻混模式下的HTML5 App框架。这种混合框架很简单,首先要有一个内置了浏览器的外壳,在浏览器里提供网页运行环境,同时在这个外壳上提供很多插件,可以让网络通过GS进行操作。</p>    <p>基于这样的认识,王洁说,在选择HTML5框架设计的时候,要解决两个框架的问题,一个是HTML5的框架,一个是Native的框架。首先看Native框架的选择,选择PhoneGap框架,受到了业内主流厂商支持,微软也是用Cordova,它的插件框架是开放的,很容易自定义。</p>    <p>另外就是要解决HTML5的一些性能问题,如果不采用重混架构的话,在页面切换还是会有一些障碍,王洁说到, WeX5 采用SPA单页应用模式,它是基于传统的页面加载模式 MPA ,页面之间互相独立。但是SPA的不同之处在于,其框架里整个页面是由外壳页面框架组成的,是用AJAX技术完成的, AJAX 在桌面时代就存在,通过局部刷新来提升用户体验。但是把 AJAX 技术最大化来使用,整个页面框架都用 AJAX来 实现,每个页面的加载都是这样的方式。</p>    <p><img src="https://simg.open-open.com/show/50a974d4d50f995048b05d2b4313e3bc.png"></p>    <p>对设备的局部渲染,可以在加载的时候在后面预加载再做转场动画,而且还不需要依赖多Web应用,不需要依赖Native就可以完成。而且在加载多页框架时每个页面的共用功能要重复加载。所以从各方面来说SPA相对于MPA是有极大的性能提升的。</p>    <p>SPA确实很好用,但是在设计产品的时候需要考虑到多人协作过程中,支持复杂应用的开发过程中,会不会出现多个ID会冲突,样式冲突,JS冲突等等致命问题?所以下面就谈到了页面隔离的问题。</p>    <p><img src="https://simg.open-open.com/show/f7b62d3bc23e87e8b5f2768b3e4f3dd3.png"></p>    <p>解决这样棘手的问题,王洁说,首先要考虑到HTML元素ID冲突的问题,因为是可视化工具,所以ID属性的设计是拖到一个属性栏里去定义ID,这时候刚好可以用一个替换原则,用了X ID 来替换,不会直接设定 ID 属性。这样到内存里,会动态的生成真实的 ID ,会在 X ID 后面加一个页面标志,这样可以保证多人写的页面在加载内存里 ID 是不相同的,也就不存在冲突。当然提供一些API的时候是能拿到真实 ID ,对应相应的元素,不影响访问。在整个组件体系里,开发者利用很简单的方法就可以拿到组件,可以很平滑的解决掉ID冲突的问题。</p>    <p>CSS样式冲突问题分为两类,一类样式是共用样式,多页面引用同一个页面;另一类样式被定义为私有样式,只使用页面,但不希望这个页面干扰到其他页面。这时候给每个页面都配了一个CSS文件,定义私有样式,限定在当前页面。实现起来也很简单,通过对工具的编译,把私有CSS文件里的所有样式加一个页面标志,在页面节点的属性上加一个标志,这样就使得class只能作用于当前页面的HTML元素,这就成为了一个私有样式。</p>    <p>然后是JavaScript问题,现在 JavaScript 模块化技术很流行,借用 JavaScript 模块化技术,解决 JavaScript 隔离问题。王洁在这里顺便把RequireJS简单的提了一下,通过define可以定义模块,在RequireJS定义里,这个大括号里的才是模块里的代码。不管是方法还是变量,都封装在闭包里,每个代码都是写在define的模块里,这样就把代码自然隔离了。</p>    <p><img src="https://simg.open-open.com/show/8fe0e2f01a639811c9dc9279be541517.png"></p>    <p>王洁说他们在外围还做了一些工作,首先是实现完整的外壳管理,Shell类提供外壳管理。为了防止信息泄露, 在配置的时候确实会把页面完整卸载掉 。当加载页面片断时,会从当前外壳数把 JS 删掉,页面加载的时候创建的JS对象都会完整的释放掉,这是由框架来保证的。另外是路由的问题,在SPA单页面框架里路由是很重要的,因为是单页面应用,加载的页面都是片断,其实UI地址一直是外壳的地址。</p>    <p>下图是整体框架的架构。黄色部分用的是Cordova,解决安卓和苹果的原生调用问题。同时要兼容微信,所以上面把Cordova和微信又做了封装,抽象成统一的HTML5 API。如果通过统一的Native API去拍照,会自动根据页面环境,通过Cordova接口调用,这样可以更方便的实现一次开发,多端运行,代码不需要改,既可以运行在原生App里,也可以运行在微信里。包括拍照、GPS地图,一系列的API都可以进统一分装。</p>    <p><img src="https://simg.open-open.com/show/f7b781e2a1b3b7f2c1a505c2a7b00107.png"></p>    <p>Bootstrap在这里提供了几个能力。一个是样式美化,扁平化风格,另外响应式布局。基于Bootstrap设计的页面,运行在不同的设备上不需要考虑分辨率,会自动处理设备分辨率。再上面实现了 WeX5 的组件框架和数据框架,页面上不仅有交互的UI组件,页面里面还有数据。接下来是业务框架层,即SPA单元页面框架。在服务端 WeX5 还提供了XBaaS服务,负责后端数据存取、逻辑,还有第三方地图、支付等功能实现。 WeX5 提供多语言实现,提供了不同语言的版本,开发者可以针对自己的版本来集成到自己的框架里。</p>    <h2>三、WeX5可视化快速开发实践</h2>    <p>在分享的最后,王洁给大家展示了基于 WeX5这样的框架所开发出来的一些功能。 首先是可视化的快速开发程度,帮助开发者通过可视化开发定义页面,框架可以保证运行体验,必须能快速加载,而且各种首试、硬件能力的是一体化集成的。把组件拖到表单上定义布局,设置属性,即可得到最终页面,设计室和运行室相邻,完全所见即所得。</p>    <p><img src="https://simg.open-open.com/show/e833c609d7def6dc1d9ea7fde516499b.png"></p>    <p>丰富多样的组件,足以适应各种复杂表单的组合。通过把常见功能组件封装,可以极大减轻开发者的开发工作量。最关键的是整个组件框架完全开源,除了 WeX5 提供的上百个组件以外开发者还可以自己定义这个可视化组件,甚至可以继承第三方组件,通过规范的方式封装成HTML5的可视化组件。</p>    <p>编程问题也是重点, WeX5 的定位是可视化程度更高的前端编程工具。不仅可以可视化设计,编程也是便捷。它能实现代码的智能提示、代码模板,还内致了Emmet框架。随后考虑的是调试问题, WeX5 是一体化的环境,不仅要解决开发、编程,还要解决调试的过程,既可以在Web浏览器上调试,也可以连到手机上调试,所有代码都是开源的,底层内库也是开放的。最后就是打包的问题,打包要考虑很多插件的配置,参数,资源在命令行的配合。 WeX5 提供了一个打包的向导, 完全本地打包,不需要依赖云打包服务,只需要 把打包过程中要设置的东西完全工具化,可以设置应用版本、证书、LOGO、图片、插件里的参数,最后就可以应用到App上。</p>    <p> </p>    <p>来自: <a href="/misc/goto?guid=4959673690733172880" rel="nofollow">http://www.infoq.com/cn/articles/hybrid-app-wex5-html5-app-architecture</a></p>    <p> </p>