WebRebuild

Transcript

1. Front-end Dev Environment Ting-yu Chiang / josephj josephj.com / [email protected]

   ܔͭۃ၌ක೯ྠඟ

2. ۃɓ΅ʈЪί • 2.5 ϋj ۃ၌ʈ೻师 • 0.5 ϋj ඩډ开发٫໊ٟ传઺ɻ •

   1 ϋj ඩډȭΤʃ१ʈ೻师 ුlҢ݊ਧෞ / 蒋֛ρ ܘ开ː来Ց̏ԯl

3. Ңٙ௹܄ 热爱ʱԮe认为௰λٙ Solution ݊讨论̈来ٙ

4. ൺӉ环岛 ίҢ 29 ๋ 2008 ϋ 5 ˜ࣛ ڀə 27

   ˂ ൺə ɞϵεʮԢ ༺ϓൺӉᐑࢥٙྫྷซ 没Ϟʔ̙ঐ

5. Ԓ为ɓ个೻ҏ员dҢ实ί݊ڢ੬ֱٙ运 ڢ޴关߅ӻ (̮国语˖学ӻ) ̈Ԓ Ш却进ə别ɛ挤ॎ头ɰ进ʔ̘ٙඩډ 见识Ցɽۨ软΁ʮ̡ٙݖᦻ᝺฿ׂ

6. ί D-Link 现Ϟٙ᠒༩设备ɪeܔͭ ʝ联᠒؂务d强ʷ᝺͜户ٙ关联׌l D-Link muchiii Team 现΂职ɲ

7. Ϊ为൴Ϟሳٙ฿ׂe决֛进ɝ D-Linkl 当时̥觉੻ࠅҪ产ۜਂ̈来d没预ࣘՑٙ݊...

8. Ϊ为 D-Link 过̘ϊ没Ϟʝ联᠒开发经验dɓ进̘ʡɯ ே没Ϟe从ཧ开֐dҢ್֢ఱ开֐ܔͭ开发环ྤe决֛ 软ᠧݖᦻf

9. 这ԬԫઋҢί Yahoo! ݊没Ϟ៽会ຠٙfΪ为̴ʱʈ׼ ≁e৷˓εdܘεʈՈޟЇϞ专门负责ٙ团队... ̋ɪ ΢؂务ɽேʊ决֛༆决˙ࣩədঐ够ॆٙҷ变现Ϟ环 ྤeءɝІʉซجٙ៽会ϊʔεf Operation Engineer Service

   Engineer QA Engineer Front-end Engineer System Architect Software Engineer System Analyzer Project Manager QA Tester DBA

