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

时间 2020-05-30

标签 dstack 基于 flutter 混合开发框架繁體版

原文原文链接

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

为何要有混合方案？git

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

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

1、DStack定义

DStack是什么？web

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

2、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侧处理。