从Flutter布道者到大前端全能专家 | 「JTalk大前端」做者专访第二期

hi 掘友们，「JTalk大前端做者专访」第二期来啦，本期咱们专访的是你们在站内很是熟悉的一个做者——恋猫de小郭（掘金主页 juejin.cn/user/817692… ），他在掘金高等级做者中一直保持着很高的更文频率，在本身的领域不断的深耕学习。每个做者都不少闪光的点，此次专访待你们一块儿来了解一下恋猫de小郭。

自我介绍

做者的主要经历，擅长和关注的领域是哪些？咱们看到做者有一本著做《Flutter 开发实战详解》，做者是什么契机开始接触 Flutter 技术的，最初是如何学习 Flutter 的？

你们好，我是恋猫de小郭，《Flutter 开发实战详解》 的做者郭树煜，Github ID CarGuo，在移动开发领域已深耕多年，目前主要从事大前端相关的工做，主要涉及领域有：Flutter 、Android 、React Native 、Weex 、Cordova 等等，固然有时候也会“兼职”作一些 iOS 和 Web 相关的内容。

我是在 2016 年收到掘金邀请入驻的，做为平台第一批入驻做者，现在已经发布了 100 多篇文章，内容主要覆盖 Android 、 React Native 和 Flutter 等，其中包含了一些技术领域的热门资讯；固然我也是沸点的“摸鱼达人”，发布的沸点总数有近 500 条。

伴随着掘金一路走来，能够说在快速成长的这几年，掘金平台给予了我很大的帮助，经过掘金也结识不少大佬，获得了去一些大会论坛进行技术分享的机会，固然这也得益于业余时间的写做和开源，它们给予了我更多交流和学习的途径。

我接触 Flutter 的契机是由于当时要作一场公司的内部技术分享，公司要作技术选型，因此那时候分享的主题是 《移动端跨平台开发的现状和分析》 ，而刚好那时候 Flutter “初出茅庐”，就被我加入到 ReactNative 、Weex 的调研分析中。

初识 Flutter 的我对它的第一感受并不看好：

• 首先 Flutter 的嵌套写法第一印象让我有点抵触；

• 其次 Flutter 选择了 Dart 而不是 JS，那时候 Dart 语言原本就是经历过“滑铁卢”；

• 最后当时 Flutter 的第三方支持实在少的可怜；

固然随着了解的深刻，我发现以前确实 “草率了”！

首次 Flutter 在跨平台的渲染效果上着实惊艳到我，由于以前在学习在 React Native 和 Weex 的时候有开源过对应的 GSYGithubApp 客户端，因此在对 Flutter 进行调研学习时，我就把 GSYGithubApp 项目重构了一版 Flutter 版本，虽然期间也遇到了很多问题，可是经过解决这些问题，也让我对 Flutter 有了新的理解。

我还记得当时在 Android 上开发完基本项目效果后，第一次在 iOS 上运行完竟然没有出现问题，而且渲染结果还彻底一致，甚至我在 Android 上使用本来应该 Android 上特有的界面效果，也天然地出如今 iOS 上，这就让我对 Flutter 产生了一种极大的吸引，从而走上了 Flutter 的布道路。

从 Android 到大前端

从 Android 到大前端从 Android 到跨平台再到现在的大前端领域，顺着技术的潮流发展是如何作好适应以及过渡的，能够举一两个例子讲一下吗？

其实从 Android 到跨平台是一个天然而然的过程，随着技术平台的成熟和稳定，该项技术的门槛就会相对下降，从而就会有追求更高效的开发方式。

举个不是很严谨的例子：

还记得 2016 年，那时候我带的移动开发团队最少时也有 6 我的，其中大部分时候是 3 个 android 和 3 个 iOS，基本算是那时候开发一个常见中小型移动应用的团队标配。

而 2021 年如今不少中小型的应用，基本只须要 2 到 3 个移动开发就能够完成 App 的基本开发需求，甚至这两年接触过很多团队是 1 个 Android 、1 个 iOS 和 1 个前端共同开发的搭配。

近两年我就接触到很多前端开始经过 uni-app 、React Native 、Flutter 去负责 App 相关的业务；也面试过一些 iOS 和 Android 开发在学习前端和小程序的技能；大概这就是圈子内所说的“卷”吧，固然我更愿意称之为“消失的红利期”。