10. ί过೻ʘʕdҢ发现Іʉڢ੬ః欢ਂۃΧ၌዆Υٙʈ Ъf纯 HTML/CSS/JavaScript ٙՓЪʊ经ʔΎіˏ Ңf结ΥΧ၌Ҧ术让ۃ၌΢˙ࠦঐ够һλ (׌ঐាʷe ȭღ碍eᅼ组ʷe维护׌ ݊Ң现ί热Аٙ˙Σf

11. ڢ੬ོ励ۃ၌ʈ೻师༨ֻʔΝٙ领ਹ Ϊ为̥Ϟۃ၌ʈ೻师ʑٝ༸ۃ၌ʈ೻师ࠅٙ݊ʡɯ Server-side Script Win32 CMS Apache Module Flash Embedded

    System Firmware Objective C I18N/L10N PEAR Azure Android ChromeOS Hardware

12. ۃ၌开发环ྤ - ʕːܠซ • 减ˇ环ྤࢨ៦ ˾码ʔк断环ྤe设֛档̥Ϟɓ΅ • ᅼ块ʷ开发 ʔ၍ HTMLeCSSeJS

    ே˸ᅼ块开发 • 让͕错变੻Ѣ难 Nicholas Zakas Ⴍ “Make it difficult to make mistakes.“

13. 1. 减ˇ环ྤࢨ៦ eliminate environment difference

14. к断环ྤeҢਂ过ٙᚉԫ... ί JavaScript Ԣк断 Hoste决֛图档᝺ AJAX ༩径 ί PHP ɰк断༩径d连ટ˓ٙ

    RD ɰԱ样画໡芦

15. Ы݊щɰϞ类Чٙк断೻όd אʔΝ环ྤ给ʔΝٙ设֛档k

16. 环ྤࢨ៦e开发ɛ员数ඎᄣ̋eʔΝ语Ԋ᮱类 让这Ԭк断˾码᝺设֛档൳来൳εl难˸维 护eɰᄣ̋ৰ错ٙѢ难ܓ...

17. Ϟ没Ϟ办ج̙˸ਂՑk ˾码ʔк断环ྤe设֛档̥写͍ό环ྤ

18. 问题 1 : ӊࡈᐑྤٙ Host Name ேʔɓᅵ Development Alpha Staging

    Production devm1.corp.muchiii.com:5002* devm1.corp.muchiii.com:50029 devm1.corp.muchiii.com static.devm1.corp.muchiii.com img[n].staging.bar.tw1.corp.muchiii.com w[n].staging.bar.tw1.corp.muchiii.com www.muchiii.com a.mimgs.com ɭ݊ც Commit Їو͉છ၍ٙ˾码 仅ɓ΅组态档e˲̥写͍ό环ྤ

19. 对开发ٙ೻ҏ员来说 ̥ცࠅਂ开发៽ Host ٙ对应у̙

20. ੬见ٙЪج݊ࡌҷ host 档 Шʲ换௦烦eɦʔ˕ܵ Port ʿ Protocol ٙ对应

21. ̤Ϟ Proxy PAC 档eFF א Chrome ౢ΁̙ʲ换 Шே没办جਂՑӊ᮱浏览ኜٙࡒ࢙׌

22. 经过ɓ೦寻Ҭ 发现 Fiddler א Charles Debugging Proxy 这类虚拟˾ଣ软΁௰ୌΥҢ们ٙცӋ 对应͍ό环ྤ

23. 实际ɪ݊ʔπίٙ᠒ѧ ஗ Charles Debugging Proxy 对应Ї devm1.corp.muchiii.com:50020

24. Fiddler 还ঐਂʡɯ Fiddler 这类ٙ软ᠧ还ঐίਂܘεٙ应͜dԷνj 1. 协п AJAX ٙৰЏf 2. 协п开发时͉ή၌ʲ图eʔცɪ传Ї؂务ኜf

    3. τౢІʉ惯ٙ͜ʈՈf 4. ҷ变浏览᠒१ʔ顺଻ٙή˙f 5. ᅼ拟஺ܓ࿔ٙ环ྤf Ԓ为ɓ个ۃ၌ʈ೻师dFiddler ॆٙ݊̀备ٙʈՈl

25. 线ɪৰ错 Online Debugging 将ϵܓ线ɪٙ CSS ܸ֛Ցࣲࠦɪٙ baidu.css

26. 帮Іʉ૴̋λٙ͜东Г уԴί没Ϟ Firebug ٙή˙ɰ̙˸͜ YUI Console ӊ页ே̙˸௰ա̨湾σӲ欢ڎٙԌڀ֊

27. 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); } 实际༩径ίj/var/www/muchiii/static/home/style.css HTTP 请Ӌ༩径ίjhttp://a.mimgs.com/home/style.css ɧ᮱ே̙БdЫ͜ԟɓ᮱k

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); } Ϊ为ࠅਂ׌ঐាʷeც将ε个 CSS 档ࣩ௰ʃʷ˲Υϊ 届时 CSS 将会ί᠒१࣬ͦ录ɨ͛ϓ ୋɓ᮱޴对༩径ٙ˙ό会ிϓ图档༩径错误 ୋɧ᮱̙БdШ过ɲ᪜杂e࢙׸͂错ο ה˸Ң们ɓܛ规֛Դ͜ୋɚ᮱˙όeࡒ࢙׌௰λf

