新人必看| 移动端“动态化”是什么意思？

Posted 2023-04-12 lydia77

在移动开发领域，为了让APP保持最新的版本，同时让业务开发变得更加快捷，动态化技术极其重要。今天就来聊聊移动端动态和开发的由来和各流派的优缺点。

移动端动态化的由来

“动态化”并不是最近几年才产生的名词，而是从从互联网诞生的初期，这个词就已经出现了。大家所认知的早期互联网，其实就是各种各类的“动态网站”，内容数据和页面外观都不是固定的，都是随着服务器端的更新而更新的，让用户可以很及时地看到最新的内容。因此，动态化可以说是互联网的标志，是互联网最核心的特性之一。

而移动互联网的普及，移动端被各类原生应用所占据，而这些应用更近似于 Software，依托于应用市场进行更新，只有其中的数据是实时的。这样，每次产品的更新，必须依赖用户的主动更新，从而造成了一定的用户成本，不利于产品的快速迭代，降低应用的试错能力。因此，移动端动态化方案逐渐走进大家的视野，并被大家所关注。

从一开始基于 WebView 的 Hybrid 方案 PhoneGap、Titanium，到现在与原生相结合的 React Native 、Weex，甚至 Flutter，都被或多或少地使用到不同的移动应用中。

原生开发能不能动态化？准确的说是能的，而且 Android 平台各公司都有很完善的动态化方案，甚至 Google 还提供了 Android App Bundles 让开发者们可以更好地支持动态化。而反观 iOS，由于 Apple 官方担忧动态化的风险，因此并不太支持动态化（去年还封杀了 JSPatch 等一类动态修复方案），因此比较通用的原生动态化方案几乎没有，只有各大厂自己实现的一些动态化框架。

动态能力建设方向流派众多

如何选择动态能力建设的流派，主要从研发成本、兼容性、动态能力、稳定性、操作体验等方面判断，需要根据团队的实际情况来进行选择。

简单叙述一下动态化能力建设的主要流派：

1、React-Native

• 优点：历史悠久、资料丰富、学习楷模
• 缺点：兼容性一直被诟病，坑太多玩不动
• 典型代表：Facebook、Linkedin

2、原生+H5

• 优点：平衡性佳、研发可控能力好
• 缺点：原生部分动态能力欠缺
• 典型代表：Hybrid方式依然占据大部分市场

3、原生+小程序（另一种Hybrid方式）

• 优点：同样拥有平衡性和研发可控性的优点，体验接近原生，小程序的性能是有目共睹的
• 缺点：与h5一样原生部分动态能力欠缺
• 典型代表：依然是Hybrid方式，微信、支付宝、美团、FinClip

4、weex flutter

• 优点：性能动态能力兼顾
• 缺点：开发成本高、异构风险大、IDE体系弱
• 典型代表：阿里系

5、纯H5化

• 优点：节省开发资源，动态性最好
• 缺点：兼容性问题多，体验尚与原生有差距
• 典型代表：腾讯系

当然也有纯原生的，所剩无几就不讨论了。

动态化流派众多，各有利弊，没有最好，各个团队需要根据自己的项目选择最合适的方式。以我们团队为例，目前选择了Native+小程序的结合，通过在APP中引入 FinClip小程序容器技术，让App具备小程序运行的环境。从而实现这种基于小程序的Hybrid的方案。以下简单介绍一下Native+小程序的模式有哪些优点：

首先基于小程序的Hybrid方案，是通过更加定制化的 JSBridge，并使用双 WebView 双线程的模式隔离了JS逻辑与UI渲染，形成了特殊的开发模式，加强了 H5 与 Native 混合程度，提高了页面性能及开发体验。

小程序运行时本质上是一个处理Web页面渲染、数据逻辑交互的虚拟机，这个虚拟机提供了丰富的原生能力供小程序调用（API、组件、AI能力等），极大的拓展了Web应用的能力边界，尤其是在诸如滚动视图（scrool-view）、导航（navigator）、图片预览（cover-image）等组件的提供，使得前端开发人员在使用现有的web前端技术，就可以开发出接近原生体验的应用。

除了体验的大大提升，基于小程序的动态化方案相比其他方案，还有以下优势：

跨平台：小程序可以在微信、支付宝等平台中运行，具有良好的跨平台性，可以在不同的平台上进行应用开发和发布。

无需下载安装：小程序不需要下载和安装，用户可以直接通过扫描二维码或搜索即可进入应用，降低了用户的使用成本和门槛。

快速迭代：小程序可以实现动态更新，开发人员可以随时更新应用的业务逻辑和界面交互逻辑，快速迭代和优化应用，提高用户体验。

灵活性：小程序使用的是基于HTML、CSS和JavaScript的开发方式，支持动态化配置和定制，开发人员可以根据用户需求进行个性化的应用定制。