早些时候新兴的技术会由于领域内的“蛮荒”而带来不少红利，第一批“啃螃蟹”的人每每能博得头彩，可是随着社区的发展和“前人的耕耘”，成熟的技术一定让“门槛”愈来愈低、使用愈来愈便捷、商业对技术的追求确定是“更低成本”而且有“更高的可用性”。

举一些粗浅的生态例子：

• react 、 react-native 、 react-native-windows 、 Taro 、alita 等的 react 生态；
• vue 、mpvue 、 weex 、uni-app``Jetpack Compose 、Compose for desktop 在移动端和桌面端的支持；
• SwiftUI 在 iOS, iPadOS, macOS, watchOS, tvOS 构件应用的能力；
• Flutter 在移动端、桌面端和 Web 端的支持；

正如上面的图片所示，咱们能够看到愈来愈多的 App 开始使用跨平台的能力，而我我的认为这种“技术红利”对于程序员来讲是好事，新的技术表明着新的可能，甚至是新的就业机会，就我我的而言，无论是 React Native 仍是 Flutter 都成为我职业生涯里很重要的组成。

固然我也理解对新东西的抗拒和抵触：由于大多数时候咱们会但愿安于现状，够用就好，整那么多花里胡哨干什么？

因此还有一点就是：学东西仍是须要深刻去理解框架和设计的思想，理解了一项技术的设计理念，才能“以不变应万变”的方式去面对快速迭代的潮流。

固然有人说：“你看这家伙又在误导别人，嚼多不烂，杂而不精，为何我不在一个平台精通呢？”

这个确实是个问题，可是思考这个问题以前，我之前就和一些网友的交流中发现：有时候你们都只是停留在思考这个问题上， 主要是用这个问题来讲服本身能够“躺平”。其实多而不精是对的，可是反之并非，不是你不学多就天然而然的精了。

若是你的工做能给你提供深刻精通的场景，那固然是最好不过，由于不少时候精通某项技术，是须要业务场景去验证和推动的。可是若是不是大致量的业务场景，没有经历过各类极端的考验，不少时候所谓的精通只是表层精通。

在我看来的精通不是熟练掌握了 React，Vue 等框架调用和源码的背诵，也不是精通 Flutter ，Android 等框架的 API 调用技巧，而是你理解了这些东西的核心思想和理念。

• 好比把 Android 上关于 Canvas 的技能就利用到 Flutter 和Web 上；
• 好比响应式开发和状态管理的理解可让我在 RN 和 Flutter 也能很好地利用，甚至将来的 Jetpack Compose 也能够快速的上手；

技术的抽象能力让你的技术能够迁移适配，因此在个人眼中，**大前端的将来 “不是我会什么因此作什么，而须要什么我就能作什么。”

关于 Flutter

关于 Flutter由于你写过一本 Flutter 相关的书嘛，能够简单介绍一下你对于 Flutter 认识和理解，对于它的现状、以及跟其余的技术相比，你以为优点在哪里？

首先 Flutter 是一个跨平台 UI 框架，它核心解决的是 UI 跨平台的能力，因此它不是一个可以“包办全部”的跨平台框架。

因此你能够看到 Flutter 会须要各类平台插件来支撑它的非 UI 能力，也须要一些平台的构建能力来完善 Flutter 的开发体验，**因此 Flutter 的出现不是干掉原来的平台，Flutter 更可能是“寄生”的关系。

其次 Flutter 最关键是它的控件渲染能力是经过 skia 直接和 GPU 交互，skia 在 Android 上根据不一样状况就可能会是 OpenGL 或者 Vulkan ，在 iOS 上若是有支持 Metal 也会使用 Metal 加速渲染。

因此 Flutter 而言它的控件和平台能够很好地解耦，而且获得还不错的性能，如上图对比所示：

• 对于原生 Android 而言，原生代码通过 skia 最后到 GPU 完成渲染绘制，Android原生系统自己自带了 skia；

• 对于 Flutter 而言，Dart 代码里的控件通过 skia 最后到 GPU 完成渲染绘制，这里在 Andriod 上使用的系统的 skia ，而在 iOS 上使用的是打包到项目里的 skia ；

• 对于 ReactNative/Weex 等相似的项目，它们是运行在各自的 JS 引擎里面，最后经过映射为原生的控件，利用原生的渲染能力进行渲染；

• 对于 ionic 等这类 Hybird 的跨平台框架，使用的主要就是 WebView 的渲染能力；

因此能够看出 ReactNative/ Weex 这类跨平台和原平生台存在较大关联：

