写点什么

闲鱼前端基于 serverless 的一种多端开发解决方案

  • 2019-11-17
  • 本文字数:1847 字

    阅读完需:约 6 分钟

闲鱼前端基于serverless的一种多端开发解决方案

背景

前端的发展太快了,前端框架和技术的发展也层出不穷,还包括不同智能设备的出现,对前端开发同学来说是个很大的跳转,简单列举下:


  • 前端框架:vue、react、angular

  • 小程序:微信小程序、支付宝小程序、字节跳动小程序

  • 智能设备:苹果设备、天猫精灵、小度


这样就滋生了一些问题,比如我要开发一个通用的页面,兼容不同的端侧和小程序,显然目前是做不到的,我们只能开发多套页面去适配不同的场景,这样的话成本就太高了。


很多同学都在尝试解决这个问题,也催生了类似 taro 这样的多端统一开发框架,这是一个好的解决方案,但是比较被动,缺乏一定的扩展性。


这篇文章我们要探讨的是,看能不能换个角度去解决这个问题,提升开发效率。

ViewModel

当我们在开发一个页面的时候,不管用的是哪一种框架,通常都会抽象出一层 viewmodel 层,它主要有 2 个作用


  • 和服务端进行交互,接受后台返回的数据,进行加工并传递给 view 层渲染

  • 接受 view 层的回调,加工数据并返回给 view 层渲染



从上图中我们可以看出,viewmodel 是一段独立的通用代码逻辑,起到了承前启后的作用。它和 view 层关系更加紧密,因此通常会放在前端测。


既然 viewmodel 是独立的,那我们能不能把它放在后端呢?这样一个最大的好处就是 viewmodel 可以进行复用,不需要在重复编写,而且只需要改动一个 viewmodel,就可以全量生效。



似乎是一个很美好的想法,但是这部分代码由谁去开发呢,总不可能寄希望于后端同学吧,当然只能是我们自己,也感谢于 serverless 架构的出现,让这件事情变成了可能。


有些同学可能会问,既然 viewmodel 后移了,那 view 呢?后续会考虑结合我们的ui2code技术,那真的就比较完美了。

什么是 serverless

我们先简单介绍一下什么是 serverless,serverless 的基础是云技术,它是云技术发展到一定阶段而出现的一种革命性的高端架构。serverless 并不是说不需要服务器,而是指不需要开发者去关心底层服务器的状态、资源和扩容等,开发者只需要关注于业务逻辑实现。


架构上,我们可以把 serverless 分为 FaaS 和 BaaS。



FaaS 是用于创建、运行、管理函数服务的计算平台,它支持多种开发语言,比如 java、nodejs、dart 等,这有利于不同端侧的开发同学介入开发。FaaS 是基于事件驱动的思想,只有当一个函数被事件触发时才会占用服务器资源执行,不然都是无需占用服务器资源的。


BaaS 提供了用于函数调用的第三方基础服务,比如身份校验、日志、数据库等,它是由服务商直接提供,开发者无需关系实现,直接调用即可。

业务落地

我们是通过gaia平台开发后端接口,gaia 可以理解为上文提到的 FaaS 平台。


日常开发中有这样一个需求,下面是这个需求的一个页面。



因为这个页面上的数据比较多,先把它切分成一个个小的模块,后台返回数据的时候也根据模块来返回数据。


我们是根据 viewmodel 来设计接口,首先肯定有一个首屏数据接口;然后是页面上的交互,比如切换卡片、切换芝麻信用按钮,切换会引起页面数据变化,我们可以统一封装一个页面更新的接口;最后是一个开通的接口。


后端接口


前后端交互最重要的数据结构的设计,我们省略了中间的业务逻辑处理,看下接口的数据结构。



首屏接口返回的数据主要有几个特征:


  • 根据前端的页面模块定义返回结构

  • 字段的颗粒度很细,页面上的每个元素都对应一个字段值

  • 有两个字段来控制模块的显示和刷新


更新接口的返回数据结构和首屏接口类似,但是入参有所不同,主要包括 2 个字段:


  • data:当前页面的数据,为了避免数据的重复获取

  • action: 定义的页面操作


前端处理


从后端返回的数据可以看到,数据是及其详细的,无需我们做任何的业务逻辑处理,直接映射到页面即可。这样,前端已经变成了很薄的一层数据,没有任务的业务逻辑处理,变的很简单,当需要迁移到其他端时,只需要迁移视图层即可。当有任何的业务变动时,只需要修改后端的接口,就能生效。

