闲鱼前端基于 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