Flutter到家助手实践

目的

从2019年8月起“到家助手App”在团队正式使用Flutter进行App开发,其中Flutter开发页面占比约70%。目前此占比在行业内是比较高的一个值,而Flutter做为一个比较新的“跨端开发框架”,在引入过程中遇到了不少问题,踩了不少坑。所以本文会介绍团队是如何引入Flutter到现有App开发的过程,供读者参考借鉴。

Flutter概况

在介绍引入Flutter技术前,需要介绍一下Flutter是什么?Flutter是谷歌的跨端移动UI框架 ,可以快速在iOS和Android上构建高质量的原生用户界面。

从2018年12月1.0版本正式发布,就受到移动研发工作者的广泛关注与应用,如上图所示:在GitHub上的Stars 数量是68,000 ,使用了短短一年,在Stars数量上就接近了同行业领头羊React Native(以下简称RN),RN从发布至今已经有 4 年有余,拥有较为完善的开发生态。

跨端方案选择

每个移动前端团队在提升开发效率上都会重点关注跨端方案的选择,目前行业主流方案有两个分别是RN与Flutter,接下来会从四个方面对两个主流跨端方案进行对比:

成熟度:RN已经发布多年,行业对其也比较认可,积累了丰富的开发组件。所以在此方面RN目前更有优势,但随着时间推移,而且在Google的大力推动下,会有越来越多开发者的参与,相信不久的将来Flutter开发生态也会越加成熟;

性能:在渲染技术方面Flutter 一开始就定义了一个目标:“以每秒120帧的速度持续渲染”,正是基于此目标,Google选择了自己实现(GDI),避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题。

如下图所示,在XCode里的Debug View Hierarchy可以看到,Flutter View的布局是一个整体。而RN的渲染上采用的是把<View>标签里的内容转成原生View,虽然比基于Cordova的HTML5好很多。但一旦遇到嵌套层级多view的情况时,就很容易出现页面渲染瓶颈。所以在性能方面比RN更胜一筹。

调试效率:Flutter 在Debug时“革命性”的引入JIT(动态编译),在开发过程中Flutter通过JIT 可以实现中Hot Reload (热更新),开发者可以在不用重新运行程序的情况下就可以快速刷新开发页面,提升了开发效率。

而Release时使用的是AOT(静态编译),效率等同于原生的代码的执行效率。所以在调试效率上的表现,Flutter也更优于RN;

UI一致性:“一套代码,多端运行”是跨平台开发方案都在倡导的,但在UI一致性上RN让很多开发者又爱又恨。

因为RN框架本身不负责界面渲染,而是由原生代理实现。所以开发者除了要掌握RN框架外,还必须同时熟悉 iOS 和 Android 系统的前端匹配等相关知识。

而Flutter则闭环了渲染过程,不依赖于底层操作系统提供的任何组件,从根本上保证了视图渲染在 Android 和 iOS 上的高度一致性。近期Flutter还发布了Web方面的支持,未来前景可期;

局限

对一项新技术不能全看优势的方面,也要看到一些局限的地方,Flutter局限地方如下:

  • 包大小提升:使用Flutter后应用包大小会明显提升,iOS ipa包会变大10M左右,Android apk包会变大6M左右;

  • 学习成本高:Flutter作为全新技术学习成本较高,是众多开发者犹豫进场的最主要原因;

  • 生态相对弱:Flutter作为新技术在第三方库数量相对较少,很多功能需要自己造“轮子”;

  • 原生功能限制:部分原生功能Push、地图、定位、蓝牙等功能还是需要借助原生实现;

组员学习

针对Flutter“学习成本高”这一问题,团队在引入新技术到团队开发之前,前期先整理Flutter的学习框架,再根据团队情况与时间排期,进行了学习项优先级分阶。

上图中的标红项,“基础Widget”、“网络与存储”、“工程管理”、“打包”等四项是需要优先组织团队培训学习。另外,其他项如“测试”、“调试”、“线上运维”等其他项为非业务阻碍项,就暂时调低其学习优先级。

在确定了学习优先级后,分两期对组员进行内部培训,第一期内容是“基础Widget”使用,第二期是“网络与存储”与“工程管理”。经过一个月的培训,使团队的每个成员具备了Flutter的基础开发能力,可以进行业务开发。

另外,笔者也建议大家要学习上图的其他项,像“状态管理”,“跨组件通信”等,都是将来学习或开发第三方Flutter插件的重要基础。

落地项目