29. 1.1 结语j ഛ͜ɓԬʈՈ༧规֛e尽̙ঐή减ˇ˾码ίʔΝ环ྤ ٙࢨ៦׌d̙˸让೻ό维护ৎ来һ轻ؒl

30. 2. ᅼ块ʷ开发 Modular Development

31. ʔΎ͜˜页™Ъ为开发逻辑 Ͼ݊开发ɓ个个̙独ͭ运Ъٙ ˜Div ᅼ块™ Ϟ独ͭٙ HTMLeCSSeJavaScripteޟЇ Controller 档ࣩ Modular Development

    ᅼ块ʷ݊᠒页开发˴ݴ
32. None

33. ๫˪显ͪᅼ块 ฤ寻ᅼ块 ΐڌᅼ块 _photo_view.php _photo_view.css _photo_view.js _photo_list.php _photo_list.css _photo_list.js _photo_filter.php

    _photo_filter.css _photo_filter.js

34. ̍ўə许εᅼ块档ࣩ (HTML) 独ͭٙ HTML 档ࣩ

35. ̍ўə许εᅼ块档ࣩ€CSS ΢І独ͭٙ CSS 档ࣩ

36. ̍ўə许εᅼ块档ࣩ€JavaScript ΢І独ͭٙ JS 档ࣩ

37. ᅼ块ʷٙѢ难点 • HTMLjܘλ༆决d̥ࠅ͜ include ٙ˙όఱ̙ ˸ਂՑ€Performance ᅂ响ʔɽ • CSS :

    ͜ id 当 namespace ̙˸ਂՑfШν؈ ӊ个ᅼ组݊ɓ个档ࣩdɓ页 30 个ᅼ组ఱ会Ϟ 30 个 requestsd对׌ঐᅂ响ܘɽl • JavaScript : ༧ CSS ɓ样会Ϟ request ிϓٙ ׌ঐ问题f̤̮ცࠅɓ个ݖᦻਂ༨ᅼ组ٙ沟ஷf

38. $key - PHP Module Τ称 or 页ࠦΤ称 is_top: ׳ί </head>

    ۃא </body> ۃ ̤̮还Ϟ is_noscript, media ഃ属׌̙˸设֛ static.php 设֛ʔΝ页ࠦהࠅˏٙ͜ CSS/JS

39. Ш؂务ኜ请Ӌඎ过εe对׌ঐிϓ冲击 10 个 CSS Request 19 个 JS Request 虽್

    static.php Ҫᅼ块ٙ CSS/JS 档ࣩேЕ连ৎ来

40. Mini Tool 将˾码缩ʃ ε个 CSS/JS ˖档Υϊٙ 开发环ྤʈՈ 档ࣩΎεɰʔ͜担ːࣖঐٙ问题 http://www.flickr.com/photos/prettypony/2644225789/

41. Mini ٙ XML 设֛档dҪ刚ʑٙ设֛୅ֻ这Ԣ 寻Ҭ档ࣩٙЗໄd̙֛义ε个f $DEV_ROOT ݊ί设֛ Apache VirtualHost ٙ环ྤ变数

    ӊ个 module 会ϞІʉٙ CSS ᝺ JS 档 module ̙˸̘̋ɝՉ˼ٙ moduledɰ̙˸ exclude ݔ个档ࣩ index ٙ CSS/JS ᅼ块档ࣩ

42. 经过 Mini Υϊʿ压缩ٙʫ࢙j༧ᇞɪɓߧ ǥ /mini?module=[Mini ᅼ块Τ称]&type=[css א js]

43. ɰ̙˸̥观޶ΥϊШ͊压缩ٙ内࢙ ǥ &nominify

44. ࡡ͉ɦঔɦ长ٙ static.php 29 个 Request

45. ᠒页ٙ Request 数ඎ൴ε

