建立前端开发团队 (Front-end Development Environment)
Download as PDF, PPTX109 likes4,160 views
本文探讨了前端开发环境和模块化开发的重要性，强调通过简化和模块化来降低编码错误和提高维护性。提到了一些开发工具和最佳实践，以及如何优化代码和减少请求数量。最后，强调了团队合作和质量控制在软件开发中的核心作用。
![问题 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 码
仅 组态档 写 环](https://image.slidesharecdn.com/webrebuild-100717013013-phpapp01/85/Front-end-Development-Environment-18-320.jpg)
![经过 Mini 压缩
/mini?module=[Mini 块 称]&type=[css js]](https://image.slidesharecdn.com/webrebuild-100717013013-phpapp01/85/Front-end-Development-Environment-42-320.jpg)
![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!](https://image.slidesharecdn.com/webrebuild-100717013013-phpapp01/85/Front-end-Development-Environment-52-320.jpg)
More Related Content
![[2008]网站重构 -who am i](https://cdn.slidesharecdn.com/ss_thumbnails/2008-whoami-100913035744-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Similar to 建立前端开发团队 (Front-end Development Environment) (20)
建立前端开发团队 (Front-end Development Environment)
- 1. Front-end Dev Environment Ting-yu Chiang / josephj josephj.com / [email protected]
- 2. /蒋 开 来 • 2.5 师 • 0.5 开发 传 • 1 师
- 3. 热爱 认为 Solution 讨论 来
- 4. 没 环岛 29 2008 5 27
- 5. 为 个 员 实 运 关 ( 国语 学 ) 却进 别 挤 头 进 见识 软
- 6. 现 职 D-Link muchiii Team D-Link 现 设备 联 务 强 户 关联
- 7. 为 决 进 D-Link 当时 觉 产 来 没预 ...
- 8. 为 D-Link 过 没 联 开发经验 进 没 从 开 开 开发环 决 软
- 9. Software Engineer Project Manager Service Engineer System Architect DBA Front-end Engineer QA Engineer QA Tester System Analyzer Operation Engineer 这 Yahoo! 没 会 为 专门负责 团队... 务 决 决 够 变现 环 会
- 10. 过 发现 欢 纯 HTML/CSS/JavaScript 经 结 术让 够 ( 碍 组 维护 现 热
- 11. Azure Firmware Flash I18N/L10N PEAR CMS Apache Module Hardware Android Win32 Objective C Embedded System ChromeOS Server-side Script 励 师 领 为 师 师
- 12. 开发环 - • 减 环 码 断环 设 档 • 块 开发 HTML CSS JS 块开发 • 让 错变 难 Nicholas Zakas “Make it difficult to make mistakes.“
- 13. 1. 减 环 eliminate environment difference
- 14. 断环 过 ... JavaScript 断 Host 决 图档 AJAX 径 PHP 断 径 连 RD 样画 芦
- 15. 类 断 环 给 设 档
- 16. 环 开发 员数 语 类 让这 断 码 设 档 来 难 维 护 错 难 ...
- 17. 没 办 码 断环 设 档 写 环
- 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. 对开发 员来说 开发 Host 对应
- 20. 见 host 档 换 烦 Port Protocol 对应
- 21. Proxy PAC 档 FF Chrome 换 没办 浏览
- 22. 经过 寻 发现 Fiddler Charles Debugging Proxy 这类虚拟 软 们 对应 环
- 23. 实际 Charles Debugging Proxy 对应 devm1.corp.muchiii.com:50020
- 24. Fiddler 还 Fiddler 这类 软 还 应 1. 协 AJAX 2. 协 开发时 图 传 务 3. 惯 4. 变浏览 顺 5. 拟 环 为 个 师 Fiddler 备
- 25. 线 错 Online Debugging 将 线 CSS baidu.css
- 26. 帮 东 没 Firebug YUI Console 页 湾 欢
- 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(/https/www.slideshare.net/home/bg_empty.png); } #mod .bd { background: url(http://a.mimgs.com/home/bg_empty.png); }
- 28. CSS 档内 图档 径写 #mod .bd { background: url(bg_empty.png); } #mod .bd { background: url(/https/www.slideshare.net/home/bg_empty.png); } #mod .bd { background: url(http://a.mimgs.com/home/bg_empty.png); } 为 将 个 CSS 档 届时 CSS 将会 录 对 径 会 图档 径错误 过 杂 错 们 规
- 29. 1.1 结语 规 尽 减 码 环 让 维护 来 轻
- 30. 2. 块 开发 Modular Development
- 31. Modular Development 块 页开发 页 为开发逻辑 开发 个个 独 运 Div 块 独 HTML CSS JavaScript Controller 档
- 33. 寻 块 _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
- 34. 许 块档 (HTML) 独 HTML 档
- 35. 许 块档 CSS 独 CSS 档
- 36. 许 块档 JavaScript 独 JS 档
- 37. 块 难点 • HTML 决 include Performance 响 • CSS : id 当 namespace 个 组 个档 页 30 个 组 会 30 个 requests 对 响 • JavaScript : CSS 样会 request 问题 个 组 沟
- 38. static.php 设 页 CSS/JS $key - PHP Module 称 or 页 称 is_top: </head> </body> 还 is_noscript, media 属 设
- 39. 虽 static.php 块 CSS/JS 档 连 来 务 请 过 对 冲击 10 个 CSS Request 19 个 JS Request
- 40. Mini Tool 将 码缩 个 CSS/JS 档 开发环 档 担 问题 http://www.flickr.com/photos/prettypony/2644225789/
- 41. Mini XML 设 档 刚 设 这 寻 档 义 个 $DEV_ROOT 设 Apache VirtualHost 环 变数 个 module 会 CSS JS 档 module module exclude 个档 index CSS/JS 块档
- 42. 经过 Mini 压缩 /mini?module=[Mini 块 称]&type=[css js]
- 43. 观 压缩 内 &nominify
- 44. 长 static.php 29 个 Request
- 45. 页 Request 数
- 46. 简过 static.php 29 个 Request 2 个 Request
- 47. 页 Request 减
- 48. 过 Mini 设 档 将 独 CSS/ JavaScript 档 达
- 49. Mini 环 静 态档 务 Server-Side Script 会对 冲击 线 CSS/JS 变 个静态档 s * md5_file() 检 档 内 产 stamp 减 CDN 档
- 50. JavaScript 块沟 JavaScript 块为单 独 Function Object 统 沟 战 mod A mod B mod C
- 51. 满 显 张图 户 单 资 毕 显 点选 图 户点选 显 张图 选 动 户点选 图
- 52. 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!
- 53. 们 员( 块) 们 场 (页 ) 赛( ) http://www.flickr.com/photos/vincentteeuwen/2816245519/
- 54. 纪 ( 变数) 将 员( 块) 间 冲 http://www.flickr.com/photos/acaben/2477822120/
- 55. 页 师 Nicholas Zakas 启发 师 这 PPK on JavaScript
- 56. 稳 JavaScript 应 http://www.slideshare.net/nzakas/scalable-javascript-application-architecture
- 57. Loose Coupling 组 关 http://www.thesoftwaredevotional.com/images/coupling_train.jpg 当页 个 块 将 会 组 结 样 为 将 让 组 沟 动 时 会 响 沟 组
- 58. Broadcast & Listen 组沟 类 Hub broadcast 个 Client 会 讯 listen Client 兴 讯 处
- 59. 电脑发 讯 电脑 会 电脑 处 兴 讯
- 60. Broadcast & Listen 组沟 类 Hub 个 Client 内 时 会 Client 错 个 块 页 时 会 块 页 http://www.directsystems.com/support/switchvshub.php
- 61. 块 独 运 类 页 http://www.flickr.com/photos/nadesign/4324782791/
- 62. 废话 说 来 实
- 63. 个 个 • Y.Core.register() : 让个别 块 册 • Y.Core._match() : 组间 对应 Core • Y.Core._addListener() : 个 组 记
- 64. 块 API • oAPI.listen() : mod mod mod 让 块 个 API • oAPI.broadcast() 让 块发 个 Core • oAPI.getNode() : 块 DOM 参
- 65. _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); } });
- 67. 结语 块开发让开发 专 单 开发 烦恼 页 杂 测试 块为单 独 测试 Unit Test 个 TestCase Scope
- 68. 3. 让 错变 难 Make it difficult to make mistakes
- 69. 从 开 处 抢 赢
- 70. 个来 说 j os ephj http://www.flickr.com/photos/eye1/3184963395/ by Ivan Mlinaric
- 71. 开 许 Guidelines
- 73. 时 难 话 GM Meeting 时 级领导对 们 质 质 As a F2E team 们
- 74. 软 开发团队 须 规 设计 码 质
- 75. 规 开发 员 设 况 会 ...
- 76. 烟囱 盖 顶 这 叠 Winchester House http://www.crockford.com/codecamp/quality.ppt
- 77. Guideline 错 贴 积 习难 阳 阴违 个 对 习惯 将 Guideline
- 78. 当 Guideline 会 遗 个团队 码 质开 乱...
- 79. Code Review 个 许 时 间 没办 办 发现 问题 协 ...
- 80. 软 开发 应该 协 电脑 0 1吗
- 81. • Commit 会 检 没 过 过关 • 执 JSLint : JavaScript Good Parts • 执 PHP CodeSniffer : 订 码标 检 PHP JavaScript CSS • Packaging 会 • 执 Image Optimization (Smush.it) 图 • 没 压缩过 JavaScript CSS 会
- 82. document.write can be form of eval JSLint
- 83. .rule { attr: value; } PHP CodeSniffer (a.k.a phpcs)
- 84. 们 Visual Designer 负责 PSD 档 F2E 处 图档 问题 PNG8 认 Web Fireworks 转换 Alpha Transparency
- 85. 图 开 VD PSD...
- 86. 将 PNG8 转换
- 87. 这样 费 没 义
- 88. 个 帮 图档 总频宽 46% Image Optimization
- 89. 给 Commit
- 90. pkg_create JS/CSS 档 档 档 会 变 Mini 码 host 称 (www.muchiii.com -> devm1.corp.muchiii.com) pkg_create & 线 pkg_deploy
- 91. 动 让 协 错误 会 发
- 92. Review • 减 环 规 减 环 产 码 质 • 块 开发 让 个 块独 来 减 争议 让 组 沟 • 让 错变 难 过 动 减 费 时间 个 错
- 93. 开发 http://josephj.com:50010 线 http://modev.josephj.com 规 码 础 过 够 荡
- 94. Thank You so muchiii Any Questions? [email protected] http://www.flickr.com/photos/phploveme/2847931240/