SlideShare a Scribd company logo
1 of 119
/
VS
VS
Marketplaces
 Web Store
OpenSearch
 Coupons
 MoblieEC
   Social
VS
Marketplaces      Fulfillment by Amazon
 Web Store     eBay certified provider program

OpenSearch       Froogle,theFinder, eTao
 Coupons              GrouponStore
 MoblieEC                  APPs
   Social         Facebook,Twitter API
..
..
Persona
     “

4                    ”




         “
5
             ”




         “
3                ”
SDK.Bat

 Css.JS


Local Software
PS,DW..
                 ZIP
                 Html,JS,Css,Config..
Tag.

SDK.Bat

 Css.JS


Local Software
PS,DW..
                 ZIP
                 Html,JS,Css,Config..
Tag.

SDK.Bat
                                              Upload
 Css.JS                                       Css js




Local Software
PS,DW..
                 ZIP
                 Html,JS,Css,Config..
Tag.

SDK.Bat
                                              Upload
 Css.JS                                       Css js




Local Software
PS,DW..
                 ZIP
                 Html,JS,Css,Config..
|
.tb-shop


           .J_TBox   .J_TBox


           .J_TBox   .J_TBox


           .J_TBox   .J_TBox


           .J_TBox   .J_TBox
.J_TBox   .J_TBox


.J_TBox   .J_TBox


.J_TBox   .J_TBox


.J_TBox   .J_TBox
.J_TBox   .J_TBox


.J_TBox   .J_TBox


.J_TBox   .J_TBox


.J_TBox   .J_TBox
.J_TBox   .J_TBox


.J_TBox   .J_TBox


.J_TBox   .J_TBox


.J_TBox   .J_TBox
.J_TBox   .J_TBox


    .J_TBox   .J_TBox


/   .J_TBox   .J_TBox


    .J_TBox   .J_TBox
• html   css
•   html   css   <div onclick=”xx”></div>
• html   css

•        javascript
• html   css

•
                      <div class=”J_TWidget” data-widget-
         javascript   type=”Slide’ data-widget-config=”{...}”></
                      div>
• html   css

•        javascript

• css
• html   css

•        javascript

• css                 .className { /* code */ } =>
                      .tb-shop .className { /* code */ }
• html   css

•        javascript

• css
•
• html   css

•        javascript

• css
•                     .tb-
• html   css

•        javascript

• css
•
• php
• html   css

•        javascript

• css
•
• php                 IO
• html   css

•        javascript

• css
•
• php
/
/

•
/

•
/

•
•
/

•
•
/

•
•
•
/

•
•
•   wiki
/

•
•
•
/
/

• css, js
/

•   css, js       css: base,head js: seed + config
/

• css, js
• js
/

• css, js
• js            JS
/

• css, js
• js
•           css
/

• css, js
• js
•           css
/

• css, js
• js
•           css
Base
base.css   Base
seed.js, tb.js
base.css   Base     tshop.js
seed.js, tb.js
base.css           Base              tshop.js




           Shop Head( C2C, B2C )
seed.js, tb.js
base.css           Base              tshop.js




head.css   Shop Head( C2C, B2C )
seed.js, tb.js
base.css           Base              tshop.js




head.css   Shop Head( C2C, B2C )     head.js
seed.js, tb.js
base.css           Base              tshop.js




head.css   Shop Head( C2C, B2C )     head.js




            Sandbox( .tb-shop )
seed.js, tb.js
base.css           Base              tshop.js




head.css   Shop Head( C2C, B2C )     head.js




mods.css
skin.css    Sandbox( .tb-shop )
seed.js, tb.js
base.css           Base              tshop.js




head.css   Shop Head( C2C, B2C )     head.js




mods.css
skin.css    Sandbox( .tb-shop )      mods.js
seed.js, tb.js, tshop.js
seed.js, tb.js, tshop.js
...




seed.js, tb.js, tshop.js
•   tag




•
css



•   tag




•
css



•   tag




•
css



•   tag




•
          reflow
CSS
CSS
      HTML Tag
CSS
      HTML Tag
.J_TRegion


             .J_TBox_1   .J_TBox_5


             .J_TBox_2   .J_TBox_6
.J_TRegion

             .J_TBox_3   .J_TBox_7


             .J_TBox_4   .J_TBox_8
Reflow
Reflow
margin
Reflow
margin
SDK
SDK
SDK
SDK


                ||

Server   +   PHP Engine   +   Data
http://wiki.zx.taobao.com
SDK Server
8000.00                               39000.00



