(00)-掌握Flutter，成为大前端行业翘楚！你还在等什么？

超、凢脫俗 2024-03-16 18:56 42阅读 0赞

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

对中小型团队是很大负担，拖慢了追求“小步快跑”，以快速应对市场变化的互联网产品交付节奏。

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

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

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

而随系统版本和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][React Native at Airbnb_ The Technology]、 [Building a Cross-Platform Mobile Team][]、 [Sunsetting React Native][]、 [What’s Next for Mobile at Airbnb][What_s Next for Mobile at Airbnb]）详细描述了这个过程。

**而Flutter完全不同于React Native。**

它开辟全新思路，提供整套从底层渲染逻辑到上层开发语言的完整解决方案：视图渲染完全闭环在其框架内部，不依赖底层os提供的任何组件，从根本保证视图渲染在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的教程和技术博客，但我发现很多文章的学习门槛都比较高，而且过于重视应用层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正处于快速发展中，社区也非常活跃。

[React Native at Airbnb]: https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
[React Native at Airbnb_ The Technology]: https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-dafd0b43838
[Building a Cross-Platform Mobile Team]: https://medium.com/airbnb-engineering/building-a-cross-platform-mobile-team-3e1837b40a88
[Sunsetting React Native]: https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
[What_s Next for Mobile at Airbnb]: https://medium.com/airbnb-engineering/whats-next-for-mobile-at-airbnb-5e71618576ab