Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
前端的云时代
Search
lifesinger
December 09, 2012
Technology
18
1.3k
前端的云时代
支付宝前端平台技术架构
lifesinger
December 09, 2012
Tweet
Share
More Decks by lifesinger
See All by lifesinger
SeaJS 与 Arale
lifesinger
12
1.4k
基于 SeaJS 的调试实践
lifesinger
19
1.7k
SeaJS 从入门到精通
lifesinger
44
7.7k
小脚本大世界
lifesinger
10
920
Other Decks in Technology
See All in Technology
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
260
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
220
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
330
Witchcraft for Memory
pocke
1
290
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
Amazon Bedrockで実現する 新たな学習体験
kzkmaeda
1
530
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
380
How Community Opened Global Doors
hiroramos4
PRO
1
120
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Practical Orchestrator
shlominoach
188
11k
KATA
mclloyd
29
14k
Designing Experiences People Love
moore
142
24k
Writing Fast Ruby
sferik
628
61k
Gamification - CAS2011
davidbonilla
81
5.3k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The Invisible Side of Design
smashingmag
299
51k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Adopting Sorbet at Scale
ufuk
77
9.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Rails Girls Zürich Keynote
gr2m
94
14k
Transcript
前端的云时代
关于我 = { 姓名: 王保平 工作: 前端基础架构
微博: @玉伯也叫射雕 }
大纲 • 前端是什么 • 前端发展简史 • 支付宝业务场景
• 前端平台架构 • 总结与展望
前端是什么
前端在做什么
前端在做什么
前端在做什么
None
前端的职责 ① 实现界面交互 ② 提升用户体验
前端发展简史
萌芽期 • 功能单一、页面少 • 修改频繁、速度快 • 团队小、多面手
萌芽期的前端
萌芽期的前端架构 设计 前端开发 后端 开发
项⺫⽬目 管理 挑战:找到合适的人
幼年期 • 业务复杂、页面多 • 交互逐步复杂 • 修改频繁、速度快
• 角色多、流程杂
幼年期的前端
幼年期的前端架构 挑战:招聘、协作 脚本开发 页面构建 基础类库
编码规范 开发流程 …
少年期 • 业务高速发展 • 前端性能要好 • 核心业务要稳定
• 人多、分工细
少年期的前端
少年期的前端架构 挑战:专才培养、招聘 稳定保障 性能优化 基础类库
开发环境 流程规范 … 业务二组 业务二组 业务一组
前端典型问题 • 项目并发多、忙 • 难以深入业务 • 价值认可度不高
• 职业发展迷茫
下一步 ?
支付宝业务场景
支付宝 互联网 金融
对技术的要求 稳定 快速 品质 ⽆无线上故障
响应快 开发快 发布快 性能高 可维护性好 可适应性强
前端业务分类 展现型 功能型 { 给⽤用户看的 给⽤用户⽤用的
展现型
功能型
? 支撑 功能型业务 展现型业务
还要考虑人的需求 • 成就感 • 发展空间
前端平台架构
总体原则 • 保障业务的正常进行 • 兼容现有架构、支持并存 • 满足未来
3 年内的需求
上下游支持 • 设计和交互标准化 • 后端工程师达成往前走的共识
功能型业务 展现型业务 前端技术平台 前端技术平台 基础技术体系
基础设施平台 前端服务化 业务架构 业务架构 业务架构 业务架构
CMD 模块⽣生态圈 ⽀支付宝模块库 ⼀一淘 模块库 腾讯模块 ⽣生态库 B2B 模块库 Arale
Handy SeaJS spm 前端基础技术体系 百度模块 ⽣生态库
SeaJS h1p://seajs.org/ SeaJS 是一个适用于 Web 端的模块加载器
CMD 规范
spm h1ps://github.com/spmjs/spm/wiki 简单、放⼼心的包管理⼯工具
spm install spm upload spm build spm
deploy spm init …
Arale Arale 是⼀一个开放、简单、易⽤用的前端基础类库
h1p://aralejs.org/
Arale 开放式,尽量复用业界成熟方案
Handy h1p://handyjs.github.com/
基础设施平台 基础设施平台
展现研发平台 前端测试系统 ⽤用户体验分析平台 前端监控系统 ⺫⽬目标:为前端提供持续交付和监控分析
展现研发平台
用户体验分析平台 用户行为分析 网站流量分析 营销价值分析
前端服务化 前端服务化 前台前端服务化
后台前端服务化 ⺫⽬目标:让后端⼯工程师可以基于前端平台进⾏行⾃自主开发
后台前端服务化
前端业务架构 前端技术平台 前端 后端 前后端协作
由资源型团队转换成服务型团队 。。。
总结与展望
前端的云时代 前端技术平台 业务架构 业务架构 业务架构
应⽤用 终端 前 端 云
展望 • 模块生态圈的形成 • 前端技术的精细化 • 前端驱动产品
支付宝前端基础技术团队
seajs.log(“谢谢大家”) Q&A