• 好处：若是须要使用原平生台的控件能力，接入成本会比较低；
• 坏处： 渲染严重依赖平台控件的能力，耦合较多，不一样系统之间原生控件的差别，同个系统的不一样版本在控件上的属性和效果差别，组合起来在后期开发过程当中就是很大的维护成本。

例如：在 iOS 上调试好的样式，在 Android 上出现了异常；在 Android 上生效的样式，在 iOS 上没有支持；在 iOS 平台的控件效果，在 Android 上出现了不同的展现，好比下拉刷新，Appbar等；

Flutter 与之不一样的地方就是渲染直接利用 skia 和 GPU 交互，在 Android 和 iOS 平台上实现了平台无关的控件。

简单说就是 Flutter 里的 Widget 大部分都是和 Android 和 iOS 没有关系，可是这也致使了和原生控件进行混合也会有较高的成本和难度，而且 framework 和 engine 须要面对更多的兼容挑战。

Flutter 学习的建议

对于前端 Flutter 的学习者，能够分享一下做者本身的学习经历吗？对于不一样阶段的 Flutter 学习者能够分享一下本身的建议。

学习 Flutter 最重要的一点就是要理解： Flutter 里的 Widget 不是真正的控件。

虽然在使用 Flutter 时咱们写的界面代码基本都是 Widget ，可是 Widget 做为一个 immutable 对象，它不多是真正工做的 UI 对象。

在 Flutter 里真正的 View 级别对象是 Element 和 RenderObject， 其中 Element 的抽象对象就是 Flutter 里常常用到的 BuildContext。

举一个我常常提到的例子：

以下代码所示，其中 testUseAll 这个 Text 在同一个页面下在三处地方被使用，而且代码能够正常运行渲染，若是是一个真正的 View ，是不能在一个页面下这样被多个地方加载使用的。

因此 **Flutter 中 Widget 更多只是配置文件的地位：

用于描述界面的配置代码，因此描述文件很大程度上并不用担忧嵌套带来的性能问题，咱们也能够经过配置模版去优化代码的可维护性。

因此对于学习 Flutter 我一直强调，比起去学习 Flutter 里上百个 Widget 的使用方式，更重要的是理解 Widget 背后的 Element 、 RenderObject 乃至 Layer 的工做原理，这样你才能系统地明白：

• Flutter 如何经过 BoxConstraints 和 Size 布局？

• Flutter 如何经过 SliverConstraints 和 SliverGeometry 完成列表的滑动和排版？

• Element 在 Flutter 里的做用是什么？它是如何抽象为 context 而且链接 Widget 到 RenderObject ？

• Flutter 里每一个 Layer 是如何独立工做？每一个 Route 又是如何在一个画板和 Canvas 维持本身的独立性？

只有搞清楚了这些问题，才可能对 Flutter 使用驾轻就熟，可以在平常开发中“周旋”在 Flutter 的各类 UI 细节问题而不掉坑。

对于这些问题的答案，主要集中在 《Flutter开发实战详解》 中的第三章和第四章部分，这部分其实也是这本书的核心内容，其余内容可能会随着 Flutter SDK 的升级而发生变化，而这部份内容做为 Flutter 的灵魂设计理念，能够跟随版本迭代而不至于被淘汰。

大前端学习建议

如今单点的技术在实际业务运用起来愈来愈没有优点，对于大前端的学习做者有什么建议吗？

首先不是说愈来愈没优点，而是对于庞大的开发者群里来讲，深刻底层的岗位和场景很少，前面也说过，若是没有对应的场景和平台，其实很难支持你在深刻精通的路上发展。

举个例子：

你但愿在音视频的路上有深刻的发展，因此你开始学习 FFMpeg ，而后你学会了如何经过 FFMpeg 播放视频，转码编码，交叉编译等等...而后呢？

若是你须要继续精通下来，就须要开始了解视频的封装协议、视频编码格式，音频编码格式、网络协议相似，而后须要去实践：

• 如何针对不一样格式的编码进行优化；
• 不一样协议如何优化和减小冗余；
• 针对关键帧和帧序列如何优化；
• 不一样网络条件下对码率进行优化播放；
• 直播如何追帧下降延迟；
• 如何尽量不失帧地压缩和传输视频；

以上对应这些内容，若是你没有真实的场景和用户数据，很难支撑你在这条路持续精通深造，固然我不是劝你放弃，若是有能力和条件，确定仍是在某项技术能持续精通才是王道。

