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




                                                         kejun




Sunday, September 25, 2011

这     话题                           问题       实4             过     ant   态   编译      统   时   对   础    构   还
            总                现                       发   为                     术               单纯       这
样     发挥                终             2              识   础   构    义        术           组       应        础
                  专业             团队       运转     础
Long long ago ...




Sunday, September 25, 2011

                                 团队职   值   顾     职   经历       样   转变
    这      转变                过    释        团队   转变过       职       值还
    页                        实现
Long long ago ...

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




Sunday, September 25, 2011

                                 团队职   值         顾     职   经历       样   转变
    这      转变                过    释              团队   转变过       职       值还
    页                        实现
Long long ago ...

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




                   实现 浏览               页             发   创   应




Sunday, September 25, 2011

                                 团队职       值                 顾     职   经历       样   转变
    这      转变                过    释                          团队   转变过       职       值还
    页                        实现
http://news.mydrivers.com
Sunday, September 25, 2011

                        过细          线       环节                 发挥       长   间
师实际         沦为               ‘码农’           环    发   职        发挥    创   值        时
      创                 联               术        专业      团队
发挥            团队            职




Sunday, September 25, 2011
                  须              师   设计师                实现       补设计师    产   经     术            这
          发                      发                       术        间环节         发环       统         发   设
计         过     时    现           术     2     专业团队   这   专业       带               长时间   术积   带        3
     过            术     础        发    带动团队    运转          过      这   术   础                  变       术
             结       带       术   续创
发挥          团队            职

                                 专业团队
                                 运转
                                            术
                                  术    续创




Sunday, September 25, 2011
                  须               师   设计师                  实现       补设计师    产   经     术            这
          发                       发                         术        间环节         发环       统         发   设
计         过     时    现            术      2      专业团队   这   专业       带               长时间   术积   带        3
     过            术     础         发     带动团队     运转          过      这   术   础                  变       术
             结       带       术    续创
础            构




Sunday, September 25, 2011

         谈论       “          础   构”       这       术                “       础   构”   应    这
      术                                发      导           术   细节                         发挥
            项         发               创        应      术       术        识   积        3    团结
         调剂       术          跃            领       4           术        让        发   缝结        见   义
础            构
                                 团队运                      规            统




Sunday, September 25, 2011

         谈论       “          础   构”       这       术                    “       础   构”   应    这
      术                                发      导               术   细节                         发挥
            项         发               创        应      术           术        识   积        3    团结
         调剂       术          跃            领       4               术        让        发   缝结        见   义
础             构
                                     团队运                           规                    统
                             •                             发        贡          术
                             •       术            项    实      积    术
                             •        众           项       发            础   发       为
                             •                 术                   术   缝结      发挥   术




Sunday, September 25, 2011

         谈论       “              础   构”       这        术                                “       础   构”   应    这
      术                                    发       导                       术   细节                             发挥
            项         发                   创           应        术               术            识   积        3    团结
         调剂       术          跃                领        4                       术            让        发   缝结        见   义
Sunday, September 25, 2011

总结                经验         训   这       说        码
库                                    发       张图
应      发       - Skeleton
                                                                                                            Flash

                                        库 - zepto                                                      onering
                                        综               - jQuery Mobile / jQtouch

                                             动应
                                                                     UI
                                                                          UI
                                                                                                       JS           统 (jQuery Template/Mustache)
                                                    组                          组
                                                                                                       MVC          (Backbone)
                       jQuery
                                                                                                       应                                                                      预发      环
                       common-mixin libs
                       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
                                                                                                                                    训
                                      态          预编译                                  质检验
                                                                                                                                                                         项
                                  码



                                                                                                   规                                统




                                                                                                       础             构
Sunday, September 25, 2011

                                颗树                                             础         构         设                                              长        过                  结   构        术
                                              结
Sunday, September 25, 2011

                     动       过   样   话题   过   时   2   过   现   说   4   颗
         师                    长      树
质产               验
     块               预处                维护                                                                            报
                      线风险                                                                                            监测

     认
                                                                                                                运        监测
                  JS单        测试
                     动            测试

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


                                                   态           预编译
                                                                                                    质检验

                                               码




Sunday, September 25, 2011

         规           统                     块         们     间                紧   联               为   实规          证   质          统
                        联                            发环        mission 为                质   产         验                  这     组
         码           为        码    块   组织                      为简     预处            达            维护                  质检验
      证     码           们约        统     码Guidelines              测试         为           规   风险        线     运   监测      为    运营过
Javascript
 预处              统




