Flutter程序员技术栈@认知·互联网

在闲鱼实习做Flutter是什么感受?

2019-09-16  本文已影响0人  闲鱼技术

作者:闲鱼技术-炜铖

前言:

我是广东工业大学16级软件工程专业的学生,在今年5月份通过春招作为实习生加入了闲鱼。至今实习了3个月。在闲鱼先后完成了玩家发布页重构,AndroidQ适配,租赁,直播等任务。在这短暂的三个月,依靠闲鱼,我完成了从Android到Flutter的一个技术栈的转移。这篇文章主要分享一下我三个月的工作学习以及心得体会。

熟悉项目工程

玩家发布页重构
通过项目来学习,似乎是我们这一行最快的入门方法。
在最初的一个月,师兄先让我对Flutter与Dart进行初步的学习,布置了一个使用Fish-Redux重构发布页面的任务,让我快速上手Flutter,熟悉项目工程。这个界面看起来挺简单的,但实际上他有很多复杂的交互要处理。发布页如下图所示:

发布页
重构过程困难重重,首先是我对Flutter的认识不足,当时我甚至还不知道StatefulWidget 跟StatelessWidget的区别是什么,其次是对Fish-Redux理解不够。这就像建楼从楼顶开始建起一样,是不可能的。 后来我决定花点时间,去认识各种Widget,Dart Api,Future等等。并写了一个小demo,包括了多Tab,列表,图片,网络等场景。通过这些学习,整体上大大提高了我对Flutter的认识与理解。这期间闲鱼公众号里的文章对帮助真的很大。

当然,除了一些常见的问题,这个页面还有很多坑,因为他的交互太多了。包括页面进入自动获取Focus,点击输入框外部收起键盘,失去焦点自动检测输入并提交,点击按钮按钮,按钮变成输入框并弹出键盘等等。 一开始想象的方案很美好,可惜实际写起来,事与愿违,经常遇到键盘无法弹起,键盘弹起遮挡输入,多个控件获取了焦点等等一系列问题。后来通过分析FocusNode和FocusManager的相关代码以及在师兄的帮助下,成功解决这一系列问题。这里也很感谢师兄给我足足一个月的充足的时间,让我在工作的同时,有很多空闲的时间去深入到Flutter内部去学习各种组件的原理。

熟悉项目流程

我在大三来闲鱼实习之前,在学校的工作室待过一段时间,也做过一些项目。工作室跟公司对比起来有着天壤之别。在学校开发的项目,没有详细的产品需求文档,交互设计全靠自己发挥,更没有测试,代码也是想到哪写到哪,导致产品的质量经常不如人意。在八月份初,我终于有机会去接触一个完整的FDD项目管理流程。下图是某业务的看板:

image

各个阶段对我来说是陌生的也是充满挑战的,深刻的体会到了阿里项目流程的严谨性。其中的测试和发布是让人最紧张的一个环节了。害怕给测出低级BUG是原因之一(TC后测试用例不过的BUG就是低级BUG,我也是最近才知道)现在每次给提BUG,首先就是要去看看是不是低级BUG。

image
8月份‘喜提’的两个低级BUG
另外中间的各种评审,也是对我思维能力的考验,评审涉及到的各种问题,是我们估时的重要依据,考虑不周将会影响到我们后期的开发进度。

突破与沉淀

在这次的项目开发中,也利用自己学到的Flutter知识,对原有的框架进行优化。FDRfreshWidget是一个闲鱼内部的控件,提供了下拉刷新,上拉加载更多的能力。但是在实际使用的过程中发现体验不佳,并且在滚动时在配置较低的设备上卡顿问题表现明显。在Android中我们熟知的列表图片的优化方案包括:①三级缓存 ②滚动时不加载 ③图片质量压缩 等等。在这个订单列表的场景下卡顿的原因主要是由于滚动时触发了大量的图片加载请求导致CPU与内存占用过高,因此方案②对于解决这个问题来说是很合适的。优化后的方案如下:通过使用InheritedWidget缓存加载控制的标记,根据ScrollView的Notification修改标记位,底层的ImageView根据标记来决定是否加载图片,并通过上层Widget缓存整个ListView终端了build的过程,避免了不必要的rebuild。


image

优化之后,内存占用降低了100多MB,同时帧率上在起始时也得到了很大的提升。同事们对这个效果表示满意。


image
最终这个改动也集成到了代码里,为闲鱼里多个使用了FDRfreshWidget的地方提供了一个能力的增强。另外还有一些其他的基础能力的建设,包括Flutter到Weex的通信,DynamicAction能力增强等等就不多做分享了。下图总结了我在闲鱼里学到Flutter相关的所有技术。 Flutter

对于打算学习Flutter的同学提供一个初步学习的路线:

  1. 学习dart语言的基本语法

  2. 学习大部分基础Widget的使用方式

  3. 学习各种Key的使用以及作用

  4. 了解Naviagator的实现方式

  5. 了解setState的过程

  6. 了解Dart的异步机制

  7. 了解Redux,Bloc等架构

总结

在阿里实习的三个月,期间还有一些有意思的活动,比如百技(为期三天的头脑风暴),各个方向大神的经验分享还有新人秀等等。总的来说在闲鱼实习的三个月,说短不短,说长不长,但是过的十分充实且有意义,他给我带来了一些思维上的转变,让我受益匪浅,让我从一个学生逐渐转变成了一个职场员工。

再给职场新人几点建议,也是我工作中犯错的一点经验教训(虽然我也是新人)

上一篇下一篇

猜你喜欢

热点阅读