Pragmatic Front-end Developer: From Artisan to Expert

Webそのものが変わり続けることだけが変わらない中、フロントエンド開発の領域も不明瞭で、時を追うごとに変化してきています。
ユーザとシステムの間にあるものが何であれ、それが存在しつづける限り、フロントエンドという役割も必要な存在でありつづけるでしょう。
このセッションではそのフロントエンドで戦い続けるためにも知っておきたい、実践的フロントエンド・デベロッパに求められるスキルセットについて紹介していきます。

Transcript

1. From Artisan to Expert
   Pragmatic
   Frontend
   Developer
   Yuya Saito @ Rich Media
   Frontrend Conference
   The Final - 2015.02.21
   

   View Slide

2. UX Engineer @ Rich Media
   Yuya Saito
   

   View Slide

3. View Slide

4. Curated by
   @cssradar @t32k @hiloki
   frontendweekly.tokyo
   Frontend Weekly
   

   View Slide

5. View Slide

6. The Pragmatic
   Programmer
   by Andrew Hunt & David Thomas
   amzn.to/1DzD1zQ
   

   View Slide

7. Be Collaborative
   ㉏겗כ➂ה➂ך꟦ח֮׷
   

   View Slide

8. Maintenance
   

   View Slide

9. )5.-$44+BWB4DSJQUכ
   寸׃גًٝذشٝأ׃װְׅ
   הכְִזְ
   

   View Slide

10. Learnability
    

    View Slide

11. 㼔Ꟍ涸ז濼陎ָ搀ֻג׮
    剅ֽג׃תֲ䩛鯪ׁ
    

    View Slide

12. 鎉铂׉ך׮ך׮㢌׻׹ֲה׃גְ׷
    圫ղז倯岀锷װخ٦ٕ׮㶷㖈ׅ׷
    

    View Slide

13. “
    The greatest challenge that
    we’re facing with software isn’t
    technology itself,
    but effective collaboration.
    — Karolina Szczur
    

    View Slide

14. ㉏겗כ➂ה➂ך꟦ח֮׷
    

    View Slide

15. Code Style Guideline
    

    View Slide

16. “
    All code in any code-base should look
    like a single person typed it,
    no matter how many people contributed.
    — Rick Waldron
    

    View Slide

17. Example
    

    View Slide

18. JavaScript
    

    View Slide

19. Idiomatic.js
    by Rick Waldron
    git.io/Aqez
    

    View Slide

20. jQuery Core
    Style Guideline
    by jQuery
    bit.ly/1w0kxrC
    

    View Slide

21. Airbnb
    JavaScript
    Style Guide
    by AIRBNB
    git.io/v8y5cA
    

    View Slide

22. CSS/HTML
    

    View Slide

23. Idiomatic.css
    by Nicolas Gallagher
    git.io/qS6zjA
    

    View Slide

24. CSS Guidelines
    by Harry Roberts
    cssguidelin.es
    

    View Slide

25. Sass Guideline
    by Hugo Giraudel
    sass-guidelin.es
    

    View Slide

26. Code Guide
    by Mark Otto
    codeguide.co
    

    View Slide

27. Which one?
    

    View Slide

28. Tools
    

    View Slide

29. EditorConfig
    by EditorConfig
    editorconfig.org
    

    View Slide

30. JSCS
    by JSCS Development Team
    jscs.info
    

    View Slide

31. CSSLint
    by Nicholas C. Zakas and Nicole Sullivan
    csslint.net
    

    View Slide

32. CSScomb
    by CSScomb
    csscomb.com
    

    View Slide

33. Automation!
    

    View Slide

34. Styleguide
    

    View Slide

35. GitHub
    

    View Slide

36. StarBucks
    

    View Slide

37. MailChimp
    

    View Slide

38. Website
    Style Guide
    Resources
    by Anna Debenham and Brad Frost
    styleguides.io
    

    View Slide

39. سًُؗٝذ٦ءّٝכ
    ㎳׾אֻ
    

    View Slide

40. Tools
    

    View Slide

41. KSS
    by Kyle Neath
    warpspire.com/kss
    

    View Slide

42. KSS-node
    by Hugh Kennedy
    git.io/AqWk
    

    View Slide

43. hologram
    by August Flanagan and JD Cantrell
    trulia.github.io/hologram
    

    View Slide

