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
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
15
5.2k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
630
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
390
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
3
2.4k
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
710
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
340
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.1k
rubygem開発で鍛える設計力
joker1007
2
200
Welcome to the LLM Club
koic
0
170
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Fireside Chat
paigeccino
37
3.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
How to Think Like a Performance Engineer
csswizardry
24
1.7k
RailsConf 2023
tenderlove
30
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Rails Girls Zürich Keynote
gr2m
94
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Embracing the Ebb and Flow
colly
86
4.7k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
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