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

   <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>