SlideShare a Scribd company logo
1 of 22
Download to read offline
础   构       实




                                 kejun




Monday, September 19, 2011
Long long ago ...




Monday, September 19, 2011
Long long ago ...

                       团队    职   转变         发
                                       页   应
                                      实现   创
                                      浏览




Monday, September 19, 2011
Long long ago ...

                       团队    职   转变             发
                                           页   应
                                          实现   创
                                          浏览




                   实现 浏览              页             发   创   应




Monday, September 19, 2011
http://news.mydrivers.com
Monday, September 19, 2011
发挥   团队   职




Monday, September 19, 2011
发挥       团队   职

                             专业团队
                             运转
                              术   续创
                                       术




Monday, September 19, 2011
础   构




Monday, September 19, 2011
础     构
                             团队运       规   统




Monday, September 19, 2011
础        构
                                 团队运                  规                    统
                             •                 发       贡          术
                             •   术     项   实      积   术
                             •    众    项      发           础   发       为
                             •        术               术   缝结      发挥   术




Monday, September 19, 2011
Monday, September 19, 2011
应       发
                                                                                                             Flash

                                                  - jQuery Mobile / jQtouch                             onering
                                            库 - zepto

                                              动应
                                                                      UI
                                                                           UI
                                                                                                        JS           统 (jQuery Template/Mustache)
                                                      组                         组
                                                                                                        MVC          (Backbone)
                      jQuery
                      common.js                                                                         应                                                                      预发   环
                      core.css / grid.css
                      base.html                                                                                                                                                测试环
                                                          库/
                                   库                                                                                                                                                发环
                                                                                                        报
                                                                  载
                                                                                                        监测
                                                                                                                                  javascript : bit.ly/douban-javascript
                                                          Do.js
                                                                                                                                  css : bit.ly/douban-css
           JS单   测试                                       oz.js                                     运        监测                                                               发环
             动        测试         CSS预处             SCSS+Compass                                                                       码风          Guidelines

            测试
                                    块       赖                                                                                             /             / 访问
                                 YUICompressor
                                                                                    Douban-JSLint
                                                                                                                                     术
                                 图          损压缩                                     CSSLint
                                                                                                                                     训
                                       态          预编译                                  质检验
                                                                                                                                                                          项
                                  码



                                                                                                    规                                统



                                                                                                        础 构
Monday, September 19, 2011
Monday, September 19, 2011
质产               验
     块              预处                 维护                                                    报
                     线风险                                                                     监测

     认
                                                                                         运       监测
                  JS单        测试
                     动            测试

                                            CSS预处       (SCSS+Compass)
                   测试                         块     赖
                                            YUICompressor
                                                                         Douban-JSLint
                                            图       损压缩                  CSSLint


                                                态         预编译
                                                                              质检验

                                            码




Monday, September 19, 2011
Javascript
 预处              统




Monday, September 19, 2011
CSS
 预处              统
 OOCSS + SCSS




                                                       +
                             $blue: #3bbfce;
                             $margin: 16px;

                             .content-navigation {
                               border-color: $blue;    Douban-UI   CSS3-MIXIN
                               color:
                                 darken($blue, 9%);
                             }



                                                            Python-SCSS
                             .border {
                               padding: $margin / 2;
                               margin: $margin / 2;
                               border-color: $blue;
                             }




Monday, September 19, 2011
应       发                                           Flash

                                   - jQuery Mobile / jQtouch
                                                                               onering
                             库 - zepto



                                   动应
                                                               UI
                                                                    UI



                                                                              JS         统 (jQuery Template/Mustache)
                                           组                             组
                                                                              MVC          (Backbone)

  jQuery
  common.js                                                                        应
  core.css / grid.css
  base.html


                                                库/
                   库
                                                                             码资
                                                          载                         拥                   补
                                                                             应         构设计&
                                                Do.js
                                                oz.js                                  应    组
                                                                                          动 发领

Monday, September 19, 2011
javascript : bit.ly/douban-javascript
                             css : bit.ly/douban-css



                                码风         Guidelines

                                     /         /              /      访问

                                术

                                训




                                                             简       实         查
                                                                          检验
            规                                                             术




Monday, September 19, 2011
预发 环

                                                   测试环


                                                     发环




                             协       发环
                             间环节              发环
            项




                                          项




                                 统
Monday, September 19, 2011
发
                      统      统   联
                      协




Monday, September 19, 2011
1.         统               发规
                                  - 统       码风      Guideline (bit.ly/douban-javascript, bit.ly/douban-css)


                             2.             态资                         统
                                  -    块
                                  -    动
                                  -    发环           码对       发
                                      产环            码对       户


                             3.       质检验
                                  - douban-jslint, csslint
                                  - 动 测试


                             4.                 构
                                  -                          库
                                  -       业务逻辑               库
                                  -              码设计


                             5.       层                 块        发
                                  -                 统
                                  -       组织JS/CSS           inline   码