46. 2 个 Request 29 个 Request ၚ简过Χٙ static.php

47. ᠒页ٙ Request ɽష减ˇ

48. ீ过 Mini ٙ设֛档d̙将΢І独ͭٙ CSS/ JavaScript 档ࣩΥϊ˲௰ʃʷd达Ցࣖঐ௰Գʷٙ ͦٙl

49. Шცࠅءจ Mini ϊʔḗ͜ɲ͍ό环ྤeஷ੬׳ໄ静 态档ࣩٙ؂务ኜʔ˕ܵ Server-Side Scripteఱၑ Ϟɰ会对ࣖঐிϓ冲击f 线ɪٙ CSS/JS ί͂̍Χ变ϓɓ个静态档

    s * ͜ md5_file() 检ݟ档ࣩ内࢙产͛ٙ stamp ̙˸减ˇ CDN ז՟ࠠ᪜ٙ档ࣩ

50. JavaScript ༨ᅼ块沟ஷ JavaScript ߰˸ᅼ块为单Зʲʱ ஷ੬݊独ͭٙ Function א Object Ϟӻ统ٙ༨ᅼ෯沟ஷਗ਼ึ݊ɽܿ战 mod

    A mod C mod B

51. ͜户౤ʹڌ单 ՟੻资ࣘ ΐڌҁ毕 ͜户点选 ͜户点选ɽ图 ც૶٤ΐڌ ც෬满ΐڌ 显ͪୋɓ张图˪ 显ͪ点选ٙ图˪ 显ͪɨɓ张图e

    选՟࣪୅动

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); } } ɘϓٙɛ会͜Ό҅变ඎ༆决问题 当๫˪显ͪᅼ块没ϞɓৎπίΝɓ页 时dΐڌᅼ块ఱ̈现ə Bug!

53. http://www.flickr.com/photos/vincentteeuwen/2816245519/ Ң们ேҎૐଢ员 (ᅼ块) 们ҲစλІʉٙԉЍ ίଢ场 (页ࠦ) ɪΥЪพ̈λˢ赛 (̌ঐ)

54. http://www.flickr.com/photos/acaben/2477822120/ Ш݊ॹ˶纪ܛ (ȭݖᦻeԴ͜Όਹ变数) ௰Χ̀将ிϓଢ员 (ᅼ块) ʘ间ٙ冲߉

55. ඩډ࠯页ۃ၌ݖᦻ师 Nicholas Zakas ٙ启发l ۃ၌ʈ೻师ɓ֛ࠅ޶这͉༧ PPK on JavaScript ਧl

56. 稳ո JavaScript 应͜೻όݖᦻ http://www.slideshare.net/nzakas/scalable-javascript-application-architecture

57. 当页ࠦɪεəɓ个ᅼ块 ̴将ʔ会ॎѭՉ˼ᅼ组ٙ结ᦻe样ό᝺Б为 ̴将౤Զอٙ̌ঐe让Չ˼ٙᅼ组̙˸᝺̴沟ஷʝ动 ࣅદ̴时ʔცࡌҷeɰʔ会ᅂ响᝺Չ沟ஷᅼ组ٙࡡϞ̌ঐ Loose Coupling ᕦ౳ᇩΥ ᝺Չ˼ᅼ组ٙ关ӻ݊ؒ౳ٙ http://www.thesoftwaredevotional.com/images/coupling_train.jpg

58. Broadcast & Listen ᅼ组沟ஷٙ˙ό类Ч Hub ٙ฿ׂ broadcastjӊ个 Client ே会ȨᅧІʉٙ讯ࢹ listenjՉ˼

    Client ̥ഃܙѠՑІʉϞ兴ሳٙ讯ࢹ̘处ଣ

59. ɓ̨电脑发̈΂О讯ࢹdהϞ电脑ே会ϗՑ Ш݊Չ˼电脑̥处ଣ̴Ϟ兴ሳٙ讯ࢹ

