Google为什么以Fullter作为原生突破口

前言

在 Google I/O ’17 上，Google 向我们介绍了 Flutter —— ⼀款新的⽤于创建移动应⽤的开源库。

正如你所想的那样，Flutter 是能够帮助创建拥有漂亮 UI 界⾯的跨平台移动应⽤解决⽅案。Flutter 的界⾯设计与 web 应⽤类似，因此，你能够从 Flutter 上找到像使⽤ HTML/CSS 那样熟悉的感觉。

Google 表⽰：
Flutter 将会帮你更容易，更快速的开发出界⾯美观的移动应⽤。听起来很美好，但是⾸先要说的是，我对其他跨平台解决⽅案，诸如  Xamarin，PhoneGap，Ionic，React Native 等并不是很认可。 ⼤家都知道，这些解决⽅案互有利弊，很难选择。虽然我并不确定 Flutter是否会与它们有所不同，但是我很期待。

Flutter 在 Android 前端开发上具有很多特⾊，很有吸引⼒。

Android的前生今世

Android系统作为全球第一大系统，基于Java开发的移动端有着诸多的性能优势

2018年前 H5的性能瓶颈和RN的停更 导致业界对跨平台开发失去信心。直到2018年10月Google推出首个Flutter跨平台解决方案，打破整个移动开发的方向

为什么Flutter成为Android方向标？

• 跨平台性: Flutter基于图像绘制引擎进行渲染，在不同平台下绘制效果是绝对一致的，能做到真正的跨平台，一处写 处处运行

• 性能优异性: 不同于H5通过DOM渲染 和RN映射组件，Flutter直接基于native进行绘制。性能上完全超过原生

• 热重载性:Android原生开发 会遇到 编译-打包-安装 三部曲。开发效率迟迟得不到提升。热重载技术在Flutter内完美体现

Flutter详情介绍

• Dart语法编译: Dart 是一种强类型、跨平台的客户端开发语言。具有专门为客户端优化、高生产力、快速高效、可移植易学的风格。Dart主要由Google负责开发和维护

• Flutter插件: Flutter使用的Dart语言无法直接调用Android系统提供的Java接口，这时就需要使用插件来实现中转。Flutter官方提供了丰富的原生接口封装

Flutter系统架构

Flutter分为三大部分：

1. 由Dart语言负责的Framwork层

2. Dart语法执行器

3. Skia图像处理引擎

Sika图像处理引擎

• 2005年Skia图像处理引擎成立，用来展示Chrome 火狐 和其他Google自家的产品使用

• 2007年 第一个Android系统问世，于是Google开发者将Skia移植到Android平台

• Skia作为一个2D的图形系统，包括绘图，渲染，显示图片都是用Skia完成

原生开发会接触到Skia吗？

Skia引擎详解

疑问：是真的吗？ 我只接触过Bitmap，原来Bitmap下面还有很多奥秘

源码验证----创建Bitmap开始

图：图片源码追踪

图：控件源码追踪

Skia引擎与Flutter有什么关系呢？

除了通过xml方式定义布局 或者继承View 显示在Android屏幕外还有没有方法呢？

如何显示

为什么Flutter会实现三大特性（跨平台，性能高，热重载）

1 跨平台技术

Android图像引擎 Skia
IOS图像引擎 JPEG

2 性能比原生高

渲染流程 ：

图：渲染流程

React渲染与Flutter渲染相同点

React渲染与Flutter渲染不同点 ：

• 绘制树: ReactNative基于ReactShadow的链式结构在内存中形成一个虚拟的Dom树，Flutter是通过引擎实现不同图层的渲染方式

• 机制不一样: ReactNative最终被反射成原生控件，而Flutter是底层通过引擎直接渲染，不存在映射的说法

Flutter渲染
在Flutter界面渲染过程分为三个阶段：布局、绘制、合成，布局和绘制在Flutter框架中完成
合成则交由引擎负责。