Monday, September 19, 2011
&A


                         Blog: hikejun.com/blog
                         GTalk: Listenpro@gmail.com
                         Twitter: kejunz
                         Douban:douban.com/people/listenpro




Monday, September 19, 2011

More Related Content

Viewers also liked

The Metaphysical Significance of Pi
The Metaphysical Significance of PiThe Metaphysical Significance of Pi
The Metaphysical Significance of Pi
AstroQab
 
[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」
[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」
[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」
AINOW
 

Viewers also liked (10)

Real time video analytics with InfoSphere Streams, OpenCV and R
Real time video analytics with InfoSphere Streams, OpenCV and RReal time video analytics with InfoSphere Streams, OpenCV and R
Real time video analytics with InfoSphere Streams, OpenCV and R
 
The Metaphysical Significance of Pi
The Metaphysical Significance of PiThe Metaphysical Significance of Pi
The Metaphysical Significance of Pi
 
Convolutional Pose Machines
Convolutional Pose MachinesConvolutional Pose Machines
Convolutional Pose Machines
 
データに振り回されて失敗した あんなことやこんなこと+α  〜なぜ数字の手助けが必要になるのか、その理由と分析の実践例〜
データに振り回されて失敗した あんなことやこんなこと+α  〜なぜ数字の手助けが必要になるのか、その理由と分析の実践例〜データに振り回されて失敗した あんなことやこんなこと+α  〜なぜ数字の手助けが必要になるのか、その理由と分析の実践例〜
データに振り回されて失敗した あんなことやこんなこと+α  〜なぜ数字の手助けが必要になるのか、その理由と分析の実践例〜
 
並列クエリを実行するPostgreSQLのアーキテクチャ
並列クエリを実行するPostgreSQLのアーキテクチャ並列クエリを実行するPostgreSQLのアーキテクチャ
並列クエリを実行するPostgreSQLのアーキテクチャ
 
Attain Retail Success with Back-end Automation
Attain Retail Success with Back-end AutomationAttain Retail Success with Back-end Automation
Attain Retail Success with Back-end Automation
 
How to think like a startup (updated)
How to think like a startup (updated)How to think like a startup (updated)
How to think like a startup (updated)
 
[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」
[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」
[ML15]Class Cat佐々木さん「いち早く人工知能テクノロジーを取り入れた製品・サービスを市場に展開するには?」
 
Opening-up the HE box through cross-boundary collaborative open learning in c...
Opening-up the HE box through cross-boundary collaborative open learning in c...Opening-up the HE box through cross-boundary collaborative open learning in c...
Opening-up the HE box through cross-boundary collaborative open learning in c...
 
Diari Alella·Masnou·Teià Març 2017
Diari Alella·Masnou·Teià Març 2017Diari Alella·Masnou·Teià Març 2017
Diari Alella·Masnou·Teià Març 2017
 

More from taobao.com

编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
taobao.com
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
taobao.com
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
taobao.com
 
第三方内容开发最佳实践
第三方内容开发最佳实践第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
taobao.com
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
taobao.com
 
Java script physical engine
Java script physical engineJava script physical engine
Java script physical engine
taobao.com
 
Html5环保小游戏
Html5环保小游戏Html5环保小游戏
Html5环保小游戏
taobao.com
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
taobao.com
 
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
taobao.com
 
张平:JavaScript引擎实现
张平:JavaScript引擎实现张平:JavaScript引擎实现
张平:JavaScript引擎实现
taobao.com
 
高力:19楼现有前端架构
高力:19楼现有前端架构高力:19楼现有前端架构
高力:19楼现有前端架构
taobao.com
 
李成银:前端编译平台
李成银:前端编译平台李成银:前端编译平台
李成银:前端编译平台
taobao.com
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
taobao.com
 
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
taobao.com
 
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
taobao.com
 
前端Mvc探讨及实践
前端Mvc探讨及实践前端Mvc探讨及实践
前端Mvc探讨及实践
taobao.com
 

More from taobao.com (20)

编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 
Berserk js
Berserk jsBerserk js
Berserk js
 
淘宝开放产品前端实践
淘宝开放产品前端实践淘宝开放产品前端实践
淘宝开放产品前端实践
 
广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
 
第三方内容开发最佳实践
第三方内容开发最佳实践第三方内容开发最佳实践
第三方内容开发最佳实践
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
百度前端性能监控与优化实践
百度前端性能监控与优化实践百度前端性能监控与优化实践
百度前端性能监控与优化实践
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
Java script physical engine
Java script physical engineJava script physical engine
Java script physical engine
 
Html5环保小游戏
Html5环保小游戏Html5环保小游戏
Html5环保小游戏
 
阅读类Web应用前端技术探索
阅读类Web应用前端技术探索阅读类Web应用前端技术探索
阅读类Web应用前端技术探索
 
完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索完颜:移动网站的兼容性探索
完颜:移动网站的兼容性探索
 
张平:JavaScript引擎实现
张平:JavaScript引擎实现张平:JavaScript引擎实现
张平:JavaScript引擎实现
 
高力:19楼现有前端架构
高力:19楼现有前端架构高力:19楼现有前端架构
高力:19楼现有前端架构
 
李成银:前端编译平台
李成银:前端编译平台李成银:前端编译平台
李成银:前端编译平台
 
钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具钱宝坤:多浏览器集成的JavaScript单元测试工具
钱宝坤:多浏览器集成的JavaScript单元测试工具
 
刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践刘平川:【用户行为分析】Marmot实践
刘平川:【用户行为分析】Marmot实践
 
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
吴英杰:【用户行为分析】淘宝页面显微镜系统原理及实践
 
前端Mvc探讨及实践
前端Mvc探讨及实践前端Mvc探讨及实践
前端Mvc探讨及实践
 

张克军:前端基础架构的实践和思考

  • 1. 构 实 kejun Monday, September 19, 2011
  • 2. Long long ago ... Monday, September 19, 2011
  • 3. Long long ago ... 团队 职 转变 发 页 应 实现 创 浏览 Monday, September 19, 2011
  • 4. Long long ago ... 团队 职 转变 发 页 应 实现 创 浏览 实现 浏览 页 发 创 应 Monday, September 19, 2011
  • 6. 发挥 团队 职 Monday, September 19, 2011
  • 7. 发挥 团队 职 专业团队 运转 术 续创 术 Monday, September 19, 2011
  • 8. 构 Monday, September 19, 2011
  • 9. 构 团队运 规 统 Monday, September 19, 2011
  • 10. 构 团队运 规 统 • 发 贡 术 • 术 项 实 积 术 • 众 项 发 础 发 为 • 术 术 缝结 发挥 术 Monday, September 19, 2011
  • 12. 发 Flash - jQuery Mobile / jQtouch onering 库 - zepto 动应 UI UI JS 统 (jQuery Template/Mustache) 组 组 MVC (Backbone) jQuery common.js 应 预发 环 core.css / grid.css base.html 测试环 库/ 库 发环 报 载 监测 javascript : bit.ly/douban-javascript Do.js css : bit.ly/douban-css JS单 测试 oz.js 运 监测 发环 动 测试 CSS预处 SCSS+Compass 码风 Guidelines 测试 块 赖 / / 访问 YUICompressor Douban-JSLint 术 图 损压缩 CSSLint 训 态 预编译 质检验 项 码 规 统 础 构 Monday, September 19, 2011
  • 14. 质产 验 块 预处 维护 报 线风险 监测 认 运 监测 JS单 测试 动 测试 CSS预处 (SCSS+Compass) 测试 块 赖 YUICompressor Douban-JSLint 图 损压缩 CSSLint 态 预编译 质检验 码 Monday, September 19, 2011
  • 15. Javascript 预处 统 Monday, September 19, 2011
  • 16. CSS 预处 统 OOCSS + SCSS + $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; Douban-UI CSS3-MIXIN color: darken($blue, 9%); } Python-SCSS .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } Monday, September 19, 2011
  • 17. 发 Flash - jQuery Mobile / jQtouch onering 库 - zepto 动应 UI UI JS 统 (jQuery Template/Mustache) 组 组 MVC (Backbone) jQuery common.js 应 core.css / grid.css base.html 库/ 库 码资 载 拥 补 应 构设计& Do.js oz.js 应 组 动 发领 Monday, September 19, 2011
  • 18. javascript : bit.ly/douban-javascript css : bit.ly/douban-css 码风 Guidelines / / / 访问 术 训 简 实 查 检验 规 术 Monday, September 19, 2011
  • 19. 预发 环 测试环 发环 协 发环 间环节 发环 项 项 统 Monday, September 19, 2011
  • 20. 统 统 联 协 Monday, September 19, 2011
  • 21. 1. 统 发规 - 统 码风 Guideline (bit.ly/douban-javascript, bit.ly/douban-css) 2. 态资 统 - 块 - 动 - 发环 码对 发 产环 码对 户 3. 质检验 - douban-jslint, csslint - 动 测试 4. 构 - 库 - 业务逻辑 库 - 码设计 5. 层 块 发 - 统 - 组织JS/CSS inline 码 Monday, September 19, 2011
  • 22. &A Blog: hikejun.com/blog GTalk: Listenpro@gmail.com Twitter: kejunz Douban:douban.com/people/listenpro Monday, September 19, 2011