移动平台化在中通的实践

如果无法正常显示，请先停止浏览器的去广告插件。

2. 2021 移动平台化在中通的实践演讲人：蔡彦芝日期：2021.05.22

3. 目录 CONTENTS 1 大前端时代的移动端架构体系 2 跨端技术在中通的实践 3 高效率移动研发 4 未来展望

4. 思考-大前端时代移动端框架需要解决的问题? 模块化组件化模块的单独运行，单独打包，单独发布，快速集成。模块之间的通信机制。跨端技术的融合端上如何和跨端技术进行高融合，做到页面的秒开，预下载预加载，缓存内置等。高效的测试测试阶段的快速抓包，快速定位问题能力，帧率，内存，启动时长等问题在测试阶段暴露线上运维能力配置下发，线上回滚，APM、埋点、日志、舆情相关的数据的查看，快速定位问题

5. App架构体系设计图 App选择对应的业务模块进行组合即可 App1 App3 App2 App4 App5

6. 通信协议的标准化解耦合注册统一的路由，通过路由协议进行各个模块的通信，降低模块之间的强依赖，屏蔽页面打开的细节逻辑基于路由对多技术栈容器进行整合，发布对应资源文件后，基于路由可以动态跳转可移植动态性模块移动到任意App访问对应的路由即可打开相关的页面和访问相关的业务逻辑

7. 脚手架工具-移动研发生命周期管理的利器 01 创建模块 02 发布工程 03 集成提供统一的脚手架工具创建iOS、安卓模块或者应用，生成默认可执行的工程,并且配置相关的发布脚本，基础路由等，方便业务快速开发业务模块标准化的发布脚本，可以自动生成版本号，发布到统一的内部私有仓库管理中，方便安卓iOS快速集成接入 05 输入内容

8. 目录 CONTENTS 1 大前端时代的移动端架构体系 2 跨端技术在中通的实践 3 高效率移动研发 4 未来展望

9. 跨端技术的选择 ReactNative 调研了目前ReactNative的生态，从上手程度动态性、生态、性能、稳定性等全方面考虑，选择了基于ReactNative最新版进行RN生态的搭建，推出基于中通业务级别的ZRN框架跨端技术 H5 只要是移动端应用，必不可少的就是H5页面，针对H5我们统一内部对接页面的免登方案，并针对端上H5做了大量的优化（预下载、预加载、离线包等），使H5页面在端上快速加载展示 ReactNative VS H5 对体验和性能有一定要求的，选择ReactNative方案活动页面，灵活度高的一些页面、三方接入的页面选择H5

10. ZRN-ReactNative在中通的实践 01 基于ReactNative最新版打造的ZRN框架打造全链路闭环的脚手架工具，极其方便的开发、调试和发布流程。 02 多端统一 iOS、安卓、Web端的全链路打通，一次开发全端使用。， 03 端上的高性能优化拆包，基础包和业务的拆分大大减少发布的包大小，在端上实现预下载、预加载等多级别优化控制使得页面达到在端上的体验达到秒开。

11. ZRN-ReactNative在中通的实践-脚手架发布成功之后，后台页面可以配置上线、下线灰度的逻辑，端上通过统一的zrn的路由即可访问新发布的页面。

12. H5容器 01 丰富的原生组件能力统一了内部所有H5页面的免登方案，提供了大量的业务和非业务的原生能力，让H5更加专注业务开发 02 标准化桥接能力提供了标准化的JS和原生的通信协议，模块快速做到无侵入式的协议实现既可支持JS Call的能力 03 端上的高性能优化离线包、缓存、资源对比、预加载、预下载等多种方案加快H5页面在端上的打开速度

13. 目录 CONTENTS 1 大前端时代的移动端架构体系 2 跨端技术在中通的实践 3 高效率移动研发 4 未来展望

14. 移动研发效率 – 思考如何高效率研发开发阶段 1. 2. 3. 4. 如何生成多技术栈的模板？如何快速调试代码？如何快速集成？业务如何分发？测试阶段 1. 如果快速定位问题？ 2. 如何能够跟踪客户端异常情况？上线阶段 1. 如何做到快速回滚？ 2. 如何做到快速发布？ 3. 如何跟踪用户反馈的问题？

15. 移动研发效率 – 移动研发平台

16. 目录 CONTENTS 1 大前端时代的移动端架构体系 2 跨端技术在中通的实践 3 移动研发的效率 4 未来展望

17. 未来展望移动平台化将目前基于脚手架能力、线上运维能力、整个移动端devOps能够能够更加彻底的平台化可视化出来，更加方便的提升开发效率和增加应用的稳定性和健壮性。高效的页面搭建 GraphQL+低代码平台+端上渲染，充分利用各个端的灵活性，基于ql+低代码平台进行数据的绑定和页面的拖拽，生成客户端可识别的DSL文件最终渲染为原生，我们目标是希望能够将纯数据展示页面和form表单页面做到100%的配置化，部分交互性多的页面也能够做到一定的覆盖。 UI一致性统一目前移动端产出的Bug，很大一部分程度上都是UI不一致导致的问题，为了解决UI不一致的问题，和设计部合作，基于原生、RN、H5推出移动端组件库解决方案，降低整个UI一致性问题。

18.