6000.00                               29250.00



4000.00                               19500.00



2000.00                                9750.00



     0                                      0
          8   9   10   11   12   13
Q&A

    /
TaobaoUED


Twitter: @macji

More Related Content

What's hot

CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimizationStoyan Stefanov
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopVero Rebagliatte
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 

What's hot (7)

CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Css introduction
Css  introductionCss  introduction
Css introduction
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 

Viewers also liked

Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...
Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...
Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...Hernan Huerta Figueroa
 
Distribution Question
Distribution  QuestionDistribution  Question
Distribution Questionhughes82
 
No To The Internet
No To The InternetNo To The Internet
No To The InternetJan Sládek
 
Principales adaptaciones y necesidades de los seres vivos
Principales adaptaciones y necesidades de los seres vivosPrincipales adaptaciones y necesidades de los seres vivos
Principales adaptaciones y necesidades de los seres vivospaola ramirez
 
Evaluation q5
Evaluation q5Evaluation q5
Evaluation q5hughes82
 
Future 25-brief
Future 25-briefFuture 25-brief
Future 25-briefBigumigu
 
Zulu Comedy Festival 2014: Social medie strategi
Zulu Comedy Festival 2014: Social medie strategiZulu Comedy Festival 2014: Social medie strategi
Zulu Comedy Festival 2014: Social medie strategiFreja Eilertzen
 
WooRank.com Report on Gauteng Net
WooRank.com Report on Gauteng NetWooRank.com Report on Gauteng Net
WooRank.com Report on Gauteng NetBlogatize.net
 
Bva les francais_et_leur_chere_voiture
Bva les francais_et_leur_chere_voitureBva les francais_et_leur_chere_voiture
Bva les francais_et_leur_chere_voitureaclavel
 
Enlaces%20modulo%20 smo
Enlaces%20modulo%20 smoEnlaces%20modulo%20 smo
Enlaces%20modulo%20 smoruralregion
 
Week 1 - Producing knowledge
Week 1 - Producing knowledgeWeek 1 - Producing knowledge
Week 1 - Producing knowledgeAlberto LLA
 
Krugerpark.com 20120110
Krugerpark.com 20120110Krugerpark.com 20120110
Krugerpark.com 20120110Blogatize.net
 

Viewers also liked (15)

How to use Twitter
How to use TwitterHow to use Twitter
How to use Twitter
 
Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...
Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...
Exclusivo: Samsung Galaxy I9000 con TV, HTC HD7 con Windows Phone 7, Google N...
 
Distribution Question
Distribution  QuestionDistribution  Question
Distribution Question
 
No To The Internet
No To The InternetNo To The Internet
No To The Internet
 
Principales adaptaciones y necesidades de los seres vivos
Principales adaptaciones y necesidades de los seres vivosPrincipales adaptaciones y necesidades de los seres vivos
Principales adaptaciones y necesidades de los seres vivos
 
Evaluation q5
Evaluation q5Evaluation q5
Evaluation q5
 
The 5 w in a webinar
The 5 w in a webinarThe 5 w in a webinar
The 5 w in a webinar
 
Future 25-brief
Future 25-briefFuture 25-brief
Future 25-brief
 
Zulu Comedy Festival 2014: Social medie strategi
Zulu Comedy Festival 2014: Social medie strategiZulu Comedy Festival 2014: Social medie strategi
Zulu Comedy Festival 2014: Social medie strategi
 
WooRank.com Report on Gauteng Net
WooRank.com Report on Gauteng NetWooRank.com Report on Gauteng Net
WooRank.com Report on Gauteng Net
 
Production
ProductionProduction
Production
 
Bva les francais_et_leur_chere_voiture
Bva les francais_et_leur_chere_voitureBva les francais_et_leur_chere_voiture
Bva les francais_et_leur_chere_voiture
 
Enlaces%20modulo%20 smo
Enlaces%20modulo%20 smoEnlaces%20modulo%20 smo
Enlaces%20modulo%20 smo
 
Week 1 - Producing knowledge
Week 1 - Producing knowledgeWeek 1 - Producing knowledge
Week 1 - Producing knowledge
 
Krugerpark.com 20120110
Krugerpark.com 20120110Krugerpark.com 20120110
Krugerpark.com 20120110
 

