开篇词 · 为什么每一位大前端从业者都应该学

你好，我是陈航，目前在美团外卖担任商家业务大前端团队技术负责人。在接下来三个月的时间里，我将和你一起学习 Flutter。

当下是移动互联网的时代，也是大前端技术紧密整合的时代。而移动系统与终端设备的碎片化，让我们一直头痛于在不同平台上开发和维护同一个产品的成本问题：使用原生方式来开发 App，不仅要求分别针对 iOS 和 Android 平台，使用不同的语言实现同样的产品功能，还要对不同的终端设备和不同的操作系统进行功能适配，并承担由此带来的测试维护升级工作。

这对中小型团队而言无疑是非常大的负担，也无形中拖慢了追求“小步快跑”，以快速应对市场变化的互联网产品交付节奏。

为解决这一问题，各类打着“一套代码，多端运行”口号的跨平台开发方案，如雨后春笋般涌现，React Native 就是其中的典型代表。

React Native 希望开发者能够在性能、展示、交互能力和迭代交付效率之间做到平衡。它在 Web 容器方案的基础上，优化了加载、解析和渲染这三大过程，以相对简单的方式支持了构建移动端页面必要的 Web 标准，保证了便捷的前端开发体验；并且在保留基本渲染能力的基础上，用原生自带的 UI 组件实现代替了核心的渲染引擎，从而保证了良好的渲染性能。

但是，由于 React Native 的技术方案所限，使用原生控件承载界面渲染，在牺牲了部分 Web 标准灵活性的同时，固然解决了不少性能问题，但也引入了新的问题：除开通过 JavaScript 虚拟机进行原生接口的调用，而带来的通信低效不谈，由于框架本身不负责渲染，而是由原生代理，因此我们还需要面对大量平台相关的逻辑。

而随着系统版本和 API 的变化，我们还需要处理不同平台的原生控件渲染能力上的差异，修复各类怪异的 Bug，甚至还需要在原生系统上打各类补丁。

这都使 React Native 的跨平台特性被大打折扣：要用好 React Native，除了掌握这个框架外，开发者还必须同时熟悉 iOS 和 Android 系统。这，无疑给开发者提出了更多挑战，也是很多开发者们对 React Native 又爱又恨的原因。在这其中，也有一些团队决定放弃 React Native 回归原生开发，Airbnb 就是一个例子。

备注：2018 年，Airbnb 团队在 Medium 上发布的一系列文章（React Native at Airbnb、React Native at Airbnb: The Technology、Building a Cross-Platform Mobile Team、Sunsetting React Native、What’s Next for Mobile at Airbnb）详细描述了这个过程。

而我们本次课程的主角 Flutter，则完全不同于 React Native。

它开辟了全新的思路，提供了一整套从底层渲染逻辑到上层开发语言的完整解决方案：视图渲染完全闭环在其框架内部，不依赖于底层操作系统提供的任何组件，从根本上保证了视图渲染在 Android 和 iOS 上的高度一致性；Flutter 的开发语言 Dart，是 Google 专门为（大）前端开发量身打造的专属语言，借助于先进的工具链和编译器，成为了少数同时支持 JIT 和 AOT 的语言之一，开发期调试效率高，发布期运行速度快、执行性能好，在代码执行效率上可以媲美原生 App。而这与 React Native 所用的只能解释执行的 JavaScript，又拉开了性能差距。

正是因为这些革命性的特点，Flutter 在正式版发布半年多的时间里，在 GitHub 上的 Star 就已经超过了 68,000，与已经发布 4 年多的、拥有 78,000 Star 的同行业领头羊 React Native 的差距非常小。同时，阿里闲鱼、今日头条等知名商用案例的加持，更使得 Flutter 的热度不断攀升。

现在看来，在 Google 的强力带动下，Flutter 极有可能成为跨平台开发领域的终极解决方案。在过去的大半年时间里，我曾面试了 20 多位初、中、高级候选人，包括前端、Android、iOS 的开发者。当问到最近想学习什么新技术时，超过 80% 的候选人告诉我，他会学习或正在学习 Flutter。

不过坦白讲，相比其他跨平台技术，Flutter 的学习成本相对较高。我听过很多（大）前端开发者反馈：Flutter 从语言到开发框架都是全新的，技术栈的积累也要从头开始，学不动了。

学习成本高，这也是目前大多数开发者犹豫是否要跟进这个框架的最重要原因。对此，我感同身受。

