Guiding Through The JavaScript Frameworks

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

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