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.2k
前端的云时代
支付宝前端平台技术架构
lifesinger
December 09, 2012
Tweet
Share
More Decks by lifesinger
See All by lifesinger
SeaJS 与 Arale
lifesinger
12
1.3k
基于 SeaJS 的调试实践
lifesinger
19
1.6k
SeaJS 从入门到精通
lifesinger
44
7.6k
小脚本大世界
lifesinger
10
890
Other Decks in Technology
See All in Technology
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
250
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
230
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.1k
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
740
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
620
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
160
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
690
開発生産性大幅アップ!Postman VS Code拡張機能
nagix
2
380
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
Featured
See All Featured
BBQ
matthewcrist
80
8.8k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
RailsConf 2023
tenderlove
4
540
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Making Projects Easy
brettharned
108
5.5k
Scaling GitHub
holman
457
140k
Become a Pro
speakerdeck
PRO
11
4.5k
For a Future-Friendly Web
brad_frost
172
9k
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