Flutter快学快用开篇词 通往大前端的一把关键钥匙 Flutter

你好，欢迎来到 Flutter 课程，我是清弦。

近 10 年来，我一直在一线大厂从事 Web 前端研发工作，负责前端、中台业务以及跨端平台的研发和团队管理。目前大前端因为“一套代码，多端运行”的特性成为大势所趋，因此我也在致力于将团队培养为 Web 前端全栈及大前端双通道人员，借此提升前端技术人员在未来很长一段时间的竞争力，而其中选用的技术就是 Flutter。

从 Hybrid 到 Weex、React Native 这些跨端技术的出现，确实很好地解决了跨端技术不一致、热加载、提升开发效率，以及降低开发成本的问题，但一个核心技术痛点“性能问题”却一直没有非常好的解决方案。而仅仅出道 2 年的 Flutter，通过自渲染模式，以及在体验和性能上的优异表现一时风头无两，其性能更是在跨端技术中处于领跑地位。

除了大量为适应快速发展节奏和节省人力成本的中小型企业，很多一线互联网企业也在重要项目中落地了 Flutter 技术，包括阿里（闲鱼）、蚂蚁金服（蚂蚁财富）、腾讯（多款在线教育App）、字节跳动（头条和西瓜视频），以及美团（美团 App）和快手（快手 App），等等。

有需求，就有人才市场。目前我们可以看到很多企业在招聘 Flutter 工程师，甚至一些前端或移动端的招聘岗位中也会备注“熟悉 Flutter 优先”，并且这些岗位大多来自一些知名企业，薪资优势也非常明显：

（来自：拉勾网）

市场需求已经验证，相信你也已经迫切想要追上这波技术红利，快速上手 Flutter 并获得理想的职位。但是，在学习和实践 Flutter 的过程中，很多技术人普遍面临这样几类问题。

• 学习资料大多从 0 到 1，偏入门+实战。

基础课程是掌握一门新技术的必备环节，但在足够系统的同时，也会有知识点重合度较高的问题。一些常见的知识点学习起来比较浪费时间，需要你自己去抽离重点，毕竟学 Flutter 的技术人，一般也都懂些基础内容。

• 实践及场景应用少，无法直接反馈到工作中。

学到了些 Flutter 核心技术，但缺少进阶和综合应用，混合开发的内容很少，所以无法开发出一个实际的项目应用，也没办法解决你工作上的实际问题，导致在 Flutter 上还是经常踩坑。

• 直接上手开发，却不了解核心原理，不能从源处寻找一些优化方向和优化策略。

工作中的开发往往只关注实际用法，很少有时间去注重基础原理，从而忽略了这块重要知识，导致优化方向只能从他人的经验中去学习。但是，很多问题都有一定的独特性，需要你具备快速定位和分析解决问题的能力，不能一切依靠“搜索”能力。

其实，学习一门新的语言或者框架无外乎这样一个路径：第一步，需要快速理清一些核心基础知识点，掌握编程语法和运行原理；第二步，实践应用开发，通过项目实践来熟悉开发过程中的一些工具、规范和常见问题；第三步，掌握核心设计思想和实现原理，能够基于一些核心原理寻找一些底层优化策略。

鉴于以上背景情况，我希望通过一个系统课程来帮助你快速、有效学习 Flutter 技术。我会带你体验最佳的学习路径，从实际工作场景中的应用问题出发，来给你呈现这个课程。本课程的核心优势，主要体现在以下 3 个方面：

• 抽离核心和重要知识点：通过对比 Web 前端技术来讲解 Flutter，着重介绍差异点及 Flutter 的核心功能，对于大家普遍熟悉或者已经掌握的知识点，我会选择性带过，在带你掌握最核心知识点的同时，帮你省时间。（当然，如果你了解 JavaScript 语言编程、React 或者 Vue 以及前端 MVVM 框架等前端知识，学习体验会非常好。但如果你是移动端开发者，也不用担心，文章中也是基于移动端应用为实践项目，因此也是移动端日常开发熟悉的学习过程。）

• 综合实战教学：为了让你跨越从理解概念知识到真正落地实践的鸿沟，我会用一个轻量 App 的开发实践过程，来串联讲解每个技术知识点。

• 贴近实际的应用场景：本课程列举了大部分项目开发中实际应用的功能点（比如红点功能、多导航功能，以及布局设计等），如果你在工作中没有实践场景，贴近应用场景的内容可以帮你更好地消化吸收理论知识。

具体来讲，我将整个课程分成了基础 + 项目实战 + 进阶原理三个大的模块。

