Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

WebRebuild.org 北京第四届年会

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

  • Inicia sesión para ver los comentarios

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

×