Flutter+Serverless端到端研发架构实践 · 语雀 https://www.yuque.com/xytech/flutter/kdk9xc

2019-12-19 13:14

作者:闲鱼技术-古风

背景

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

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

研发架构的演进

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

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

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

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

云端一体技术方案

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编译技术在服务端的探索和应用》

下单页一体化实践

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

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

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

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

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

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

代码示例

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

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

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

收益与效果

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

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

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

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

总结与展望

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

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

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

 
 
 

抽取一部分服务端做BFF(Backend For Frontend服务于前端的后端)的更多相关文章

  1. iOS 客户端与服务端做时间同步

    需求 我们做客户端的时候,有时会需要对客户端与服务器的时间进行同步,比如抢购活动.倒计时等.这时我们要考虑如何准备地与服务器的时间进行同步,同时防止用户本地的时间有误差时导致的问题. 分析 描述 为了 ...

  2. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

  3. go服务端----使用dotweb框架搭建简易服务

    使用dotweb框架搭建简易服务 go语言web框架挺多的,所谓琳琅满目,里面也有很多优秀的,比如echo.beego等,但体验下来,总是觉得哪里有点小疙瘩,后来才明白过来,echo太简单,很多日常使 ...

  4. 客户端与服务端,java与Android跨平台服务

  5. Oracle的服务端_默认_启动的服务

  6. Node.js 服务端图片处理利器

    sharp 是 Node.js 平台上相当热门的一个图像处理库,其实际上是基于 C 语言编写 的 libvips 库封装而来,因此高性能也成了 sharp 的一大卖点.sharp 可以方便地实现常见的 ...

  7. c# .NET RSA结合AES加密服务端和客户端请求数据

    这几天空闲时间就想研究一下加密,环境是web程序,通过js请求后台返回数据,我想做的事js在发送请求前将数据加密,服务端收到后解密,待服务端处理完请求后,将处理结果加密返回给客户端,客户端在解密,于是 ...

  8. JAVA学习第六十三课 — 关于client服务端 && URL类 & URLConnection

    常见的client和服务端 client:       浏览器:IE:弹窗体,猎豹:弹窗体.多标签,争强效果 服务端:       server:TomCat:1.处理请求 2.给予应答 想让TomC ...

  9. node服务端渲染(完整demo)

    简介 nodejs搭建多页面服务端渲染 技术点 koa 搭建服务 koa-router 创建页面路由 nunjucks 模板引擎组合html webpack打包多页面 node端异步请求 服务端日志打 ...

随机推荐

  1. Blogs实现导航菜单

    #1.隐藏默认导航菜单 #header{display:none;} /*在页面定制CSS里面最前面添加如下代码,最好添加在最前面*/ #2.添加页首html代码 <!-- 添加博客导航栏信息开 ...

  2. 浅谈 WebRTC 的 Audio 在进入 Encoder 之前的处理流程

    在 WebRTC 中,Audio 数据在被送入编码器之前,有 2 大部分需要特别关注,一是数据采集,二是 Audio Processing. 作者:方来,技术专家,从事 voip 应用开发. 数据采集 ...

  3. 深入理解MySQL系列之redo log、undo log和binlog

    事务的实现 redo log保证事务的持久性,undo log用来帮助事务回滚及MVCC的功能. InnoDB存储引擎体系结构 redo log Write Ahead Log策略 事务提交时,先写重 ...

  4. 工作中用的sql

    //字段是空字符串或者null select * from blade_process_should_pay_invoice where is_deleted = 0 and process_inst ...

  5. ArrayList的删除姿势你都知道了吗

    引言 前几天有个读者由于看了<ArrayList哪种遍历效率最好,你真的弄明白了吗?>问了个问题普通for循环ArrayList为什么不能删除连续重复的两个元素?其实这个描述是不正确的.正 ...

  6. Flask基础全套

    Flask简介 Flask是主流PythonWeb三大框架之一,其特点是短小精悍以及功能强大从而获得众多Pythoner的追捧,相比于Django它更加简单更易上手,Flask拥有非常强大的三方库,提 ...

  7. item系列魔法方法

    class Foo: def __init__(self, name): self.name = name def __getitem__(self, item): print('getitem执行' ...

  8. Head First 设计模式 —— 02. 观察者 (Observer) 模式

    思考题 在我们的一个实现中,下列哪种说法正确?(多选) P42 public class WeatherDate { // 实例变量声明 public void measurementsChanged ...

  9. for _ in range( ):

    for _ in range( ): { //函数体 } 其中"-"只是一个占位符,可以把它理解为i或者j等等任意的字母. 上面代码相当于同下: for i in range( ) ...

  10. LeetCode 二分查找模板 I

    模板 #1: int binarySearch(vector<int>& nums, int target){ if(nums.size() == 0) return -1; in ...