Leveling Up Your Front-end skills

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
January 25, 2014

Leveling Up Your Front-end skills

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

January 25, 2014
Tweet

Transcript

  1. Leveling Up Front-end Skills Yuya Saito @ Frontrend in Fukuoka

    #frontrend_ff
  2. None
  3. Hands On Multi Tracks &

  4. Yuya Saito Frontend Developer @ CyberAgent

  5. None
  6. None
  7. Agenda Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ͸؆୯ No, it’s not! ϑϩϯτΤϯυ

    ɾ εΩϧΛϨϕϧΞοϓ͠Α͏ There are actually more… ͞ΒͳΔਂ෵΁ʜ How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ
  8. Front-end Development is Easy!? ϑϩϯτΤϯυ։ൃ͸؆୯

  9. ͭͷڞ௨఺͕͋Δ HTML, CSS & JavaScript

  10. ͷߴ͞ Learnability

  11. WWW is Only 20 Years Old

  12. HTML

  13. < > TAG NAME

  14. TAG NAME About 100 of

  15. CSS

  16. selector { property: value; }

  17. selector { color: red; }

  18. JavaScript

  19. JavaScript ͸؆୯Ͱ͸ͳ͍ͷͰ͸

  20. function if var for {} while [] try {} catch

    (e) {}
  21. JavaScript ͸γϯϓϧͰ׮༰ͳݴޠ

  22. JavaScript ͸ϒϥ΢β͑͋͞Ε͹࣮ߦͰ͖Δ

  23. Learnability ͕ٕज़ͷ޿͕ΓΛੜΈग़ͨ͠ɻ

  24. No, it’s not! ϨϕϧΞοϓ͠Α͏ ϑϩϯτΤϯυ ɾ εΩϧΛ

  25. None
  26. ϒϥ΢βͷ಺෦ߏ଄Λ஌Δ Browser Learn:

  27. Browser͸։ൃ؀ڥ

  28. Browser͸ϓϥοτϑΥʔϜ

  29. Browser͸ιϑτ΢ΣΞ

  30. html5rocks.com/en/tutorials/internals/howbrowserswork

  31. Google Chrome Developer Relations Paul Irish

  32. ❞ As a web developer, learning the internals of browser

    operations helps you make better decisions and know the justifications behind development best practices. While this is a rather lengthy document, we recommend you spend some time digging in; we guarantee you'll be glad you did. - Paul Irish
  33. ❞ ϒϥ΢β಺෦ͷಇ͖ΛֶͿࣄ͸ 8FC։ൃऀʹͱͬͯΑΓΑ͍ղܾΛߦ͏͜ͱɺ ͦͯ͠։ൃʹ͓͚ΔϕετϓϥΫςΟεͷഎޙʹ͋Δ ࠜڌΛཧղ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ ͜ͷهࣄ͸௕͍΋ͷͰ͸͋Γ·͕͢ɺ গ࣌ؒ͠Λׂ͍ͯಡΜͰΈ͍ͯͩ͘͞ɻ ͦͷ͕࣌ؒແବʹͳΒͳ͍͜ͱ͸อূ͠·͢ɻ - Paul

    Irish
  34. chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

  35. ۜͷ஄ؙ͸ଘࡏ͠ͳ͍ɻ ͔͠͠஄ؙͦͷ΋ͷ͸ଘࡏ͍ͯ͠Δɻ ஄ؙͷબͼํΛֶͿ͜ͱ͕େ੾ɻ Learn:

  36. ߏ଄΍ઃܭͷํ๏Λ஌Δ JavaScript Learn:

  37. jQuery͚ͩͰ͸΋͸΍े෼Ͱ͸ͳ͍ɻ Not Just jQuery

  38. jQuery͸ͲΜͳ໰୊Λղܾ͠Α͏ͱ What jQuery is? ͍ͯ͠Δͷ͔

  39. JavaScriptʹ͓͚ΔΞϓϦͷઃܭ Architecture

  40. ໾ׂ෼୲ΛͲ͏෼཭ɾ݁߹͢Δͷ͔ MV*

  41. Backbone.js Angular.js Ember.js ͦΕͧΕʹར఺ͱܽ఺͕͋Δɻ

  42. ίϝϯτΛؚΊͯ΋1,600ߦఔ౓ Read: Backbone.js

  43. TODOΞϓϦҎ֎ͷαϯϓϧΛ ࡞ͬͯΈΔɻ with Backbone.js

  44. Angular.jsͰॻ͖׵͑ͯΈΔɻ

  45. MV*͕ͲΜͳ໰୊Λ ղܾ͠Α͏ͱ͍ͯ͠Δͷ͔ Learn:

  46. Fail Fast Fail Often

  47. ߏ଄΍ઃܭͷํ๏Λ஌Δ CSS Learn:

  48. CSS: Style Layout Animation

  49. CSS needs Architecture, too ͦͷͨΊͷػೳ͸ଘࡏ͠ͳ͍ͱ͍͏ໃ६

  50. Learn: CSS Preprocessor

  51. CSS Preprocessor Learn: Doesn’t Solve it! CSSͷઃܭΛ༰қʹͯ͘͠ΕͨΓ͸͠ͳ͍

  52. OOCSS SMACSS BEM by Nicole Sullivan by Jonathan Snook by

    Yandex
  53. They’re just An Example. ͜ΕΒͷํ๏࿦͸͋͘·Ͱ΋ྫɻ

  54. ͳΜͲ΋܁Γฦ͞ΕΔɺ ͋Δ͍͸܁Γฦ͢͜ͱ͕Ͱ͖Δɺ ύλʔϯΛͲͷΑ͏ʹ ൃݟ͠ɺ ࣮૷͠ɺ ໋໊͢Δͷ͔ɻ

  55. by ୩ ୓थ 15:30~ @ ձٞࣨ5 Goal of Better CSS

    Architecture
  56. youtu.be/BlSFXdnuq5E

  57. Modularity Learn: ϞδϡϥʔԽΛ஌Δ

  58. More Than A Few Thousand Lines of Codes ਺ઍߦʹ΋ٴͿίʔυ΋௝͘͠ͳ͍ɻ

  59. ͳΜͷσβΠϯઃܭ΋ͳ͘ɺ ୯७ʹϑΝΠϧΛ෼ׂͯ͠࡞ۀΛߦ͑͹ ϖʔδϩʔυͷ࠷దԽͷجຊݪଇͰ͋Δɺ HTTPϦΫΤετΛ ૿΍͢͜ͱʹͳͬͯ͠·͏ɻ

  60. CSSͳΒ·ͩ͠΋ɺ JavaScriptʹ͸ղফ͠ͳ͚Ε͹ͳΒͳ͍ ґଘؔ܎΋࣮֬ʹଘࡏ͢ΔͰ͠ΐ͏ɻ

  61. Modular Design

  62. None
  63. Module Design JavaScriptʹ΋CSSʹ΋ݱ࣌఺Ͱ͸ ͜ͷϒϩοΫ޻๏Λ࣮ݱ͢ΔͨΊͷ ػೳ͸ݴޠͱͯ͠༻ҙ͞Ε͍ͯͳ͍ɻ

  64. There are Tools (a lot)

  65. Require.js by James Burke

  66. Learn: Asynchronous Module Definition

  67. Require.js is Good But... Require.jsʹ΋໰୊͸͋Δ...

  68. Node.js IS JavaScript But... Node.jsͰ͸ฉ͔ͳ͍໰୊...?

  69. CommonJS

  70. Browserify.js by James Holiday AKA substack

  71. ES6 import / export

  72. CSS?

  73. Testing Learn: ϢχοτςετΛ஌Δ

  74. Linting is First Step to Test ·ͣLint͔Β࢝ΊΔ

  75. ࣗ৴Λ࣋ͬͯؒҧ͍Λਖ਼͢ ϫʔΫϑϩʔΛ࣋ͭɻ

  76. Refactoring

  77. Learn: Jasmine Mocha or

  78. CSS?

  79. CSS needs Testing

  80. Not Yet

  81. speakerdeck.com/studiomohawk/testable-javascript

  82. speakerdeck.com/studiomohawk/unit-testing-with-jasmine

  83. Performance Learn: ύϑΥʔϚϯεΛ஌Δ

  84. ύϑΥʔϚϯε͸ػೳ

  85. Tools, not Rules. - Paul Lewis

  86. ϕετ͕ৗʹϕετͱ͸ݶΒͳ͍ɻ

  87. -webkit-transform: translate3d(0,0,0);

  88. What we can measure, we can optimize! - Ilya Grigorik

  89. None
  90. Network Panel

  91. Timeline Panel

  92. Profile Panel

  93. developers.google.com/chrome-developer-tools/

  94. There are actually more… ͞ΒͳΔਂ෵΁ʜ

  95. Quick Peek ͘͝؆୯ʹɻ

  96. Cross Brower Platform Device

  97. Test Early

  98. $49, Mac Only GhostLab

  99. github.com/shakyShane/browser-sync

  100. Progressive Enhancement

  101. ৗʹ৽͍ٕ͠ज़Λ࠾༻͢Δ͜ͱΛ ظ଴͞Εͳ͕Βɺ աڈͷϒϥ΢β΁ͷରԠΛഭΒΕΔໃ६ɻ

  102. Progressive Enhancement͸ ϑϩϯτΤϯυ։ൃऀͷಠஃ৔ɻ

  103. ϒϥ΢β΍σόΠεͰ੍ݶΛ ߟ͑ΔͷͰ͸ͳ͘ɺ ίϯϙʔωϯτ୯ҐͰઓུΛߟ͑Δɻ

  104. !lamentgroup.com/lab/grade_components/

  105. Template

  106. HTMLΛͦͷ··هड़͢Δ͜ͱ͕ ݮ͖͍ͬͯͯΔɻ

  107. No Choice on Server Side αʔόαΠυͷςϯϓϨʔτʹ͍ͭͯ͸ զʑʹબ୒ࢶ͕༩͑ΒΕΔ͜ͱ͸ͳ͍ɻ

  108. CMSΛؚΊͯɺ ϝδϟʔͳϑϨʔϜϫʔΫͰ ࠾༻͞Ε͍ͯΔςϯϓϨʔτݴޠʹ͍ͭͯ͸ ͓֮͑ͯ͘΂͖ɻ

  109. Too Many on Client Side ΫϥΠΞϯταΠυʹ͸΋͸΍ બ୒͢Δ͜ͱ͕೉͍͠΄Ͳଘࡏ͢Δɻ

  110. Handlebars.js Underscore.js

  111. Research

  112. Advocate for the Open Web Molly Holzschlag

  113. ❞ If you want to be doing the same things

    for the next 10 years, you're in the wrong job. - Molly Holzschlag
  114. ❞ ࣍ͷ೥ؒɺ ಉ͜͡ͱΛ͍͍ͯͨ͠ͱ ࢥ͏ͳΒɺ ͜ͷۀք͸޲͍͍ͯͳ͍ɻ - Molly Holzschlag

  115. Web will be always Changing.

  116. Inovation

  117. Self Learning

  118. Πϊϕʔγϣϯʹରͯ͠ ৗʹහײͰ͋Γ͚ͭͮΔ͜ͱ͸ ϑϩϯτΤϯυ։ൃऀͷ੹຿ɻ

  119. ৘ใऩू͸श׳Խ͕伴ɻ

  120. How to learn all this? ϑϩϯτΤϯυ ɾ εΩϧͷֶͼํ

  121. ֫ಘͰ͖Δͷ͔ Ͳ͏ͨ͠Β͜ΕΒͷεΩϧΛ

  122. ਫ਼௨͍ͯ͠Δͷ͔ ࢲࣗ਎͢΂ͯͷεΩϧʹ Better Question

  123. No.

  124. ͋Δ͸ͣͰ͢ɻ օ͞Μʹ΋ಘҙͳδϟϯϧ͸ ूத͢Δ΂͖ɻ ·ͣ͸ͦ͜Λ৳͹͍ͯ͘͜͠ͱʹ

  125. T ❌

  126. I

  127. None
  128. None
  129. ଞͷεΩϧʹֶ͍ͭͯͿඞཁੑ͕ Կ͔ͭͷεΩϧΛਂߞ͢Δ্Ͱɺ ඞͣग़͖ͯ·͢ɻ

  130. None
  131. None
  132. Homework Կ͕ಘҙͳͷ͔ Կʹڵຯ͕͋Δͷ͔

  133. What’s your Goal?

  134. Apple CEO Steve Jobs

  135. ❞ 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
  136. ❞ ઌΛಡΜͰ఺ͱ఺Λͭͳ͙͜ͱ͸Ͱ͖·ͤΜɻ ޙ͔ΒৼΓฦͬͯॳΊͯͰ͖ΔͷͰ͢ɻ ͦΕΒͷ఺͸ඞͣͲ͔͜ͷະདྷͰ ͭͳ͕Δ͜ͱΛ৴͡ͳ͚Ε͹ͳΒͳ͍ͷͰ͢ɻ - Steve Jobs

  137. One More Thing...

  138. Ask Why, Not How.

  139. Thank You! Follow me @ cssradar