阅读 7240

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

hi 掘友们,「JTalk大前端作者专访」第二期来啦,本期我们专访的是大家在站内非常熟悉的一个作者——恋猫de小郭(掘金主页 juejin.cn/user/817692… ),他在掘金高等级作者中一直保持着很高的更文频率,在自己的领域不断的深耕学习。每一个作者都很多闪光的点,这次专访待大家一起来了解一下恋猫de小郭。

自我介绍

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

大家好,我是恋猫de小郭《Flutter 开发实战详解》 的作者郭树煜,Github ID CarGuo,在移动开发领域已深耕多年,目前主要从事大前端相关的工作,主要涉及领域有:FlutterAndroidReact NativeWeexCordova 等等,当然有时候也会“兼职”做一些 iOSWeb 相关的内容。

我是在 2016 年收到掘金邀请入驻的,作为平台第一批入驻作者,如今已经发布了 100 多篇文章,内容主要覆盖 AndroidReact NativeFlutter 等,其中包含了一些技术领域的热门资讯;当然我也是沸点的“摸鱼达人”,发布的沸点总数有近 500 条

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

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

初识 Flutter 的我对它的第一感觉并不看好:

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

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

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

当然随着了解的深入,我发现之前确实 “草率了”!

首次 Flutter 在跨平台的渲染效果上着实惊艳到我,因为之前在学习在 React NativeWeex 的时候有开源过对应的 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-appReact NativeFlutter 去负责 App 相关的业务;也面试过一些 iOSAndroid 开发在学习前端和小程序的技能;大概这就是圈子内所说的“卷”吧,当然我更愿意称之为“消失的红利期”

早些时候新兴的技术会因为领域内的“蛮荒”而带来很多红利,第一批“啃螃蟹”的人往往能博得头彩,但是随着社区的发展和“前人的耕耘”,成熟的技术必定让“门槛”越来越低、使用越来越便捷、商业对技术的追求肯定是“更低成本”并且有“更高的可用性”

举一些粗浅的生态例子:

  • reactreact-nativereact-native-windowsTaroalita 等的 react 生态;
  • vuempvueweexuni-app``Jetpack ComposeCompose for desktop 在移动端和桌面端的支持;
  • SwiftUIiOS, iPadOS, macOS, watchOS, tvOS 构件应用的能力;
  • Flutter 在移动端、桌面端和 Web 端的支持;

正如上面的图片所示,我们可以看到越来越多的 App 开始使用跨平台的能力,而我个人认为这种“技术红利”对于程序员来说是好事,新的技术代表着新的可能,甚至是新的就业机会,就我个人而言,不管是 React Native 还是 Flutter 都成为我职业生涯里很重要的组成。

当然我也理解对新东西的抗拒和抵触:因为大多数时候我们会希望安于现状,够用就好,整那么多花里胡哨干什么?

所以还有一点就是:学东西还是需要深入去理解框架和设计的思想,理解了一项技术的设计理念,才能“以不变应万变”的方式去面对快速迭代的潮流

当然有人说:“你看这家伙又在误导别人,嚼多不烂,杂而不精,为什么我不在一个平台精通呢?”

这个确实是个问题,但是思考这个问题之前,我以前就和一些网友的交流中发现:有时候大家都只是停留在思考这个问题上, 主要是用这个问题来说服自己可以“躺平”。其实多而不精是对的,但是反之并不是,不是你不学多就自然而然的精了

如果你的工作能给你提供深入精通的场景,那当然是最好不过,因为很多时候精通某项技术,是需要业务场景去验证和推进的。但是如果不是大体量的业务场景,没有经历过各种极端的考验,很多时候所谓的精通只是表层精通。

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

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

技术的抽象能力让你的技术可以迁移适配,所以在我的眼中,**大前端的未来 “不是我会什么所以做什么,而需要什么我就能做什么。”

关于 Flutter

关于 Flutter因为你写过一本 Flutter 相关的书嘛,可以简单介绍一下你对于 Flutter 认识和理解,对于它的现状、以及跟其他的技术相比,你觉得优势在哪里?

首先 Flutter 是一个跨平台 UI 框架,它核心解决的是 UI 跨平台的能力,所以它不是一个能够“包办所有”的跨平台框架。

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

其次 Flutter 最关键是它的控件渲染能力是通过 skia 直接和 GPU 交互skiaAndroid 上根据不同情况就可能会是 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 与之不同的地方就是渲染直接利用 skiaGPU 交互,在 AndroidiOS 平台上实现了平台无关的控件。

简单说就是 Flutter 里的 Widget 大部分都是和 AndroidiOS 没有关系,但是这也导致了和原生控件进行混合也会有较高的成本和难度,并且 frameworkengine 需要面对更多的兼容挑战。

Flutter 学习的建议

对于前端 Flutter 的学习者,可以分享一下作者自己的学习经历吗?对于不同阶段的 Flutter 学习者可以分享一下自己的建议。

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

