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

简介: 与闲鱼的相识、相知、在一起

作者:闲鱼技术-炜铖

前言:

我是广东工业大学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项目管理流程。下图是某业务的看板:
看板.png

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

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

突破与沉淀

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

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

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

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

  1. 学习dart语言的基本语法
  2. 学习大部分基础Widget的使用方式
  3. 学习各种Key的使用以及作用
  4. 了解Naviagator的实现方式
  5. 了解setState的过程
  6. 了解Dart的异步机制
  7. 了解Redux,Bloc等架构

总结

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

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

  • 敢于问问题。在大型的团队协作项目里,有些问题原因可能是别人的原因导致的,还有些问题其他同学已经踩过坑了,请教其他人才是最佳的办法。当然也不能遇到问题就不思考就问,这个还需自行判断。
  • 提早暴露问题。一些项目中遇到的问题,有必要的话要尽早抛出来,同步组员,有时一切不起眼的小问题可能是导致大问题的原因。
  • 主动推进任务。在闲鱼,接到任务要主动推进,因为有的项目可能是跨多团队协作的,你不将项目当当做自己的,主动推进,别的团队更不可能帮你推进。
  • 打通任务的上下流。一个任务仅仅完成是不够的,还要注意与他相关的一些页面,有没有受到影响。
  • 多思考,多总结。
相关文章
|
2月前
TDesign开发流程体验番外篇
TDesign开发流程体验番外篇
|
10月前
|
开发框架 Dart 前端开发
从零到应用:我的Flutter项目开发之旅
Flutter是一种流行的跨平台移动应用开发框架,由Google推出。它使用Dart编程语言,通过单一代码库可以同时构建iOS和Android应用。Flutter具有许多吸引力的特性,如快速的渲染性能、漂亮的用户界面、丰富的组件库以及热重载等。通过阅读这篇文章,你将获得一些关于Flutter项目开发的实际指导,可以帮助你更有效地构建高质量的移动应用程序。无论你是初学者还是有一定经验的开发者,希望这些笔记能够为你提供一些有用的思路和技巧,让你在Flutter项目开发中取得更好的成果。
|
10月前
|
Dart JavaScript 前端开发
一个写了3年半flutter的小伙,突然写了2个月uniapp的感悟!
因为某些原因,在过去的三年半时间,我除了flutter之外,很少接触其他的框架,而最近突然写了2个月uniapp,有了些想法...
|
12月前
|
Dart 安全 IDE
闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报(中)
闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报
146 0
|
12月前
|
Dart 编译器 开发工具
闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报(下)
闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报
111 0
|
12月前
|
存储 Dart Android开发
闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报(上)
闲鱼技术2022年度白皮书-Flutter主题-节日献礼:Flutter知识小报
130 0
|
移动开发 开发工具 Android开发
Flutter混合开发踩坑指北
Flutter混合开发踩坑指北
315 0
|
前端开发
在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。
为避免贴大段代码,文中代码部分仅作为参考,并非全部代码,请理解后自行补全或者下载源码进行学习。
233 0
在Flutter里实现一个开心农场地块布局!Web前端工程师也可以看看,作为Flutter入门。
|
开发框架 前端开发 搜索推荐
盘点 Flutter 领域的点点滴滴 【专题合集】
Flutter 实验室 Flutter 是一个跨平台的应用程序开发框架,我们可以使用它为多个平台构建本地编译的应用程序:移动、桌面和 Web。已知支持的输出目标是 Android、iOS、HTML、HTML Canvas、Linux、Windows、macOS 和 Fuchia。本合集从安装到部署,从最基本的 http 包与 dio 包入手,从核心理念一切皆 widget 开始,到个性化定制,最后介绍状态管理的基础。
149 0
|
Dart 搜索推荐 API
谈谈如何学习flutter之flutter成神之路
为什么要使用Flutter? path 环境变量 运行 `flutter doctor` 安装 Android Studio或者VScode Bonus: Move Bottom Panel to the side. [高效 Dart 语言指南:API 设计](https://dart.cn/guides/language/effective-dart/design) StatelessWidget 是无状态控件,没有自己的私有数据,是纯展示型的控件,基本定义过程如下: 定义有状态的控件StatefulWidget 定义继承自 `State` 的状态类 定义和修改私有数据 学习widget
149 0
谈谈如何学习flutter之flutter成神之路