2021首次发车,Flutter Fair正式开源了,2年以上经验必看

  • Flutter动态化框架Fair的设计与思考

  • Flutter动态化框架Fair文档上线&开源倒计时

Fair是面向Dart的框架,虽然JavaScript是世界上“最好的语言”,但是我们仍然选择面向Dart而不是JS。有两个考量:

  • 基于JS的框架社区已经存在了,不想重复造*。

  • 面向JS存在通信的鸿沟,且对Dart开发者不够友好,如果使用JS,与RN打照面好像有点尴尬。

Fair通过DSL动态,结合Module组件,实现UI和逻辑的协作。其中DSL可以通过Bundle下发,Module需要作为基础能力,固化在App中跟版迭代。

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

概括一下Fair的面貌:

  1. Fair是面向原生Flutter开发者的,你不需要使用前端JS技术栈

  2. Fair的性能得益于Dart,无桥接更纯真

  3. Fair适用于Android,iOS,Web等全平台,Flutter可以用在哪里Fair就可以在哪里

  4. Fair是平台无关的,像普通Package一样,甚至可以和其他flutter动态化框架一起用

效果怎么样?


其实这个完全取决你能用Flutter画出多美妙的UI。如果非要说Flutter是一个画画图的框架,那他绝不会让你失望的。

Fair的UI渲染是 无损的,可以做到 像素级别的还原。

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

录制的视频可以访问文档平台查看:https://fair.58.com/guide/#demo-preview

Flutter模板工程Hello World


通过flutter create可以新建一个模板工程,内容是一个点击计数器效果。 我们将生成的源码,接入Fair后既可以通过动态形式去展示这个点击计数的逻辑。

效果

Flutter 原生Flutter Fair

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

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动态化。都不用写“俄罗斯套娃”布局了,是不是想想还有点刺激的

效果

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

Flutter 原生

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

Flutter Fair1

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

Flutter Fair2

建议

当我们出去找工作,或者准备找工作的时候,我们一定要想,我面试的目标是什么,我自己的技术栈有哪些,近期能掌握的有哪些,我的哪些短板 ,列出来,有计划的去完成,别看前两天掘金一些大佬在驳来驳去 ,他们的观点是他们的,不要因为他们的观点,膨胀了自己,影响自己的学习节奏。基础很大程度决定你自己技术层次的厚度,你再熟练框架也好,也会比你便宜的,性价比高的替代,很现实的问题但也要有危机意识,当我们年级大了,有哪些亮点,与比我们经历更旺盛的年轻小工程师,竞争。

CodeChina开源项目:《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》

  • 无论你现在水平怎么样一定要 持续学习 没有鸡汤,别人看起来的毫不费力,其实费了很大力,这四个字就是我的建议!!!!!!!!!

  • 准备想说怎么样写简历,想象算了,我觉得,技术就是你最好的简历

  • 我希望每一个努力生活的it工程师,都会得到自己想要的,因为我们很辛苦,我们应得的。

  • 有什么问题想交流,欢迎给我私信,欢迎评论

【附】相关架构及资料

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

2021首次发车,Flutter Fair正式开源了,2年以上经验必看

内含往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter全方面的Android进阶实践技术

  • 我希望每一个努力生活的it工程师,都会得到自己想要的,因为我们很辛苦,我们应得的。

  • 有什么问题想交流,欢迎给我私信,欢迎评论

【附】相关架构及资料

[外链图片转存中…(img-zMIIzCcw-1630892832949)]

[外链图片转存中…(img-2PetTxby-1630892832950)]

内含往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、NDK、混合式开发(ReactNative+Weex)微信小程序、Flutter全方面的Android进阶实践技术

上一篇:CF1083A The Fair Nut and the Best Path(树形dp)


下一篇:2021-6-2 支撑