• 模块一，Flutter 基础知识：带你掌握必备的基础知识，包括 Flutter 语法、运行原理、环境构建、代码规范、生命周期、状态管理，以及有无状态组件等。在这个模块中，我会带你从 Web 前端视角，去重新学习一个新的框架，减少你学习的时间成本。学完后，你将能够应用本模块的知识点完成一些组件开发。

• 模块二，项目实战：教你如何从立项到线上运营，开发出一款轻量级的 App 应用。其中涵盖但不限于 App 的基础功能点、导航栏设计、上拉刷新和加载、红点提醒、服务端协议交互、布局设计、打包与发布，以及线上运营和监控等内容。学完后，你将能够用 Flutter 开发完成实际项目。

• 模块三，进阶原理：在掌握了基础的开发能力后，进阶才是体现能力的部分。这个模块中，我抽取了 Flutter 的几个关键知识点，包括如何与原生平台相互调用、性能分析和优化实践、渲染原理，以及 Flutter 内部的架构设计整体实现。学完后，你不仅能够掌握如何设计与原生平台交互的通道，还能够掌握性能优化的策略，而不是照搬他人想法。

此外，本课程还会为你提供一套 App 对应的 Node.js 服务端源码，按照源码指引将服务部署后，你可以将本课程实践的 App 应用发布到 Android 市场或者 App Store，作为一个线上的 App 进行运营。

讲师寄语

查理·芒格说过这样一句话：“宏观是我们必须接受的，微观才是我们可以有所作为的。”而宏观上，我们正身处大前端的浪潮之中，微观上我们手握选择的权利。

因为前几年的技术红利，前端技术人才越来越多，企业对于人才的能力要求也水涨船高，仅掌握单一平台编程开发能力已经稍显欠缺。希望这个课程能助你一臂之力，让你在招聘面试和日常工作中取得更多竞争优势，让你的职业发展更加长劲、有力。

假如你有任何问题，欢迎在留言区给我留言。

---

你好，在课程的最开始，我想先来带你从跨多终端技术发展历程看看未来大前端的发展趋势。

随着互联网技术的发展，业务平台对多设备、多终端的需求越来越多，因此，仅掌握单一平台编程开发能力已经稍显欠缺。由于在业务开发过程中，开发者大部分的时间都专研于一种编程语言，如果想要掌握多端开发能力，则又稍显力不从心。因此大前端的概念应运而生，本课时主要介绍大前端的发展历程，以及如何做好大前端技术的选型分析。

什么是大前端

大前端概念对于编程开发者来说早已耳熟能详，从我的角度来理解这个概念的话，主要是通过同一套编程代码，经过框架编译转化能够适应于多端平台的前端交互界面。当然这里只介绍目前应用较广的三个方面，即 iOS、Andorid 和 Web H5，之后可以再延伸到小程序、TV、Watch 等其他智能设备，如图 1 所示。

图 1 多端平台的前端交互界面

大前端的核心是为了解决多端不一致和人力的问题。比如在一些交互复杂度不高的应用中，通过这种模式可以更好地节省人力成本，特别是在一些前期快速发展的创业公司，可以使用较少的人力来支撑一些核心业务功能。

跨端技术的发展

移动端跨平台技术经过了一个漫长的发展史，如图 2 所示。下面主要介绍下在这个发展过程中跨平台技术有了哪些进步或者做了哪些优化。

图 2 跨端技术的发展过程

• Ionic/Cordova（Hybrid），在技术原理上的核心是，将原生的一些能力通过 JSBridge 封装给 Web 来调用，扩充了 Web 应用能力。但是这种方法有两个不足，一是依赖客户端，二是在性能和体验上都非常依赖于 Web 端。因此，整体上的体验不可预知。目前这个技术还经常被应用到，例如，当前 App 内会提供白名单域名和可调用的 JSBridge 方法，由此来增强 H5 与客户端交互能力，从而提升 App 内 H5 的灵活性。
• React Native/Weex，在原来的 Hybrid 的 JSBridge 基础上进行改进，将 JavaScript 的界面以及交互转化为 Native 的控件，从而在体验上和原生界面基本一致。但因为是 JIT 模式，因此需要频繁地在 JavaScript 与 Native 之间进行通信，从而会有一定的性能损耗影响，导致体验上与原生会有一些差异。
• Flutter，取长补短，结合了之前的一些优点，解决了与 Native 之间通信的问题，同时也有了自渲染模式（框架自身实现了一套 UI 基础框架，与原来的渲染模式基本一致）。从而在体验和性能上相对之前的两种框架表现都较好，具体是如何做到的，我会在接下来的第 22 课时中详细介绍。

