开篇词 | 为什么每一位大前端从业者都应该学习Flutter?

你好,我是陈航,之前在美团外卖担任商家业务大前端团队技术负责人。在接下来三个月的时间里,我将和你一起学习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 AirbnbReact Native at Airbnb: The TechnologyBuilding a Cross-Platform Mobile TeamSunsetting React NativeWhat’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时遇到的问题,这样我们可以彼此了解,也方便我在后面针对性地给你讲解。

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

精选留言

  • 加温后的啤酒

    2019-07-02 09:35:45

    老师你好,我之前接触过flutter,但是放弃了。因为接触了flutter之后发现,渲染UI方面确实性能、简洁性各方面都不错、可是像webView、音视频播放、第三方分享、数据持久化存储等功能需要大量的组件支持,flutter引擎并不支持。因此就需要去编写大量的组件、但是编写组件很麻烦、等于要写三套代码:iOS代码、安卓代码、Dart代码,那如果这么麻烦的话flutter存在的意义又是什么呢?这就是我放弃的原因。所以老师能讨论下这个问题该怎么解决吗?
    作者回复

    跟其他的跨平台解决方案相比,Flutter在Android和iOS代码复用率上是最高的了。不过Flutter毕竟只接管了渲染层,原生操作系统底层的能力像Push、视频、地图肯定还得依靠原生来实现,Flutter如果全接管了它就是一个操作系统了,那它打包的App得多大。
    有第三方成熟的插件尽量用第三方插件,特殊的需求可以自己封装

    2019-07-03 00:53:18

  • 胡鹏

    2019-07-01 20:10:26

    我是工作两年的后端,半年前内部调岗到大数据,,不过我的全栈梦想和架构梦想一直没变过,
    作者回复

    加油!

    2019-07-02 01:57:27

  • top_founder

    2019-07-02 09:23:13

    我对dart能否成为大众开发语言持怀疑态度。我更认为typescript是未来前端的主流开发语言。
    作者回复

    如果你了解Dart就会发现其实Dart和TS很多概念都相似,比如Future与Promise,aync/await,Event Loop,Micro-Task和Macro-Task,Isolate与Worker

    2019-07-03 00:39:34

  • 衣知世 与 计知白

    2019-10-12 09:20:21

    安卓开发4年多,感觉很多东西还是不会,毕竟单单一个安卓就有很多方向,IM,视频,直播等等,如果现在学习Flutter,这些底层的原理是不是还得继续学习,Flutter只是一个UI渲染库呢?比如视频播放什么的还得用到安卓里面的video呢?
    作者回复

    安卓底层的东西也需要继续学的哈,在保持安卓的深度同时扩大终端技术的广度。flutter只负责渲染层,底层基础能力仍然需要操作系统提供支持的。技术领域没有银弹,每个技术有自己擅长的场景。

    2019-10-29 11:36:38

  • 蛤熊

    2020-07-01 15:25:59

    iOS开发5年, RN开发1年半, 今天重新起步, keep hungry keep foolish
  • Xunqf

    2019-07-01 23:56:08

    我是做iOS开发的,Flutter是我接触的第一个跨平台开发框架,自学一段时间后,遇到了如下一些问题:
    1.网页加载问题。
    2.视频播放问题。
    3.原生和Flutter之间跳转问题。
    4.图片编辑问题。
    5.Platform View目前还是beta版,也有各种问题。
    6.网络请求代理的问题。
    7.等等吧。
    希望在这个专栏中能够得到解答。
    作者回复

    大部分都会讲的

    2019-07-03 00:42:41

  • Eren

    2019-07-06 11:16:38

    我是工作两年的Android程序员,赶上了Android移动端的末班车,希望通过学习Flutter可以弯道超车,实现自己的小梦想!加油!小伙伴们!
    作者回复

    加油

    2019-07-08 01:44:32

  • Norbert

    2019-07-01 20:53:47

    我是一个7年老前端了,打算从flutter入手切入客户端开发
    作者回复

    加油

    2019-07-02 01:57:45

  • Carlo

    2019-07-18 16:42:04

    我们在生产环境使用flutter。发现适配新的native feature(比如dark mode 等)很成问题。您对这个有什么建议?
    作者回复

    跨平台技术本质上是为了抹平多端差异,尽量用统一而底层的技术栈去屏蔽操作系统的提供的不同能力,在不同操作系统实现一致的体验。
    如果你们有很强的适配native的新feature,说明你们需要在应用层去感知操作系统,精细的去控制实现细节,而这与跨平台技术本身的应用场景是矛盾的。
    不过就Dark mode这个需求而言,你们可以在Flutter上用主题搞定。

    2019-07-19 00:53:31

  • 墨名次

    2019-07-02 23:30:18

    我做过几年Android/IOS应用程序开发,也使用Weex写过公司项目,不过这些东西快一年没接触了,现在一直在写后端(Java、.Net)跟Web前端,Flutter没发布正式版的时候自己也根据文档学过一些皮毛,就是学了基础控件然后做了一些商城首页、列表、详情示例,后来因为工作原因暂时把它放下了。现在,总有放不下Flutter的那种感觉,感觉它会火,它是前端跨平台的一个趋势,所以又冒出了继续学习Flutter的想法,前几天自己也通过写博客分享了Flutter环境安装在Java11下遇到一些问题的解决方法。现在真的很忙,每天半夜才能睡觉,不想自己去翻文档、看博客学习了,这样太累,想利用睡觉前刷头条的时间学习一下Flutter,技多不压身,所以希望能够通过老师分享的这个课程系统的深入的学习Flutter,快速入门Flutter。
    作者回复

    加油

    2019-07-03 00:13:06

  • Dominic

    2019-07-02 15:49:44

    评论区好多后端 学 flutter的 … …我也是,
    作者回复

    加油

    2019-07-02 23:42:49

  • 水木年华

    2019-07-02 08:32:34

    前端开发一枚,熟悉webpack、react。老师有这些js基础学习Flutter会容易一些吗?
    作者回复

    可以的

    2019-07-02 23:55:17

  • Geek_b3928a

    2019-07-01 18:39:41

    我是一位后端开发者,请问没有前端经验开始学习flutter是否吃力,能独立开发一个应用周期会有多久?
    作者回复

    没有前端/客户端基础直接学习Flutter还是有一些挑战的,建议先花半个月左右的时间学习一门前端框架,对视图、组件、生命周期、状态等一些前端/客户端基本概念之后再来学习效果会比较好。

    2019-07-02 01:28:13

  • L

    2019-07-01 18:22:04

    后端程序员适合学习吗
    作者回复

    如果你对前端有一些基本概念(比如视图、组件、生命周期、状态),可以学习

    2019-07-02 01:45:10

  • ganvin

    2020-07-14 16:05:58

    厉害了,开篇就惊艳到了,逻辑清晰,目标突出,避重就轻抓重点,强
  • *

    2019-07-02 23:27:13

    老师好,我从实习到现在接触前端两年,最近准备学习flutter!目前接触的移动端解决方案是h5页面嵌在原生壳里面,这样做开发过程中和原生会有很多交互,不方便开发!
    1、需要android和iOS各自打包壳
    2、iOS上架审核慢问题
    3、第三方视频sdk集成问题,需要写两套,前端再调用原生方法打开视频
    4、实时位置定位等问题
    希望这些问题可以得到老师的解答!

    学习flutter image.network 加载网络图片失败了,还没找到原因
    作者回复

    加油

    2019-07-03 00:41:55

  • aklicc

    2020-11-08 23:36:30

    我是一名跨平台大前端从业者,主要做会议系统。工作中主要用electron和rn。期待flutter早日完善桌面应用支持,目前看来fluttet前途似锦
  • 侯伟龙

    2020-05-30 21:16:20

    老师,您好,请问您对苹果将来会不会限制Flutter的发展怎么看呢?
  • Geek_473879

    2020-02-13 22:15:33

    我是做了快4年的安卓开发工程师,最近一年在写vue项目,感觉现在开发主要是前端和app原生之间的交互占很大部分,公司运用的交付方式是cordoval,但是我感觉这个交互还是太麻烦。当我看到flutter 的时候,就觉得这个比较好,想好好学习一下,方便以后项目开发
  • I.Say

    2019-07-10 17:50:08

    3年的iOSer,学习flutter的唯一担忧就是它的性能是否能赶得上原生,毕竟想RN这种老的跨平台语言也很久了,但是很多公司尝试后又会放弃,回归到原生的开发,flutter是否会步其后尘,期待回复。
    作者回复

    判断一个终端技术是否能成为未来的趋势,我认为主要看它是否能减少对底层环境的依赖,是否能用尽量完整的技术栈和工具链去隔离各终端系统差异,向开发者提供统一而标准化的能力,以及在大前端永恒的三大主题,效率、质量和性能维度,能否从原理和运行机制层面有领先同类产品的表现。毕竟现在无论终端还是后台领域都在往应用层上走,标准化很重要。

    按这个标准看,我认为Web和Flutter都是趋势。RN的出现有它的历史背景,但我认为RN是一种中间层的妥协方案,最终很可能会回归Web。

    2019-07-11 01:21:07