虽然在使用 Flutter 时我们写的界面代码基本都是 Widget ,但是 Widget 作为一个 immutable 对象,它不可能是真正工作的 UI 对象

在 Flutter 里真正的 View 级别对象是 ElementRenderObject, 其中 Element 的抽象对象就是 Flutter 里经常用到的 BuildContext

举一个我经常提到的例子:

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

所以 **Flutter 中 Widget 更多只是配置文件的地位:

用于描述界面的配置代码,所以描述文件很大程度上并不用担心嵌套带来的性能问题,我们也可以通过配置模版去优化代码的可维护性

所以对于学习 Flutter 我一直强调,比起去学习 Flutter 里上百个 Widget 的使用方式,更重要的是理解 Widget 背后的 ElementRenderObject 乃至 Layer 的工作原理,这样你才能系统地明白:

  • Flutter 如何通过 BoxConstraintsSize 布局?

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

  • Element 在 Flutter 里的作用是什么?它是如何抽象为 context 并且连接 WidgetRenderObject

  • Flutter 里每个 Layer 是如何独立工作?每个 Route 又是如何在一个画板和 Canvas 维持自己的独立性?

只有搞清楚了这些问题,才可能对 Flutter 使用得心应手,能够在日常开发中“周旋”在 Flutter 的各种 UI 细节问题而不掉坑。

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

大前端学习建议

现在单点的技术在实际业务运用起来越来越没有优势,对于大前端的学习作者有什么建议吗?

首先不是说越来越没优势,而是对于庞大的开发者群里来说,深入底层的岗位和场景不多,前面也说过,如果没有对应的场景和平台,其实很难支持你在深入精通的路上发展。

举个例子:

你希望在音视频的路上有深入的发展,所以你开始学习 FFMpeg ,然后你学会了如何通过 FFMpeg 播放视频,转码编码,交叉编译等等...然后呢?

如果你需要继续精通下来,就需要开始了解视频的封装协议、视频编码格式,音频编码格式、网络协议类似,然后需要去实践:

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

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

而什么是大前端?那就是知识的广度!这里的广度不是指你要懂很多技术,而是你要会技术的抽象与通用能力的拓展

大前端能力需要的是你能够在某个平台达到 75 分的能力,并且将这个分数在很短的时间内应用到其他平台,就像前面说的:

  • Android 上关于 Canvas 的技能就利用到 FlutterWeb 上;

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

技术的抽象能力让你的技术可以迁移适配,只需要短时间的文档和适应,就可以完成平台的工作,在我看来**大前端的未来 “不是我会什么所以做什么,而需要什么我就能做什么。”

关于持续写作

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

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

学习

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

另外就是,当我在写文章时经常会写到某个点时,突然会停下来思考“为什么”?因为很多时候“知道一个东西”和“理解一个东西”是两个不同的概念

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

记忆

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

在掘金上可以看到我写过很多类型的文章, 从 AndroidReact NativeWeexFlutter,有介绍框架的,也有深入底层和问题集锦等,但是事实上很多内容写过一段时候后我可能就会忘了

所以当我选择把自己想要的内容转化为文章后,在需要时,我就可以通过这些文章找回对应的记忆,这也是我产出的目的之一

激励

最后就是激励,写作对我来说是一个很好的正向激励,因为我写的东西有人看,并且有人喜欢,这就会给我持续产出的动力

我相信很多程序员都尝试过去做开源和写作,因为这其实本身就是很好的自我包装,但是这里面有个误区:那就是可能大家以为只要开源一个项目就能一夜爆火,只要写一篇好文就能一夜10W+,这其实很难,抱着这样的心态往往很容易就带来消沉

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

“酒香也怕巷子深”,所以写作也需要通推广,比如:

  • 通过配套项目去介绍你的文章;
  • 去各大平台投稿;
  • 去解答别人的问题,然后建立自己的社群;

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

另外写作选题时可能会发现:“哦,原来网上已经有人写过了” , 之后就放弃题材不写了,这是很正常的心态,但是这样的放弃就会让你越来越难产出内容,因为你不能保证你一定快过别人

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

站在别人的肩膀上可以看得更远,当然不是让你 cv 抄袭,因为抄袭的意义不大,又不是小学生罚默写。

最后,写作提供的服务是内容,期望得到的是关注和交流,所以要比较自己陷入不必要的情绪陷阱

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

福利到

第二期「Jtalk大前端」作者专访内容就是这些啦
大家有问题可以在评论区留言
会召唤作者来回答大家的提问哦
另外送一个福利🎉🎉🎉
评论区抽一个掘友送一个掘金新款周边T恤
如果你也是前端学习者
扫码回复“前端”进掘金前端作者群
也欢迎大前端优质作者带上自己的掘金主页自荐
下一期再见👋

自定义模板.png