Similar to Here are the key points about TaobaoUED:- TaobaoUED is the front-end development team at Taobao (Alibaba's e-commerce platform). They are responsible for building the user interfaces and experiences on Taobao properties like Taobao.com, Tmall.com, etc.- The team follows modern front-end best practices like component-based development, BEM naming conventions, modular CSS/JS architecture, performance optimization etc. - They use latest web technologies like React, Vue, Webpack and build reusable UI components and libraries.- The team maintains extensive documentation on front-end practices, code standards, component libraries etc. on their internal wiki which is a

电子商务网站前端开放实战
电子商务网站前端开放实战电子商务网站前端开放实战
电子商务网站前端开放实战taobao.com
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your FrontendArush Sehgal
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版Joseph Chiang
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designersPai-Cheng Tao
 
Feeds & Microformats
Feeds & MicroformatsFeeds & Microformats
Feeds & MicroformatsJoost de Valk
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structurekeithdevon
 
Twitter bootstrap2.0 taste
Twitter bootstrap2.0 tasteTwitter bootstrap2.0 taste
Twitter bootstrap2.0 tasteTencent
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopShay Howe
 
A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...
A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...
A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...Amazon Web Services
 
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)Igalia
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Mongo NYC PHP Development
Mongo NYC PHP Development Mongo NYC PHP Development
Mongo NYC PHP Development Fitz Agard
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterRapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterCodemotion
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titaniumNaga Harish M
 
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具 CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具 裕欽 林
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Cengage Learning
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 

Similar to Here are the key points about TaobaoUED:- TaobaoUED is the front-end development team at Taobao (Alibaba's e-commerce platform). They are responsible for building the user interfaces and experiences on Taobao properties like Taobao.com, Tmall.com, etc.- The team follows modern front-end best practices like component-based development, BEM naming conventions, modular CSS/JS architecture, performance optimization etc. - They use latest web technologies like React, Vue, Webpack and build reusable UI components and libraries.- The team maintains extensive documentation on front-end practices, code standards, component libraries etc. on their internal wiki which is a (20)

电子商务网站前端开放实战
电子商务网站前端开放实战电子商务网站前端开放实战
电子商务网站前端开放实战
 
Be German About Your Frontend
Be German About Your FrontendBe German About Your Frontend
Be German About Your Frontend
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版建立前端開發團隊 - 2011 中華電信訓練所版
建立前端開發團隊 - 2011 中華電信訓練所版
 
Be nice to your designers
Be nice to your designersBe nice to your designers
Be nice to your designers
 
Feeds & Microformats
Feeds & MicroformatsFeeds & Microformats
Feeds & Microformats
 
WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
Twitter bootstrap2.0 taste
Twitter bootstrap2.0 tasteTwitter bootstrap2.0 taste
Twitter bootstrap2.0 taste
 
Web
WebWeb
Web
 
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...
A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...
A story of Netflix and AB Testing in the User Interface using DynamoDB - DAT3...
 
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
Web APIs in Node.js Core: Past, Present, and Future (JSConf EU 2019)
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Mongo NYC PHP Development
Mongo NYC PHP Development Mongo NYC PHP Development
Mongo NYC PHP Development
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterRapid Prototyping with Sass, Compass and Middleman by Bermon Painter
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
 
CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具 CCSP 2012F 早點下班的工具
CCSP 2012F 早點下班的工具
 
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
Course Tech 2013, Sasha Vodnik, A Crash Course in HTML5
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 

Here are the key points about TaobaoUED:- TaobaoUED is the front-end development team at Taobao (Alibaba's e-commerce platform). They are responsible for building the user interfaces and experiences on Taobao properties like Taobao.com, Tmall.com, etc.- The team follows modern front-end best practices like component-based development, BEM naming conventions, modular CSS/JS architecture, performance optimization etc. - They use latest web technologies like React, Vue, Webpack and build reusable UI components and libraries.- The team maintains extensive documentation on front-end practices, code standards, component libraries etc. on their internal wiki which is a

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n
  93. \n
  94. \n
  95. \n
  96. \n
  97. \n
  98. \n
  99. \n
  100. \n
  101. \n
  102. \n
  103. \n
  104. \n
  105. \n
  106. \n
  107. \n
  108. \n
  109. \n
  110. \n
  111. \n
  112. \n
  113. \n
  114. \n
  115. \n
  116. \n
  117. \n
  118. \n
  119. \n
  120. \n
  121. \n
  122. \n
  123. \n
  124. \n
  125. \n
  126. \n
  127. \n
  128. \n
  129. \n
  130. \n
  131. \n
  132. \n
  133. \n
  134. \n
  135. &amp;#x79C1;&amp;#x6D3B;\n
  136. \n