0
Front-end
Dev Environment

     Ting-yu Chiang / josephj
   josephj.com / josephj6802@gmail.com
/蒋
开   来
             • 2.5
                       师
             • 0.5
                     开发    传
             • 1
    ...
热爱         认为
Solution   讨论   来
没



           环岛
           29
    2008    5
           27
为  个  员   实       运
   关   ( 国语 学 )
 却进 别 挤 头 进
见识    软
现   职




          D-Link muchiii Team
        D-Link 现       设备
        联    务 强       户 关联
为        决 进 D-Link
当时 觉   产    来 没预        ...
为 D-Link 过   没   联 开发经验  进
 没    从 开          开   开发环    决
软
Software Engineer       Project Manager

         Service Engineer     System Architect         DBA

        Front-end Eng...
过        发现            欢
 纯 HTML/CSS/JavaScript     经
 结       术让              够 (
 碍   组    维护           现 热
Azure    Firmware
        Flash
                  I18N/L10N     PEAR
    CMS         Apache Module    Hardware

        An...
开发环               -

• 减      环
     码       断环      设     档

•     块   开发
         HTML     CSS JS       块开发

• 让      错变...
1. 减         环
eliminate environment difference
断环                     过           ...
JavaScript       断 Host   决   图档   AJAX     径




  PHP        断   径   连        RD ...
类   断
环   给   设   档
环     开发   员数       语    类
让这   断 码   设 档 来    难   维
护      错    难 ...
没 办
码   断环   设 档   写   环
问题 1 :                    Host Name
              devm1.corp.muchiii.com:5002*
  Development
              devm1.corp.much...
对开发      员来说
 开发   Host 对应
见        host 档
换   烦       Port  Protocol   对应
Proxy PAC 档   FF    Chrome   换
    没办             浏览
经过     寻
发现 Fiddler   Charles Debugging Proxy
  这类虚拟        软          们


                          对应   环
实际
 Charles Debugging Proxy 对应   devm1.corp.muchiii.com:50020
Fiddler 还
Fiddler 这类   软   还             应

1. 协 AJAX
2. 协 开发时             图         传   务
3.      惯
4. 变浏览           顺
5....
线       错 Online Debugging




    将   线   CSS      baidu.css
帮   东




        没   Firebug           YUI Console


        页             湾   欢
CSS        档内                    图档            径写

实际 径        /var/www/muchiii/static/home/style.css
HTTP 请      径    htt...
CSS        档内                    图档            径写
    #mod .bd {
        background: url(bg_empty.png);
    }



    #mod ...
1.1 结语
         规   尽     减      码   环
         让   维护   来   轻
2.       块        开发
     Modular Development
Modular Development
       块       页开发


              页    为开发逻辑
      开发 个个 独 运         Div 块
独   HTML CSS JavaScript   ...
寻        块
                      _photo_filter.php
                      _photo_filter.css
                      _photo_filte...
许   块档   (HTML)




         独   HTML 档
许   块档   CSS




               独   CSS 档
许   块档   JavaScript




                  独   JS 档
块             难点

• HTML           决        include
           Performance   响
• CSS :  id 当 namespace
    个 组      个档    ...
static.php 设     页                          CSS/JS



               $key - PHP Module      称 or 页       称




           ...
虽   static.php     块       CSS/JS 档        连            来
         务 请       过        对            冲击


                 1...
Mini Tool


                                                            将 码缩
                                             ...
Mini   XML 设    档       刚            设                  这



                        寻 档                    义 个
          ...
经过 Mini          压缩




/mini?module=[Mini    块   称]&type=[css   js]
观           压缩   内




&nominify
长   static.php



        29 个 Request
页   Request 数
简过   static.php



            29 个 Request
            2 个 Request
页   Request   减
过 Mini 设     档   将   独   CSS/
JavaScript 档           达
Mini                 环                           静
态档     务           Server-Side Script
  会对          冲击



             ...
