Guiding Through The JavaScript Frameworks

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
February 19, 2015

Guiding Through The JavaScript Frameworks

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

February 19, 2015
Tweet

Transcript

  1. Guiding Through THE JAVASCRIPT FRAMEWORKS Yuya Saito @ Rich Media

    JavaScriptϑϨʔϜϫʔΫͷา͖ํ Version 2.0.0 Developers Summit 2015
  2. UX Engineer @ Rich Media Yuya Saito

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

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

  6. Backbone Angular Ember MVC Data Binding Unit Testing Dependency Injection

    Conventions E2E Testing Structure ES6 Modules Web Components More comprehensive More Flexibility Router
  7. Angular.js & Ember.js Data Binding Web Components

  8. Angular.js Dependency Injection

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

  10. Angular.js

  11. Pros

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

  13. Cons

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

  15. Ember.js

  16. Pros

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

    Ϣʔβϕʔε
  18. Cons

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

  20. Backbone.js

  21. Pros

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

  23. Cons

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

  25. React.js

  26. Pros

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

  28. Cons

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

  30. FLUX

  31. Action Dispatcher Store View Unidirectional data flow

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

  33. Flux by Facebook git.io/MFS1QA

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

  35. Fluxxor by Brandon Tilley git.io/udBcxg

  36. Ampersand.js

  37. Pros

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

  39. Cons

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

  41. Aurelia.js

  42. Pros

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

  44. Cons

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

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

  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
  48. πʔϧΛ୳͠ग़͢͜ͱ͸ΰʔϧͰ͸ͳ͍

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

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

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

  52. ໰୊Λཧղ͢Δ

  53. ໰୊Λཧղ͢Δ

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

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

  56. Angular.js & Ember.js

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

  58. Angular.jsͷεϐʔυ

  59. Ember.jsͷݎ͞

  60. Backbone.js & Ampersand.js

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

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

  63. มߋʹڧ͍ઃܭͱ͸

  64. 25 Years Old

  65. มΘΓଓ͚Δ͜ͱ

  66. Web Components

  67. ECMA Script 6 & 7

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

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

  70. Remember the Foundation

  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
  72. 1. Small is beautiful. 2. Make each program do one

    thing well. 3. Build a prototype as soon as possible.
  73. มΘΓଓ͚Δ͜ͱ

  74. Node.js & Ecosystem

  75. Learn JavaScript

  76. “ The most important thing is that your team becomes

    familiar with building well-structured apps in JavaScript. — Henrik Joreteg
  77. Read Backbone.js Source

  78. And Underscore.js

  79. Books to Read

  80. Speaking JavaScript by Axel Rauschmayer speakingjs.com

  81. Eloquent JavaScript by Marijn Haverbeke eloquentjavascript.net

  82. Effective JavaScript by David Herman effectivejs.com

  83. Learn CSS and HTML, too

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

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

  86. Lock-In ғ͍ࠐΈ

  87. Opinionated Architecture ʰؤݻʱͳઃܭ

  88. Accidental Complexity ෆཁͳෳࡶੑ

  89. Testability ςετͷ͠΍͢͞

  90. “ Replace "can you build this?" with "can you maintain

    this without losing your minds?" — Nicolas Gallagher
  91. NOT LEAST Last but ऴΘΓʹ

  92. “ — Nicholas Zakas Enough with the JavaScript already!

  93. Content Presentation JavaScript Progressive Enhancement

  94. Stability Performance Reach

  95. It’s Your ResponsibilityTM

  96. “ — TJ Holowaychuk Programming would be pretty boring if

    everyone agreed.
  97. THANK YOU! @CSSRADAR