Flutter live 18之后的移动开发技术综述

Flutter

Word count: 2,146 / Reading time: 8 min

 2018/12/22   Share

移动开发技术

移动开发技术泛指手机端的应用开发，平台主要有iOS和Android。移动开发技术大体目前可分为两类，一类是原生开发，一类是跨平台开发。

两者各有优缺点，先给出大佬的观点:

移动端Web开发就像用店里买的锅炒菜，稳定快捷，做家常菜足够了。而native开发就好像不但要做菜，还要亲自打一口最合适自己的锅。虽然速度不快，虽然成本很高，但是想要做出最好吃的拿手菜，用店里的锅就是做不出那个味道。 ———即刻iOS leader JasonYuh

原生开发

原生开发是指使用特定语言(如Kotlin与Swift)调用系统SDK开发的应用。在接触Flutter之前，我属于这类开发人员。对于原生开发，我总结出如下的优缺点:

原生开发的优点

速度快，性能好，用户体验佳，原汁原味
开发人员多，社区比较完善，可用的第三方库健全
可访问平台的所有功能，如iPhone X的前置深度相机进行面部识别、蓝牙、GPS等
有谷歌和苹果的工程师每年召开开发者大会WWDC/Google IO，更新SDK，演讲介绍best practice

原生开发的缺点

开发成本高，人力成本大，需要两班人马
功能更新或内容更新需要发布新版本，有审核周期
Swift ABI不稳定，Swift版本升级维护工作量大，因此保守的国内公司大部分代码还是用OC

上面两点是我在开发Match问答的过程中深有体会的两点。我与朋友分别开发和维护iOS和Android客户端，版本迭代的人力成本是翻倍的。任何的修改都要提交审核，通常第一次审核遇到的麻烦比较多，后面审核相对比较顺利，但也要平均两天的时间，这对于高速变化的互联网时代一定是不可接受的。

跨平台技术

针对原生开发人力成本和动态化不足的缺点，诞生了一些跨平台的动态化框架。根据原理可大体分为三类:

Html5+Webview渲染的Hybrid APP
以ReactNative为代表的JS开发+原生渲染
以Flutter为代表的自绘UI+Native

跨平台技术与原生技术示意图 (图片来源:知乎用户 @易旭昕)

Flutter之外的跨平台技术

Html5+Webview渲染的Hybrid APP

第一类技术主要是利用原生控件Webview渲染网页，加载前端工程师开发好的已适配手机端的网页，这类应用也被称为Hybrid APP。它确实解决了原生开发带来的人力成本与动态性不够的问题。

它最大的缺点是性能问题，Webview可以理解为一个浏览器内核，上文提到的蓝牙、前置摄像头这些资源是无权访问到的。若使用到这些功能，需要用JS与原生API通信，这个部分是由JSBridge完成的。涉及到通信事情就复杂起来了，需要指定协议(规定消息的格式含义等)，性能也随之降低。

以ReactNative为代表的JS开发+原生渲染

第二类技术在第一类技术的基础上进行了改进，将不堪重负的Webview替换为了原生渲染。以React Native为例，它借助React的Virtual DOM技术，在RN中将其渲染为原生控件树，从而大幅提升了渲染效率。

响应式编程也是React提出的一个重要思想，状态(State)改变，则UI随之改变。这样开发者只需要处理和关注状态的变化，剩下的交给框架完成，得益于Diff算法，框架可以高效的完成DOM更新操作。

如此看来，React真是非常伟大。Vue的作者也在一个讨论React与Vue的帖子下大方承认，再过若干年，React的历史功绩肯定在Vue之上。Flutter中也从中大量借鉴了宝贵经验。关于两者的布局、构建、渲染、更新机制，后面可以展开单写一篇博客。

Flutter的渲染、绘制机制示意图(图片来源:知乎用户 @JoeyChi)

国内厂商也进行了尝试，比如阿里的Weex和华为小米等国内厂商制定的快应用。

相比于第一类解决方案，第二类解决方案性能已经提升蛮多的了，但还是无法避开Javascript与原生的通信。而且作为解释性的语言，Javascript的性能好不到哪里去。

另外，当iOS/Android系统更新后，控件可能会更新，也就是虚拟DOM渲染的目标就更新了，因此不可避免的会有一段时间的空档期，等待社区控件的更新。

Flutter

Flutter的改进与性能

Flutter抛弃了JS，使用了可编译为机器码的Dart作为编程语言，底层Engine层包含了 Skia渲染引擎以及文字处理引擎，自绘了UI，同时支持iOS的Cupertino风格与Android的Material风格。

正是因为较好的解决了上面的问题，Flutter声称可以达到媲美原生的效果。关于原生与Flutter的性能对比，可以参考Flutter和原生应用性能对比。

在假设他能够做到独立、第三方的前提下，结论是:android 原生在内存、CPU 资源占用方面要低于 flutter，并且安装包的体积也要小于 flutter，所以，不考虑其他因素，单纯从性能角度来说，android 原生肯定是要优于 flutter 的。但 flutter 也有它的优点，比如跨平台的开发、毫秒级的热重载等等，另外跨端开发也逐渐的流行起来，所以，我们在学好android原生的基础上，对跨端开发也要抱有积极的心态。

Flutter的历史

Flutter是谷歌最早于2017年5月推出的一套跨平台、开源UI框架，初衷是同时支持iOS、Android开发，并且是传说中的操作系统Fuchsia的默认开发套件，使用Dart语言编写。

Flutter的特点

其实学习Flutter有一段时间了，他的优点挺多，官方总结如下：

界面精美
速度快
支持热重载
开放

就我自己使用Flutter一段时间以来的实际体验，展开介绍一下。Flutter一直强调对屏幕的像素级掌控，让开发者不受限的堆叠任何图形、视频、文本和控件。Flutter内置的Widgets非常精美，最大程度的实现了Material Desig，因此应用的外观下限是有保证的(^_^)。

Flutter官方给出界面样例

速度快是Flutter的初心，媲美原生应用的速度是他的口号。 性能方面无需多言，相比于其他跨平台方案是有优势的，但比原生还是有一些差距。特别是iOS平台，由于没有内置Skia 2D加速图形引擎，会使IPA包的大小多出一截。

支持热重载这点对于开发者来说是非常爽的，开发者做出一点点修改，不用重启整个应用，经历漫长的等待了，在亚秒级别的等待后就能看到更新，非常方便。另外，即使出错了，也可以记住Context，在开发者修复代码后，恢复之前的Context，不用担心typo或者测试过程中，错误很难复现的问题。综合以上两点，Flutter称之为Stateful Hot Reload。