前端工程师只用云服务实现的完整应用云服务降低了开发成本的同时，能让开发团队更多地聚焦到用户体验上。后台云端化与前台一体化

背景

我在半年前写了一篇介绍Google的Firebase的文章，之后就开始尝试做一个Web app，不依赖任何自有的后台，只用前端熟悉的技术栈加上各种云服务，就能完整地把应用做出来。

在整个过程中主要探索如何用云服务降低开发成本，将团队的精力聚焦到用户体验上。

今天要介绍的这个应用叫做Tomato5，取一天完成5个番茄钟之意。做这个应用的初衷是现有的Web番茄钟都太丑了，我希望做得更简洁而且有趣味性，而且加上了表情符号和团队分享的功能。

这个应用的产品、交互、视觉、开发都是我一个人完成的，可以说是真正的全栈实践。产品设计、交互逻辑和视觉设计都力求最简化，同时也有丰富的细节来改善体验。整个页面是全响应式设计，适应各种高度和宽度。

番茄钟：

团队面板：

主要技术栈：

首页：tomato5.io（由于应用建立在谷歌云服务基础之上，需要翻墙）

云服务按包装程度分为Infrastructure as a Service(IaaS)，Platform as a Service(PaaS)，Backend as a Service(BaaS)三个等级，三者之间的关系如下：

在PaaS基础之上，与BaaS平行的另一种服务就是Function as a Service(FaaS)，可以理解为将运算逻辑直接f到云上，我们在云服务上部署的不再是整个应用，而是每一个具体的方法。由于每个方法可以单独维护，整个架构自然解耦。

将BaaS和FaaS结合起来，就形成了Serverless架构。

传统架构与Serverless架构对比：

图中1和2是BaaS服务商提供的部分，4和5FaaS提供的部分。

整个Severless架构中的所有模块都是云端服务。Severless不是说没有Server，而是没有自己搭的Server。

一个典型的Severless架构的组成部分：

前端资源打包成纯静态文件包，直接部署到Google的CDN上，没有Node层。

鉴权服务使用Firebase的Authentication Service，用它完成了整个账户系统，包括了找回账户修改密码等功能，甚至提供了前端的全套UI。

数据库使用Firebase的Real-time Database。前端鉴权之后直接访问数据库。团队状态展示的功能就是利用数据库的实时同步特性实现的。

用户数据的统计分析，内部管理，敏感操作通过Cloud Function实现。

Tomato5是实验性的作品，除了Severless方面要不断完善之外，还有一个方向是向Progressive Web App去发展，实现多端整合。

未来的技术发展趋势是，后台云端化，前台一体化。应用层前后端整合，用户端多端整合，开发人员需要向全栈、全端发展。

全栈、全端并非是主张消除分工，一切资源整合都需要建立在完善的基础设施之上，有各种专才搭建好平台，全栈和全端才有发挥的空间。

云服务降低了开发成本的同时，能让开发团队更多地聚焦到用户体验上。后台云端化与前台一体化的趋势让全栈型的开发者能够更好地释放自己的创造力。

Tomato5是一款用户体验不错的番茄钟工具。欢迎大家试用并且与我讨论。