低成本：小程序的开发成本相对较低，可以通过第三方小程序开发平台或开发工具快速搭建应用，降低了应用开发的成本和门槛。

基于小程序的动态化方案具有跨平台、快速迭代、灵活性、低成本等优势，适用于中小型企业或个人开发者开发轻量级应用的场景。

关于移动端动态化方案的再思考——Weex

在移动端日益兴起的今天，APP 本身的灵活性、迭代更新的周期、成本优化等动态性问题，成为很多移动应用的客观需求。而针对动态性，开发者们也探索出一些有力的解决方案：Hybrid 方案、结构化 native view 方案、React Native 方案（大家习惯简称 RN）等。

但技术从来没有最优解，这些方案提供了动态化问题的一些解法，但都各有所限，开发者们仍在努力地寻找一种更针对移动端动态性问题的技术方案。阿里自研的高性能跨平台移动开发框架 —— Weex 解决了频繁发版和多端研发两大痛点，一套 Web 代码完美适配 iOS、Android、H5、Web 等多端，极大地解放开发者的同时又保证了用户体验。

Weex 的核心工作链路细节

Weex 核心设计理念是三端一体化的动态化解决方案，云端实现实时发布和动态部署、模版预解析处理，前端在 JS Framework 实现动态内容解析并处理成 Virtual DOM，客户端提供渲染实现和 native 特性的支持，业务只需根据 DSL 实现动态内容的开发或配置即可。

Weex 在 DSL 设计上大量借鉴了 Web 标准的规范，并且通过主流且成熟的 MVVM 模式书写 template、style、script，在学习成本、开发习惯方面上考虑了很多，以便业务开发者能更快可地学习和上手，并且保证代码规范性和可读性。

在提升性能，减少客户端的性能损耗上，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 的性能优化还有以下几个细节：

1. JS Framework 通过对数据的依赖收集，实现响应式的视图层，再加上一层 diff 算法的优化，可以有效的过滤冗余的操作和复杂的计算。

2. Native 端对通信，Virtual DOM 解析以及布局实现等进行异步线程的处理，防止 UI 线程的阻塞。

3. 对 UI 组件节点实现了复用处理，并对图片资源进行监控和回收，有效的减少内存的占用。

4. 对于实时性要求较高的处理，Weex 允许第三方实现 native 的定制需求来保证体验的流畅性。

2015 年“ 双十一” Weex 框架成功地完成了性能、稳定性、灵活度这三个极限挑战，做了一次惊艳的首秀亮相。2016 年 6 月底，Weex 正式开源，开始与全球开发者共享中国的移动互联网技术成果。2017 年 9 月底，基于 Weex 的富交互、轻量级、高性能的 UI 组件库 Weex  UI 开源。

Weex 在接受开源社区的不断洗礼沉淀，与长期的思考与摸索中，有了更大的进步与改善。而相关的工具、服务，也在逐渐配套完善中。

本次杭州源创会，我们特别邀请了 阿里国际 UED 高级前端技术专家——辟蹊，以淘宝亿级的店铺业务为着手点，介绍手淘店铺的移动端技术选型和实现方案，前端 JS 加载机制和优化策略，如何动态化加载，数据动静分离，如何利用客户端缓存等，并讲解移动端动态化的 Weex 渲染能力展开的一些技术实现和背后思考。

除此之外，我们 2018 年 7 月 21 日（周六）的杭州源创会 —— 移动开发专场还邀请了：

• 即构科技资深架构师——冼牛

  
  

• 个推 Android 高级研发工程师——李子洋

  
  

• 钉钉开放平台高级技术专家——莘舟

  
  

• 前华为、饿了么资深工程师，现爱奇艺架构师

  
  

• 开源项目 Andromeda 作者——王龙海

  
  

五位行业大牛齐聚，以移动开发为核心，与你一起分享交流，进行一场关于面对面的技术对话。

扫码报名，与业内大咖和更多小伙伴当面交流

注：以上内容有引用和参考 [阿里无线11.11 ： Weex——关于移动端动态性的思考、实现和未来]

• https://my.oschina.net/iNiL0119/blog/1502503
  

开源中国征稿开始啦！

开源中国 www.oschina.net 是目前备受关注、具有强大影响力的开源技术社区，拥有超过 200 万的开源技术精英。我们传播开源的理念，推广开源项目，为 IT 开发者提供一个发现、使用、并交流开源技术的平台。

现在我们开始对外征稿啦！如果你有优秀的技术文章想要分享，热点的行业资讯需要报道等等，欢迎联系开源中国进行投稿。投稿详情及联系方式请参见：

推荐阅读

点击“阅读原文”查看更多精彩内容