2021 首次发车，Flutter Fair 正式开源了
Fair 是面向 Dart 的框架，虽然 JavaScript 是世界上“最好的语言”，但是我们仍然选择面向 Dart 而不是 JS。有两个考量：
基于 JS 的框架社区已经存在了，不想重复造轮子。
面向 JS 存在通信的鸿沟，且对 Dart 开发者不够友好，如果使用 JS，与 RN 打照面好像有点尴尬。
Fair 通过 DSL 动态，结合 Module 组件，实现 UI 和逻辑的协作。其中 DSL 可以通过 Bundle 下发，Module 需要作为基础能力，固化在 App 中跟版迭代。
概括一下 Fair 的面貌：
Fair 是面向原生 Flutter 开发者的，你不需要使用前端 JS 技术栈
Fair 的性能得益于 Dart，无桥接更纯真
Fair 适用于 Android，iOS，Web 等全平台，Flutter 可以用在哪里 Fair 就可以在哪里
Fair 是平台无关的，像普通 Package 一样，甚至可以和其他 flutter 动态化框架一起用
效果怎么样？
其实这个完全取决你能用 Flutter 画出多美妙的 UI。如果非要说 Flutter 是一个画画图的框架，那他绝不会让你失望的。
Fair 的 UI 渲染是 无损的，可以做到 像素级别的还原。
录制的视频可以访问文档平台查看：https://fair.58.com/guide/#demo-preview
Flutter 模板工程 Hello World
通过 flutter create 可以新建一个模板工程，内容是一个点击计数器效果。 我们将生成的源码，接入 Fair 后既可以通过动态形式去展示这个点击计数的逻辑。
效果
Flutter 原生 Flutter Fair
Fair 接入
FairWidget(
name: 'home_page',
path: 'assets/bundle/lib_home_page.fair.json',
data: {
'title': 'Flutter Demo Home Page',
},
)
Flutter 源码
/*
Copyright (C) 2005-present, 58.com. All rights reserved.
Use of this source code is governed by a BSD type license that can be
found in the LICENSE file.
*/
import 'package:fair/fair.dart';
import 'package:flutter/material.dart';
import 'theme.dart';
@FairPatch()
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@FairWell('_counter')
int _counter = 0;
@FairWell('_incrementCounter')
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: ThemeStyle.headline4(context),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
AdobeXD plugin 支持
在前端开发中，有一种技术叫做代码生成，可以基于设计稿直接生成 js/css 代码。Adobe 的工程师团队也在做面向 Flutter 代码生成的插件 AdobeXD。这个插件目前还是早期阶段 xd-to-flutter-plugin
由于 Flutter 这种书写界面的方式和 HTML 相差无几，技术上是完全可行的。可以开发一套功能有限的运营平台，实现基础界面的拖拽设计，然后导出 flutter 代码。这里我们利用 Adobe XD 插件生成的 flut
ter 工程，直接转换为 Fair 动态化。都不用写“俄罗斯套娃”布局了，是不是想想还有点刺激的
效果
Flutter 原生
Flutter Fair1
Flutter Fair2
Fair 接入
FairWidget(
name: 'adobe_xd',
path: kIsWeb
? 'assets/bundle/lib_Home.fair.json'
: 'assets/bundle/lib_Home.fair.bin',
data: {
'svg_il6hf2': svg_il6hf2,
'svg_uvjlj2': svg_uvjlj2,
'svg_6o6tx4': svg_6o6tx4,
'svg_emmxj3': svg_emmxj3,
'svg_dzwujb': svg_dzwujb,
'svg_p45gdo': svg_p45gdo,
'svg_20idv2': svg_20idv2
},
)
Flutter 源码
评论