Enviar búsqueda
Cargar
淘宝前端架构(玉伯)[懒懒交流会#38]
•
Descargar como PPTX, PDF
•
52 recomendaciones
•
4,910 vistas
taobao.com
Seguir
Tecnología
Educación
Noticias y política
Denunciar
Compartir
Denunciar
Compartir
1 de 42
Descargar ahora
Recomendados
Does Evil Exists
Does Evil Exists
yousifiqbal
1 architecture & design
1 architecture & design
Mark Swarbrick
OpenStack at PayPal
OpenStack at PayPal
openstackindia
E-Commerce Basics
E-Commerce Basics
Al Muzahid
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Brian Huff
当当网Docker应用实践
当当网Docker应用实践
正炎 高
MicroServices architecture @ Ctrip v1.1
MicroServices architecture @ Ctrip v1.1
William Yang
一个前端的自我修养 Winter
一个前端的自我修养 Winter
正炎 高
Recomendados
Does Evil Exists
Does Evil Exists
yousifiqbal
1 architecture & design
1 architecture & design
Mark Swarbrick
OpenStack at PayPal
OpenStack at PayPal
openstackindia
E-Commerce Basics
E-Commerce Basics
Al Muzahid
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Creating a Global E-Commerce Website With E-Business Suite and Fusion Middleware
Brian Huff
当当网Docker应用实践
当当网Docker应用实践
正炎 高
MicroServices architecture @ Ctrip v1.1
MicroServices architecture @ Ctrip v1.1
William Yang
一个前端的自我修养 Winter
一个前端的自我修养 Winter
正炎 高
FT Partners Research: Apple Unveils Apple Pay - Comprehensive Overview and Im...
FT Partners Research: Apple Unveils Apple Pay - Comprehensive Overview and Im...
FT Partners / Financial Technology Partners
QR Code Based Payment- The most advanced contactless payment
QR Code Based Payment- The most advanced contactless payment
Mahindra Comviva
Mobile Payments: An IBM Point of View
Mobile Payments: An IBM Point of View
Mark Sherman
3 a forum 2016 陆金所前端进化论 微服务之路(public)
3 a forum 2016 陆金所前端进化论 微服务之路(public)
Ufo Qiao
Secure QR code payment
Secure QR code payment
James Wu
Secured qr code [Pankaj Jeswani and Team]
Secured qr code [Pankaj Jeswani and Team]
Pank Jes
Evolving Goals: IT vs. Product Mindset
Evolving Goals: IT vs. Product Mindset
Felipe Castro
Cloud Customer Architecture for e-Commerce
Cloud Customer Architecture for e-Commerce
Cloud Standards Customer Council
E commerce & m-commerce payment systems
E commerce & m-commerce payment systems
Syed Shah
Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]
Ryan Cuprak
Paypal.com ppt
Paypal.com ppt
Savio Pereira
Mobile Payments Framework
Mobile Payments Framework
Lakshmana Kattula
Mining Your ATM "Big Data"
Mining Your ATM "Big Data"
INETCO Systems Ltd.
PayPal's Private Cloud @ Scale
PayPal's Private Cloud @ Scale
PayPal
What is OKR?
What is OKR?
Felipe Castro
Java SE 8 best practices
Java SE 8 best practices
Stephen Colebourne
Performance Management Tips
Performance Management Tips
JAMSO
(OKR) Goal setting : Objectives Key Results
(OKR) Goal setting : Objectives Key Results
JAMSO
Agile2016: Stop Using Agile with Waterfall Goals: Goal Agility with OKR
Agile2016: Stop Using Agile with Waterfall Goals: Goal Agility with OKR
Felipe Castro
Ranking analysis-12-20-2011-3
Ranking analysis-12-20-2011-3
SEO, LLC dba www.SplinternetMarketing.com
introduction of web 2.0
introduction of web 2.0
soboring
Yui rocks
Yui rocks
Adam Lu
Más contenido relacionado
Destacado
FT Partners Research: Apple Unveils Apple Pay - Comprehensive Overview and Im...
FT Partners Research: Apple Unveils Apple Pay - Comprehensive Overview and Im...
FT Partners / Financial Technology Partners
QR Code Based Payment- The most advanced contactless payment
QR Code Based Payment- The most advanced contactless payment
Mahindra Comviva
Mobile Payments: An IBM Point of View
Mobile Payments: An IBM Point of View
Mark Sherman
3 a forum 2016 陆金所前端进化论 微服务之路(public)
3 a forum 2016 陆金所前端进化论 微服务之路(public)
Ufo Qiao
Secure QR code payment
Secure QR code payment
James Wu
Secured qr code [Pankaj Jeswani and Team]
Secured qr code [Pankaj Jeswani and Team]
Pank Jes
Evolving Goals: IT vs. Product Mindset
Evolving Goals: IT vs. Product Mindset
Felipe Castro
Cloud Customer Architecture for e-Commerce
Cloud Customer Architecture for e-Commerce
Cloud Standards Customer Council
E commerce & m-commerce payment systems
E commerce & m-commerce payment systems
Syed Shah
Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]
Ryan Cuprak
Paypal.com ppt
Paypal.com ppt
Savio Pereira
Mobile Payments Framework
Mobile Payments Framework
Lakshmana Kattula
Mining Your ATM "Big Data"
Mining Your ATM "Big Data"
INETCO Systems Ltd.
PayPal's Private Cloud @ Scale
PayPal's Private Cloud @ Scale
PayPal
What is OKR?
What is OKR?
Felipe Castro
Java SE 8 best practices
Java SE 8 best practices
Stephen Colebourne
Performance Management Tips
Performance Management Tips
JAMSO
(OKR) Goal setting : Objectives Key Results
(OKR) Goal setting : Objectives Key Results
JAMSO
Agile2016: Stop Using Agile with Waterfall Goals: Goal Agility with OKR
Agile2016: Stop Using Agile with Waterfall Goals: Goal Agility with OKR
Felipe Castro
Ranking analysis-12-20-2011-3
Ranking analysis-12-20-2011-3
SEO, LLC dba www.SplinternetMarketing.com
Destacado
(20)
FT Partners Research: Apple Unveils Apple Pay - Comprehensive Overview and Im...
FT Partners Research: Apple Unveils Apple Pay - Comprehensive Overview and Im...
QR Code Based Payment- The most advanced contactless payment
QR Code Based Payment- The most advanced contactless payment
Mobile Payments: An IBM Point of View
Mobile Payments: An IBM Point of View
3 a forum 2016 陆金所前端进化论 微服务之路(public)
3 a forum 2016 陆金所前端进化论 微服务之路(public)
Secure QR code payment
Secure QR code payment
Secured qr code [Pankaj Jeswani and Team]
Secured qr code [Pankaj Jeswani and Team]
Evolving Goals: IT vs. Product Mindset
Evolving Goals: IT vs. Product Mindset
Cloud Customer Architecture for e-Commerce
Cloud Customer Architecture for e-Commerce
E commerce & m-commerce payment systems
E commerce & m-commerce payment systems
Top 50 java ee 7 best practices [con5669]
Top 50 java ee 7 best practices [con5669]
Paypal.com ppt
Paypal.com ppt
Mobile Payments Framework
Mobile Payments Framework
Mining Your ATM "Big Data"
Mining Your ATM "Big Data"
PayPal's Private Cloud @ Scale
PayPal's Private Cloud @ Scale
What is OKR?
What is OKR?
Java SE 8 best practices
Java SE 8 best practices
Performance Management Tips
Performance Management Tips
(OKR) Goal setting : Objectives Key Results
(OKR) Goal setting : Objectives Key Results
Agile2016: Stop Using Agile with Waterfall Goals: Goal Agility with OKR
Agile2016: Stop Using Agile with Waterfall Goals: Goal Agility with OKR
Ranking analysis-12-20-2011-3
Ranking analysis-12-20-2011-3
Similar a 淘宝前端架构(玉伯)[懒懒交流会#38]
introduction of web 2.0
introduction of web 2.0
soboring
Yui rocks
Yui rocks
Adam Lu
D2-ETao-show
D2-ETao-show
leneli
学习 CodeIgniter
学习 CodeIgniter
BruceWolf
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
思念 青青
百度前端技术交流会-新浪博客前端架构分享
百度前端技术交流会-新浪博客前端架构分享
tiantianli
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
cleverpig
Css schema by_sofish
Css schema by_sofish
Webrebuild
支付宝CSS构架
支付宝CSS构架
Sofish Lin
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
Yii2 restful 基礎教學
Yii2 restful 基礎教學
Duncan Chen
Python在移动社交平台中的应用
Python在移动社交平台中的应用
Leo Zhou
常用Js框架比较
常用Js框架比较
Adam Lu
杨皓 新浪博客前端架构分享
杨皓 新浪博客前端架构分享
isnull
Kissy design
Kissy design
yiming he
Spring 2.x 中文
Spring 2.x 中文
Guo Albert
Osgi Intro
Osgi Intro
Ching Yi Chan
信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp
zhoujg
ajax_onlinemad
ajax_onlinemad
Kitor23
Pet shopanddesign
Pet shopanddesign
littlegun
Similar a 淘宝前端架构(玉伯)[懒懒交流会#38]
(20)
introduction of web 2.0
introduction of web 2.0
Yui rocks
Yui rocks
D2-ETao-show
D2-ETao-show
学习 CodeIgniter
学习 CodeIgniter
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
[Baidu web frontend_conference_2010]_[sina_blog_architecture]
百度前端技术交流会-新浪博客前端架构分享
百度前端技术交流会-新浪博客前端架构分享
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
Css schema by_sofish
Css schema by_sofish
支付宝CSS构架
支付宝CSS构架
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
Yii2 restful 基礎教學
Yii2 restful 基礎教學
Python在移动社交平台中的应用
Python在移动社交平台中的应用
常用Js框架比较
常用Js框架比较
杨皓 新浪博客前端架构分享
杨皓 新浪博客前端架构分享
Kissy design
Kissy design
Spring 2.x 中文
Spring 2.x 中文
Osgi Intro
Osgi Intro
信息系统开发平台OpenExpressApp
信息系统开发平台OpenExpressApp
ajax_onlinemad
ajax_onlinemad
Pet shopanddesign
Pet shopanddesign
Más de taobao.com
编辑器设计U editor
编辑器设计U editor
taobao.com
Berserk js
Berserk js
taobao.com
淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Kind editor设计思路
Kind editor设计思路
taobao.com
Java script physical engine
Java script physical engine
taobao.com
Html5环保小游戏
Html5环保小游戏
taobao.com
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
李成银:前端编译平台
李成银:前端编译平台
taobao.com
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
taobao.com
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
Más de taobao.com
(20)
编辑器设计U editor
编辑器设计U editor
Berserk js
Berserk js
淘宝开放产品前端实践
淘宝开放产品前端实践
第三方内容开发最佳实践
第三方内容开发最佳实践
编辑器设计Kissy editor
编辑器设计Kissy editor
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Kind editor设计思路
Kind editor设计思路
Java script physical engine
Java script physical engine
Html5环保小游戏
Html5环保小游戏
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
张平:JavaScript引擎实现
张平:JavaScript引擎实现
高力:19楼现有前端架构
高力:19楼现有前端架构
李成银:前端编译平台
李成银:前端编译平台
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
张克军:前端基础架构的实践和思考
张克军:前端基础架构的实践和思考
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
前端Mvc探讨及实践
前端Mvc探讨及实践
淘宝前端架构(玉伯)[懒懒交流会#38]
1.
The Front-end Architectureof
Taobao一个实战者对前端架构的思考 yubo@taobao.com 2010.03
2.
Architecture is the
art and science of designing buildings and other physical structures. – from wikipedia
3.
我们每天都在做架构
4.
什么是软件架构 组成派:软件系统的架构将系统描述为计算组件及组件之间的交互。(Mary Shaw)
决策派:软件架构是在一些重要方面所做出的决策的集合。(RUP) 前端架构:和前端相关的软件架构。下面将采用组成派的观点来阐述前端架构。
5.
6.
前端组件的层次 Library Framework
Application Component Module Util Widget Plug-in Extension
7.
常见前端类库,以及愿景
8.
9.
10.
11.
12.
13.
淘宝前端架构 Kissy YUI2
Common Library { }
14.
YUI 2 http://developer.yahoo.com/yui/2/
15.
http://code.google.com/p/kissy/
16.
Kissy 要解决的问题 YUI
组件不够小巧简洁 YUI 组件的修改成本高,更新周期长 YUI 部分组件的用户体验不符合国情 YUI2 的 API 很传统,不够简洁优雅
17.
Kissy 愿景 小巧灵活
Short & Slim 简洁实用 Simple & Stupid 使用起来让人感觉愉悦 Sweet & Sexy
18.
淘宝前端架构 Kissy TBack
YUI2 TBra Common Library { } Company Library { }
19.
TBra 淘宝前台业务前端通用类库 旺旺点灯
登录小窗 定投广告 哈勃监控 。。。
20.
TBack 淘宝后台业务前端通用类库
21.
淘宝前端架构 Shop 3C
Kissy TBack … YUI2 TBra Mall Common Library { } Company Library { } App Library { }
22.
23.
类库、框架和应用
24.
25.
框架类库不分家 jQuery:
基础类库 + 弱框架 YUI2: 强类库 + 弱框架 YUI3: 强类库 + 强框架 ExtJS: 超强类库 + 强框架 Kissy: 强类库 + 中级框架 尝试融合: jQuery 的易用 + YUI2 的简明 +YUI3 的优雅
26.
{} 淘宝前端架构 Base
Framework App Code Guide Base Library
27.
App Code Guide
KISSY.add(“mod-name”, function(S) { /* … */ }); KISSY.ready(function(S) { /* … */ });
28.
KISSY.add(“mod-name”, function(S) {
}); Sandbox
29.
每一个模块都有自己的沙箱
30.
(function() { })();
最简单的沙箱
31.
YUI().use(“mod-name”, function(Y) {
}); YUI3 的强沙箱
32.
KISSY.ready(function(S) { });
Kissy 的弱沙箱
33.
淘宝前端架构 Module Module
Module Module Module Sandbox App Code Guide Base Library
34.
web application module
(n) 1 : an independent unit of functionality that is part of the total structure of a web application -- Nicholas Zakas
35.
任何单一模块都应该能够独立生存。
36.
模块之间尽量松耦合 这样可以让你修改一个模块,而不会影响其它。
37.
2010 首页实战 fp-p4p
fp-profile fp-search TB.add(…) YUI2 + Kissy + TBra
38.
淘宝前端架构 Module Module
Module Module Module Sandbox Extension Extension App Code Guide Base Library
39.
2010 首页实战 fp-profile
fp-p4p fp-search fp-default-ad TB.add(…) YUI2 + Kissy + TBra
40.
架构无所谓好坏,重要的是合不合适!
41.
References Scalable JavaScript
Application Architecture
42.
FAQ & Thanks!
Twitter: @lifesinger Gtalk: lifesinger@gmail.com
Notas del editor
Brunelleschi in Italy, in the building of the dome, not only transformed the cathedral and the city of Florence, but also the role and status of the architect.这是意大利佛罗伦斯大教堂。
两个流派并不矛盾,只是描述问题的角度不同:组成派是从软件本身(又称为软件客体)的角度出发,用来描述软件系统是由哪些组件组成,这些组件如何交互;决策派则是从架构师(又称为软件主体)的角度出发,明确了架构师需要对哪些事情进行决策,那么这些的决策结果就构成了软件系统的架构。
典型的类库组织形式和传统API 调用风格简洁、实用、够用;文档丰富;社区完善符合 Java 程序员的思维
http://book.51cto.com/art/200801/65025.htm
http://www.flickr.com/photos/renfield/3414246938/sizes/l/
http://www.flickr.com/photos/quinnanya/3575417671/
Descargar ahora