JavaScript        块沟
    JavaScript     块为单
         独     Function Object
       统        沟           战

      mod A     ...
满




        显        张图             户   单   资


                            毕
        显   点选   图

                      ...
window.mods[“photo-show”] = {
  showPhoto : function (src) {
    ....
  }
}            会       变      决问题




            ...
们       员(                块) 们
    场 (页 )                                                      赛(   )




       http://ww...
纪        (                                         变数)
将               员(               块)              间 冲




http://www...
页       师 Nicholas Zakas         启发




    师    这   PPK on JavaScript
稳       JavaScript 应




http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
Loose Coupling
                                                                        组 关

http://www.thesoftwaredevotion...
Broadcast & Listen
        组沟        类 Hub

      broadcast    个 Client   会        讯
listen      Client                兴  ...
电脑发      讯    电脑 会
      电脑 处   兴   讯
Broadcast & Listen
         组沟        类 Hub

个 Client         内       时          会                  Client     错
 个   块   ...
块    独   运   类
    页




                 http://www.flickr.com/photos/nadesign/4324782791/
废话   说   来   实
个      个
       • Y.Core.register() :
         让个别 块 册
       • Y.Core._match() :
             组间          对应
Core
       ...
块      API

                   • oAPI.listen() :
mod   mod    mod
                     让          块       个
      API     ...
