今天在移动端,尤其是像手机淘宝这样的 app 中,动态性问题逐渐成为一个比较棘手的问题。所谓动态性,就是把移动应用本身的灵活性、迭代更新的周期和成本优化到极致。比如手机淘宝的店铺首页,它允许商家实时装修自己的店铺,更新自家的商品、活动等信息;再比如淘宝、天猫每次大促的会场页面,要求我们非常灵活的及时调整界面信息和状态,确保在瞬息万变的活动当天紧跟促销节奏,应对各种突发情况。 动态性需求的出现有很多必然的因素:我们的移动应用背后是一个平台级甚至是生态级的电商系统,它需要有海纳百川的能力和高速流通的特点,市场上很多移动应用也有类似的客观形态和诉求;同时整个行业迄今为止在移动端的积累都还不足以对产品形态、用户体验、交互方式等细节有完全的前期把握,一个移动应用,客观上需要更多的尝试和探索,甚至是“试错”,而这种动态化的程度和产品迭代演进的速度有着强烈的正相关;第三,我们不必要为这些动态性在多个端投入重复的精力,更不应该因此而频繁的触发新版本。所以动态性问题在今天的移动端显得尤其重要。 动态性问题不只是移动端特有的,在互联网技术发展的历史长河中,桌面端也存在并经历着类似的事情。今天桌面端的结论似乎已经形成,那就是W3C长期倡导的WebPlatform (或被称为 Web App 或 HTML5 或浏览器),然而这也经历了去平台差异化、native插件支持 (flash player)、设备性能提升、渲染引擎优化等过程。 而在移动端,阿里巴巴的无线事业部、兄弟团队、以及整个行业都在做着各种积极的尝试和实践:
实际上,我们觉得 RN 更像是一个全新的移动开发框架,而不是为了增强现有移动应用的动态性而生。大家希望通过 RN 解决动态性问题,是因为它在客户端引入了 JavaScript 引擎而已。 综上所述,我们能够看到很多中动态性问题的解法,但也都各有所限。团队经过不断的观察和讨论,决定拿出一套更好的更针对移动端动态性问题的技术方案这就是今天的 Weex! Weex 在我们看来已经具有非常多的特点,比如:
但是 Weex 其实最核心的诉求就是解决移动端动态性问题,它有自己非常鲜明的三大特点:
Weex 为移动端动态性问题而生,这些优势都是天然的,追求极致的。团队基于这三方面设计并实现了整套技术方案。 团队在 Weex 的设计和实践中,还有一个很深刻的感悟,就是:找到性能与动态性之间的平衡点。 放眼这么多动态性技术方案,有这么几个必经之路:
如果我们不只是处理纯展现性质的动态性内容,那么要再加上一个必经环节
这里面哪些环节值得扩展、哪些环节需要更多的动态性、哪些环节是性能的瓶颈,是整个解法的关键。通过思考和讨论,我们不难发现:
所以我们的解决方案中有几个关键决策:
Weex 核心设计理念是三端一体化的动态化解决方案,云端同学实现实时发布和动态部署、模版预解析处理,前端同学在 JS Framework 实现动态内容解析并处理成 Virtual DOM,客户端同学提供渲染实现和 native 特性的支持,接下来业务同学根据 DSL 实现动态内容的开发或配置即可。 Weex 在 DSL 设计上大量借鉴了 Web 标准的规范,并且通过主流且成熟的 MVVM 模式书写 template、style、script,我们在学习成本、开发习惯方面为业务同学考虑了很多,这样的话业务同学可以很快的学习和上手,并且保证代码的规范性和可读性 (这里要特别鸣谢一下 Vue.js 及其作者尤雨溪,我们在上层 DSL 的设计和 JS Framework 的实现上都做了深度的使用和借鉴,也在和作者的交流过程中受益匪浅)。 其次为了提升性能,减少客户端的性能损耗,Weex 在服务器端实现了 DSL Transformer 的工作,可以在模版发布的同时,将 XML CSS JavaScript 代码转换为可以小数据量执行效率高的 JS Bundle,并同步存储至云端:如 Web Server、CDN 等。 再次为了保证业务逻辑的动态性,Weex 在客户端的 JavaScript 引擎中预运行起了一套 JS Framework,来负责解析整个 JS Bundle,而 native 端则只负责 Virtual DOM 的解析和布局、UI 渲染的实现、以及基础网络通讯、文件读写以及手势处理等基础 API 的实现。 还有为了有效的提升工作效率,Weex 的 JS Bundle 可以实现三端跨平台渲染展示,业务同学可以通过开发一份 Weex JS Bundle,来实现 iOS/Android/HTML5 三端的正常展示。 所有的 native 组件和 JS API 全部都是模块化的,业务同学可以通过注册新的模块和方法达到去中心化的能力扩展。 关于 Weex 的性能优化还有以下几个细节:
图:Weex 关键性能测试和同类方案对比 |
|
声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系
[邮箱地址] 删除
|