高性能html5的app,hybrid app走向轻混剖析wex5开源高性能html5 app开发框架.docx

hybrid app走向轻混剖析wex5开源高性能html5 app开发框架

Hybrid App走向“轻混”，剖析WeX5开源高性能HTML5 App开发框架4月23日上午，HTML5应用开发工具WeX5的首席技术运营官王洁在Qcon上做了《Hybrid App走向“轻混”，剖析WeX5开源高性能HTML5 App开发框架》的演讲，分享了WeX5在架构选型、开发历程上的一些技术痛点和心得体会。Qcon上的分享内容分为三部分：Hybrid App从“重混”到“轻混”的发展历程构建高性能HTML5 App跨端框架WeX5可视化快速开发实践Hybrid App从“重混”到“轻混”的技术发展历程王洁说，Hybrid App的发展历程基本上从早期的多元化走向了只有Android和iOS两个系统的环境。对于开发者来说，就意味着一个App需要制定两套实现方案，这对开发成本和维护成本都是非常大的挑战。基于这样一个现实，其解决方案就是想办法实现套代码跨端运行，所以Hybrid APP混合应用模式应运而生。在Hybrid App整个开发框架上，有各种各样的框架，各种各样的技术选型，而现在主要的技术就是Web技术，不仅简单，更容易实现UI，开发者人数也比较多。大部分的框架是使用Web+Native实现组合的，王洁分享的内容范围是基于Web和Native Hybrid APP的框架。在Hybrid APP发展早期，Web运行性能是当时的主要的瓶颈。Web在性能方面有缺陷，Web不够就用Native来凑，就是选择了用原生技术来弥补Web上的性能不足，其实就是多WebView。王洁说混合的单WebView最大的障碍就是页面切换，闪白很明显。手机里面又讲究用户交互体验，从一个页到另一个页想做个平滑的动画，用纯Web技术在当时的条件下是非常难以实现的，其实目前大多数框架也是这么做的，就是采用多WebView，这样可以平滑的转场。因为早期硬件比较差，浏览器性能也一般般，所以有一些比较复杂的组件在实现一些功能的时候，速度比较慢。当时框架里是用NativeUI组件来弥补的，配合Web来实现这些功能。这种模式被定义为“重混”，用原生的能力去弥补UI，或者技术更偏Native的框架就被定义为重混的Hybrid App框架。重混框架优缺点很明显，优点是提升了运行性能、增强了交互。缺点是Web和Native技术交叉混杂，增加了开发人员的工作难度。但是，当下的手机硬件配置已经有了很大的改善，包括浏览器技术的发展也很重要，在GS引擎方面都有长足的进步。实现功能的时候用Web的技术的前提下已经不再需要Native技术来弥补了，随着技术的发展，性能已经不再是瓶颈。另一个改变了移动应用这一领域的进程事件不得不提到。王洁说，自从微信推出以后，相当于重新定义了移动应用的概念，通过它的服务号、公众号、企业号，微信本身变成了一种应用平台。包括微信最新的版本更新，它浏览器内核的升级，包括对游戏的支持，都和大量的移动App开发有着莫大的关联。而这个时候重混的框架就显得多余了，因为在重混框架里面很多性能的解决是依赖Native的原生部分。而到了微信里面，多WebView和NativeUI都没有了。原来在重混框架里面很强的一些能力完全就消失了，这时候在微信里面就有很多能力就不能用了。于是，轻混就成了目前真正要跨端Hybrid App的必然选择，这时候轻混的UI部分必须用纯Web技术，在底层的设备接口上，GS无法完成的原生部分需要Native技术来弥补。需要强调的是，Native的技术是不应该去侵入UI的，这样的一个框架就是我们所说的轻混Hybrid App框架，这才是真正的HTML5 App框架。构建高性能HTML5 App跨端框架伴随着以上的观点，接下来谈谈如何构建轻混模式下的HTML5 App框架。这种混合框架很简单，首先要有一个内置了浏览器的外壳，在浏览器里提供网页运行环境，同时在这个外壳上提供很多插件，可以让网络通过GS进行操作。基于这样的认识，王洁说，在选择HTML5框架设计的时候，要解决两个框架的问题，一个是HTML5的框架，一个是Native的框架。首先看Native框架的选择，选择PhoneGap框架，受到了业内主流厂商支持，微软也是用Cordova，它的插件框架是开放的，很容易自定义。另外就是要解决HTML5的一些性能问题，如果不采用重混架构的话，在页面切换还是会有一些障碍，王洁说到，WeX5采用SPA单页应用模式，它是基于传统的页面加载模式MPA，页面之间互相独立。但是SPA的不同之处在于，其框架里整个页面是由外壳页面框架组成的，是用AJAX技术完成的，AJAX在桌面时代就存在，通过局部刷新来提升用户体验。但是把AJAX技术最大化来使用，整个页面框架都用AJAX来实现，每个页面的加载都是这样的方式。对设备的局部渲染，可以在加载的时候在后面预加载再做转场