_photo_list.js                          块            JavaScript
              资       Y.Core.register("photo-list", {
    ...
Demo
http://josephj.com:50010
结语
  块开发让开发         专       单       开发
    烦恼 页 杂                  测试
块为单 独 测试             Unit Test    个
TestCase Scope
3. 让        错变                   难
 Make it difficult to make mistakes
从   开   处   抢   赢
个来
说

      j os ephj




                  http://www.flickr.com/photos/eye1/3184963395/
                                 ...
开   许   Guidelines
时 难        话
GM Meeting 时       级领导对   们       质   质
   As a F2E team    们
软   开发团队     须    规
                 设计
     码   质
规     开发   员
 设   况 会   ...
烟囱      盖 顶
这       叠




 Winchester House
 http://www.crockford.com/codecamp/quality.ppt
Guideline 错                   贴        积
习难        阳 阴违    个 对              习惯
                 将 Guideline
当         Guideline 会
遗   个团队   码   质开        乱...
Code Review    个                许   时
间 没办       办       发现      问题
  协                  ...
软 开发   应该            协
电脑          0   1吗
•         Commit 会      检       没   过       过关
    • 执    JSLint : JavaScript Good Parts
    • 执    PHP CodeSniffer :     ...
document.write
          can be form of eval




JSLint
.rule {
                           attr: value;
                        }




PHP CodeSniffer (a.k.a phpcs)
们 Visual Designer
        负责    PSD 档

 F2E       处   图档          问题



PNG8           认   Web

           Fireworks    转换...
图   开 VD   PSD...
将 PNG8 转换
这样   费   没   义
个         帮




     图档     总频宽   46%




Image Optimization
给 Commit
pkg_create
             JS/CSS 档
         档          档   会     变               Mini
                          码       host...
动   让   协   错误   会   发
Review
• 减      环
                  规    减   环   产         码
    质

•       块   开发
    让   个    块独    来        减      争议  ...
开发   http://josephj.com:50010

线    http://modev.josephj.com



规                           码       础

     过             ...
Thank You
                                                    so muchiii
                                                 ...
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
Upcoming SlideShare
Loading in...5
×

建立前端开发团队 (Front-end Development Environment)

13,316

Published on

WebRebuild.org 北京第四届年会

日期:2010/7/18 (六)
地点:中国航空航天大学学术交流中心
内容:
1. 减少环境差异
2. 模块化开发
3. 让犯错变得困难

Published in: Technology
5 Comments
107 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,316
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
708
Comments
5
Likes
107
Embeds 0
No embeds

No notes for slide

Transcript of "建立前端开发团队 (Front-end Development Environment)"

  1. 1. Front-end Dev Environment Ting-yu Chiang / josephj josephj.com / josephj6802@gmail.com
  2. 2. /蒋 开 来 • 2.5 师 • 0.5 开发 传 • 1 师
  3. 3. 热爱 认为 Solution 讨论 来
  4. 4. 没 环岛 29 2008 5 27
  5. 5. 为 个 员 实 运 关 ( 国语 学 ) 却进 别 挤 头 进 见识 软
  6. 6. 现 职 D-Link muchiii Team D-Link 现 设备 联 务 强 户 关联
  7. 7. 为 决 进 D-Link 当时 觉 产 来 没预 ...
  8. 8. 为 D-Link 过 没 联 开发经验 进 没 从 开 开 开发环 决 软
  9. 9. Software Engineer Project Manager Service Engineer System Architect DBA Front-end Engineer QA Engineer QA Tester System Analyzer Operation Engineer 这 Yahoo! 没 会 为 专门负责 团队... 务 决 决 够 变现 环 会
  10. 10. 过 发现 欢 纯 HTML/CSS/JavaScript 经 结 术让 够 ( 碍 组 维护 现 热
  11. 11. Azure Firmware Flash I18N/L10N PEAR CMS Apache Module Hardware Android Win32 Objective C Embedded System ChromeOS Server-side Script 励 师 领 为 师 师
  12. 12. 开发环 - • 减 环 码 断环 设 档 • 块 开发 HTML CSS JS 块开发 • 让 错变 难 Nicholas Zakas “Make it difficult to make mistakes.“
  13. 13. 1. 减 环 eliminate environment difference
  14. 14. 断环 过 ... JavaScript 断 Host 决 图档 AJAX 径 PHP 断 径 连 RD 样画 芦
  15. 15. 类 断 环 给 设 档
  16. 16. 环 开发 员数 语 类 让这 断 码 设 档 来 难 维 护 错 难 ...
  17. 17. 没 办 码 断环 设 档 写 环
  18. 18. 问题 1 : Host Name devm1.corp.muchiii.com:5002* Development devm1.corp.muchiii.com:50029 devm1.corp.muchiii.com Alpha static.devm1.corp.muchiii.com img[n].staging.bar.tw1.corp.muchiii.com Staging w[n].staging.bar.tw1.corp.muchiii.com www.muchiii.com Production a.mimgs.com Commit 码 仅 组态档 写 环
  19. 19. 对开发 员来说 开发 Host 对应
  20. 20. 见 host 档 换 烦 Port Protocol 对应
  21. 21. Proxy PAC 档 FF Chrome 换 没办 浏览
  22. 22. 经过 寻 发现 Fiddler Charles Debugging Proxy 这类虚拟 软 们 对应 环
  23. 23. 实际 Charles Debugging Proxy 对应 devm1.corp.muchiii.com:50020
  24. 24. Fiddler 还 Fiddler 这类 软 还 应 1. 协 AJAX 2. 协 开发时 图 传 务 3. 惯 4. 变浏览 顺 5. 拟 环 为 个 师 Fiddler 备
  25. 25. 线 错 Online Debugging 将 线 CSS baidu.css
  26. 26. 帮 东 没 Firebug YUI Console 页 湾 欢
  27. 27. CSS 档内 图档 径写 实际 径 /var/www/muchiii/static/home/style.css HTTP 请 径 http://a.mimgs.com/home/style.css #mod .bd { background: url(bg_empty.png); } #mod .bd { background: url(/home/bg_empty.png); } #mod .bd { background: url(http://a.mimgs.com/home/bg_empty.png); }
  28. 28. CSS 档内 图档 径写 #mod .bd { background: url(bg_empty.png); } #mod .bd { background: url(/home/bg_empty.png); } #mod .bd { background: url(http://a.mimgs.com/home/bg_empty.png); } 为 将 个 CSS 档 届时 CSS 将会 录 对 径 会 图档 径错误 过 杂 错 们 规
  29. 29. 1.1 结语 规 尽 减 码 环 让 维护 来 轻
  30. 30. 2. 块 开发 Modular Development
  31. 31. Modular Development 块 页开发 页 为开发逻辑 开发 个个 独 运 Div 块 独 HTML CSS JavaScript Controller 档
  32. 32. 寻 块 _photo_filter.php _photo_filter.css _photo_filter.js 显 块 _photo_view.php _photo_view.css _photo_view.js 块 _photo_list.php _photo_list.css _photo_list.js
  33. 33. 许 块档 (HTML) 独 HTML 档
  34. 34. 许 块档 CSS 独 CSS 档
  35. 35. 许 块档 JavaScript 独 JS 档
  36. 36. 块 难点 • HTML 决 include Performance 响 • CSS : id 当 namespace 个 组 个档 页 30 个 组 会 30 个 requests 对 响 • JavaScript : CSS 样会 request 问题 个 组 沟
  37. 37. static.php 设 页 CSS/JS $key - PHP Module 称 or 页 称 is_top: </head> </body> 还 is_noscript, media 属 设
  38. 38. 虽 static.php 块 CSS/JS 档 连 来 务 请 过 对 冲击 10 个 CSS Request 19 个 JS Request
  39. 39. Mini Tool 将 码缩 个 CSS/JS 档 开发环 档 担 问题 http://www.flickr.com/photos/prettypony/2644225789/
  40. 40. Mini XML 设 档 刚 设 这 寻 档 义 个 $DEV_ROOT 设 Apache VirtualHost 环 变数 个 module 会 CSS JS 档 module module exclude 个档 index CSS/JS 块档
  41. 41. 经过 Mini 压缩 /mini?module=[Mini 块 称]&type=[css js]
  42. 42. 观 压缩 内 &nominify
  43. 43. 长 static.php 29 个 Request
  44. 44. 页 Request 数
  45. 45. 简过 static.php 29 个 Request 2 个 Request
  46. 46. 页 Request 减
  47. 47. 过 Mini 设 档 将 独 CSS/ JavaScript 档 达
  48. 48. Mini 环 静 态档 务 Server-Side Script 会对 冲击 线 CSS/JS 变 个静态档 s * md5_file() 检 档 内 产 stamp 减 CDN 档
  49. 49. JavaScript 块沟 JavaScript 块为单 独 Function Object 统 沟 战 mod A mod B mod C
  50. 50. 满 显 张图 户 单 资 毕 显 点选 图 户点选 显 张图 选 动 户点选 图
  51. 51. window.mods[“photo-show”] = { showPhoto : function (src) { .... } } 会 变 决问题 户点选 window.mods[“photo-list”] = { init : function () { ... $(“img”).on(“click”, function(e) { window.mods[“photo-show”].showPhoto(this.src); } 当 显 块没 页 } 时 块 现 Bug!
  52. 52. 们 员( 块) 们 场 (页 ) 赛( ) http://www.flickr.com/photos/vincentteeuwen/2816245519/
  53. 53. 纪 ( 变数) 将 员( 块) 间 冲 http://www.flickr.com/photos/acaben/2477822120/
  54. 54. 页 师 Nicholas Zakas 启发 师 这 PPK on JavaScript
  55. 55. 稳 JavaScript 应 http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
  56. 56. Loose Coupling 组 关 http://www.thesoftwaredevotional.com/images/coupling_train.jpg 当页 个 块 将 会 组 结 样 为 将 让 组 沟 动 时 会 响 沟 组
  57. 57. Broadcast & Listen 组沟 类 Hub broadcast 个 Client 会 讯 listen Client 兴 讯 处
  58. 58. 电脑发 讯 电脑 会 电脑 处 兴 讯
  59. 59. Broadcast & Listen 组沟 类 Hub 个 Client 内 时 会 Client 错 个 块 页 时 会 块 页 http://www.directsystems.com/support/switchvshub.php
  60. 60. 块 独 运 类 页 http://www.flickr.com/photos/nadesign/4324782791/
  61. 61. 废话 说 来 实
  62. 62. 个 个 • Y.Core.register() : 让个别 块 册 • Y.Core._match() : 组间 对应 Core • Y.Core._addListener() : 个 组 记
  63. 63. 块 API • oAPI.listen() : mod mod mod 让 块 个 API • oAPI.broadcast() 让 块发 个 Core • oAPI.getNode() : 块 DOM 参
  64. 64. _photo_list.js 块 JavaScript 资 Y.Core.register("photo-list", { 毕 // 块 显 张图 满 init: function (api) { // 这个 块 兴 两 讯 api.listen("photo-filter-submit"); api.listen("photo-filter-response"); this.api = api; }, 户 单 // 块 页 ContentReady onload: function () { // 诉 Core 毕 张图 径 this.api.broadcast("photo-list-rendered", img.src); }, // 块 讯 onmessage: function (eventType, callerName, data) { switch (eventType) { case "photo-filter-response" : // 满 break; case "photo-filter-submit" : // break; } }, _updateUI: function (data) { // 诉 Core 毕 张图 径 this.api.broadcast("photo-list-rendered", img.src); } });
  65. 65. Demo http://josephj.com:50010
  66. 66. 结语 块开发让开发 专 单 开发 烦恼 页 杂 测试 块为单 独 测试 Unit Test 个 TestCase Scope
  67. 67. 3. 让 错变 难 Make it difficult to make mistakes
  68. 68. 从 开 处 抢 赢
  69. 69. 个来 说 j os ephj http://www.flickr.com/photos/eye1/3184963395/ by Ivan Mlinaric
  70. 70. 开 许 Guidelines
  71. 71. 时 难 话 GM Meeting 时 级领导对 们 质 质 As a F2E team 们
  72. 72. 软 开发团队 须 规 设计 码 质
  73. 73. 规 开发 员 设 况 会 ...
  74. 74. 烟囱 盖 顶 这 叠 Winchester House http://www.crockford.com/codecamp/quality.ppt
  75. 75. Guideline 错 贴 积 习难 阳 阴违 个 对 习惯 将 Guideline
  76. 76. 当 Guideline 会 遗 个团队 码 质开 乱...
  77. 77. Code Review 个 许 时 间 没办 办 发现 问题 协 ...
  78. 78. 软 开发 应该 协 电脑 0 1吗
  79. 79. • Commit 会 检 没 过 过关 • 执 JSLint : JavaScript Good Parts • 执 PHP CodeSniffer : 订 码标 检 PHP JavaScript CSS • Packaging 会 • 执 Image Optimization (Smush.it) 图 • 没 压缩过 JavaScript CSS 会
  80. 80. document.write can be form of eval JSLint
  81. 81. .rule { attr: value; } PHP CodeSniffer (a.k.a phpcs)
  82. 82. 们 Visual Designer 负责 PSD 档 F2E 处 图档 问题 PNG8 认 Web Fireworks 转换 Alpha Transparency
  83. 83. 图 开 VD PSD...
  84. 84. 将 PNG8 转换
  85. 85. 这样 费 没 义
  86. 86. 个 帮 图档 总频宽 46% Image Optimization
  87. 87. 给 Commit
  88. 88. pkg_create JS/CSS 档 档 档 会 变 Mini 码 host 称 (www.muchiii.com -> devm1.corp.muchiii.com) pkg_create & 线 pkg_deploy
  89. 89. 动 让 协 错误 会 发
  90. 90. Review • 减 环 规 减 环 产 码 质 • 块 开发 让 个 块独 来 减 争议 让 组 沟 • 让 错变 难 过 动 减 费 时间 个 错
  91. 91. 开发 http://josephj.com:50010 线 http://modev.josephj.com 规 码 础 过 够 荡
  92. 92. Thank You so muchiii Any Questions? josephj6802@gmail.com http://www.flickr.com/photos/phploveme/2847931240/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×