基于 Flutter 的⼩程序框架实践 - ctrip.comFutter 1.9 版本发布 dart:ﬃ •ﬃ：Foreign...

基于 Flutter 的⼩程序框架实践

任宇杰 @美团点评⽤户平台

⽬录

⼀. Flutter Mini Program（FMP）的由来

⼆. Flutter 体系与⼩程序的 Web 体系对⽐

三. FMP 所做的⼯作

四. FMP 取得的成果

五. FMP 的未来

⼀.Flutter Mini Program （FMP）的由来

Flutter 框架的优缺点

• 优点

• ⾼度跨平台

• Dart AOT 执⾏

• 缺点

• 没有动态化特性


• 总结

• ⽐较适合对于动态性要求不⼤，但⼀致性和性能要求⽐较⾼的场景


• 总结

• ⽐较适合对于动态性要求不⼤，但⼀致性和性能要求⽐较⾼的场景

• 例如做业务容器

美团业务容器现状

Titans（H5）

Native 基建

Meituan React Native Meituan Mini Program

H5 代码 RN 代码⼩程序代码

是否需要引⼊ Flutter 作为⼀个新的业务容器？

Titans(H5)

Native 基建

Meituan React Native Meituan Mini Program Fluttter?

H5 代码 RN 代码⼩程序代码 Flutter 业务容器代码?

使⽤ Flutter 构建⼩程序框架的契机

• 直接使⽤ Flutter 作为业务容器：

• 迁移成本⼤

• 美团⼩程序框架现存的问题：

• ⽆法修改浏览器渲染过程

• native 部分开发需要 x 2 ⼈⼒

美团业务容器现状

Titans

Native 基建

Meituan React NativeMeituan Mini

ProgramFlutter Mini

Program

H5 代码 RN 代码⼩程序代码

⼆.Flutter 体系与⼩程序的 Web 体系对⽐

Flutter UI 体系和 Web 体系有什么相同之处？

UI 代码编写上，Flutter 与 React ⻛格相似

Flutter React

build(BuildContext context) { return Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }

render() { return ( <div class=‘container’> <div class=‘content’>Hello world!</div> </div> ); }

Flutter 提供的很多 Widget 属性在 CSS 中可以找到对应

Flutter Widget CSS

Flex( mainAxisAlignment, crossAxisAlignment, … )

justify-content, align-items, …

Text( letterSpacing, wordSpacing, … )

letter-spacing, word-spacing,

Flutter UI 体系和 Web 体系有什么不同之处？

Flutter 不存在 CSS 中的选择器以及样式匹配过程

Flutter Widget CSS Selector

Container

Text

<div class=‘container’>

<div class=‘content’>

#container { flex: 1 }

backgroundColor: red fontWeight: 5

#content { backgroundColor: red fontWeight: 5 }

flex: 1

Flutter 布局流程与 CSS 布局流程不同

Flutter Widget CSS Selector

Container

Text

<div class=‘container’>

<div class=‘content’>

#container { flex: 1 }

backgroundColor: red fontWeight: 5

#content { backgroundColor: red fontWeight: 5 }

flex: 1

Flutter 仅布局⼀次 CSS 可能会布局多次

Flutter 布局实现与 Web 布局实现细节仍有很多不⼀致

Flutter 布局 CSS 布局

Flexible(flex: 1) Flexible(flex: 1) Flexible(flex: 1) style=“flex:1” style=“flex:1” style=“flex:1”

Text(‘1’) Text(‘2’) Text(‘3’) <text>1</text> <text>2</text> <text>3</text>



Flexible(flex: 1) Flexible(flex: 1) Flexible(flex: 1) style=“flex:1” style=“flex:1” style=“flex:1”


Flex 容器

Text(‘1’) Text(‘2’) Text(‘3’)

Flex 容器

<text>1</text> <text>2/text> <text>3</text>



style=“flex:1” style=“flex:1” style=“flex:1”

<text>1</text> <text>2</text> <text>3</text>

Flex 容器


Flutter 布局

Flex 容器


Flexible(flex: 1, fit: .tight )






Flex 容器

<text>1</text> <text>1</text>

Flex 容器





style=“flex:1 2 300px”




<text>1</text>



Flex 容器


Flex 容器









flex-shrink flex-shrink

Flutter 事件体系与 Web 事件体系不匹配

Flutter 事件体系 Web 事件体系

捕获

冒泡冒泡

捕获

三.FMP 所做的⼯作

⼀. FMP 运⾏基本流程

⼆. 让 Dart 能够执⾏ JS：从 dart:jsc 到 flutter_jsc

1.FMP 运⾏基本流程

通过 cli 处理⼩程序源码，在运⾏时进⾏解析

wxml

⼩程序源码

wxss

js

json

cliFMP

package

FMP SDK

CSS Parser

JSContext

Dom Generator

…

Flutter Engine

通过 wxml 构建 template tree、dom tree

FMP Runtime

wxml DSL