确保团队成员有开发能力后,就要去思考如何进行落地项目? 在落地项目的程中,需要面临的问题有三个,分别是“协同开发”,“混合开发”和“容灾降级”。

问题

  • 协同开发:由于是Dart是新的开发语言,而团队的原技术栈分别是Android与iOS,所以需要解决三端代码管理与协同开发;

  • 混合开发:大多数的项目是需要采取混合开发(Android/iOS +Flutter),那么Native页面与Flutter页面的相互跳转,是需要关注并解决的问题;

  • 容灾降级:在Flutter技术引入前期,我们对部分Native页面进行了Flutter改造,所以要考虑极端情况下,若Flutter页不可用可以降级回原来的Native页面;

“协同开发”方案

“协同开发”需要关注的事项有三个,分别是“代码仓库模式”、“原工程支持Flutter开发”、和“混合栈框架”,接下来分别对这三个事项进行详细介绍。

两种仓库模式

谈到协同开发就需要涉及到代码仓库调整,所以需提前介绍一下Flutter开发的两种模式,其中一种是“混合模式”,另外一种是“产物模式”,以下是两种模式的优缺点说明:

在经历前期培训后,团队组员已掌握Flutter的开发技术,所以“混合模式”在当前情况下,是比较适合我们团队的代码管理方式。未来会考虑迭代使用“产物模式”来进行代码管理,这样的好处是将来稳定的功能模块可以实现组件化。

原生工程支持Flutter开发

iOS平台配置

可能需要做一个假设,你已有的iOS工程路径在 ~/integratedFlutter 目录中,你需要在这个目录里创建 Flutter 的模块:

$ cd ~/integratedFlutter

$ flutter create -t module my_flutter

在 my_flutter 目录中 flutter 会创建一些 Dart 代码,一些 Ruby脚本,启动项以及一个隐藏的.ios子目录。 着在你的 Podfile 文件中添加以下脚本:

platform :ios, '8.0'


target 'integratedFlutter' do

flutter_application_path = '../my_flutter/'

eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)


end

Flutter工程项目与原生工程是同一级目录,但git地址是单独分开的

$ pod install

等待安装完成。

使用 Xcode 打开 integratedFlutter.xcworkspace,在 Build Phases 中创建一个新的 Script Phases ,将如下两行粘贴到 Shell 中:

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

最后将 Build Settings -> Build Options -> Enable Bitcode 设置为 No,运行 command + b 编译工程;

Android平台配置

创建一个flutter module

flutter create -t module --org com.example my_flutter

在原生根项目的settings.gradle加入如下配置信息

// MyApp/settings.gradle

include ':app' // assumed existing content

setBinding(new Binding([gradle: this])) // new

evaluate(new File( // new

settingsDir.parentFile, // new

'my_flutter/.android/include_flutter.groovy' // new

))

在原生App模块中加入flutter依赖

dependencies {

implementation project(':flutter')

}

添加依赖后就可以与原生项目一起编译了。 这种方式虽可以满足混编需求,但还不是特别方便,主要是开发完项目后,还需要去Android Studio项目中进行编译,比较麻烦。 所以我们也可以把Flutter项目settings.gradle改造,在Flutter开发环境下直接运行包含原生代码的混合项目,改造方式如下:

// MyApp/settings.gradle

//projectName 原生模块名称

//projectPath 原生项目路径

include ":$projectName"

project(":$projectName").projectDir = new File("$projectPath")


这样改造之后不仅可以在Flutter IDE中直接编译Flutter混合工程,并进行调试。也可以运行futter run来启动Flutter混合工程。不过在配置的时候,需要注意Flutter中 gradle编译环境和原生编译环境的一致性,如果不一致可能会导致编译错误。

混合栈框架

混合导航栈,指的是Flutter页面与原生Native页面相互融合,展现在用户视角的页面中。

Flutter Page1 -> Flutter Page2 -> Native Page1 -> Flutter Page3

混合框架由来

从iOS和Android里每初始化一个Flutter实例就需要初始化一个Flutter Engine,而每个Flutter Engine 会要求Embeder提供四个Task Runner,这些Runner用于渲染相关工作,同时这些实例内存不能共享,这样会带来较大的系统资源消耗。如果不控制Flutter Engine数量,App很容易就出现内存暴涨,进而App进程被系统强杀。

由于Google 推出Flutter SDK时就是希望我们能直接使用Flutter 进行新App的开发,这样所有页面都是Flutter页,只用初始化一个Flutter Engine了,也就不会有内存使用问题。所以 Google官方目前暂没有推出自己主导混合开发框架。

