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

Guiding Through The JavaScript Frameworks

Yuya Saito
February 19, 2015

Guiding Through The JavaScript Frameworks

Angular.jsやBackbone.jsを始めとした『MV* フレームワーク』とカテゴライズされるJavaScriptのフレームワークは今、まさに百花絢爛。
本セッションでは、そんなJavaScriptフレームワークの歩き方について、
『もう迷わない』ではなく、正しい『迷い方』について紹介します。

Yuya Saito

February 19, 2015
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

  1. Guiding Through
    THE JAVASCRIPT FRAMEWORKS
    Yuya Saito @ Rich Media
    JavaScriptϑϨʔϜϫʔΫͷา͖ํ Version 2.0.0
    Developers Summit 2015

    View Slide

  2. UX Engineer @ Rich Media
    Yuya Saito

    View Slide

  3. View Slide

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

    View Slide

  5. JAVASCRIPT FRAMEWORKS
    The Map of
    JavaScriptϑϨʔϜϫʔΫͷ஍ਤ

    View Slide

  6. Backbone Angular Ember
    MVC
    Data Binding
    Unit Testing
    Dependency Injection Conventions
    E2E Testing Structure
    ES6 Modules
    Web Components
    More comprehensive
    More Flexibility
    Router

    View Slide

  7. Angular.js & Ember.js
    Data Binding
    Web Components

    View Slide

  8. Angular.js
    Dependency Injection

    View Slide

  9. POPULAR FRAMEWORKS
    Comparison of
    ஶ໊ϑϨʔϜϫʔΫͷൺֱ

    View Slide

  10. Angular.js

    View Slide

  11. Pros

    View Slide

  12. Pros
    1. ؆୯ʹར༻Ͱ͖Δ
    2. खް͍αϙʔτ
    3. ଟ͘ͷϢʔβ͕͍Δ

    View Slide

  13. Cons

    View Slide

  14. Cons
    1. Angular.jsͷ࢖͍ํΛ֮͑Δඞཁ͕͋Δ
    2. ʰؔ৺ͷ෼཭ʱͷ๏ଇҧ൓
    3. ʰຐ๏ʱͩΒ͚

    View Slide

  15. Ember.js

    View Slide

  16. Pros

    View Slide

  17. Pros
    1. “The Ember Way”ͱ͍͏Ұ؏ͨ͠఩ֶ
    2. ଟ͘ͷ໰୊͕ղܾࡁΈ
    3. ༏ΕͨυΩϡϝϯτ / Ϣʔβϕʔε

    View Slide

  18. Cons

    View Slide

  19. Cons
    1. “The Ember Way”͸ॾਕͷ݋
    2. ॊೈੑʹ͚ܽΔ

    View Slide

  20. Backbone.js

    View Slide

  21. Pros

    View Slide

  22. Pros
    1. খ͘͞ɺ
    ॊೈͰΑ͘ςετ͞ΕͨϞδϡʔϧ܊
    2. ଟ͘ͷجຊతͳ໰୊͕ղܾ͞Ε͍ͯΔ
    3. ιʔείʔυ΋୹͘ɺ
    ཧղ͠΍͍͢

    View Slide

  23. Cons

    View Slide

  24. Cons
    1. ͢΂ͯͷ໰୊ʹର͢ΔղܾΛఏ͍ࣔͯ͠ͳ͍
    2. Backbone.jsϕʔεɾϑϨʔϜϫʔΫͷඞཁੑ

    View Slide

  25. React.js

    View Slide

  26. Pros

    View Slide

  27. Pros
    1. ϋΠɾύϑΥʔϚϯεͷϨϯμϦϯά
    2. εςʔτ؅ཧͷ؆қԽ
    3. ୯ͳΔViewϨΠϠ

    View Slide

  28. Cons

    View Slide

  29. Cons
    1. ςϯϓϨʔτͷγϯλοΫε͕ෆࣗવ
    2. ϑΝΠϧαΠζ

    View Slide

  30. FLUX

    View Slide

  31. Action Dispatcher Store View
    Unidirectional data flow

    View Slide

  32. Action
    Dispatcher
    Store
    View ༣ศड͚ͷ࣋ͪओ
    ༣ศड͚
    ༣ศ԰͞Μ
    ༣ศ෺

    View Slide

  33. Flux
    by Facebook
    git.io/MFS1QA

    View Slide

  34. Delorean
    by Delorean.js
    git.io/z3LsQw

    View Slide

  35. Fluxxor
    by Brandon Tilley
    git.io/udBcxg

    View Slide

  36. Ampersand.js

    View Slide

  37. Pros

    View Slide

  38. Pros
    1. ॊೈੑͱ݁߹ੑͷόϥϯε͕͍͍
    2. ίϚϯυϥΠϯɾπʔϧ͕ศར
    3. ଟ͘ͷϓϥάΠϯͷଘࡏ

    View Slide

  39. Cons

    View Slide

  40. Cons
    1. ·ͩʰए͍ʱ
    2. IE8ҎԼͷαϙʔτͳ͠

    View Slide

  41. Aurelia.js

    View Slide

  42. Pros

    View Slide

  43. Pros
    1. ॊೈੑͱ݁߹ੑͷόϥϯε͕͍͍
    2. ES6/ES7΁ͷϑΥʔΧε
    3. Ϟδϡϥʔੑ͕ߴ͍

    View Slide

  44. Cons

    View Slide

  45. Cons
    1. ·ͩʰए͍ʱ
    2. IE11ҎԼͷαϙʔτͳ͠

    View Slide

  46. IDENTIFYING PROBLEMS
    Lost in
    ໰୊͸໰୊ͦͷ΋ͷͷൃݟʹ͋Δ

    View Slide


  47. Choose tools you'll use.
    New to front-end dev?
    Just use HTML/CSS/JS.
    Add tools & abstractions when
    they improve your productivity.
    — Addy Osmani

    View Slide

  48. πʔϧΛ୳͠ग़͢͜ͱ͸ΰʔϧͰ͸ͳ͍

    View Slide

  49. ͲΜͳ໰୊Λղܾ͠Α͏ͱ͍ͯ͠Δͷ͔

    View Slide

  50. How to Solve it
    by George Pólya
    amzn.to/1pnZ3L9

    View Slide

  51. 4
    ໰୊Λཧղ͢Δ
    Ͳ͏ղܾ͢Δ͔ઓུΛߟ͑Δ
    ઓུΛ࣮ߦ͢Δ
    Ͳ͏໰୊Λղܾ͔ͨ͠ΛৼΓฦΔ

    View Slide

  52. ໰୊Λཧղ͢Δ

    View Slide

  53. ໰୊Λཧղ͢Δ

    View Slide

  54. ϓϩμΫτͷεςʔδ͸Ͳ͜ͳͷ͔

    View Slide

  55. eg
    ৽نϓϩδΣΫτͷ։ൃεςʔδ
    طଘϓϩδΣΫτͷϦχϡʔΞϧεςʔδ

    View Slide

  56. Angular.js & Ember.js

    View Slide

  57. ΞʔΩςΫτͷ૑ੈస׵ظ

    View Slide

  58. Angular.jsͷεϐʔυ

    View Slide

  59. Ember.jsͷݎ͞

    View Slide

  60. Backbone.js & Ampersand.js

    View Slide

  61. ঃʑʹMV*ͳઃܭʹ଩Λ੾Δ

    View Slide

  62. ϑΝΠϧαΠζ͸େ͖͘มΘΒͳ͍

    View Slide

  63. มߋʹڧ͍ઃܭͱ͸

    View Slide

  64. 25 Years Old

    View Slide

  65. มΘΓଓ͚Δ͜ͱ

    View Slide

  66. Web Components

    View Slide

  67. ECMA Script 6 & 7

    View Slide

  68. มΘΔ͜ͱΛલఏͱ͢Δ

    View Slide


  69. — Me
    ׬ᘳͳߏ଄Λ࡞Ζ͏͢ΔͷͰ͸ͳ͘ɺ
    յΕͨͱ͖༐ؾΛ࣋ͬͯมߋͰ͖ΔΑ͏ͳ
    ઃܭΛɻ

    View Slide

  70. Remember the Foundation

    View Slide


  71. 1. Small is beautiful.
    2. Make each program do one thing well.
    3. Build a prototype as soon as possible.
    4. Choose portability over efficiency.
    5. Store data in flat text files.
    6. Use software leverage to your advantage.
    7. Use shell scripts to increase leverage and
    portability.
    8. Avoid captive user interfaces.
    9. Make every program a filter.
    — Mike Gancarz

    View Slide

  72. 1. Small is beautiful.
    2. Make each program do one thing well.
    3. Build a prototype as soon as possible.

    View Slide

  73. มΘΓଓ͚Δ͜ͱ

    View Slide

  74. Node.js & Ecosystem

    View Slide

  75. Learn JavaScript

    View Slide


  76. The most important thing is that
    your team becomes familiar with building
    well-structured apps in JavaScript.
    — Henrik Joreteg

    View Slide

  77. Read Backbone.js Source

    View Slide

  78. And Underscore.js

    View Slide

  79. Books to Read

    View Slide

  80. Speaking JavaScript
    by Axel Rauschmayer
    speakingjs.com

    View Slide

  81. Eloquent JavaScript
    by Marijn Haverbeke
    eloquentjavascript.net

    View Slide

  82. Effective JavaScript
    by David Herman
    effectivejs.com

    View Slide

  83. Learn CSS and HTML, too

    View Slide


  84. — My Friend
    )5.-͕Ԛ͍ͱ$44΋Ԛ͍ɻ
    ͦͷ྆ऀͷଘࡏ͕ͦ͜+BWB4DSJQUͷϩδοΫ
    Λࢧ͑Δج൫͔ͩΒɺ͔ͬ͠Γॻ͍ͯཉ͍͠ɻ

    View Slide

  85. A FRAMEWORK?
    How Do I Review
    ϑϨʔϜϫʔΫͷબ୒๏

    View Slide

  86. Lock-In
    ғ͍ࠐΈ

    View Slide

  87. Opinionated Architecture
    ʰؤݻʱͳઃܭ

    View Slide

  88. Accidental Complexity
    ෆཁͳෳࡶੑ

    View Slide

  89. Testability
    ςετͷ͠΍͢͞

    View Slide


  90. Replace "can you build this?" with
    "can you maintain this without losing
    your minds?"
    — Nicolas Gallagher

    View Slide

  91. NOT LEAST
    Last but
    ऴΘΓʹ

    View Slide


  92. — Nicholas Zakas
    Enough with the JavaScript already!

    View Slide

  93. Content
    Presentation
    JavaScript
    Progressive Enhancement

    View Slide

  94. Stability
    Performance
    Reach

    View Slide

  95. It’s Your ResponsibilityTM

    View Slide


  96. — TJ Holowaychuk
    Programming would be pretty boring
    if everyone agreed.

    View Slide

  97. THANK YOU!
    @CSSRADAR

    View Slide