template tree dom tree

⽐ template tree 多了 wxml 中 {{}} ⼤括号表达式的值

JS 层仅负责数据，通过 JSContext 为 dom tree 填充数据

FMP Runtime

dom tree JSContext

FMP JS Framework

Data

{

data: {

“text”: “hello world”,

“isLogin”: true,

…

}

{{data.text}}

“hello world”

{{data.text}}

模拟浏览器的流程，实现 CSS 选择器匹配过程

FMP Runtime

dom tree

wxss

css rule tree

.container { … }

.container { … }

.class { … }

#id { … }

#id { … }

#id { … }

#id { … }

①parse

②style

match

③style

calculate“hello world”

dom tree 含有完整的样式信息

FMP Runtime

dom tree

wxss

css rule tree

.container { … }

.container { … }

.class { … }

#id { … }

#id { … }

#id { … }

#id { … }

①parse

②style

match

③style

calculate

style style

style

“hello world”

style

将 dom tree 转化为 Flutter 体系中的 widget

FMP Runtime

dom tree widget tree element tree render object tree

style style

style

“hello world”style

通过注⼊的⽅式为 Flutter 的事件体系增加捕获过程

FMP Runtime

widget tree element tree FMP render object tree

通过重写布局算法（如 Flex）实现布局细节的统⼀

FMP Runtime

widget tree element tree FMP render object tree FMPBoxRend

erObject

FMPFlowLayout

FMPFlexLayout

…

2.让 Dart 能够执⾏ JS：从 dart:jsc 到 flutter_jsc

如何让 Dart 代码和 JS 代码互通有⽆？

Dart JSContext

FMP JS Framework

Data

{

data: {

“text”: “hello world”,

“isLogin”: true,

…

}

{{data.text}}

Android 和 iOS ⼀般使⽤ JavaScriptCore 实现与 JS 交互

JavaScriptCore(JSC)

…

Flutter 并不直接提供和 JSC 沟通的能⼒

Dart JSC(C++)

通过 Platform Channel 来和 JSC 通信

Dart JSC(C++)

Dart OC/Java JSC(C++)

PlatformChannel (async) JNI / OC 与 C++ 混编


Dart JSC(C++)


MXFlutter 基于这种⽅案实现动态化



Dart JSC(C++)


但这种⽅式不适合 FMP 的场景


Dart 代码有别的办法调⽤ JSC 来执⾏ JS 代码吗？

Dart JSC(C++)

Flutter 中⼀些 dart package 就是利⽤ C++ 实现的

dart:ui

第⼀个版本：修改 Flutter 引擎，在引擎层⾯增加 JSC ⽀持

Flutter Framework

Dart

C++

Platform Specific

dart:core dart:convert dart:jsc

c++ binding

Dart:isolate …

C++ Implementation

thread render …

JSC

dart:jsc 的缺点

• 需要修改引擎代码，具有侵⼊性

• 引擎开发成本⾼，导致维护以及升级成本变⾼

Futter 1.9 版本发布 dart:ffi

• ffi：Foreign Function Interface，指不同编程语⾔之间可以互相调⽤的机制

• dart:ffi 为我们提供了 dart 代码与 C 函数互相调⽤的能⼒

flutter_jsc (flutter plugin)

C++

Dart

当前版本：利⽤ ffi 构建 flutter_jsc plugin

Flutter Framework

Dart

C++

Platform Specific

dart:core dart:convert dart:ffi

C++ Implementation

thread …

package: flutter_jsc

c++ binding

JSC

四.FMP 取得的成果

完成对美团会员中⼼的⻚⾯适配，与 RN 对⽐性能提升 10%-40%*

FMPRN

测试设备：三星 n9008s 测试基准： - 本地冷启动 - ⽆⽹络请求⼲扰

* 会员中⼼是⼀个中等布局复杂度⻚⾯代表 *⾸次启动性能优化在 40%左右，⼆次启动在 10%左右

完成对美团⽣活⾸⻚的⻚⾯适配，与原有美团⼩程序对⽐提升 50 %*

FMP 美团⼩程序

测试设备：iPhone Xs 测试基准： - 本地启动 - ⽆⽹络请求⼲扰

* 美团⽣活⾸⻚是⼀个复杂布局⻚⾯代表

五.FMP 的未来

⼀. 完成和原有⼩程序引擎的双引擎融合⼯作，实现按照⻚⾯切换引擎的能⼒

⼆. 继续完善 FMP 在布局上的能⼒范畴，⽀持更多的 CSS 样式

未来的计划

🎊 One More Thing

xinfeng-tech/fvm: Flutter SDK versions Manager

基于 Flutter 的⼩程序框架实践 - ctrip.comFutter 1.9 版本发布 dart:ﬃ •ﬃ：Foreign...

Documents

Transcript of 基于 Flutter 的⼩程序框架实践 - ctrip.comFutter 1.9 版本发布 dart:ﬃ •ﬃ：Foreign...