点击上方“开发者技术前线”，选择“星标”
13：21 在看 真爱
做者: 京东商城共享技术部 | 来源：京东商城技术团队前端
责编： 可可react
前言ios
JDFlutter 是商城共享技术部-多端融合技术部推出的新一代跨平台开发框架，可快速集成至现有 Android/iOS 工程，开发者可借助 JDFlutter 平台快速完成 Flutter 业务开发。JDFlutter 平台提供了大多数京东样式 UI 组件库以及丰富的原生 API，可知足复杂业务需求。将来 JDFlutter 会和 JDReact 一块儿构成京东 ARES 跨端应用开发平台的双引擎！git
Flutter 简介web
Flutter 是 Google 公司2018年2月27日发布的第一个开源跨平台软件开发工具包 （SDK），支持Android、iOS两个平台，可实现高性能、高保真的应用程序开发。开发者借助 Flutter 开发平台可轻松实现本身的应用，其开发框架默认支持了 Material（相似 Google 设计风格）和 Cupertion（相似 iOS 设计风格）两种风格，且不管从UI样式、用户体验上都很是接近原生应用。通过近7个月的优化改进2018年9月19日 Google 公司在上海正式发布很是接近1.0正式版本的 Flutter Release Preview 2，基于其优越性能 Flutter 有望成为将来应用开发的主流工具。网络
Flutter 相似且优于 Html、React Native、Weex 等跨平台解决方案。ReactNative 将 JSX 生成的代码最终都渲染成原生组件，JS 与原生经过 JSBridge 传递数据。而 Flutter 则采用彻底不一样的设计，底层是一套独立的渲染引擎–Skia，全部组件也都是独立于平台的 Widget 组件，能够在最大程度上保证了跨平台体验的一致性。架构
京东目前已经有很是成熟的跨平台解决方案 JDReact，如何在 JDReact 与 Flutter 中选择合适的开发方案？咱们认为若是是须要进行线上业务包升级、热修复等动态更新的状况，优先选择 JDReact；没有动态更新需求的能够选择 Flutter。框架
目前闲鱼 APP 和美团 APP 已在部分页面尝试接入 Flutter，根据公开的信息咱们对比了三家 Flutter 方案：前端性能
集成与调试svg
1Flutter包集成
现阶段如要开发一个全新的 App，Flutter 是个很好的选择，做为新一代跨平台解决方案，使用 Flutter 官方提供的建立脚本、建立工具便可开发完成。然而在大多数状况下，咱们面临的是现有 APP 已上线好久，新的页面或者部分页面的改造须要尝试去使用 Flutter 开发，在这种状况下，咱们须要建立一个 Flutter 模块，用于完成 Flutter 页面开发，并为现有 APP 做为宿主工程添加对 Flutter 模块的依赖。
兼顾到不须要 Flutter 开发环境的同事，咱们对编译脚本进行了修改：
▲编译开发环境配置
Flutter 开发须要在本地配置完整的开发 SDK，并增长 jdFlutter.debug 标志，若是开发人员不是作 Flutter 开发的就不用设置此标志，若是是开发 Flutter 的研发则须要配置一下此标志进行本地代码开发。经过这样的方式，能够作到 Flutter 开发不影响现有工程的编译。Flutter 业务代码采用 git submodule 的方式进行代码管理，Android、ios 工程仅需设置好对Flutter的依赖便可。
▲git 库管理
2JDFlutter 设计框架
▲JDFlutter 架构图
最底层提供了灰度、降级容灾、数据统计等功能，这些功能都统一接入后台管理系统。
中间层为核心开发包：JDFlutter-core-widgets 为 JDFlutter UI 组件库，样式等都知足了京东设计规范，目前支持了 Button、CheckBox、Dialog、mage、Loading、NavgationBar、Text、PullToRefresh 等。Flutter 框架内集成了两种风格的 UI 组件库：一种是 Google Material 设计风格，另外一种为 Apple Cupertion 设计风格。这两种设计风格能够很好知足开发者对样式的需求，与原生页面无异。然而当集成到京东客户端时，这些样式并不能知足需求，所以咱们提供了适合手机京东（京东 APP）的 UI 组件库（不断完善中）。
JDFlutter-core-lib 为 Dart 与原生之间通讯的桥梁，咱们提供了原生接口，如：网络请求 JDNetwork、设备相关 JDDevice、页面跳转 JDJumping、埋点 JDMta、分享 JDShare、异常上报 JDReporter 等。
最上层为接入层，包含了业务开发集成、Android/iOS 两端客户端的集成。
▲JDFlutter 提供的组件库和 API demo
3打通 JDReact Native API
在 Flutter 以前，京东已有了很是成熟稳定的跨平台开发解决方案 JDReact。在 JDReact 框架中，已经封装了很是多的 Native API，经过 JSBridge 传递原生与 JS 之间的数据。
为使 Flutter 具有众多京东 App Native API 访问能力，有如下办法：
按照官方 platform channels（https://Flutter.io/platform-channels/）写法，封装 Flutter Api；
按照 Plugin 的方式，将每个 Native API 写成 plugin；
所有复用 JDReact 已有 Native API。
目前 JDReact 提供的 Native API 有上百个，而且都通过了严格的测试。若是按照前两种方式，想要逐渐对标 JDReact native 能力，工做量将会变的很大，且须要大量的测试工做。所以咱们采起了最后一种方式，所有复用现有 JDReact Native API：经过定义统一接口的方式，对原有 JDReact 框架进行了改造，以下图为改造后的框架架构图：
▲JDFlutter 复用 JDReact API 框架
Adapter 层中 Native 代码分别实现了 React Native 与 Flutter 对应接口，JDReact 经过 JSBridge 将 Native API 暴露给 JS，JDFlutter 经过 MethodChannel 将 Native API 暴露给 Dart。为了后续的开发方便，咱们分别在 JS 与 Dart 侧进行了二次封装，保证了在无需知晓原生实现的状况下能够顺利的进行业务开发。
4业务集成
目前 Flutter 业务包集成还不支持相似 JDReact 拆分打包–不一样的业务本身打本身的，相同的 lib 部分不打进去的分包机制，解决办法是将全部业务都打成一个包，解析原生传递的路由及跳转参数信息，由内部路由决定跳转逻辑。
▲业务路由与参数传递
main.dart 为主入口，接受原生传递的跳转协议，进行参数解析，并决定业务路由，进行路由分发，同时将跳转参数 params 传递至各业务入口。
▲业务集成目录
为了实现业务包的线上集成，全部的业务代码都位于 lib 目录下。同时为保证不一样开发者之间互不影响，每一个业务都在 lib 目录下单独管理，相应的与自身业务相关的图片资源也独立管理。assets 文件夹存放的是公共资源，不一样的业务均可直接引用位于该目录下的资源。
5调试
不少开发 JDReact 的小伙伴都是前端开发对 Android/iOS 原生 APP 有可能不熟悉。为了开发与调试的方便咱们在 MarsWorks 后台增长了 JDFlutter 调试功能，以下图：
▲开发调试 IDE
Flutter 业务开发只须要在手机上安装好咱们提供的 apk 安装包，手机链接电脑后，点击“启动 Flutter 调试”绑定手机，修改代码后点击“Reload”按钮便可实现 Flutter 热加载。
将来咱们会增长对 ios 模拟器的支持，点击“启动 Flutter 调试”便可启动模拟器直接跳转到对应的页面。
6Demo 演示
这是手机京东使用 JDFlutter 改造的签到排行榜页面，页面原先使用 JDReact 实现。改造后的页面操做很流畅，总体的用户体验很是接近原生，几乎很难分辨是用原生仍是 Flutter 实现。接下来逐步会有更多的页面、场景来尝试使用 JDFlutter。
▲JDFlutter 签到排行榜
数据统计
JDFlutter 对线上数据进行统计主要包括业务数据和异常数据，不管是哪一方面的数据出现异常，都要及时采起措施。
1业务数据统计
业务数据主要包含业务的 DAU、UV、PV 等基础数据，有如下方案能够统计：
▲数据统计
方案1：在原生跳转入口处增长埋点。
方案2：在Flutter入口main路由中增长页面埋点。
方案3：在Flutter业务页面中增长埋点。
以上3种方法均可以统计出页面数据，方案1能够统计出入口的数据，方案2能够统计出除降级之外的业务数据，方案3能够统计出更精确的业务数据，同时能够提供更详细的其余字段如进入页面时从后台下发的数据。
JDFlutter 框架已经默认支持了方案1和方案2两种数据统计，对这两种数据进行分析不只能够看出降级率，也能够看到 JDFlutter 页面启动状况；第3种方式的数据须要接入的业务根据须要完成添加。
2异常数据监控
业务上线后会遇到各类各样的问题，异常收集与分析就显得尤其重要。咱们经过收集如下几种异常来对异常进行分析：
▲异常监控
后台收集到的异常为了可以更好的分析是哪一块业务代码出现问题，咱们在异常数据中加入了业务名称，以及跳转时的参数信息，能够作到有针对性的对 dart 代码的异常进行分析，若是某个业务异常量暴增，咱们会对其进行降级处理。
降级容灾
▲JDFlutter 业务降级容灾图
其中降级容灾池数据由后台下发，包含每个线上业务的降级状况，这其中包括：JDFlutter 业务名称，对应业务的 JDReact 名称，以及该 JDReact 业务的降级 h5 url。降级的过程为：从降级容灾池中取出与之对应的 JDReact 业务名，判断是否能够对该 Flutter 业务降级至 JDReact 业务。
若JDReact业务可用，降级至JDReact业务
若JDReact业务不可用且有h5降级页，则降级至h5页面
若JDReact业务不可用且无h5降级页，JDFlutter统一错误页
若无JDReact业务可降级且有h5降级页，降级至h5页
其余状况，统一显示JDFlutter统一错误页
以上的降级容灾图包含了全部可能的异常。这里值得一提的是为何咱们首先降级至 JDReact：因为咱们目前 JDReact 的业务接入已有140多个，可能对这些业务部分优先尝试使用 JDFlutter，为了不线上会遇到的各类问题，咱们首先将其降级至原来的 JDReact 页面不只能够保证业务的正常运行，用户体验也能够获得保证。
对将来的展望
目前 JDReact 多端融合平台仍然是京东 APP 主要的跨平台开发方案，京东内部接入 JDReact 的 App 有十几个，接入的 JDReact 业务已有140多个，将来会有更多的 JDReact 业务接入。JDFlutter 做为咱们接入的第二个跨平台引擎，未来会不断有新业务接入，会有更多新场景使用 JDFlutter 实现。
将来咱们会继续完善 JDFlutter 这个新一代的跨平台开发方案，将多端融合平台打形成一个具有 ReactNative 和 Flutter 双引擎开发的平台。
参考文献：
名词解释
JSX：是 react native 的语法格式
JSBridge：原生与 js 之间经过 jsbridge 传递数据
Skia：Flutter 的渲染引擎
Widget：是 Flutter 组件
桥接：就是原生与 Flutter 之间通讯的桥梁
分包机制：就是把不一样的业务本身打本身的，相同的 lib 部分不打进去
Native Api 能力：就是 Flutter 能够调用京东 App 原生方法的能力
Plugin：是 FLutter 原生与 dart 通讯的一种方式，还有一种是 methodchannel
END
开发者技术前线 ，聚集技术前线快讯和关注行业趋势，大厂干货，是开发者经历和成长的优秀指南。
历史阅读
腾讯新闻前端性能监控实践
知乎客户端跨平台 Hybrid 调试实战
移动帝国的消亡史，这十年经历的技术风雨
好文就点个好看吧