混合开发这项技术由来已久&＃xff0c;目前市面上主流的有Hybird&＃xff0c;ReactNative&＃xff0c;Weex&＃xff0c;Flutter等。其中&＃xff0c;Flutter以他独有的实现方式&＃xff0c;优秀的性能&＃xff0c;成为近两年最火的混合开发方案&＃xff0c;我们学而思网校1v1客户端团队也是比较早的开始了Flutter技术的研究&＃xff0c;在学而思网校1v1家长端和学而思网校1v1教师端两个App进行了大规模的实践尝试&＃xff0c;由此也沉淀出了一套自己的混合方案DStack。
为什么要有混合方案&＃xff1f;
- 学而思网校1v1家长端是个纯Flutter工程&＃xff0c;虽然用Flutter开发App能大幅度的提高人效&＃xff0c;但是纯Flutter工程还是有些页面需要用native来实现比较合适&＃xff0c;比如说webView&＃xff0c;视频页面等&＃xff1b;
- 学而思网校1v1教师端是个有一定规模的原生App&＃xff0c;只是部分模块接入了Flutter来实现。
上述两种情况都存在native页面和flutter页面进行交互的行为&＃xff0c;当两种页面进行交互&＃xff0c;比如&＃xff0c;混合页面之间随意跳转、 页面间数据传递、手势滑动、内存资源控制、路由管理&＃xff0c;这些都是需要解决的问题&＃xff0c;基于此&＃xff0c;我们参考了官方的解决方案&＃xff0c;和阿里闲鱼团队的flutter_boost框架等&＃xff0c;针对我们的业务和工程的具体情况进行了DStack的方案选型和具体实现。
一、DStack定义
DStack是什么&＃xff1f;
学而思网校1V1客户端团队自研的&＃xff0c;基于节点进行管理的&＃xff0c;使用简单&＃xff0c;易于集成&＃xff0c;性能优秀的混合开发框架。目前框架已经在学而思网校家长端和教师端App上线&＃xff0c;内存性能明显提升&＃xff0c;稳定性表现良好。DStack也给Flutter社区提供了混合栈管理的新思路&＃xff0c;改变了固有的移动研发模式。
二、DStack的实现和特点
什么是混合栈&＃xff1f;
当进行混合开发时&＃xff0c;native页面和flutter页面依次打开时形成的栈结构&＃xff0c;存在多种页面类型&＃xff0c;以下图为例
蓝色方块NA代表native页面&＃xff0c;橘色方块F代表flutter页面DStack对标flutter_boost
我们可以看到&＃xff0c;页面栈结构存在native页面和flutter页面交替的情况&＃xff0c;关于如何处理这种不同页面间打开关闭的场景&＃xff0c;目前flutter社区开源的此类框架只有flutter_boost&＃xff0c;flutter_boost是阿里闲鱼团队自研的Flutter混合开发栈管理框架&＃xff0c;该项目在github有3.9k的star。
那看到这儿可能会有疑问&＃xff0c;既然社区有成熟的解决方案&＃xff0c;我们为什么不用&＃xff1f;主要有以下几点原因&＃xff0c;一是flutter_boost的实现原理不适用于我们的纯Flutter工程&＃xff0c;二是为了我们团队后续的mac&＃xff0c;ipad&＃xff0c;pc端进行混合开发做准备&＃xff0c;三是我们对性能有很高要求&＃xff0c;flutter_boost的实现方式决定了它没有利用flutter技术的特性&＃xff0c;性能方面不够好。综上所述&＃xff0c;我们需要自研适用性更强的混合开发框架DStack。
怎么做&＃xff1f;
1.基于“节点”进行混合栈管理
在DStack框架实现中&＃xff0c;我们把每个native页面和flutter页面抽象成了“节点”数据结构&＃xff0c;每个页面对应一个节点&＃xff0c;节点有页面的若干信息&＃xff0c;通过节点这种数据结构&＃xff0c;我们就在实现底层屏蔽掉了页面的具体类型差异。
基于节点有什么好处&＃xff1f;
- 抽象了具体的页面实现&＃xff0c;便于管理&＃xff1b;
- 提供了更强大的扩展性。
NA代表native页面&＃xff0c;F代表flutter页面&＃xff0c;H代表Hybird页面。
因为我们已经把不同类型的页面抽象成了“节点”&＃xff0c;所以后续如果除了flutter页面和native页面&＃xff0c;我们甚至还可以接入ReactNative页面或者Hybird页面。
2.确定节点与页面行为的关系
图片中的pop表示返回上一个页面&＃xff0c;popTo表示返回指定页面&＃xff0c;popToRoot表示返回根页面&＃xff0c;popSkip表示返回指定的模块&＃xff0c;如图就是把“登录”模块的所有页面都返回。
每个页面返回和打开&＃xff0c;都对应一次的节点记录&＃xff0c;用户的行为触发节点管理&＃xff0c;节点管理驱动页面跳转(即栈管理)&＃xff0c;考虑到Android和 iOS实现的差异性&＃xff0c;节点管理放在了native侧处理。
3.设计使用简单的api
4.设计便于集成的框架接入方式
我们已经把DStack做成了flutter侧的pub库&＃xff0c;只需要在flutter工程直接引用依赖即可。
5.利用引擎复用&＃xff0c;框架内存优秀
在flutter的1.12版本之后&＃xff0c;我们运用了flutter官方提供的flutter engin复用机制&＃xff0c;做到了不同的flutter控制器共享同一个flutter engin&＃xff0c;内存性能优秀。
三、目前取得的成果
1.业务上
2.性能上
性能上我们主要对比了flutter_boost框架&＃xff0c;我们可以看到不管是iOS侧还是android侧&＃xff0c;flutter_boost每打开一个新页面内存都会涨&＃xff0c;而我们的除非新打开flutter控制器会有内存消耗&＃xff0c;其他情况内存数据很稳定。
这是android侧页面打开速度对比&＃xff0c;我们可以看到除非是新打开了flutter控制器时&＃xff0c;flutter_boost和DStack的页面打开速度差不多相同&＃xff0c;其他情况下DStack的页面打开速度明显优于flutter_boost。
3.功能上
这是DStack和官方方案与FlutterBoost在功能上的一些对比&＃xff0c;Y代表有&＃xff0c;N代表没有。
四、后续计划
1.持续输出文章
这是DStack投稿的第一篇文章&＃xff0c;只是简单介绍了一下框架&＃xff0c;后续我们会把详细的实现和采坑指南等持续的投稿&＃xff0c;把我们的技术共享给整个集团。
2.内部开源
我们有计划把DStack在集团内部开源&＃xff0c;也希望得到其他事业部老师们的意见和建议。
3.外部开源
我们有计划把DStack进行外部开源&＃xff0c;回馈整个Flutter技术社区。
京公网安备 11010802041100号