60. ݔ个 Client ऊ̰ί内᠒时dʔ会ிϓՉ˼ Client א᠒༩̈错 ݔ个ᅼ块ऊ̰ί页ࠦ时dʔ会ிϓՉ˼ᅼ块዆页ȭجԴ͜ Broadcast & Listen ᅼ组沟ஷٙ˙ό类Ч

    Hub ٙ฿ׂ http://www.directsystems.com/support/switchvshub.php

61. ᅼ块݊独ͭ运Ъٙd类Чౢ΁ٙ฿ׂ ׳ί΂О页ࠦɪேʔცࡌҷeу̙౤Զ̌ঐ http://www.flickr.com/photos/nadesign/4324782791/

62. 废话ˇ说d来޶޶ܣɯ实Ъыl

63. ΋ՓЪɓ个዆个ݖᦻٙࣨː Core • Y.Core.register() : 让个别ᅼ块ء册ɲϤݖᦻ • Y.Core._match() : ಁᅼ组间ਂڦࢹٙ对应

    • Y.Core._addListener() : ౤Զݔ个ᅼ组೮记ഃܙٙڦࢹ

64. ΎՓЪᅼ块ٙ API ʧࠦ Core • oAPI.listen() : 让ͦۃٙᅼ块ഃܙɓ个ڦࢹ • oAPI.broadcast()

    让ͦۃٙᅼ块发̈ɓ个ڦࢹ • oAPI.getNode() : ՟੻ͦۃᅼ块ٙ DOM ي΁参Ͻ API mod mod mod

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 ๫˪ΐڌҁ毕dϊҪୋɓ张图˪༩径ɓৎ౤Զ 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 ๫˪ΐڌҁ毕dϊҪୋɓ张图˪༩径ɓৎ౤Զ this.api.broadcast("photo-list-rendered", img.src); } }); ც૶٤ΐڌ ც෬满ΐڌ ՟੻资ࣘ ͜户౤ʹڌ单 显ͪୋɓ张图˪ ΐڌҁ毕

66. ߪԷ Demo http://josephj.com:50010

67. 结语j ᅼ块开发让开发٫ঐһ专ءɲί单ɓ̌ঐٙ开发ɪe ʔც烦恼዆页᪜杂ٙݖᦻf̤̮ί测试ɪɰ̙˸˸ᅼ 块为单З独ͭ测试eୌΥ Unit Test ٙၚग़€ɓ个 TestCase ٙ Scope

    ݊ܘʃٙf

68. 3. 让͕错变੻Ѣ难 Make it difficult to make mistakes

69. Ց从ཧ开֐ʮ̡ٙλ处ఱ݊΋抢΋赢l

70. http://www.flickr.com/photos/eye1/3184963395/ by Ivan Mlinaric josephj Ңୋɓ个来ٙl ϼɿ说əၑl

71. ɓ开֐ҢఱՓ֛ə许ε Guidelines

72. None

73. ίۃɓ࢕ʮ̡时௰难ҙٙɓ̩话j GM Meeting 时ɓЗ৷级领导对Ң们ٙۜ质౤̈质ဲ ˜As a F2E teamdЫ们ٙូ࠽Ӻ௞ίࡳԢk™

74. 软ᠧ开发团队̀须ࠅϞ规ߪٙՓ֛ ਿ͉࣪ݖٙ设计 ˾码ۜ质ʑঐ੻Ց౤ʺ

75. ΂О规ߪ᝺࣪ݖே݊开发ɛ员ٙࠢՓ Ш߰ʔ设ࠢՓٙઋ况ఱ会྅...

76. Winchester House http://www.crockford.com/codecamp/quality.ppt 烟囱ɪ盖܊顶k 这ఱ݊叠ґݖ܊

77. Ϟ Guideline ʔ错dШ݊ϼख़֚Җ࢙ήܘ贴ʲj˜积 习难ҷ™e˜阳ւ阴违™dӊ个ɛ对ɲІʉٙ习惯᝺ ଣׂϞהʔΝdϞจȭจή将 Guideline ׳Ցɓࣙf