Sunday, September 25, 2011

    们         务          对   论   联还   联   js css    进   块   组织     这   @import 编译语
              发环                 这样    线       编译            CDN
CSS
 预处              统
 OOCSS + SCSS




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

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



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




Sunday, September 25, 2011

css                   @import编译语         还         SCSS语               Compass CSS3 Mixin Library   简   发   发
                             们还   进    OOCSS                   为Douban-UI    对            进   对
      样     库
应    发        - Skeleton                                                 Flash

                             库 - zepto                                                                   onering
                             综             - jQuery Mobile / jQtouch


                                      动应
                                                                 UI
                                                                      UI

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


  jQuery                                                                                                   应
  common-mixin libs
  core.css / grid.css
  base.html
                                                 库/
                   库
                                                                                                 码资
                                                             载                                              拥                    补
                                                 Do.js                                              应          构设计&
                                                 oz.js                                                         应    组
                                                                                                                  动 发领

Sunday, September 25, 2011

库                 LESS
                                                             为    码资                             发拥                术      项      发
术     结             发
                    块 赖      补                                    库            样    视应       构   设计            应          这
统           MVC                       动 发             为                             们    组                              Zepto      jQuery
                  图      损压缩
         发                    (             构    师)      发   onering               webkit        html5          应        发
javascript : bit.ly/douban-javascript
                                           css : bit.ly/douban-css



                                              码风         Guidelines

                                                   /         /              /      访问

                                              术

                                              训




                                                                           简        实                                      查
                                                                                                                    检验
             规                                                                                                         术




Sunday, September 25, 2011

规                       础    规   应    备                 时              检验           测试        们      CI           Douban-JSLint   这
            们     规               JSLint    时                        发环                  检       术            积
            习资          结    训                     团队            时        们     欢         师               码        们
样     这                       让协                们                    过规                  槛   扫
预发 环

                                                                                   测试环


                                                                                        发环




                             协             发环
                             间环节                                           发环
            项




                                                                   项




                                  统
Sunday, September 25, 2011

   们              发环                   环     协       发         间环节     发                    师    订       发
                     URL     对应    规       Ajax          说                     发    终           实现
      拟输                实现             诸   Charles                                  发                项
                        协          头                 Ticket   启动       发   这    过       简
发
                      统          统       联
                      协




Sunday, September 25, 2011

    发                                为       证产    质   该    环节还
           统                 统                 动           时
http://www.zhihu.com/question/19858183

Sunday, September 25, 2011

                             请     问题                  团队                 职   值
问题
&A


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




Sunday, September 25, 2011

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