经过上面的技术原理和优缺点对比，Flutter 在各方面都表现出了突出的优势，因此把 Flutter 作为入门大前端的核心框架。

选择 Flutter 的思考

大前端这个概念从开始到现在已经有整整 10 年时间，那为什么到现在还没有一统江湖呢？其实从我的角度来看，Flutter 也不会创造一统江湖的成果，因为多端或者智能设备的发展终究不会停止，也很难做到统一标准。那为什么我们还要选择 Flutter 来作为大前端核心框架呢？

事实上 Flutter 的确能够为我们解决一些场景问题，节省人力成本，同时不影响用户体验。

选择 Flutter 并不是为了代替 iOS 或者 Android，而是做一个技术互补，比如，Flutter 负责业务功能，而 iOS 和 Android 则负责部分的底层交互提供服务给到 Flutter 应用。Flutter 也是在这两年刚刚兴起的，在应用起步初期还需要部分底层的服务与原生平台进行交互。相信再经过一段时间的发展，Flutter 在这方面会不断地优化和提升，也将能够独立覆盖到更多复杂的业务场景。因此希望你能够明白大前端的概念，以及 Flutter 目前的应用场景。

分析完后，下面对目前的技术团队和未来技术团队进行一个简单分析，也可以认为是一个预测。如果你觉得有帮助，那么可以往这方面进行一些尝试，如图 3 所示。大部分开发者会集中在跨端技术团队中；而另一部分核心技术攻坚则在相应的平台技术端（比如 Android 基础技术团队、iOS 基础技术团队或 Web 基础技术团队），为跨端技术团队提供基础技术服务支撑。当然如果跨端技术团队将组件完善并且可通用化，那么跨端技术团队的人员则可以更快地配置组装的方式构建业务功能。

图 3 技术团队选型

总结

本课时首先介绍了大前端的概念以及发展历程，以及从发展历程来看我们选择 Flutter 的原因，其次也分析了未来跨端框架的发展思考，从而得出新大前端团队架构体系。相信通过本课时的学习，你对大前端的概念和发展以及未来的前景有一定的认识，并且在看过本课时以后，应该要为大前端的方向上做一定的技术积累和沉淀。

下一课时，我将讲解 Flutter 框架中使用的编程语言 Dart，为了方便你更好地理解，我将从 JavaScript 角度来讲解。

---

精选评论

**建：

跨技术端的3个对比如果能更详细点就好了，虽然知道flutter性能是更好，但是具体的其他底层为什么不够好，看了这个对比，我其实还是不太明白。

就是“更依赖于 Web 端”这块，不是很明白，可以更具体点吗

    讲师回复：

    Hybrid 其实是一个 H5 页面，在每个 APP 中包了一个 H5 的 Web 页面，只是在需要原生功能的地方，通过原生封装一些 JSAPI 给到页面去调用，看起来就像是 H5 拥有了原生 APP 交互功能。所以文章里面说的依赖 Web 的性能就是这个原因。
React Native 以及 Weex ，就改变了用 H5 实现的方式，使用的是原生的界面，但是用户的各类事件操作，都是需要与 JS 进行操作，而 JS 操作后，需要将响应反馈到原生 Native 中，所以需要一个交互过程（ JIT 意思就是运行时编译，就像在运行的时候将 JS 编译为原生界面的过程 ）。你看我这样说，有明白吗？

**的巨人：

持续打卡，期待自我提升。

**远：

加油！

gjd：

没有点出react-native有点遗憾

    讲师回复：

    react-native目前我们也在使用，但是更多应用的是热更新，这也是flutter目前没有搞定的一块，react-native在这里是有一定优势。但是性能方面react-native还是差了不少，特别是在一些动画效果上。如果你还需要更多的关于react-native的可以和我再进行交流，可以在github上进行留言，我会回复哈。

**的阿科：

flutter的性能和体验都不错，而且依赖原生少

**彬：

性能好不好，看开发的能力了

**3336：

Web开发，但不知道原生native 是什么意思

    讲师回复：

    原生native一般是指Android或者iOS，使用的语言是Java、Oject-c、Swift

*亮：

加油

*伟：

flutter的动态性比rn要好？是从哪些方面提现的？

    编辑回复：

    Flutter 性能会在22课时 和23课时详细讲喔

**杰：

坐等更新

    编辑回复：

    小编欢迎小可爱喔

*辉：

坚持打卡！

*瑞：

打卡