但其实，大前端各个方向的工作有很多相似、相通之处。面对业务侧日益增多的需求，作为大前端团队的负责人，我曾在不同时期带领团队分别探索并大规模落地了以 React Native 和 Flutter 为代表的跨平台方案，也是美团最早落地 Flutter 线上大规模应用的发起者和推动者之一。

在探索并大规模落地 Flutter 的过程中，我阅读过大量关于 Flutter 的教程和技术博客，但我发现很多文章的学习门槛都比较高，而且过于重视应用层 API 各个参数的介绍或实现细节，导致很多从其他平台转来的开发者无从下手，只能依葫芦画瓢，却不知道为什么要“画瓢”，无法与自身的经验串联进而形成知识体系。这，无疑又增加了学习门槛，加长了学习周期。

那么，Flutter 到底该怎么学？真的要从头开始么？

虽然 Flutter 是全新的跨平台技术，但其背后的框架原理和底层设计思想，无论是底层渲染机制与事件处理方式，还是组件化解耦思路，亦或是工程化整体方法等，与原生 Android/iOS 开发并没有本质区别，甚至还从 React Native 那里吸收了不少优秀的设计理念。就连 Flutter 所采用的 Dart 语言，关于信息表达和处理的方式，也有诸多其他优秀编程语言的影子。

因此，从本质上看，Flutter 并没有开创新的概念。这也就意味着，如果我们在学习 Flutter 时，能够深入进去搞懂它的原理、设计思路和通用理念，并与过往的开发经验相结合，建立起属于自己的知识体系抽象层次，而不是仅停留在应用层 API 的使用上，就摆脱了经验与平台的强绑定。

这样的话，即使未来老框架不断更新，或者出现新的解决方案，我们仍旧可以立于不败之地。

那么，Flutter 框架底层有哪些关键技术？它们是如何高效运转，以支撑起可以媲美原生应用的跨平台方案的？Flutter 应用开发的最佳实践是怎样的？企业需要什么样的终端技术人才？终端技术未来有哪些发展方向？

这些问题，正是我要通过这个课程为你解答的。在这个课程里，我不仅会帮助你快速上手，能够使用 Flutter 开发一款企业级 App，更希望帮助你将其与过往的开发经验串联起来，以建立起自己的知识体系；同时，希望你能透过现象明白 Flutter 框架的用法，并看到其背后的原理和设计理念。

为了帮助你领悟到 Flutter 的核心思想和关键技术，而不是陷入组件的 API 细节难以自拔，我会在不影响学习、理解的情况下，省去一些不影响核心功能的代码和参数讲解，着重为你剖析框架的核心知识点和背后原理，并与你分享一些常见问题的解决思路。

整体来说，专栏主要包括以下五大部分内容：

• Flutter 开发起步模块。我会从跨平台方案发展历史出发，与你介绍 Flutter 的诞生背景、基本原理，并带你体验一下 Flutter 代码是如何在原生系统上运行的。
• Dart 基础模块。我会从 Dart 与其他编程语言的设计思想对比出发，与你讲述 Dart 设计的关键思路以及独有特性，并通过一个综合案例带你去实践一下。
• Flutter 基础模块。我将通过 Flutter 与原生系统对应概念对比，与你讲述 Flutter 独有的概念和框架设计思路。学完这个模块，你就可以开发出一个简单的 App 了。
• Flutter 进阶模块。我会与你讲述 Flutter 开发中的一些疑难问题、高级特性及其背后原理，帮助你在遇到问题时化被动为主动。
• Flutter 综合应用模块。我将和你聊聊在企业级应用迭代的生命周期中，如何从效率和质量这两个维度出发，构建自己的 Flutter 开发体系。

最后，我希望通过这个课程，能够帮助你快速上手 Flutter 开发应用，掌握其精髓，并引导你建立起属于自己的终端知识体系。

现在，Flutter 正处于快速发展中，社区也非常活跃。站在未来看未来，尽管 Flutter 全平台制霸的目标已经非常清晰，但为期三个月的专栏分享未必能穷尽 Flutter 未来可能的技术发展方向。接下来，我会持续关注 Flutter 包括移动端之外的最新变化，持续更新这个专栏，第一时间与你分享 Flutter 的那些事儿。

好了，今天的内容就到这里了。如果可以的话，还请你在留言区中做个自我介绍，和我聊聊你目前的工作、学习情况，以及你在学习或者使用 Flutter 时遇到的问题，这样我们可以彼此了解，也方便我在后面针对性地给你讲解。

加油，让我们突破自己的瓶颈，保持学习、保持冷静、保持成长。