1. 首页
  2. Flutter

Flutter+Serverless 端到端研发架构实践

背景

Serverless(无服务架构)被誉为下一代云计算,自概念推出以来,因为能带来研发交付速度提升与成本的降低在业内异常火爆。闲鱼客户端基于 Flutter 进行架构演进与创新,通过 Flutter 统一 Android 和 iOS 双端提升研发效能之后,希望通过 Flutter+Serverless 解决以下问题,从而进一步提升整体研发效率。

  • 各角色间存在大量的协同,导致整体研发效率低。
  • 移动端离业务越来越远,服务端没有时间做底层领域沉淀。

研发架构的演进

接下来我们带着这里两个问题回顾前后端研发架构演进的历史。

Flutter+Serverless端到端研发架构实践

PC 互联网早期没有还没有前后端的概念,此阶段单个业务需求通常一个开发人员可以完成研发,前端网页与后端逻辑都写在一个工程中。随着业务越来越复杂,原本开发者负责前后端研发已经变得效率低下,此阶段随着移动互联网的爆发,服务端需要服务与 PC、Android、iOS 等多种前端。

服务端总是有一个疑问:服务端设计接口时,是应该面向 UI,还是应该面向通用服务?一个方案是抽取一部分服务端做 BFF(Backend For Frontend 服务于前端的后端),作为前后端之间的适配层,核心是解决数据的聚合与编排,重新探索更合理的分层协作模式。

服务端写 BFF 带来新的问题,总是包接口无法提升个人能力。如果 BFF 由端侧同学开发可以解决这个问题,具体技术方案也是接下来我们要思考的问题。

云端一体化技术方案

Flutter+Serverless端到端研发架构实践

Serverless 由 BaaS(Backend as a Sevice)与 Faas(Function as a Service)两部分组成。BaaS 主要包括数据库存储、消息队列等能力,针对复杂的需求建议由服务端在 BaaS 层封装领域服务供 FaaS 层使用。作为端侧开发,核心关注客户端与 FaaS 层的代码开发。

目前公司 FaaS 环境已经支持 Java、Kotlin、Swift、Dart、Node.js 等多种语言与框架,闲鱼通过 Android(Flutter)、iOS(Flutter)、FaaS(Dart Runtime)都使用 Dart 达到语言一体,并且实现协议一体与工程一体。

语言一体:Android、iOS、FaaS 层使用 Dart 语言开发,实现三端语言统一,有效屏蔽 FaaS 层语言学习成本。

协议一体:通过一体化框架屏蔽通信细节,前后端同一份 State,减少协议转换,前端同学调用 FaaS 服务时,如同调用本地函数一样简洁。

工程一体:前后端可以在同一个工程中进行开发,利用 Dart 特性可以通过 Hot Reload 机制进行快速开发联调。

闲鱼基于 FaaS 搭建 Dart Runtime 环境可参考《 [Dart 编译技术在服务端的探索和应用][1]》。

下单页一体化实践

下面以闲鱼下单页一体化为例,通过页面渲染与交互两部分展开一体化实践过程。

Flutter+Serverless端到端研发架构实践

下单渲染一体化

从上图左侧可以看出,客户端渲染此页面需要在端侧请求 5 个接口,处理渲染接口之间的逻辑,把接口返回的 Data 转为为 ViewModel。经过一体化改造之后,原有在端侧的逻辑都移到 FaaS 层,包括聚合 5 个领域服务,处理业务逻辑,进行字段映射与页面编排,端侧无任何渲染与业务逻辑,直接获取返回的 ViewModel 刷新页面。以下是云端一体之后的流程图。

Flutter+Serverless端到端研发架构实践

下单页交互操作一体化

从上图右侧可以看出,有 4 种操作都会改变实付款,原本这些操作处理逻辑都在端侧处理,一体化改造之后,端侧不存在任何计算逻辑,客户端每次操作都会请求服务端,有 FaaS 进行红包是否过期等数据校验,再返回页面数据进行刷新。

一体化研发框架

Flutter+Serverless端到端研发架构实践

Nexus Framework:基于 Flutter 的一体化移动端 UI 框架。

Logic Engine:基于 Flutter 的一体化通信与调度框架。

Nexus Server: 基于 Dart Runtime 的一体化服务端框架。

代码示例

下图为客户端下单页初始化的代码示例

Flutter+Serverless端到端研发架构实践

下图为 FaaS 层对客户端发起的初始化请求的处理

Flutter+Serverless端到端研发架构实践

以上是 Flutter+FaaS 双端协议一体的开发示例,双端都是通过 BinderAction 进行交互,Action 中的 State 是同一个类型,从而有效屏蔽通信细节,提高研发效率。

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台,每天都可以在这里找到技术世界的头条内容

收益与效果

下单页已经上线,回顾整个研发过程,云端一体研发架构不仅仅只是新的技术方案,价值在于扩展端侧工作边界,带来生产关系的重塑。

协同效率提升:相比 Flutter 带来的双端一体来说,该三端一体的架构进一步提升了 30% 整体研发效率。

业务闭环:端侧还可以更快速地反馈与响应业务,不断尝试,从而搭建起更完善的产品模型,为业务创造更多的价值。

人员成长:端侧从只关注用户体验的开发资源,转变为整个业务研发的技术负责人,从只关注端侧的局部视角到更专注业务闭环的全局视角。Faas 层调用底层领域服务来完成自己的业务,原来服务端可以更加地去专注领域服务的沉淀。

总结与展望

Flutter+Serverless 三端一体研发架构,能够解决本篇提出的原有研发架构的两个问题,通过改变端侧职能边界有效减少协同,客户端可以负责整个业务,服务端有更多的时间进行领域沉淀,但是闲鱼实践 Flutter+Serverless 三端一体研发架构时也遇到以下挑战:

  • FaaS 层研发体验需要继续提升 调试只能通过 GAIA 日志查看,目前规划是把平台日志抓取到本地,并且提供 FaaS 代码远程调试功能。
  • 运维成本增加 问题定位、请求链路、压测、安全生产的工作转移,如何摸平与服务的差异。

以上是实践过程中发现的新的挑战都已经列入下一阶段工作中,后续会持续分享这些挑战的思考与解决方案。

作者:古风
链接:https://www.infoq.cn/article/aJ4jfT3yvbKTzYZ88mD8

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:Flutter+Serverless 端到端研发架构实践

链接:https://www.javascriptc.com/3267.html

« iOS 暗黑模式适配的完美解决方案
React造轮系列:对话框组件 – Dialog 思路»
Flutter 中文教程资源

相关推荐

QR code