前言

Fair-Online 是面向Flutter 开发者，供给从Flutter 在线开发，到实时编译预览，打包发布、动态下发端侧更新，完结Flutter 线上动态化的一体化云开发渠道。开发者无需装备Flutter 开发环境，在线开发调试代码，即时编译预览，所见即所得，结合58开源团队打造的Flutter 动态化结构 Fair 及热更新渠道 FairPushy ，完结Flutter 线上动态化。

现在Fair 云开发渠道已在Github 开源： Fair-Online Github 在线体验地址： Fair-Online Platform

Flutter 低代码

熟悉Flutter 的小伙伴应该都了解过 FlutterFlow ,它是现在比较完善的Flutter 低代码渠道，面向的是Flutter 零根底开发者。开发者无需了解Flutter 的控件体系及语法规矩，只需运用渠道供给的微件和复合组件，拖拽生成页面即可。关于事务逻辑处理，比方网络恳求、事情Action处理等，是经过可视化的特点修改完结，渠道会依据开发者的操作生成对应的Flutter 代码。

Flutter低代码-Fair云开发平台实践

在体验运用FlutterFlow 的过程中，咱们也发现一些问题。首要，关于页面UI开发，假如要完结一个功用杂乱，页面层级较多的UI，运用拖拽组合，会变得非常繁琐困难，这对Flutter 开发者是不够友好的开发办法；其次，关于杂乱事务逻辑的处理，比方网络恳求，事情Action处理等，运用可视化特点设置，开发也比较繁琐，且学习本钱较高。

所以，针对上述问题，在技能选型上，差异于FlutterFlow 等低代码渠道的拖拽修改完结，Fair-Online 是面向Flutter 开发者，供给在线代码修改器，辅助以可视化的工程、页面、组件创立、修改，以完结Fair 开发提效，且几乎没有额定的学习本钱。为了方便不熟悉Fair 的小伙伴快速上手Fair 开发，渠道供给了常用的工程、组件模板以及网络恳求等事务逻辑，开发者在创立工程、页面时可挑选模板创立，然后二次修改。

Flutter低代码-Fair云开发平台实践

Fair-Online 架构

Flutter低代码-Fair云开发平台实践

全体架构设计分为前后端，都依据Dart 技能栈完结。 上半部分是前端，应用展示层。技能栈运用的是Flutter Web + JS。

中心服务层

  • 包括 Code Editor（代码修改器）和 Preview（预览）等组件。
  • Code Editor（代码修改器）是中心根底功用。其中视图部分运用CodeMirror , 它是一个运用JS完结的文本修改器三方库；而逻辑部分，比方代码剖析、语法检测、代码补全等，运用Flutter 完结。
  • Preview（预览功用），是依据Flutter 和Fair SDK 完结。

上层应用层

  • 包括Flutter/Fair 的编译运转，Fair 一键打包、代码导出、手机扫码预览等；以及工程、页面等修改功用。

下半部分是后端，服务层，技能栈运用的是Dart Server。

中心服务层

  • 首要包括Fair SDK，Fair 语法检测插件。语法检测是Fair-Online 的要点及完结难点，后文会有详细介绍。

上层应用层

  • 首要包括用户工程相关，管理着用户的工程、页面、组件库等。

下面详细介绍下Fair-Online 中中心功用的完结。

在线代码修改器

Flutter在Web上运转原理

Flutter低代码-Fair云开发平台实践

Flutter Web 在Framework 层和移动端Flutter 是相同的，差异在于渲染底层，移动端经过内置skia 引擎调用GPU 进行制作，而Flutter Web 则是将制作引擎部分替换为规范HTML 标签以及Canvas 制作的自定义标签，最终生成可制作的dom 树。

依托于dart compile 东西的 js模块 （老版别为dart2js 东西），Flutter Web 的构建东西能够将中心产品 app.dill 进行读取和解析，并注入 Math、List、Map 等 JS 东西办法，最终生产出Web 渠道所能履行的JS 文件。

Flutter Web与JS的互操作性

