DStack

Stella981 等级 53 0 0
标签: 软件flutter

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

为什么要有混合方案?

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

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

一、DStack定义

DStack是什么?

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

二、DStack的实现和特点

什么是混合栈

当进行混合开发时,native页面和flutter页面依次打开时形成的栈结构,存在多种页面类型,以下图为例
DStack
蓝色方块NA代表native页面,橘色方块F代表flutter页面
DStack对标flutter_boost

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

DStack

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

怎么做?

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

DStack

DStack

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

基于节点有什么好处?

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

DStack

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

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

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

图片中的pop表示返回上一个页面,popTo表示返回指定页面,popToRoot表示返回根页面,popSkip表示返回指定的模块,如图就是把“登录”模块的所有页面都返回。
DStack
每个页面返回和打开,都对应一次的节点记录,用户的行为触发节点管理,节点管理驱动页面跳转(即栈管理),考虑到Android和 iOS实现的差异性,节点管理放在了native侧处理。

3.设计使用简单的api
DStack
4.设计便于集成的框架接入方式

DStack

DStack

我们已经把DStack做成了flutter侧的pub库,只需要在flutter工程直接引用依赖即可。

5.利用引擎复用,框架内存优秀
DStack
在flutter的1.12版本之后,我们运用了flutter官方提供的flutter engin复用机制,做到了不同的flutter控制器共享同一个flutter engin,内存性能优秀。

三、目前取得的成果

1.业务上
DStack

2.性能上

DStack

性能上我们主要对比了flutter_boost框架,我们可以看到不管是iOS侧还是android侧,flutter_boost每打开一个新页面内存都会涨,而我们的除非新打开flutter控制器会有内存消耗,其他情况内存数据很稳定。

DStack

这是android侧页面打开速度对比,我们可以看到除非是新打开了flutter控制器时,flutter_boost和DStack的页面打开速度差不多相同,其他情况下DStack的页面打开速度明显优于flutter_boost。

3.功能上
DStack

这是DStack和官方方案与FlutterBoost在功能上的一些对比,Y代表有,N代表没有。

四、后续计划

1.持续输出文章

这是DStack投稿的第一篇文章,只是简单介绍了一下框架,后续我们会把详细的实现和采坑指南等持续的投稿,把我们的技术共享给整个集团。

2.内部开源

我们有计划把DStack在集团内部开源,也希望得到其他事业部老师们的意见和建议。

3.外部开源

我们有计划把DStack进行外部开源,回馈整个Flutter技术社区。

招聘信息

好未来技术团队正在热招测试、后台、运维、客户端等各个方向高级开发工程师岗位,大家可扫描下方二维码或微信搜索关注“好未来技术“,点击“技术招聘”栏目了解详情,欢迎感兴趣的伙伴加入我们!

也许你还想看

GPU计算的基本概念

WebRTC源码分析——视频流水线建立(上)

浅析深度知识追踪如何助力智能教育

轻量型TV端遥控器交互类库最佳实践

"考试"背后的科学:教育测量中的理论与模型(IRT篇)

用技术助力教育 | 一起感受榜样的力量

想了解一个异地多校平台的架构演进过程吗?让我来告诉你!

摩比秀换装游戏系统设计与实现(基于Egret+DragonBones龙骨动画)

如何实现一个翻页笔插件

产研人的疫情战事,没有一点儿的喘息

DStackDStack

收藏
评论区

相关推荐