然而在真实的开发情况是,大多数开发团队会从原有Native项目开始,进行功能开发或功能页改造来引入Flutter,目的是为了让团队有Flutter开发能力,同时也能支撑业务开发。

所以针对混合页面栈的内存控制,是大多数团队的真实需求。目前行业在混合栈方面主要有两种解决方案,一个是以“今日头条”为代表的通过修改FlutterEngine源码实现多Flutter实例,在底层共享Isolate。另外一个是以“闲鱼”为代表的FlutterBoost ,它是通过共享一个FlutterView来进行页面切换的导航方案。经过调研之后团队最终选择了第二种方案。

混合栈机制说明

FlutterBoost实现了一个管理多个Navigator的对象。当前最多只会有一个可见的Flutter 容器(Navigator),这个Navigator所包含的页面也就是我们当前可见容器所对应的页面。

Native容器与Flutter容器(Navigator)是一一对应的,生命周期也是同步的。当一个Native容器被创建的时候,Flutter的一个容器也被创建,它们通过相同的id关联起来。当Native的容器被销毁的时候,Flutter的容器也被销毁。    Flutter容器的状态是跟随Native容器,这也就是我们说的Native驱动。由Manager统一管理切换当前在屏幕上展示的容器。

用一个简单的例子描述一个混合栈新页面创建的过程:

  • 创建Native容器(iOS ViewController,Android Activity or    Fragment);

  • Native容器通过消息机制通知Flutter Coordinator新的容器被创建;

  • Flutter Container Manager进而得到通知,负责创建出对应的Flutter容器,并且在其中装载对应的Widget页面;

  • 当Native容器展示到屏幕上时,容器发消息给Flutter Coordinator通知要展示页面的id,如上图“原生Tab”->“flutter_tab”,就是通过获取原生的Tab切换消息,然后把消息传递给Flutter Coordinator;

  • Flutter Container Manager找到对应id的Flutter Container并将其设置为前台可见容器;

上述过程是一个混合栈新页面创建的主要逻辑,销毁和进入后台等操作也类似有Native容器事件去进行驱动;

混合栈使用

  • 注册路由:在Flutter的Main程序初始化时,把相应name id 和name Id对应要创建的Widget进行注册;

@override

void initState() {

super.initState();

FlutterBoost.singleton.registerPageBuilders({

'first': (pageName, params, _) => FirstMethodChannelWidget(),

'second': (pageName, params, _) => SecondRouteWidget(),

'tab': (pageName, params, _) => TabRouteWidget(),

'tab1':(pageName,params,_)=> TabRouteWidget1(),

'platformView': (pageName, params, _) => PlatformRouteWidget(),

'flutterFragment': (pageName, params, _) => FragmentRouteWidget(params),

///可以在native层通过 getContainerParams 来传递参数

'flutterPage': (pageName, params, _) {

print("flutterPage params:$params");

return FlutterRouteWidget(params:params);

},

});

}

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Boost example',

builder: FlutterBoost.init(postPush: _onRoutePushed),

home: Container());

}

void _onRoutePushed(

String pageName, String uniqueId, Map params, Route route, Future _) {

}

  • 原生注册:在创建相应的原生容器,并设置相应name id,确保Flutter 的Coordinator能够正确的找到相应的Widget;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

PlatformRouterImp *router = [PlatformRouterImp new];

[FlutterBoostPlugin.sharedInstance startFlutterWithPlatform:router

onStart:^(FlutterEngine *engine) {



}];

self.window = [[UIWindow alloc] initWithFrame: [UIScreen mainScreen].bounds];



[self.window makeKeyAndVisible];

UIViewControllerDemo *vc = [[UIViewControllerDemo alloc] initWithNibName:@"UIViewControllerDemo" bundle:[NSBundle mainBundle]];

vc.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"原生Tab" image:nil tag:0];



FLBFlutterViewContainer *fvc = FLBFlutterViewContainer.new;

[fvc setName:@"tab" params:@{}];

fvc.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"flutter_tab" image:nil tag:1];

FLBFlutterViewContainer *fvc1 = FLBFlutterViewContainer.new;

[fvc1 setName:@"tab1" params:@{}];

fvc1.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"flutter_tab2" image:nil tag:2];



UITabBarController *tabVC = [[UITabBarController alloc] init];

UINavigationController *rvc = [[UINavigationController alloc] initWithRootViewController:tabVC];



router.navigationController = rvc;

tabVC.viewControllers = @[vc,fvc,fvc1];

self.window.rootViewController = rvc;

