从前端到全栈 依托云的Serverless落地实践

腾讯云——周俊鹏

周俊鹏

腾讯云TCB团队-前端⼯工程师

从业经历

SVG Web前端 效率⼯工程 WebGL TCB

Serverless时代下的前端

Serverless模式解析与落地

落地实践：⼩小程序·云开发

总结&展望

Serverless时代下的前端

Serverless模式解析与落地

落地实践：⼩小程序·云开发

总结&展望

UI 静态 表单

0.0

WWW

1.0 2.0 2.5 3.0

AJAX

UI 交互 动态 数据

UI 交互 动态 数据

Server ⼯工程化

Node.js React Serverless

UI 交互 动态 逻辑

Server ⼯工程化 组件化

全栈

前端变⾰革史

BFF-从平台⽆无关性到平台差异化

数据储存层

数据访问层

业务逻辑层

表现控制层

表现层交互逻辑

业务逻辑

数据

Desktop H5 App

Monolithic Service

DB

BFF-从平台⽆无关性到平台差异化

Desktop H5 App

MicoService

DB

MicoService MicoService

Desktop

BFF

H5

BFF

Mobile

BFF

数据储存层

数据访问层

业务逻辑层

表现控制层

表现层交互逻辑

业务逻辑

数据

差异化业务逻辑

核⼼心业务逻辑

BFF遗留留的问题

PC Web H5

PC Web

BFF

H5

BFF Node.js 编程语⾔言

领域知识：并发、⽹网络、操作系统、IO…

服务管理理：硬件、监控、容灾、扩缩容…

数据管理理：事务、调优、容灾、⽇日志…

PC Web H5

PC Web

BFF

H5

BFF Node.js 编程语⾔言

领域知识：并发、⽹网络、操作系统、IO…

服务管理理：硬件、监控、容灾、扩缩容…

数据管理理：事务、调优、容灾、⽇日志…

Serverless-前端3.0

Serverless

Serverless时代下的前端

Serverless模式解析与落地

落地实践：⼩小程序·云开发

总结&展望

Serverless是什什么？

f(x)

FaaS

数据库

⽤用户鉴权

⽂文件储存

消息队列列

…

BaaS

+

功能序列列

云函数SCF

FaaS

云数据库MongoDB

云存储COS

BaaS

+

功能序列列

云函数SCF

FaaS

云数据库MongoDB

云存储COS

BaaS

+

监控⽇日志

⾃自动部署

弹性伸缩

事件驱动增删改查

权限控制

索引管理理

快速上传

权限控制

CDN加速

应⽤用场景

云数据库

云存储

云函数

端-SDK 云-接⼊入层

⼩小程序

web应⽤用

Android应⽤用 （即将推出）

IOS应⽤用 （即将推出）

依托云开发的⼤大前端模型

依托云开发的⼤大前端-架构模型

交互层

云函数CSF平台

f(x)

云数据库MongoDB

data

f(x)

f(x)

data data

云存储COS

filefile file

FaaS BaaS

前端关注点：交互逻辑+业务逻辑+数据

依托云开发的⼤大前端-⼯工程模型（旧）

开发 集成 测试 部署 监控

开发环境 编译环境 测试环境 预发环境 ⽣生产环境

UI&交互

单元测试

集成测试

E2E测试

验收测试

性能评估

安全评估

灰度发布

滚动升级

稳定监控

安全预警

回滚策略略 ⽇日志统计

前端 前端 后端 QA 运维 运维

依托云开发的⼤大前端-⼯工程模型（新）

开发 测试 部署 监控

开发环境 测试环境 预发环境 ⽣生产环境

UI&交互

单元测试

集成测试

E2E测试

验收测试

性能评估

安全评估

灰度发布

滚动升级

稳定监控

安全预警

回滚策略略 ⽇日志统计

前端 QA 云开发

Serverless时代下的前端

Serverless模式解析与落地

落地实践：⼩小程序·云开发

总结&展望

云开发-能⼒力力模型

端-SDK

云-接⼊入层

控制台

云-基础服务

交互逻辑

业务逻辑+数据+存储

管理理+运营

云开发-架构模型

编写云函数代码

部署云函数

调⽤用云函数 执⾏行行云函数

调⽤用云存储

调⽤用云数据库

调⽤用其他服务

返回结果数据

开发者⼯工具 端（⼩小程序） BaaSFaaS

f(x)

处理理结果数据

云存储

云数据库

其他服务

开放数据

消息推送

…

调⽤用云存储

调⽤用云数据库

云开发-流程模型

云存储 - ⾃自动托管

云存储

云数据库 - CURD

⼩小程序SDK 云函数

敏敏感数据的CURD 在服务端执⾏行行

云数据库 - 权限控制

云数据库 - 实时推送

多端实时数据同步。多端数据共享不不需要服务端中转，有效确保⽤用户

体验和传输的稳定性。适⽤用于具备实时需求的场景和产品，⽐比如回合

制游戏、聊天室等等。

Serverless时代下的前端

Serverless模式解析与落地

落地实践：⼩小程序·云开发

总结&展望

⼩小程序-可能是理理想的跨端模式

⼩小程序跨端-市场

• 定位清晰：功能为主，展示为辅

• ⽣生态稳定：⼊入⼝口单⼀一，运营不不依赖SEO

⼩小程序跨端-技术

• 前后分离：前端专注UI与交互，后端专注业务逻辑

• 底层封闭：编程模型统⼀一，同时不不失开放性(web-view)

⼩小程序跨端-技术

RephaelJS

SVGVML

IE8+IE9-

Browser-less

小程序

web

native

AndroidIOS

Browser-less OS-less

Platform-less

WWW

UI 静态 表单

0.0 1.0 2.0 2.5 3.0 4.0

AJAX

UI 交互 动态 数据

UI 交互 动态 数据

Server ⼯工程化

Node.js React Serverless 云+端？

UI 交互 动态 逻辑

Server ⼯工程化 组件化

全栈 全栈+全端？

云+端：前端4.0？

Serverless时代下的前端

Serverless模式解析与落地

落地实践：⼩小程序·云开发

总结&展望

Q&A

Thanks