Flutter 在移动端的生态丰富，但是在Web 上面就差了许多，现在的Flutter Web 在开发中很大程度上依赖了Web 上丰富的三方库，所以能够与JS 的函数互相调用是很重要的能力。

不同于Flutter 在移动端上面与webview 的交互办法，由于Flutter Web 是运转在浏览器环境中的，并且自身Dart 也会经dart2js 转化为JS 代码，所以在Flutter Web 上面经过dart:js 或是packages:js 能够很轻松完结Dart 和JS 互相调用。

技能选型-CodeMirror

关于代码修改器的挑选上其实没有什么挑选的空间，首要Flutter 技能栈的三方库以移动端为主，所以想要接入代码修改器这种组件，咱们只能从JS 的技能栈上面挑选。CodeMirror 是一款在Web 上面老牌的代码修改器，功用强壮，供给了非常丰富的API，并带有多种言语形式和插件，可完结更高档的修改功用，完全能够满意咱们的需求。

依赖Flutter Web 与JS 强壮的互操作性，咱们能够轻易地在集成CodeMirror，而Google 官方也供给了CodeMirror 的Dart 封装库，其中心完结便是经过dart:js 库对JS 侧的CodeMirror 进行API 的调用和交互 。

CodeMirror 作为Web 上面的UI 库需求依据html 标签来展示，而在Flutter Web 中需求借助HtmlElementView 交游Widget 层次结构中嵌入一个 HTML 元素（在移动端需求运用flutter_webview 插件）,动态构建Html 标签需求在platformViewRegistry 注册后运用。


/// 构造用于承载CodeMirror的Html标签并注册
final html.HtmlElement element = html.DivElement();
ui.platformViewRegistry.registerViewFactory(getCodeMirrorViewType(),
    (int viewId) {
  return element;
});
/// 初始化codemirror
editor = (editorFactory..paramsProvider = this)
    .createFromElement(element, options: codeMirrorOptions)
  ..theme = 'darkpad'
  ..mode = 'dart'
  ..showLineNumbers = true;

经过简单的初始化装备设定主题和言语形式后后，将HtmlElementView 嵌入Widget 层级中，就能够正常显现代码修改器。

Flutter低代码-Fair云开发平台实践

Fair-Online中代码修改器的前后端运转原理

当然假如要使代码修改器具备完善的功用，还少不了对代码进行语法检测剖析，经过快捷键触发代码的补全提示等功用，这些也是咱们日常开发运用的AndroidStudio 和VSCode 中具备的必要功用。

CodeMirror 仅仅代码修改器的UI库，关于代码语法的剖析逻辑需求自定义，然后组装剖析成果交由CodeMirror 的Hint和Doc操作对象进行实践的展示。在Fair-Online 的架构中，Flutter 和Fair 的语法剖析由Dart 编写的服务端完结，详细的运转原理如下图所示：

Flutter低代码-Fair云开发平台实践
  • 在Flutter Web 监听输入和组合快捷键，触发剖析恳求
  • Dart Server 经过Analysis Server 和Fair 语法剖析插件生成剖析成果，并回来给Web 端
  • Web 端经过将成果转化为详细的操作对象，交由代码修改器来进行文本操作或提示弹窗显现
  • 经过Dart 和JS 的互操作性调用CodeMirror 的详细操作API

Flutter 语法剖析

Analysis Server

Analysis Server 是官方供给的Dart 语法剖析服务，开发者熟悉的AndroidStudio、VSCode 等IDE 都是经过跟它的交互，完结语法静态剖析、代码提示、代码补全等功用。

以Android Studio 为例，语法检测中心是Analysis Server，Dart 插件担任监听用户代码修改，每逢代码有改动时，插件会经过Socket 同步给Analysis Server，Analysis Server 剖析结束后将成果同步给Dart 插件，Dart插件依据Analysis Server 回来的事情类型进行处理，最终通知Android Studio 刷新界面。详细时序图如下：

Flutter低代码-Fair云开发平台实践

以上是IDE 中完结Flutter 语法检测的过程。

自定义语法检测

