小文字 吃饭,睡觉,遛狗头

当Dart全栈遇上Flutter Workflow

img

本文为版权归属 58 Magpie技术团队,转载请注明出处


通过定制Flutter编译链工具,可以实现很多个性化的能力,甚至提供flutter tool本身不支持的功能。 同时借力Dart全栈,可以搭建完整的前后端开发工具。

Flutter上手

上手Flutter比较简单,走官方的接入规则,我们可以快速实现Flutter的接入和开发。但是这里面也会存在一些问题,比如:

  • 端源码的重度耦合,Flutter与Native源码出现依赖关系
  • Flutter编译链侵入,增加Native开发,调试成本
  • 同时运行多个 Flutter 实例或在部分视图中运行实例可能会导致未定义行为。
  • 在后台模式下使用 Flutter 尚处于开发阶段。
  • 不支持将一个 Flutter 库打包到另一个可分享的库内,或者将多个 Flutter 库打包到同一个应用中。

在大型工程中接入Flutter,势必需要考虑上述这几个问题。为了便于Flutter的接入,我们尝试统一接入标准,简化成本,我们的预期是这样的:

  1. 通过提供定制的SDK,实现Android,iOS的Flutter统一接入
  2. 通过提供开发接入的workflow,实现内部标准化,降低成本

奔跑吧workflow

通过workflow实现另一种flutter模块的创建,开发,编译,打包流程。

在安装使用workflow前需要确保您本地的开发环境已经搭建完毕,并配置了相关的环境变量。

export PATH=/*flutter directory*/flutter/bin:$PATH

同时建议配置dart sdk的环境变量,方便pub的使用

export PATH=/*flutter directory*/flutter/bin/cache/dart-sdk/bin:$PATH

接下来就可以安装命令行工具,方便部署和启动workflow平台: 通过pub或者flutter pub安装mgpcli

pub global activate mgpcli

安装dart全局命令行后,就可以开始使用它进行项目创建等后续流程了。

1.创建flutter模块工程

# 创建模板工程
mgpcli create

2.启动workflow

# 进入新创建的工程目录内
cd your-project
# 启动workflow
mgpcli start

3.进入workflow

现在已经为您打开了一个浏览器窗口,可以移步至窗口进行:编译、Attach

Dart闭环开发

在整个workflow项目中,我们采取了分层架构设计,具体来说包括以下

在这一节中我们主要介绍前后端部分的架构设计。

前端页面基于Flutter-Web技术栈。开发Flutter的dart页面,编译时利用dart2js,将Flutter页面转为js,整体来说是一个SPA的单页面应用。

后端部分与Flutter基本没有关系,属于纯Dart工程,基于Dart Server开发的后端服务。

有了前后端工程之后,我们做到了业务上的隔离。具体开发的时候,既可以隔离开发,也可以通过组织结构,实现同IDE开发前后端。

在实践中为了减少沟通成本和打通Dart全栈,参与开发的RD既要负责各自模块的前端业务,同时要考虑后端接口开发。实现了提个模块的的闭环开发。

编译介绍

0x1 cli编译
命令行源码位于cli下,是一个Dart Cmdline工程,推荐通过VS Code进行开发。

0x2 后端编译
workflow分为前后端,后端源码位于server下,是一个Dart工程,推荐通过VS Code进行开发。

0x2 前端编译
前端部分是一个flutter工程,采用了flutter-web技术栈,可以通过VS Code, Android Studio开发。

为了顺利联调,建议先启动workflow的后端部分,启动可以通过

./start-server

后端目前不支持热重载,如果您修改了server代码,需要重启server,也就是重新执行./start-server

启动web可以走IDE,也可以走命令行:

flutter run -d chrome

0x3 编码规范
Dart编码遵守Effective Dart准则。项目已开启lint检测,不符合准则的代码,开发期间有会提示warning

Effective Dart完整规范,请查看 https://dart.dev/guides/language/effective-dart/style

集成发布意味着把前后端workflow整体编译打包,用户可以通过mgpcli进行使用。

集成发布

发布workflow
执行以下命令完成前后端资源的构建和内置:

./deploy -cli

本地验证cli
通过pub –source进行本地部署,执行以下命令:

./setup-cli

如果你本地有dart、flutter环境,但是不支持flutter-web,也可以使用预编译的workflow进行体验:

./setup-cli -dry-run

完成上述步骤后,你应当可以使用mgpcli命令了。例如启动workflow可以执行:

mgpcli start

脚手架cli

在前面各小结中频繁出现的cli/mgpcli是我们的命令行工具。作为Workflow启动和门户,非常重要。

面向用户下载安装的mplci是我们发布的后的工具。那么如何在本机进行脚手架开发和环境控制呢?

本机运行开发cli,我们定义为Debug 模式:

Debug 模式为Magpie开发小组日常开发环境,感兴趣的同学也可以参与Magpie团队一起开发,大家一起创造更好的Flutter的开发环境。

具体操作如下:

  • cli本地部署
    git clone [email protected]:flutter-lab/magpie_workflow.git 
    pub global activate --source path /*本地全路径*/magpie_workflow 
    
  • 源码运行环境配置

    1、进入用户根目录下的.pub-cache/bin/mgpcli
    2、vi 打开mgpcli脚本文件我们可以看到dart “//.pub-cache/global_packages/mgpcli/bin/mgpcli.dart.snapshot.dart2” “[email protected]
    3、我们可以把打开文件中dart后面的路径指向我们clone下来的源码路径”**/magpie_workflow/cli/bin/mgpcli.dart”
    4、用vscode打开工程,定位到mgpcli.dart文件,右键选择运行。至此Magpie工程就可以断点Debug了s

当前我们的脚手架支持的基础指令如下:

小结

Workflow系列文章:

  • iOS Magpie SDK实现
  • Android Magpie SDK实现

workflow即将内部开源,更多技术细节请请期待。