DStack--基于flutter的混合开发框架

混合开发这项技术由来已久，目前市面上主流的有Hybird，ReactNative，Weex，Flutter等。其中，Flutter以他独有的实现方式，优秀的性能，成为近两年最火的混合开发方案，我们学而思网校1v1客户端团队也是比较早的开始了Flutter技术的研究，在学而思网校1v1家长端和学而思网校1v1教师端两个App进行了大规模的实践尝试，由此也沉淀出了一套自己的混合方案DStack。

为什么要有混合方案？

学而思网校1v1家长端是个纯Flutter工程，虽然用Flutter开发App能大幅度的提高人效，但是纯Flutter工程还是有些页面需要用native来实现比较合适，比如说webView，视频页面等；
学而思网校1v1教师端是个有一定规模的原生App，只是部分模块接入了Flutter来实现。

上述两种情况都存在native页面和flutter页面进行交互的行为，当两种页面进行交互，比如，混合页面之间随意跳转、页面间数据传递、手势滑动、内存资源控制、路由管理，这些都是需要解决的问题，基于此，我们参考了官方的解决方案，和阿里闲鱼团队的flutter_boost框架等，针对我们的业务和工程的具体情况进行了DStack的方案选型和具体实现。

一、DStack定义

DStack是什么？

学而思网校1V1客户端团队自研的，基于节点进行管理的，使用简单，易于集成，性能优秀的混合开发框架。
目前框架已经在学而思网校家长端和教师端App上线，内存性能明显提升，稳定性表现良好。DStack也给Flutter社区提供了混合栈管理的新思路，改变了固有的移动研发模式。

二、DStack的实现和特点

什么是混合栈？

当进行混合开发时，native页面和flutter页面依次打开时形成的栈结构，存在多种页面类型，以下图为例

蓝色方块NA代表native页面，橘色方块F代表flutter页面
DStack对标flutter_boost

我们可以看到，页面栈结构存在native页面和flutter页面交替的情况，关于如何处理这种不同页面间打开关闭的场景，目前flutter社区开源的此类框架只有flutter_boost，flutter_boost是阿里闲鱼团队自研的Flutter混合开发栈管理框架，该项目在github有3.9k的star。

那看到这儿可能会有疑问，既然社区有成熟的解决方案，我们为什么不用？主要有以下几点原因，一是flutter_boost的实现原理不适用于我们的纯Flutter工程，二是为了我们团队后续的mac，ipad，pc端进行混合开发做准备，三是我们对性能有很高要求，flutter_boost的实现方式决定了它没有利用flutter技术的特性，性能方面不够好。综上所述，我们需要自研适用性更强的混合开发框架DStack。

怎么做？

1.基于“节点”进行混合栈管理

在DStack框架实现中，我们把每个native页面和flutter页面抽象成了“节点”数据结构，每个页面对应一个节点，节点有页面的若干信息，通过节点这种数据结构，我们就在实现底层屏蔽掉了页面的具体类型差异。

基于节点有什么好处？

抽象了具体的页面实现，便于管理；
提供了更强大的扩展性。

NA代表native页面，F代表flutter页面，H代表Hybird页面。

因为我们已经把不同类型的页面抽象成了“节点”，所以后续如果除了flutter页面和native页面，我们甚至还可以接入ReactNative页面或者Hybird页面。

2.确定节点与页面行为的关系

图片中的pop表示返回上一个页面，popTo表示返回指定页面，popToRoot表示返回根页面，popSkip表示返回指定的模块，如图就是把“登录”模块的所有页面都返回。

每个页面返回和打开，都对应一次的节点记录，用户的行为触发节点管理，节点管理驱动页面跳转(即栈管理)，考虑到Android和 iOS实现的差异性，节点管理放在了native侧处理。