44. Website
    Style Guide
    Resources
    by Anna Debenham and Brad Frost
    styleguides.io
    

    View Slide

45. GOAL
    

    View Slide

46. Prototype
    

    View Slide

47. “
    Build a prototype as soon as possible.
    — No.3 of Unix Philosophy
    

    View Slide

48. 㹋ꥷח鋅ִ׷׮ךծ
    ⹛ֻ׮ךח㼎׃גך䠐鋅כ鎉ְװְׅ
    

    View Slide

49. Tools
    

    View Slide

50. HTML
    CSS
    JavaScript
    

    View Slide

51. BrowserSync
    by Shane Osbourne
    browsersync.io
    

    View Slide

52. JS Bin
    by Remy Sharp
    jsbin.com
    

    View Slide

53. Google
    Chrome Canary
    

    View Slide

54. Collaboration
    is Important!
    

    View Slide

55. Be Adaptive
    㢌⻉ח㼎׃㻂㺁ח
    

    View Slide

56. Progressive Enhancement
    

    View Slide

57. View Slide

58. View Slide

59. “
    The web is not a platform.
    It’s a continuum.
    — Jeremy Keith
    

    View Slide

60. PlatForm On / OFF
    

    View Slide

61. Continuum
    ֮װסװז鸬竲䚍
    

    View Slide

62. BrowserS
    Devices
    Networks
    

    View Slide

63. Enhancing
    Progressively
    

    View Slide

64. Strategies
    

    View Slide

65. "Cut the mustard"
    

    View Slide

66. ؒٝعٝأًٝز׾「ֽ׵׸׷
    剑⡚ꣲך垥彊ח彊䬿׃גְ׷
    ـٓؐؠ׾锃ץ׷׋׭ךذؙصحؙ
    

    View Slide

67. if ('querySelector' in document
    && 'localStorage' in window
    && 'addEventListener' in window) {
    // Ϟμϯϒϥ΢β
    }
    

    View Slide

68. "Grade components,
    not browsers"
    

    View Slide

69. www.filamentgroup.com/lab/grade-the-components.html
    

    View Slide

70. adaddfdafasdfads
    asasdfasdfdaf
    adaddfdafasdfads
    asasdfasdfdaf
    dadfasdfasdf
    asdfasddddd
    㖑㔳׾鋅׷
    

    View Slide

