-
Flutter动态化框架Fair的设计与思考
-
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插件生成的flutter工程，直接转换为Fair动态化。都不用写“俄罗斯套娃”布局了，是不是想想还有点刺激的
效果
Flutter 原生
Flutter Fair1
Flutter Fair2
建议
当我们出去找工作，或者准备找工作的时候，我们一定要想，我面试的目标是什么，我自己的技术栈有哪些，近期能掌握的有哪些，我的哪些短板 ，列出来，有计划的去完成，别看前两天掘金一些大佬在驳来驳去 ，他们的观点是他们的，不要因为他们的观点，膨胀了自己，影响自己的学习节奏。基础很大程度决定你自己技术层次的厚度，你再熟练框架也好，也会比你便宜的，性价比高的替代，很现实的问题但也要有危机意识，当我们年级大了，有哪些亮点，与比我们经历更旺盛的年轻小工程师，竞争。
CodeChina开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》
-
无论你现在水平怎么样一定要 持续学习 没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！！！！！！！！
-
准备想说怎么样写简历，想象算了，我觉得，技术就是你最好的简历
-
我希望每一个努力生活的it工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。
-
有什么问题想交流，欢迎给我私信，欢迎评论
【附】相关架构及资料
内含往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术
-
我希望每一个努力生活的it工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。
-
有什么问题想交流，欢迎给我私信，欢迎评论
【附】相关架构及资料
[外链图片转存中…(img-zMIIzCcw-1630892832949)]
[外链图片转存中…(img-2PetTxby-1630892832950)]
内含往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter全方面的Android进阶实践技术