Upload
others
View
29
Download
0
Embed Size (px)
Citation preview
从前端到全栈 依托云的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