[router setupFlutterCallNative];

return YES;

}

容灾降级方案

容灾必要性:

在刚引入Flutter技术时,团队其实也有业务安全方面担心。主要表现为若App使用了Flutter技术会不会导致线上业务受到影响?所以为了业务安全,开发初期阶段,特别是在对原有Native页面进行Flutter改造时,是有必要使用原生容灾降级。这样做不仅能锻炼团队使用新技术开发信心,也能确保线上业务不受影响;

容灾实现:

容灾的实现是在Native程序初始化时会获取Flutter功能配置信息,然后在决定进入某一个Flutter page前,先使用配置文件进行判断,若被使用Flutter页面能正常运行,则直接使用Flutter页面展现。若被使用的Flutter页面线上运行时因某种原因(如:数据解析出错)不能正常运行,则降级使用原生页面展示;

  • 获取Flutter功能配置信息

//获取Flutter配置信息

- (void)requestFlutterConfigInfo{

self.flutters = [NSMutableArray array];

NSString *url;

....

NSURL *downloadURL = [NSURL URLWithString:url];

NSURLRequest *request = [NSURLRequest requestWithURL:downloadURL

cachePolicy:NSURLRequestReloadIgnoringLocalCacheData

timeoutInterval:20.0];

// 创建文件下载

NSURLSessionDataTask *task = [[NSURLSession sharedSession]

dataTaskWithRequest:request

completionHandler:^(NSData *data, NSURLResponse *response, NSError *error)

{

if (!error) {

NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];

NSArray *res = JDUtils.safeGetArrayValue([dict objectForKey:@"flutters"]);

if (res && res.count) {

[self.flutters addObjectsFromArray:res];

}

}

}];

[task resume];

}

  • 判断功能是否可用

/**

是否显示门店列表

@return YES 显示, NO 不显示

*/

- (BOOL)isShowStationList;

....

- (void)shareBgViewTapped:(UITapGestureRecognizer *)recognizer {

if ([FlutterRouter.sharedRouter isShowShareView]) {

//使用Flutter页面

[FlutterRouter.sharedRouter openPage:FlutterPageShare params:@{} animated:YES completion:^(BOOL isFinish){}];

}else{

//使用原生页面

PHShareViewController *vc = [[PHShareViewController alloc] init];

vc.hidesBottomBarWhenPushed = YES;

[self.navigationController pushViewController:vc animated:YES];

}

}

成果展示

Flutter技术引入到家助手App开发后,对业务开发的帮助主要体现在以下两个方面:

1.解决开发人员配比不均:

“到家助手App”前端团队的服务用户主要是线下商家,而线下商家经常会有一些设备定制化开发需求,其中设备主要机型系统是Android操作系统,因此前端团队在Android开发人数上比iOS的人数更高一些,在“到家助手App”的前端团队里Android与iOS的人员比例是 2:1 ,行业内此比例一般是1:1。

在平常业务开发中并没有什么问题,但是在业务需求爆发的情况下,会出现因iOS人员总开发人力少,导致业务响应速度变慢的风险。

在引入Flutter开发技术后,大多数新功能都使用Flutter开发,不仅解决了业务响应速度问题,还使得原来的iOS开发人员可以通过Flutter“反哺”支持商家Android设备开发需求。

2.统一开发规范:

在未引入Flutter之前,Android与iOS的开发人员在完成业务开发后,会各自进行代码Review。而引入Flutter技术后,团队基于Flutter探索出适合于统一的开发规范,原来的Android与iOS可以一起进行代码Review。

界面展示

在“到家助手App”的Flutter页面里,有简单页面,也有复杂业务功能:

简单功能

复杂业务

由于篇幅所限,截图中没有展示“到家助手App”里所有使用Flutter开发的页面。但这并不影响表达一个信息,那就是Flutter是能真实的用于提升前端团队的开发效率。

小结

本文介绍了团队如何引入Flutter技术到App开发的整体过程,其中“组员学习”介绍了通过“分阶学习”来保证组员“从0到1”快速掌握新技术。在“落地项目”中讲解了如何解决“协同开发”、“混合开发”、“容灾降级” 等共性问题。希望对读者在引入Flutter开发时能有所帮助。

相关阅读:

官方 iOS 混编方案

https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

Flutter的编译模式

https://stephenwzl.github.io/2018/07/30/flutter-compile-mode/

干货 | 京东技术中台的Flutter实践之路

https://www.jianshu.com/p/70573c55da91

Flutter核心技术与实战

https://time.geekbang.org/column/intro/200

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章