78. ɮϾɮʘd当ڋɽ࢕Νจٙ Guideline ఱ会஗ 遗ҙe዆个团队ٙ˾码ۜ质开֐௘ɝ૿乱...

79. Code Review ݊ɓ个λ˙جdШ੻ڀ许ε时 间e没办ج੬办dуԴ发现ə问题dɰ̥ঐ͜ Ѽ协ٙ˙όਂʃ௅ʱٙࡌҷ...

80. 软ᠧ开发ʔ应该πίഹѼ协 电脑ٙ˰ޢʔఱ݊ 0 ᝺ 1 吗k

81. Ъج • ӊϣ Commit 会ਂٙ检ݟd没ஷ过ఱʔঐ过关 • 执Б JSLint : JavaScript

    Good Partsf • 执Б PHP CodeSniffer : ̙˸І订˾码标ࡘ检 ݟ PHPdɰ˕౪ JavaScript ᝺ CSSl • ӊϣ Packaging 会ਂٙʈЪ • 执Б Image Optimization (Smush.it) d౤ ፴图˪ცࠅ௰Գʷf • 没Ϟ压缩过ٙ JavaScript ᝺ CSS ʔ会஗͂ ̍f

82. JSLint document.write can be form of eval

83. PHP CodeSniffer (a.k.a phpcs) .rule { attr: value; }

84. Ң们ٙ Visual Designer ̥负责͛ϓ PSD 档ࣩ F2E ੻Іʉ处ଣ图档௰Գʷٙ问题 PNG8 ݊ͦۃʮ认ί

    Web ௰λٙࣸό Ш̥݊Ϟ Fireworks ˕౪转换ϓ Alpha Transparency

85. ӊϣʲ图ே᝱ʱ೨߮d΋͂开 VD ٙ PSD...

86. Ύ将 PNG8 转换ϓ॰ˏЍீ׼

87. ͛նఱ这样ई费ί没Ϟจ义ٙԫيɪə

88. Image Optimization 图档̕᠒१总频宽ٙ 46% ɓ个ܸ˿ܲɨ̘帮Ыพ֛l

89. ʔࡌҷఱʔ给 Commit

90. ͂̍ pkg_create & ɪ线 pkg_deploy Υϊ JS/CSS 档ࣩ᝺௰ʃʷ 档ࣩΥϊΧe档Τɰ会ҷ变€ʔΎԴ͜ Mini

    ʈՈ ࡌҷ˾码ʕٙ host Τ称 (www.muchiii.com -> devm1.corp.muchiii.com) pkg_create

91. ˸І动ʷٙ˙όe让Ѽ协᝺错误ʔ会ࠠ᪜ή发͛

92. Review • 减ˇ环ྤࢨ៦ ഛ͜ʈՈeՓ֛规֛d减ˇ环ྤ产͛ٙࢨ៦d˾码ٙۜ 质І್৷l • ᅼ块ʷ开发 让ӊ个ᅼ块独ͭ̈来d͜ʈՈ减ˇ׌ঐ争议e͜ݖᦻ让 ᅼ组ʝ޴沟ஷf •

    让͕错变੻Ѣ难 ீ过ݴ೻዆ΥІ动ʷ៽Փe减ˇӊ˂ई费ٙ时间e˸ʿ ӊ个ɛ͕错ٙ៽ଟf

93. ʦ˂౤Ցٙ规ߪ˖΁eݴ೻e೻ό˾码אਿ础ݖᦻ ே̙˸༧Ңࠅ ҎૐʔΝٙซجeீ过ɽ࢕዆Υeঐ够ዧ荡̈һε˦ڀ 开发᠒१j http://josephj.com:50010 线ɪ᠒१jhttp://modev.josephj.com

94. Any Questions? http://www.flickr.com/photos/phploveme/2847931240/ Thank You so muchiii [email protected]