从无到有,闲鱼Flutter一体化演进之路

本文涉及的产品
函数计算FC,每月15万CU 3个月
简介: 蓦然回首,闲鱼在一体化路上的多种探索

作者:闲鱼技术-兰昊

前言

Flutter一体化研发模式在闲鱼落地探索已有半年多了,前面也有多篇文章已经分享过阶段性成果,今天我给大家以总的视角来分享下在这个过程中闲鱼探索出来的一条路。

业务痛点

时间回到2019年8月。在那之前闲鱼上每年会有不少创新型交易模式在做探索,但是交易链路代码年久失修,维护成本很高,无法快速支撑到业务。例如下图所示:

  • 所有引起金额变化的操作全部都在云端各做一遍,买卖家订单状态判断以及操作订单的逻辑也全部都在端上。这样每次新增交易类型,就会进一步增加端上状态机的逻辑复杂度。
  • 一个下单页面需要发出5次网络请求才能拿到全部的渲染信息,因为分属不同领域,所以没有一个服务端同学愿意来包成一个接口。


所以那时候想到尝试用Flutter一体化的方式来重构交易链路,从而在研发上提速,以更好地支撑到创新型业务。

演进过程

整个的演进过程都是围绕着如何来降低客户端同学做一体化的成本,对整个研发进行提速,并且解决业务开发过程中的痛点。

通信一体

在下单这个场景,我们设计了如下的通信方式。将每一次的端上改动和当前数据都以request的形式发送给服务端,由服务端算出在该操作下新的价格应该是多少,并以response返回给客户端。双方之间的一纸约定仅仅是靠一个Json。这种情况下,服务端的代码和客户端的代码写起来,是明显有不同的目的性的。即我需要知道当前是在写客户端代码还是写服务端(FaaS)的代码,然后按照之前的Json结构约定去拼出对方想要的数据结构。

但是,我们希望客户端同学去写FaaS层的代码时尽量不要有明显的感知。想到FaaS里实际上封的是一个个函数,例如客户端去调增加购买商品数量(仅针对玩家的宝贝),返回值是全新的state数据,包括价格。那么其实端上也有一些操作是可以理解为一个个函数,例如弹出一个toast(显示库存不足),亦或者是打开一个指定页面或者唤起收银台。将双端的能力函数化后,可以设计出如下图所示的通信方式。

在这种通信方式理念下,我们设计了一套横跨FaaS和客户端的框架用来处理这层通信协议,屏蔽了网络层具体的Json格式,并且双端注册函数的方法以及发出Action的调用方式都是一样的,让开发者无感知调用的函数具体是在哪里。下图是一个代码示例:

编程模型一体

在屏蔽了具体通信协议降低通信成本之后,接下来要考虑新的编程模型应该如何设计。客户端同学写代码经历了MVC、MVP、MVVM时代,随着Flutter起来,因为其与Native完全不同的渲染方式,使得Flux的理念得以落地。Flux定义了一套单向数据流的原则,在Flutter一体化下,我们基于前后一体的整体考虑,设计了如下的一套新的编程模型。总共包含3个模块:Render、Converter、Model。其中只有Render部分在端上,页面上的渲染数据全部来自FaaS层转好的ViewModel(State)。当界面上有交互发生要改变State时,就将事件(Event)发出去,最后路由到Model层来处理,Model层根据这个事件可能会去从后端领域里拉下原始业务数据,然后由框架将数据再交给Converter去转成渲染所需要的State。通过这样的方式以前后一体的思路来组织代码和模块化代码。这套设计也得益于前面的工作将通信的成本降低。

前后端分工

前面的一系列工作降低了客户端同学写FaaS代码的复杂度,那么新的生产关系得以落地和推广。除了在交易链路,我们还在其他一些业务逐渐落地,慢慢地摸索出来了新的一套前后端同学的工作划分。其中FaaS那层,我管它叫做SFC(Serverless For Client)层,里面主要负责的还是面向用户的功能,以支持多变的功能为主。这一层主要负责聚合、裁剪和结构各领域数据,服务于客户端本身用户那一层。而服务端同学会更加专注做好领域建设。

工程一体

对于端侧开发同学来说,我要开发FaaS代码和Flutter代码时需要同时打开两个IDE来回切换,这也是一个很麻烦的事情,尤其是对State有修改时。基于此,我们做了工程一体的工作,将FaaS业务代码和Flutter业务代码放到一个工程目录下,且都单向依赖通用代码(例如State和工具方法),Flutter主工程再以git依赖的方式将工程引到工程里。最后在编译和部署时,编译工具分别选择对应目录下的代码进行操作,从而达到了一开始的目的。

成本

通过在通信层、编程模型、学习领域和中间件知识、工程组织等方式,可以大大降低客户端同学写FaaS层代码的成本。相比之前用Flutter+服务端的研发模式,一体化的研发模式抹掉了前后端接口约定、mock数据开发、编写前后端重复代码、前后端联调、定位问题时前后端转交bug、遇到问题前后端沟通修改接口协议等环节。主要都是协作沟通的成本。随之而来的问题是,客户端同学需要学习业务领域接口,熟悉各个接口的QPS、RT、降级策略,并做好业务整体技术方案的设计。但是这个成本只在一开始的时候存在,随着熟练度的提升,这块成本是可以逐渐趋于0的。

提速效果

当我们把交易链路的架构升级为一体化的架构后,承接了今年的两个创新型业务需求,做评审和开发时,都仅需要一位客户端同学参加,并且只花了半天不到的时间就完成全部开发了,这对新业务上线来讲大大缩短了上线时间。即使有用户层的bug存在,也只要一个人来看,因为代码都是他一个人写的,他能快速定位到bug的具体位置。

未来

未来我希望客户端这套新的研发模式能够在更多的业务场景下落地,去发现更多的问题,让整个一套基础建设更加完善,不断完善出更好的AliFlutter,最后再反哺业务为业务带来更多价值。

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
消息中间件 监控 Dart
Flutter+FaaS一体化任务编排的思考与设计
闲鱼flutter faas一体化提升研发体验+研发质量
1681 0
Flutter+FaaS一体化任务编排的思考与设计
|
JSON 前端开发 IDE
闲鱼Flutter一体化演进之路
#### 前言 Flutter一体化研发模式在闲鱼落地探索已有半年多了,前面也有多篇文章已经分享过阶段性成果,今天我给大家以总的视角来分享下在这个过程中闲鱼探索出来的一条路。 #### 业务痛点 时间回到2019年8月。在那之前闲鱼上每年会有不少创新型交易模式在做探索,但是交易链路代码年久失修,维护成本很高,无法快速支撑到业务。例如下图所示: * 所有引起金额变化的操作全部都在云端各
549 0
闲鱼Flutter一体化演进之路
|
Dart Serverless 5G
5G时代|闲鱼在Flutter&FaaS云端一体化架构的探索实践之路
随着无线,IoT 的发展, 5G 的到来,移动研发越发向多端化发展。传统的基于 Native+Web+ 服务端的开发方式研发效率低下,显然已经无法适应发展需要。本文将会介绍闲鱼近一年来在 Flutter&FaaS 一体化项目上的探索和实践。
1669 0
|
移动开发 Dart JavaScript
|
25天前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
5月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
14天前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
42 3
|
1天前
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装:提升开发效率与用户体验
在移动应用开发中,表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单,以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势,封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧,帮助开发者构建健壮且用户友好的应用。
53 0
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
69 7
|
14天前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
45 0