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
ECS モニタリング手法大整理
yendoooo
1
120
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
270
認知戦の理解と、市民としての対抗策
hogehuga
0
320
事業価値と Engineering
recruitengineers
PRO
1
200
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
株式会社ARAV 採用案内
maqui
0
340
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
380
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
あなたの知らない OneDrive
murachiakira
0
230
JavaScript 研修
recruitengineers
PRO
2
140
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Typedesign – Prime Four
hannesfritz
42
2.8k
Being A Developer After 40
akosma
90
590k
Producing Creativity
orderedlist
PRO
347
40k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
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