Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leveling Up Your Front-end skills

Yuya Saito
January 25, 2014

Leveling Up Your Front-end skills

Yuya Saito

January 25, 2014
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

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

    View full-size slide

  2. Hands On
    Multi Tracks &

    View full-size slide

  3. Yuya Saito
    Frontend Developer
    @ CyberAgent

    View full-size slide

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

    View full-size slide

  5. Front-end
    Development is
    Easy!?
    ϑϩϯτΤϯυ։ൃ͸؆୯

    View full-size slide

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

    View full-size slide

  7. ͷߴ͞
    Learnability

    View full-size slide

  8. WWW is Only
    20 Years Old

    View full-size slide

  9. TAG NAME
    About 100 of

    View full-size slide

  10. selector {
    property: value;
    }

    View full-size slide

  11. selector {
    color: red;
    }

    View full-size slide

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

    View full-size slide

  13. function
    if var for {}
    while []
    try {} catch (e) {}

    View full-size slide

  14. JavaScript
    ͸γϯϓϧͰ׮༰ͳݴޠ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. Browser͸։ൃ؀ڥ

    View full-size slide

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

    View full-size slide

  21. Browser͸ιϑτ΢ΣΞ

    View full-size slide

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

    View full-size slide

  23. Google Chrome Developer Relations
    Paul Irish

    View full-size slide


  24. 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

    View full-size slide


  25. ϒϥ΢β಺෦ͷಇ͖ΛֶͿࣄ͸
    8FC։ൃऀʹͱͬͯΑΓΑ͍ղܾΛߦ͏͜ͱɺ
    ͦͯ͠։ൃʹ͓͚ΔϕετϓϥΫςΟεͷഎޙʹ͋Δ
    ࠜڌΛཧղ͢Δ͜ͱʹͭͳ͕Γ·͢ɻ
    ͜ͷهࣄ͸௕͍΋ͷͰ͸͋Γ·͕͢ɺ
    গ࣌ؒ͠Λׂ͍ͯಡΜͰΈ͍ͯͩ͘͞ɻ
    ͦͷ͕࣌ؒແବʹͳΒͳ͍͜ͱ͸อূ͠·͢ɻ
    - Paul Irish

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Fail Fast
    Fail Often

    View full-size slide

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

    View full-size slide

  40. CSS:
    Style
    Layout
    Animation

    View full-size slide

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

    View full-size slide

  42. Learn:
    CSS Preprocessor

    View full-size slide

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

    View full-size slide

  44. OOCSS
    SMACSS
    BEM
    by Nicole Sullivan
    by Jonathan Snook
    by Yandex

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. youtu.be/BlSFXdnuq5E

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. Modular Design

    View full-size slide

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

    View full-size slide

  55. There are
    Tools (a lot)

    View full-size slide

  56. Require.js
    by James Burke

    View full-size slide

  57. Learn:
    Asynchronous
    Module
    Definition

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. Browserify.js
    by James Holiday AKA substack

    View full-size slide

  61. ES6
    import / export

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  65. Learn:
    Jasmine
    Mocha
    or

    View full-size slide

  66. CSS needs Testing

    View full-size slide

  67. speakerdeck.com/studiomohawk/testable-javascript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. Tools, not Rules.
    - Paul Lewis

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. Network Panel

    View full-size slide

  76. Timeline Panel

    View full-size slide

  77. Profile Panel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  80. Quick Peek
    ͘͝؆୯ʹɻ

    View full-size slide

  81. Cross Brower
    Platform
    Device

    View full-size slide

  82. $49, Mac Only
    GhostLab

    View full-size slide

  83. github.com/shakyShane/browser-sync

    View full-size slide

  84. Progressive
    Enhancement

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  88. !lamentgroup.com/lab/grade_components/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  93. Handlebars.js
    Underscore.js

    View full-size slide

  94. Advocate for the Open Web
    Molly Holzschlag

    View full-size slide


  95. If you want to be doing the same things for
    the next 10 years, you're in the wrong job.
    - Molly Holzschlag

    View full-size slide


  96. ࣍ͷ೥ؒɺ
    ಉ͜͡ͱΛ͍͍ͯͨ͠ͱ
    ࢥ͏ͳΒɺ
    ͜ͷۀք͸޲͍͍ͯͳ͍ɻ
    - Molly Holzschlag

    View full-size slide

  97. Web will be
    always
    Changing.

    View full-size slide

  98. Self Learning

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  106. Homework
    Կ͕ಘҙͳͷ͔
    Կʹڵຯ͕͋Δͷ͔

    View full-size slide

  107. What’s your Goal?

    View full-size slide

  108. Apple CEO
    Steve Jobs

    View full-size slide


  109. 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 full-size slide


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

    View full-size slide

  111. One More Thing...

    View full-size slide

  112. Ask Why,
    Not How.

    View full-size slide

  113. Thank You!
    Follow me @ cssradar

    View full-size slide