前端web开发工程师的必须flutter教程

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。

        夜学网Flutter免费视频教程

  • Flutter 在各个原生的平台中,使用自己的 C++的引擎渲染界面,没有使用 webview,也不像 RN、NativeScript 一样使用系统的组件。

    简单来说平台只是给 Flutter 提供一个画布。

  • 界面使用 Dart 语言开发,貌似唯一支持 JIT,和 AOT 模式的强类型语言。

  • 写法非常的现代,声明式,组件化,Composition > inheritance,响应式……就是现在前端流行的这一套 :smile:

  • 一套代码搞定所有平台。

Flutter目录结构

/
├── README.md
├── analysis_options.yaml
├── build # webdev build 编译生成的目录,用于部署
├── lib # 工作区
│   ├── components # 组件(Widgets)
│   ├── kit # 工具、父类
│   ├── main.dart # 入口
│   ├── models # 数据模型
│   ├── network # 网络
│   ├── pages # 页面
│   │   ├── detail # 详情页
│   │   │   ├── bloc
│   │   │   ├── detail.dart
│   │   │   ├── model
│   │   │   └── page
│   │   ├── index # 首页
│   │   ├── pages.dart
│   │   └── user # 用户
│   └── router # 页面路由
├── pubspec.lock
├── pubspec.yaml # 依赖
└── web
├── assets # 资源区
│   ├── FontManifest.json # 字体
│   └── images # 图片
│   └── swift_logo.png
├── index.html
└── main.dart

主要划分了 6 大部分:

  • network: 网络

  • models: 模型

  • router: 路由

  • pages: 页面

  • components:组件

  • kit: 工具、常量、基类等

Flutter 为什么快?Flutter 相比 RN 的优势在哪里?

从架构中实际上已经能看出 Flutter 为什么快,至少相比之前的当红炸子鸡 React Native 快的原因了。

  • Skia 引擎,Chrome, Chrome OS,Android,Firefox,Firefox OS 都以此作为渲染引擎。

  • Dart 语言可以 AOT 编译成 ARM Code,让布局以及业务代码运行的最快,而且 Dart 的 GC 针对 Flutter 频繁销毁创建 Widget 做了专门的优化。

  • CSS 的子集 Flex like 的布局方式,保留强大表现能力的同时,也保留了性能。

  • Flutter 业务书写的 Widget 在渲染之前 diff 转化成 Render Object,对,就像 React 中的 Virtual DOM,以此来确保开发体验和性能。

 

而相比 React Native:

  • RN 使用 JavaScript 来运行业务代码,然后 JS Bridge 的方式调用平台相关组件,性能比有损失,甚至平台不同 js 引擎都不一样。

  • RN 使用平台组件,行为一致性会有打折,或者说,开发者需要处理更多平台相关的问题。

 

而具体两者的性能测试,可以看这里,结论是 Flutter,在 CPU,FPS,内存稳定上均优于 ReactNative。

 

Dart 编程语言是什么?

在开始 Flutter 之前,我们需要先了解下 Dart 语言。Dart 是由 Google 开发,最初是想作为 JavaScript 替代语言,但是失败沉寂之后,作为 Flutter 独有开发语言又焕发了第二春。

实际上即使到了 2.0,Dart 语法和 JavaScriptFlutter非常的相像。

当然作为一篇写给前端工程师的教程,我在这里只想写写 JavaScript 中暂时没有的,Dart 中更为省心,也更“甜”的东西。

  • 不会飘的this

  • 强类型,当然前端现在有了 TypeScript :grimacing:

  • 强大方便的操作符号:

    • ?. 方便安全的foo?.bar取值,如果 foo 为null,那么取值为null

    • ?? condition ? expr1 : expr2 可以简写为expr1 ?? expr2

    • =和其他符号的组合: *=、~/=、&=、|= ……

    • 级联操作符(Cascade notation ..)


// 想想这样省了多少变量声明
querySelect('#button')
 ..text ="Confirm"
 ..classes.add('important')
 ..onClick.listen((e) => window.alert('Confirmed'))

甚至可以重写操作符

class Vector {
  final int x, y;

  Vector(this.x, this.y);

  Vector operator +(Vector v) => Vector(x + v.x, y + v.y);
  Vector operator -(Vector v) => Vector(x - v.x, y - v.y);

  // Operator == and hashCode not shown. For details, see note below.
  // ···
}

void main() {
  final v = Vector(2, 3);
  final w = Vector(2, 2);

  assert(v + w == Vector(4, 5));
  assert(v - w == Vector(0, 1));
}

 

前端 移动开发

有用 (0)

评论加载中...