前端基础架构的实践和思考

  • 1. 构 实 kejun Sunday, September 25, 2011 这 话题 问题 实4 过 ant 态 编译 统 时 对 础 构 还 总 现 发 为 术 单纯 这 样 发挥 终 2 识 础 构 义 术 组 应 础 专业 团队 运转 础
  • 2. Long long ago ... Sunday, September 25, 2011 团队职 值 顾 职 经历 样 转变 这 转变 过 释 团队 转变过 职 值还 页 实现
  • 3. Long long ago ... 团队 职 转变 发 页 应 实现 创 浏览 Sunday, September 25, 2011 团队职 值 顾 职 经历 样 转变 这 转变 过 释 团队 转变过 职 值还 页 实现
  • 4. Long long ago ... 团队 职 转变 发 页 应 实现 创 浏览 实现 浏览 页 发 创 应 Sunday, September 25, 2011 团队职 值 顾 职 经历 样 转变 这 转变 过 释 团队 转变过 职 值还 页 实现
  • 5. http://news.mydrivers.com Sunday, September 25, 2011 过细 线 环节 发挥 长 间 师实际 沦为 ‘码农’ 环 发 职 发挥 创 值 时 创 联 术 专业 团队
  • 6. 发挥 团队 职 Sunday, September 25, 2011 须 师 设计师 实现 补设计师 产 经 术 这 发 发 术 间环节 发环 统 发 设 计 过 时 现 术 2 专业团队 这 专业 带 长时间 术积 带 3 过 术 础 发 带动团队 运转 过 这 术 础 变 术 结 带 术 续创
  • 7. 发挥 团队 职 专业团队 运转 术 术 续创 Sunday, September 25, 2011 须 师 设计师 实现 补设计师 产 经 术 这 发 发 术 间环节 发环 统 发 设 计 过 时 现 术 2 专业团队 这 专业 带 长时间 术积 带 3 过 术 础 发 带动团队 运转 过 这 术 础 变 术 结 带 术 续创
  • 8. 构 Sunday, September 25, 2011 谈论 “ 础 构” 这 术 “ 础 构” 应 这 术 发 导 术 细节 发挥 项 发 创 应 术 术 识 积 3 团结 调剂 术 跃 领 4 术 让 发 缝结 见 义
  • 9. 构 团队运 规 统 Sunday, September 25, 2011 谈论 “ 础 构” 这 术 “ 础 构” 应 这 术 发 导 术 细节 发挥 项 发 创 应 术 术 识 积 3 团结 调剂 术 跃 领 4 术 让 发 缝结 见 义
  • 10. 构 团队运 规 统 • 发 贡 术 • 术 项 实 积 术 • 众 项 发 础 发 为 • 术 术 缝结 发挥 术 Sunday, September 25, 2011 谈论 “ 础 构” 这 术 “ 础 构” 应 这 术 发 导 术 细节 发挥 项 发 创 应 术 术 识 积 3 团结 调剂 术 跃 领 4 术 让 发 缝结 见 义
  • 11. Sunday, September 25, 2011 总结 经验 训 这 说 码 库 发 张图
  • 12. 发 - Skeleton Flash 库 - zepto onering 综 - jQuery Mobile / jQtouch 动应 UI UI JS 统 (jQuery Template/Mustache) 组 组 MVC (Backbone) jQuery 应 预发 环 common-mixin libs 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 训 态 预编译 质检验 项 码 规 统 础 构 Sunday, September 25, 2011 颗树 础 构 设 长 过 结 构 术 结
  • 13. Sunday, September 25, 2011 动 过 样 话题 过 时 2 过 现 说 4 颗 师 长 树
  • 14. 质产 验 块 预处 维护 报 线风险 监测 认 运 监测 JS单 测试 动 测试 CSS预处 (SCSS+Compass) 测试 块 赖 YUICompressor Douban-JSLint 图 损压缩 CSSLint 态 预编译 质检验 码 Sunday, September 25, 2011 规 统 块 们 间 紧 联 为 实规 证 质 统 联 发环 mission 为 质 产 验 这 组 码 为 码 块 组织 为简 预处 达 维护 质检验 证 码 们约 统 码Guidelines 测试 为 规 风险 线 运 监测 为 运营过
  • 15. Javascript 预处 统 Sunday, September 25, 2011 们 务 对 论 联还 联 js css 进 块 组织 这 @import 编译语 发环 这样 线 编译 CDN
  • 16. CSS 预处 统 OOCSS + SCSS + $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; Douban-UI CSS3-MIXIN color: darken($blue, 9%); } pySCSS .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } Sunday, September 25, 2011 css @import编译语 还 SCSS语 Compass CSS3 Mixin Library 简 发 发 们还 进 OOCSS 为Douban-UI 对 进 对 样 库
  • 17. 发 - Skeleton Flash 库 - zepto onering 综 - jQuery Mobile / jQtouch 动应 UI UI 组 组 JS 统 (jQuery Template/Mustache) MVC (Backbone) jQuery 应 common-mixin libs core.css / grid.css base.html 库/ 库 码资 载 拥 补 Do.js 应 构设计& oz.js 应 组 动 发领 Sunday, September 25, 2011 库 LESS 为 码资 发拥 术 项 发 术 结 发 块 赖 补 库 样 视应 构 设计 应 这 统 MVC 动 发 为 们 组 Zepto jQuery 图 损压缩 发 ( 构 师) 发 onering webkit html5 应 发
  • 18. javascript : bit.ly/douban-javascript css : bit.ly/douban-css 码风 Guidelines / / / 访问 术 训 简 实 查 检验 规 术 Sunday, September 25, 2011 规 础 规 应 备 时 检验 测试 们 CI Douban-JSLint 这 们 规 JSLint 时 发环 检 术 积 习资 结 训 团队 时 们 欢 师 码 们 样 这 让协 们 过规 槛 扫
  • 19. 预发 环 测试环 发环 协 发环 间环节 发环 项 项 统 Sunday, September 25, 2011 们 发环 环 协 发 间环节 发 师 订 发 URL 对应 规 Ajax 说 发 终 实现 拟输 实现 诸 Charles 发 项 协 头 Ticket 启动 发 这 过 简
  • 20. 统 统 联 协 Sunday, September 25, 2011 发 为 证产 质 该 环节还 统 统 动 时
  • 21. http://www.zhihu.com/question/19858183 Sunday, September 25, 2011 请 问题 团队 职 值 问题
  • 22. &A Blog: hikejun.com/blog GTalk: Listenpro@gmail.com Twitter: kejunz Douban:douban.com/people/listenpro Sunday, September 25, 2011