在Fair-Online 的代码修改器中，除了Flutter 语法剖析，还需求支撑自定义规矩的语法剖析检测，例如在布局与逻辑混编场景下，需求将代码块中的逻辑句子转化为Fair 支撑的语法糖。

关于自定义规矩语法剖析，咱们能够经过自定义语法插件去完结。

Flutter低代码-Fair云开发平台实践

语法插件的挂载问题。经过装备目标工程的analysis_options.yaml 完结。Analysis Server 启动时会寻找这个装备文件，然后加载对应的插件。

自定义语法检测插件中心完结如下：

Flutter低代码-Fair云开发平台实践
  • 输入的是经过处理后的编译单元，里面包括由Dart 源代码转化而来的完好的笼统语法树结构。
  • FairVisitor 首要会遍历笼统语法树，检查是否包括FairPatch 注解。由于只要包括FairPatch 注解的Flutter 代码，才会被Fair 辨认、编译。
  • 接下来包括有FairPatch 注解的class 信息，交由FairClassVisitor 处理。
  • FairClassVistor 会遍历class 中所有办法，依据办法类型别离交由特定的Visitor处理。每个Visitor 对应的是一个 Fair 语法糖。Visitor 之间是互相解耦的，后续可灵活扩展。
  • 最后每个Visitor 遍历办法体，进行语法检测，别离回来语法剖析的成果。

自定义语法检测完结作用如下：

Flutter低代码-Fair云开发平台实践

Flutter 在线编译预览

在咱们运用Flutter 开发移动端应用时，借助Debug 形式下的Hot Reload 功用能够完结在手机或模拟器上面快速的预览代码改动。在传统的低代码渠道上由于选用拖拽控件的办法天然的支撑对UI 作用的把控，而Fair 云开发渠道上面选用在线编写代码的办法，需求在网页中快速预览所写代码运转后的作用。

Flutter Web上怎么在线预览代码运转作用

在代码修改器的部分中咱们提到了Flutter 在Web 渠道上运转的中心是dart2js，差异于移动端，在Web 上 dart2js 经过将dart 编译的中心产品dill 转化为JS 来完结。

Flutter低代码-Fair云开发平台实践

由于构建Html 标签或许运用Canvas 来展示UI 的逻辑都在js中，依照这个思路咱们能够将在线编写的代码经过 dart2js 编译，然后嵌入Html 标签中进行预览。但假如处于同一window 和dom 下的话，资源和JS 环境会共享，会引起抵触，这时需求iframe 标签来处理这个问题。iframe 标签承载了一个单独的嵌入的窗口，它有自己的 document 和window，所以大致思路便是将在线修改的代码转化为JS 后注入一个iframe 内进行预览。

Dartdevc编译器

Dart 开发编译器（dartdevc，也称为DDC） 一般用于Flutter Web 开发时运用Chrome 运转和调试。差异于 dart2js，dartdevc 支撑增量编译，所以在开发调试中能够做到相似移动端Flutter 中HotReload的作用。dartdevc 通常需求配合webdev 一同运用，webdev 是运用Dart 开发和部署Web 应用程序的命令行东西，比方监听文件改变触发重建和重新部署就尤其担任。

Fair-Online编译预览前后端原理

出于对在线编译速度的考量，Fair云开发渠道在Dart 后端上面运用dartdevc 替代dart2js 进行对代码的编译，生成的JS 产品回来前端注入到iframe 中进行作用的预览，详细完结流程如下图所示：

Flutter低代码-Fair云开发平台实践
  • 用户在Fair云开发渠道在线编写代码
  • 前端经过用户输入建议编译预览恳求
  • 后端接纳恳求，经过dartdevc 编译器对工程代码进行编译，将生成的JS 产品回来给前端
  • 前端将回来的JS 产品注入到iframe中进行作用的预览

支撑咱们

欢迎咱们运用 Fair，也欢迎咱们为咱们点亮Star。

Github地址：github.com/wuba/fair

Fair官网：fair.58.com

欢迎奉献

经过Issue 提交问题，奉献代码请提交Pull Request，管理员将对代码进行审阅。