Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

14,579 views

Published on

WebRebuild.org 北京第四届年会

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

Published in: Technology

建立前端开发团队 (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/

×