带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于 Flutter 的各种问题后,我突然发现很多刚刚接触 Flutter 的萌新,对于 Flutter 都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。 内容有点长,但是相信能帮你更好地去认识 Flutter 。 Flutter 的起源 Flutter 的诞生其实比较有意思,Flutter
【Flutter实战】初识Flutter
1.2 初识Flutter 1.2.1 Flutter简介Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口,开发者可以很快地为 Flutter添加 native扩展。同时 Flu
【Flutter 实战】安装Flutter
1.3 搭建Flutter开发环境工欲善其事必先利其器,本节首先会分别介绍一下在Windows和macOS下Flutter SDK的安装,然后再介绍一下配IDE和模拟器的使用。 1.3.1 安装Flutter由于Flutter会同时构建Android和IOS两个平台的发布包,所以Flutter同时依赖Android SDK和iOS SDK,在安装Fl
Flutter - 深入理解Flutter引擎启动
基于Flutter 1.5,从源码视角来深入剖析flutter引擎的启动流程,相关源码目录见文末附录一、Flutter引擎启动工作 1.1 Flutter启动概览Flutter作为一款跨平台的框架,可以运行在Android、iOS等平台,Android为例讲解如何从Android应用启动流程中衔接到Flutter框架,
字节跳动为什么选用Flutter:并非跨平台终极之选,但它可能是不一样的未来
2018 年 12 月 ,Google 宣布 Flutter 1.0 版本正式发布。截至目前, Flutter 在 Github 上已获得 88000+ 的关注和 11000+ 的 Fork ,其发展速度相当惊人,是今年移动端最火热的开发框架之一。Flutter 大火背后的原因是什么?为什么越来越多的企业和开发者会选择使用 Flutter?Flutter 会
10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享
作者:闲鱼技术-宗心 12月4日,google flutter团队宣布第一个flutter正式版本发布。次日,Flutter Live Beijing 会议上,google flutter团队邀请了在这一技术方案中重要的合作伙伴闲鱼团队分享这半年以来的通过flutter产出的业务结果以及对应的技术挑战。 ![](https://oscimg.oschin
Android&Flutter混合开发初体验
最近flutter不是一般的火呀,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的。因此使用Flutter去统一Android、iOS技术栈,把它作为已有原生App的扩展能力,通过有序推进来提升移动端的开发效率 (1)创建flutter模块,创建module后会AS会自动进行flutter的相关配置 ![在这里
DStack
混合开发这项技术由来已久,目前市面上主流的有Hybird,ReactNative,Weex,Flutter等。其中,Flutter以他独有的实现方式,优秀的性能,成为近两年最火的混合开发方案,我们学而思网校1v1客户端团队也是比较早的开始了Flutter技术的研究,在学而思网校1v1家长端和学而思网校1v1教师端两个App进行了大规模的实践尝试,由此也沉淀出
Flutter
在Flutter 加载网页?也是有WebView的哦,和Android一样 1.添加依赖 dependencies: flutter\_webview\_plugin: ^0.2.1+2 2.导入库 import 'import 'package:flutter\_webview\_plugin/flutter\_webview\_plug
Flutter Swiper制作轮播效果
![](https://oscimg.oschina.net/oscnet/71c82559e8c6c5a42d6e3420594398793d7.png) #### 1、引入flutter\_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter\_swiper的GitHub
Flutter 性能优化系列之打造高性能 widget
> “ > > 本文是 Flutter 性能优化系列文章之一,记录了 Flutter 团队优化 Flutter Gallery 的实践。本文主要介绍了如何打造高性能的 widget。原文链接:https://medium.com/flutter/building-performant-flutter-widgets-3b2558aa08fa > > ”
Flutter 笔记
> 最近开发需要,要接触移动端一些东西,所以看一下flutter。 因为移动端经常是要做一样事情就是即要有android平台,又要有ios平台,所以,选择了Flutter。 为什么不是React Native?因为,Flutter字比较少,而且不用打空格,我喜欢。 一、安装 ---- 1. 下载 2. 解压 3. 设置path 4. 开始 二、
Flutter 问题收集及解决方案
解决方案来自于日常总结及各路大佬。 1、Waiting for another flutter command to release the startup lock... -------------------------------------------------------------------- 打开新的项目或者使用Flutter
Flutter安装
安装前准备:Android Studio 、VS Code、Git 1\. 使用镜像 -------- 添加用户环境变量: FLUTTER\_STORAGE\_BASE\_URL = https://storage.flutter-io.cn PUB\_HOSTED\_URL=https://pub.flutter-io.cn 2.g
Flutter环境搭建
本文介绍mac上搭建Flutter环境 1、Flutter官方提供中国地区镜像地址:[https://github.com/flutter/flutter/wiki/Using-Flutter-in-China](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Ff