而什么是大前端？那就是知识的广度！这里的广度不是指你要懂不少技术，而是你要会技术的抽象与通用能力的拓展。

大前端能力须要的是你可以在某个平台达到 75 分的能力，而且将这个分数在很短的时间内应用到其余平台，就像前面说的：

• 把 Android 上关于 Canvas 的技能就利用到 Flutter 和 Web 上；

• 响应式开发和状态管理的理解在 RN 和 Flutter 也能很好地利用，甚至在 Jetpack Compose 也能够快速的上手；

技术的抽象能力让你的技术能够迁移适配，只须要短期的文档和适应，就能够完成平台的工做，在我看来**大前端的将来 “不是我会什么因此作什么，而须要什么我就能作什么。”

关于持续写做

咱们也看到做者是掘金高等级做者里面更文频率很是高的做者，且内容质量都很好，写做带给你最大的影响是什么？有什么写做心得跟建议吗？

写做给我最大的影响有三个方面：**学习、记忆和激励。

学习

首先持续写做的基础是学习，事实上不少时候学习国外的文章和文档我是没有耐心的，而当选择把它翻译成中文输出时，这时候反而会耐下性子把对应的内容看完，由于不看完内容就没办法很好的翻译出效果。

另外就是，当我在写文章时常常会写到某个点时，忽然会停下来思考“为何”？由于不少时候“知道一个东西”和“理解一个东西”是两个不一样的概念。

而当我写文章时，我就须要把”我知道”的变成“我理解”的状态，把零散的知识变成可以串通的体系，只有我真的理解了这个知识点“是什么”的时候，才可以把它转化为通熟易懂的文字，这其实就是我学习的一个过程。

记忆

首先持续写做的第二个目的就是记忆。

在掘金上能够看到我写过不少类型的文章， 从 Android 、React Native 、Weex 到 Flutter，有介绍框架的，也有深刻底层和问题集锦等，可是事实上不少内容写过一段时候后我可能就会忘了。

因此当我选择把本身想要的内容转化为文章后，在须要时，我就能够经过这些文章找回对应的记忆，这也是我产出的目的之一。

激励

最后就是激励，写做对我来讲是一个很好的正向激励，由于我写的东西有人看，而且有人喜欢，这就会给我持续产出的动力。

我相信不少程序员都尝试过去作开源和写做，由于这其实自己就是很好的自我包装，可是这里面有个误区：那就是可能你们觉得只要开源一个项目就能一晚上爆火，只要写一篇好文就能一晚上10W+，这其实很难，抱着这样的心态每每很容易就带来消沉。

就个人写做经历而言，一篇文章一开始最多能有几百阅读就挺好的了，而后靠的就是时间和推广。

“酒香也怕巷子深”，因此写做也须要通推广，好比：

• 经过配套项目去介绍你的文章；
• 去各大平台投稿；
• 去解答别人的问题，而后创建本身的社群；

这是一个漫长的过程，但我一直比较喜欢一句话：“人们每每高估了短时间的收益，低估了长期的回报”，持续分享和推广是一件很重要的因素。

另外写做选题时可能会发现：“哦，原来网上已经有人写过了” ， 以后就放弃题材不写了，这是很正常的心态，可是这样的放弃就会让你愈来愈难产出内容，由于你不能保证你必定快过别人。

其实当你有须要写内容时，发现别人已经产出过相应的内容后，那你能够参考下别人的内容是否和你的想法有什么不一样，而后有什么遗漏或者能够升华的地方，甚至是你能够从另外的角度或者更系统的方式去描述你的观点。

站在别人的肩膀上能够看得更远，固然不是让你 cv 抄袭，由于抄袭的意义不大，又不是小学生罚默写。

最后，写做提供的服务是内容，指望获得的是关注和交流，因此要比较本身陷入没必要要的情绪陷阱。

“不要成为别人情绪的垃圾桶，那就在开始时把盖子盖上或者远离”，面对不善意的评论或者无效的交流，我会选择屏蔽或者远离，这样可能帮我节省出更多的时间来作有用的事情。

福利到

第二期「Jtalk大前端」做者专访内容就是这些啦

你们有问题能够在评论区留言

会召唤做者来回答你们的提问哦

另外送一个福利🎉🎉🎉

评论区抽一个掘友送一个 掘金新款周边T恤

若是你也是前端学习者

扫码回复 “前端”进掘金前端做者群

也欢迎大前端优质做者带上本身的掘金主页自荐

下一期再见👋