收益与总结

通过具体的实践,我们发现,对于前端开发同学来说,变的简单了,开发效率有很大的提升,前端同学甚至都不需要去理解具体的业务逻辑,就能完成页面的开发。而且,提取的 viewmodel 可以复用到不同的端侧,设置还包括 native 端。我们还可以将 viewmodel 拆分成更小粒度的 viewmodel,方便在不同的页面接口中进行复用。我们有同学还在 FaaS 侧基于 redux 的思想封装了一个通用的状态管理框架,规范了前后端的交互。


后面, 还有一些问题待我们去解决,比如开发成本、viewmodel 的逻辑拆分、具体接口问题定位等。


本文转载自公众号闲鱼技术(ID:XYtech_Alibaba)。


原文链接


https://mp.weixin.qq.com/s/VLsVTe4ZyOJ9rNyVf5aXyg


2019-11-17 08:003400

评论

发布
暂无评论
发现更多内容

每日一R「13」数据结构(四)闭包

Samson

学习笔记 8月月更 ​Rust

Kubernetes MetalLB 作为 Load Balancer上

CTO技术共享

DDD实战(12-终篇):DDD下微服务的“分分合合”及一个倡议

深清秋

DDD 软件架构 8月月更

架构实战营模块五作业

zhihai.tu

短视频软件开发:推荐算法没有想象的那么复杂

开源直播系统源码

直播系统 直播系统源码 短视频直播

算法之“杨辉三角”题解

掘金安东尼

算法 前端 8月月更

leetcode 697. Degree of an Array 数组的度(简单)

okokabcd

LeetCode 数据结构与算法

天翼云通过2022可信云安全首批云工作负载保护平台评估

Geek_2d6073

IPv6过渡技术的推进策略

穿过生命散发芬芳

ipv6 8月月更

加密世界的福音,Galaxy Project上领取专属Zebec OAT

鳄鱼视界

详解CAN总线:高速CAN总线和低速CAN总线的特性

不脱发的程序猿

汽车电子 ISO 11898 高速CAN总线 低速CAN总线 CAN总线

头脑风暴:回文子串

HelloWorld杰少

算法 LeetCode 数据结构, 8月月更

呐,HTTP接口安全的八种对策送给你了

知识浅谈

HTTP API 8月月更

面试突击77:Spring 依赖注入有几种?各有什么优缺点?

王磊

Java 常见面试题

程序员过中秋

楠羽

中秋节

汽车电子控制系统的构成

不脱发的程序猿

汽车电子 嵌入式软件 汽车电子控制系统

C++文件读写操作分析文本文件与二进制文件

CtrlX

c c++ 面向对象 8月月更 opp

网站建设流程

源字节1号

网站开发

租金、物业费的催收困境,如何解决?

IT资讯搬运工

redis持久化持久化的方案与各自存在的问题

想要飞的猪

Tomcat 的安装与环境配置

楠羽

开源 #开源

详解AUTOSAR:什么是AUTOSAR?(理论篇—1)

不脱发的程序猿

汽车电子 嵌入式开发 AUTOSAR

【算法实践】| 一步步手把手带你实现寻找最小公倍数

迷彩

算法 算法实践 8月月更 最小公倍数

GaussDB(DWS)如何实现实时,批量和交付式查询一站式开发

乌龟哥哥

8月月更

云原生(二十四) | Kubernetes篇之Kubernetes 配置

Lansonli

云原生 k8s 8月月更

[JS真好玩] 我帮掘金找到了一个小Bug,可利用该Bug增加专栏粉丝数

HullQin

CSS JavaScript html 前端 8月月更

Go-Excelize API源码阅读(十九)——SetHeaderFooter

Regan Yue

Go 开源 源码解析 8月日更 8月月更

陈大好:持续创造小而美的产品丨独立开发者 x 开放麦

声网

人工智能

Kubernetes MetalLB 作为 Load Balancer下

CTO技术共享

Kubernetes薅多云羊毛怎么部署

CTO技术共享

开源一夏 | 使用layui框架实战之栅格系统和菜单评分组件运用心得

恒山其若陋兮

开源 8月月更

闲鱼前端基于serverless的一种多端开发解决方案_架构_还休_InfoQ精选文章