71. adaddfdafasdfads
    asasdfasdfdaf
    adaddfdafasdfads
    asasdfasdfdaf
    dadfasdfasdf
    asdfasddddd
    ؎ٝةؙٓذ؍ـ٥وحف
    ","(PPHMF.BQ
    

    View Slide

72. adaddfdafasdfads
    asasdfasdfdaf
    adaddfdafasdfads
    asasdfasdfdaf
    dadfasdfasdf
    asdfasddddd
    㖑㔳׾鋅׷
    

    View Slide

73. ؎ٝةؙٓذ؍ـ٥وحف
    ","(PPHMF.BQ
    

    View Slide

74. ؝ٝه٦طٝز⽃⡤חֶֽ׷
    ⡤꿀׾㹀纏ׅ׷
    

    View Slide

75. We Are in a Changing World
    

    View Slide

76. ⮚猕זؒٝآص،חכ
    Ⱏ鸐׃ג֮׷暴䗙
    

    View Slide

77. 荈ⴓךㆸ㷕׾䭯׏גְ׷ֿה
    

    View Slide

78. 䬄韋嚊䙀׾Ⱗ⡤涸ז䕎ך֮׷׮ךח
    㢌ִ׷⸂׾䭯׏גְ׷ֿה
    

    View Slide

79. ر؍ذ٦ٕחֿ׌׻׶׾
    䭯׏גְ׷ֿה
    

    View Slide

80. ׮׃⵸䲿勴⟝ָ㢌׻׏׋הֹծ
    ׉ךֿ׌׻׶׾患ֻ䰍גׁ׷ֿהָ
    דֹ׷ֿה
    

    View Slide

81. View Slide

82. 8FCכ䌢ח㢌⻉׃אבֽ׷橆㞮
    

    View Slide

83. 8FCךⵃ欽罏ך㢳ֻכ⽃秪ח8FC׾
    嶊顤׃׋ְ׌ֽ
    

    View Slide

84. by Arthur C. Clarke
    amzn.to/1A9xKhr
    2001:
    A Space Odyssey
    

    View Slide

85. “
    Instead of trying to point yourself in the
    right direction, admit you have no idea
    what the right direction is, and try instead
    to be super sensitive to the winds of
    change.
    — Paul Graham
    

    View Slide

86. Be responsible
    ⡲׏׋׮ךח㼎׃ג顑⟣׾䭯א
    

    View Slide

87. Maintainability
    

    View Slide

88. ،فٔ؛٦ءّٝ׮ծ
    ֮׷אך䪮遭涸ז鍑寸׌ֽד
    ⡲׶⳿ׇ׷הְֲֿהכזְ
    

    View Slide

89. וךؿٖ٦يٙ٦ؙ׾⢪ֲץַֹ
    וך鎉铂׾⢪ֲץַֹ
    וך؟٦ؽأ׾⢪ֲץַֹ
    ?
    

    View Slide

90. Ꟛ涪罏ךⵃ⤑䚍
    

    View Slide

91. خ٦ٕחכخ٦ٕ׀הח
    鍑寸׃זֽ׸לז׵זְ㉏겗ָ
    㶷㖈׃גְ׷
    

    View Slide

92. Document & Education
    

    View Slide

93. 8FCכ䌢ח㢌⻉׃אבֽ׷橆㞮
    

    View Slide

94. by OpenSignal
    

    View Slide

95. View Slide

96. View Slide

97. 〳腉זꣲ׶㢳ֻך橆㞮ח㼎䘔ׅ׷
    

    View Slide

98. Progressive Enhancement
    

    View Slide

99. 㛙暕זفٗتؙز׾⡲׷ֿה
    ׉ך㛙暕ׁח毟㉏׾チׅ׷ֿה
    

    View Slide

100. չ׮׃պ׾׃אְֻֿ׵ְꅾי׷ֿה
     

     View Slide

101. View Slide

102. 㢳ֻך橆㞮ך䭯א劤䔲ך䠐㄂
     

     View Slide

103. Performance
     

     View Slide

104. V.S.
     Client Side
     Server Side
     

     View Slide

105. www.filamentgroup.com/lab/mv-initial-load-times.html
     

     View Slide

106. 1,000msך㠖׾馄ִ׵׸זְ
     

     View Slide

107. bit.ly/1Ey8ml4
     

     View Slide

108. Isomorphic
     JavaScript
     

     View Slide

109. Rendering Performance
     

     View Slide

110. react-canvas
     by Flipboard
     git.io/ACuk
     

     View Slide

111. Accessibility
     

     View Slide

112. Be (an) Expert
     濼׷ֿהח㼎׃ג額妜ח
     

     View Slide

113. דֹזְה鎉׻זְկ
     ؔفءّٝ׾䲿爙ׅ׷
     

     View Slide

114. 㠨׸璞ך⚥ד➬✲׾׃זְ
     

     View Slide

115. չ⼧ⴓպְָאזךַ׾濼׷
     

     View Slide

116. 濼陎׾㟓װׅ׋׭ך儗꟦׾
     㹀䌢涸ח鏣ֽ׷
     

     View Slide

117. ؝ىُص؛٦ءّٝ
     

     View Slide

118. Last but No Least
     剑䖓ח
     

     View Slide

119. ؿٗٝزؒٝسכֿ׸ַ׵׮
     8FCח䗳銲הׁ׸׷ךַ
     

     View Slide

120. YES!
     

     View Slide

121. ➙הずֿׄה׾׃אבֽ׷
     הְֲֿהכזְ
     

     View Slide

122. TEAM
     

     View Slide

123. Be Collaborative
     Be Adaptive
     Be responsible
     Be (an) Expert
     

     View Slide

124. Be Collaborative
     Be Adaptive
     Be responsible
     Be (an) Expert
     

     View Slide

125. Care
     

     View Slide

126. “
     You can’t connect the dots looking
     forward; you can only connect them
     looking backwards. So you have to trust
     that the dots will somehow connect in your
     future.
     — Steve Jobs
     

     View Slide

127. View Slide

128. Frontend isn’t
     Going Anywhere
     

     View Slide

129. Thank you!
     @cssradar
     

     View Slide