flutter可视化_开源Magpie：58 跨平台技术应用及 Flutter 实践概览

开源项目专题系列(八)1.开源项目名称：magpie，magpie_sdk，magpie_fly，magpie_log2.github地址：https://github.com/wuba/magpiehttps://github.com/wuba/magpie_sdkhttps://github.com/wuba/magpie_flyhttps://github.com/wuba/mag...

weixin_39846186

662人浏览 · 2020-11-29 20:56:37

weixin_39846186 · 2020-11-29 20:56:37 发布

开源项目专题系列(八)

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月份开源。

live58技术沙龙活动第五期“Flutter在58的应用实践系列话题”本周日晚7:00准时开幕点击图片即可报名抢座

58跨平台技术应用

由各种不同需求要求，及每种跨平台技术限制，现在的项目里混合了多种跨平台框架，不同的需求要求，需求阶段采用不同的跨平台技术。

1. Hybridweb+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的研发管理工作。