开源项目专题系列
（八）
1.开源项目名称：magpie，magpie_sdk，magpie_fly，magpie_log
2.github地址：
https://github.com/wuba/magpie
https://github.com/wuba/magpie_sdk
https://github.com/wuba/magpie_fly
https://github.com/wuba/magpie_log
3.简介：58跨平台技术应用实践， 现有Hybrid、ReactNative、小程序跨平台框架的性能问题。介绍58对Flutter混合工程的工程化思考，及Magpie一体化解决方案平台概览，于2020年4月份开源。
58跨平台技术应用
由各种不同需求要求，及每种跨平台技术限制，现在的项目里混合了多种跨平台框架，不同的需求要求，需求阶段采用不同的跨平台技术。
1. Hybrid
web+native的混合开发，页面展示核心逻辑由于webview渲染，交互功能及扩展功能由Native扩展实现，通过JSBridge做双向通信。从技术实现上看，具有如下的缺陷：
- webview的碎片化，适配成本高：Android 4.4之前是webkit内核，4.4之后是chromium内核，第三方的X5内核；iOS 8.0之前是UIWebview，8.0之后是WKWebview；
- Javascript的解释运行，性能差：渲染及逻辑都由JS负责，加上JS的解释执行，交互效果比较差；
- JSBridge通信成本高：数据量传输限制，通信频繁且异步通信；
2. WubaRN
分离渲染与逻辑，JS负责逻辑，Native渲染UI，通过Bridge异步通信，包含三个线程：UI Thread，Shadow Thread，Javascript Thread。从技术实现上看，具有如下的缺陷：
- Javascript的解释运行：业务逻辑及MVVM的diff操作都由JS负责，同时JS解释运行，导致Javascript Thread的掉帧严重；
- 过度依赖Bridge且异步通信：当列表快速滑动且有大量业务通信时，容易出现白屏，优化成本很高；
- 依赖OEM Widgets导致适配成本高：需要分别适配不同平台。
3. 小程序
分离渲染层与逻辑层，渲染层由MVVM框架实现，逻辑层由App(), Page()实现，通过Native通信，异步请求由Native实现，提升性能及对JS的管控性，但也有其本身的缺陷：
- Javascript的解释运行
- 过度依赖Native通信
- 无法复用现有的OEM Widgets
在跨平台框架的底层，有统一的基础能力库，通过封装，统一底层能力及相应的通信协议。其他上层，通过转译框架，实现一套代码，多次编译，如wwto框架。
Flutter
Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web, and desktop from a single codebase.
Flutter的灵感来自于React，并从底层实现解决了ReactNative的问题，通过官方文档可得知如下典型特点：
1. 高性能
- Debug采用JIT编译为字节码，实现Hot reload；Release采用AOT编译为机器码，实现静态编译运行，大大提升运行效率；
- 不依赖OEM Widgets，直接通过Skia渲染，减少平台适配工作；
- 不依赖Bridge，直接通过Skia渲染，大大减少Bridge通信成本。
2. 开发效率
- 声明式布局，一切都是Widget，同样的业务，代码比Java要少将近一半的代码
- 不依赖OEM Widgest，基于Skia，统一UI，减少平台适配工作；
- Debug的JIT编译，热加载（hot reload）；
- 全栈（iOS，Android，脚手架，Web，Desktop），减少不同语言的学习成本。
Flutter工程化上的问题
工程化即系统化、模块化、规范化的一个过程。目的在于提升软件开发效率，降低工程实施难度。
混合的方式引入Flutter，需要实现混合开发的工程化流程，实现持续交付能力，涉及如下几个方面：
1. 开发阶段
- 混合开发框架：不同角色的代码及编译解藕，add to app的Dart视角的编译会藕合Native代码，只有Widgets的变更时，Hod Reload才会生效，而Cold Reload的编译时间过长；
- 模块化 & 组件化：由于商业应用的业务很复杂，需要模块化能力，实现分业务线的并行开发；由于功能的复杂及类似，需要组件化来实现Widgets的复用，提升效率；
- 编译：在不同角色的解藕的基础上，实现快速方便的整体编译。
2. 测试阶段
质量与性能测试是持续交付里最重要的环节，与其他技术类似，主要包括静态代码扫描，单元测试，性能监控及基于Redux的Bug回放。
3. 开发部署
主要是指Debug下的JIT编译及AOT编译，能快速便捷的发布JIT及AOT产物，自动依赖到混合工程里。
4. 发布部署
通过AOT编译为机器码，大大提升了运行效率，但也大幅提升了包大小，尤其是对于推广及内置渠道，对于发布的AOT编译比开发阶段的更加的严格，更进一步的手段就是业务的动态更新功能。
Magpie开源项目
实现Flutter混合工程的工程化，实现一站式研发解决方案，其基础是实现一个管理平台，类似Expo里的Managed Workflow，实现创建、开发、编译、打包、部署的全流程的持续交付，同时具备灵活的扩展能力，这个平台我们称为Magpie。
Mapgie涉及四个开源库：
- magpie：类似Expo的Managed Workflow的可视化管理流程，整合每个阶段的工具，使用Dart全栈实现
- magpie_sdk：与 magpie 可视化管理流程配套的 Native SDK
- magpie_fly：Widgets管理App及组件库
- magpie_log：可视化圈选埋点框架
Flutter工程化的关键是实现Dart视角的创建、开发、编译、发布流程自动化及可视化。同时可以不断扩展新工具，不断扩大自动化的范围，不断提升开发效率。magpie_workflow开源项目就是为了这个目标而打造的可视化管理平台，现已经包含了开发阶段及开发部署过程中的大部分工具及能力。后续会不断增加新的功能。
另一个影响开发效率的是组件库，如果能实现文档及效果的快速预览，全业务同学能快速便捷的贡献新的组件，可以大幅提升开发效率，magpie_fly开源项目基于这个目标，参考Material-UI的效果，实现快速预览及贡献。
大部分的产品决策都是由数据驱动，数据驱动的关键是埋点，Native经过不断的发展，从最初的手动埋点，到现在主流的可视化圈选埋点、无痕埋点等自动埋点方案。由于Flutter是基于MVVM的响应式UI框架，分为Widgets、Elements、RenderObject三层，基于属性做Widgets编程，无法直接复用Native的xpath思想来实现圈选埋点。magpie_log可视化圈选项目如何实现类似xpath的唯一控件ID定位，敬请期待接下来的直播分享。
展望
Magpie平台是一个不断发展，不断完善的平台，现在主要完成基本可视化管理流程，对应阶段的能力还需要不断的增加和完善，希望能通过开源社区的力量，一起完善Magpie平台。
刘阳 / 58同城 Android 负责人，高级架构师，58技术委员会 无线通道 分会主席，2011年加入58同城。目前主要负责同城、同镇、赶集、英才Android App的研发管理工作。
参考文献
1. Expo（https://expo.io/）
2. Flutter（https://flutter.dev/docs）
与项目成员零距离交流？
扫码加入项目群
一切应有尽有
如群已满，可添加“58技术小秘书”微信 : jishu-58
添加小秘书微信后由小秘书拉您进项目交流群
END
閱讀更多 58技術 的文章
