The Progressive Framework

Transcript

1. 1.

   Vue.js The Progressive Framework Gotanda.js #5 in TORETA 2016-09-02 @kazupon

2. 2.

   Who are you ? https://github.com/kazupon

3. 3.

   Vue.js core team member
 Vue.js-jp organizer

4. 4.

   2016-08-12

5. 5.

   Release 2.0 RC https://medium.com/the-vue-point/the-state-of-vue-1655e10a340a#.ehysn8dbw

6. 6.

   Documentation: WIP http://rc.vuejs.org

7. 7.

   Vue.js 2.0 Coming soon … Please Wait

8. 8.

   Vue.js ͷঢ়گ

9. 9.

   https://medium.com/@sachagreif/the-state-of-javascript-front-end-frameworks-1a2d8a61510#.lno4xgowe ࠷ۙ౤ߘ͞Εͨϒϩά

10. 10.

    ৽نϢʔβʔͷֶश͍ͨ͠΋ͷ

11. 11.

    Ϣʔβʔ͕·ͨ࢖͍͍͔ͨ

12. 12.

    Vue.js΁ͷظ଴ͷߴ·Γ
 ⤴

13. 13.

    ΧϯϑΝϨϯε Πϕϯτ

14. 14.

    None
15. 15.

    Laracon US
 & Laracon EU

16. 16.

    Evan ࢯ͕ొஃʂ

17. 17.

    2.0 ͷϦϦʔε
 ଴ͪԕ͍͠Ͱ͕͢

18. 18.

    Progressive Framework

19. 19.

    Vue.js ͷॏཁͳίϯηϓτͳͷͰ ࠓ೔͸͜Εʹ͍ͭͯ࿩͠·͢

20. 20.

    ϑϨʔϜϫʔΫ

21. 21.

    None
22. 22.

    ϑϨʔϜϫʔΫ͸ಓ۩ͱͯ͠։ൃʹ͓͍ͯ ΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢Δ΋ͷͰ͸ͳ͚Ε͹ͳΒͳ͍

23. 23.

    ͔͠͠ͳ͕Β ಓ۩Ͱ͋ΔϑϨʔϜϫʔΫࣗ਎ʹ΋ ෳࡶੑ͕ଘࡏ͢Δ

24. 24.

    ࢲͨͪ͸ΞϓϦέʔγϣϯͷෳࡶੑΛ ղܾ͢ΔͨΊʹ ਖ਼͍͠ϑϨʔϜϫʔΫΛ બ୒͢Δඞཁ͕͋Δ

25. 25.

    • μογϡϘʔυܥͷΑ͏ͳෳࡶͳΞϓϦέʔγϣϯʹର ͯ͠ɺMVCͷΑ͏ͳߏ଄Խ͢Δ΋ͷΛαϙʔτ͠ͳ͍ jQuery ͷΑ͏ͳ΋ͷͰ։ൃ͢Δέʔε ෆे෼ͳύλʔϯ

26. 26.

    ෆे෼ͳύλʔϯͷϝλϑΝʔ ϚαΧϦͷΈͰϩάϋ΢εͷΑ͏ͳՈΛ ͭ͘ΔΑ͏ͳ΋ͷ

27. 27.

    • ϖϥΠνͳϥϯσΟϯάϖʔδͷΑ͏ͳΞϓϦέʔγϣ ϯʹରͯ͠ɺMeteor ͷΑ͏ͳϑϧελοΫͳ΋ͷΛඋ͑ ͨ΋ͷͰ։ൃ͢Δέʔε Overkill ύλʔϯ

28. 28.

    Overkill ύλʔϯͷϝλϑΝʔ δϟΠΞϯτφΠϑͰΓΜ͝ͷൽΛ޲͍ͯ ٯʹέΨΛ͢ΔΑ͏ͳ΋ͷ

29. 29.

    ϑϨʔϜϫʔΫͱ͍͏ಓ۩ʹ͋Δෳࡶੑ͸ ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠ े෼ʹίετΛࢧ෷͏͜ͱ͕Ͱ͖Δ΋ͷͰ ͳ͚Ε͹ͳΒͳ͍

30. 30.

    ͔͠͠ͳ͕Β ࣮ࡍʹݱ৔Ͱ͸

31. 31.

    Ϗδωε͸ઈ͑ͣมԽ͢Δ • Ϣʔβʔཁ๬ͷػೳ֦ுͳͲʹରԠ͢ΔͨΊɺΞϓϦέʔ γϣϯ΋੒௕͠ͳ͚Ε͹ͳΒͳ͍ • αϒϓϩδΣΫτ͕੒௕ͨͨ͠ΊɺϝΠϯϓϩδΣΫτ ͔ΒεϐϯΞ΢τͨ͠৔߹Ͱ΋ɺ੎͍ΛࣦΘͣՃ଎͞ ͤͳ͚Ε͹ͳΒͳ͍ • αʔϏεͷεέʔϧΞοϓʹ͋ͨͬͯɺαʔϏεΛ෼཭

    ͭͭ͠։ൃ଎౓Λҡ࣋ͨ͠··ɺαʔϏεΛ੒௕ͤ͞ ͳ͚Ε͹ͳΒͳ͍
32. 32.

    ϑϨʔϜϫʔΫ΋ Ϗδωεʹରͯ͠ॊೈʹ ରԠͰ͖ͳΕ͚͹ͳΒͳ͍

33. 33.

    Ϗϡʔ૚ίΞ ͜Μͳײ͡Ͱελʔτͯ͠

34. 34.

    Ϗϡʔ૚ίΞ ʴ Φϓγϣϯతͳ ΞϓϦέʔγϣϯ։ൃαϙʔτϥΠϒϥϦ ن໛͕େ͖͘ͳ͖ͬͯͨ࣌ʹ

35. 35.

    αϙʔτ͢ΔϥΠϒϥϦ͕ ͳ͚Ε͹…

36. 36.

    https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz

37. 37.

    http://d.hatena.ne.jp/tomoya/20160403/1459665374

38. 38.

    ϑϩϯτΤϯυਏ͍໰୊

39. 39.

    ͜͏ͳΒͳ͍Α͏ʹ
 ΈΜͳΛ Happy ʹ͍ͨ͠ͷ͕ Evanࢯ͕ఏএ͢Δ֓೦

40. 40.

    Progressive Framework

41. 41.

    http://ejje.weblio.jp/content/progressive

42. 42.

    ΞϓϦέʔγϣϯͷ ஈ֊తͳมԽཁٻʹԠͯ͡ ໰୊ղܾͰ͖Δํ๏Λఏڙ͢Δ

43. 43.

    https://docs.google.com/presentation/d/1WnYsxRMiNEArT3xz7xXHdKeH1C-jT92VxmptghJb5Es/edit#slide=id.p

44. 44.

    • 1. Declarative Rendering • 2. Component System • 3.

    Client-Side Routing • 4. Large-Scale State Management • 5. Build System & Development Experience ྖҬΛ5ͭఆٛ
45. 45.

    Declarative Rendering

46. 46.

    • JavaScriptʹΑΔDOM ϨϯμϦϯά͸ॲཧతʹߴՁͰഁ յత • σʔλͷঢ়ଶͱDOMͷঢ়ଶΛJavaScriptͰ໋ྩతʹಉظ ͤ͞Δͷ͸໘౗ͰΤϥʔ͕ى͖΍͍͢ DOMϨϯμϦϯά

47. 47.

    • ςϯϓϨʔτͰએݴతʹهࡌ͢Δ͚ͩͰɺσʔλมߋ ͷ౎౓ɺϦΞΫςΟϒʹDOM΋ϨϯμϦϯάͯ͘͠ΕΔ • Ϣʔβʔೖྗ಺༰΋ɺσʔλʹ൓өͯ͠ಉظͯ͘͠ΕΔ એݴత&ϦΞΫςΟϒϨϯμϦϯά

48. 48.

    • script λάͰೖΕΔ͚ͩ։ൃ͢Δ͚ͩ ར༻ํ๏ <script src="vue.js"></script> <script> new Vue({ //

    ... }) </script>
49. 49.

    ϓϩτλΠϓ΍ͪΐͬͱͨ͠ ϖϥΠνతͳWebαΠτʹ͸ ͜ΕͰे෼

50. 50.

    Component System

51. 51.

    • WebαΠτ͕ஈʑେ͖͘ͳͬͯ͘ΔͱɺUIΛϞδϡʔϧ Խͯ͠࠶ར༻͢Δඞཁ͕Ͱͯ͘Δ ϞδϡʔϧԽͷඞཁੑ

52. 52.

    • Vue.js ͕ఏڙ͢Δ UI ϞδϡʔϧԽ͢Δ Component ػೳ Λར༻͢Δ͜ͱͰ࠶ར༻ՄೳʹͳΔ Component

53. 53.

    • Vue.js ͷ࡞๏ʹΑͬͯ Component Խͨ͠ΒɺςϯϓϨʔ τʹ͸ΧελϜλά (Custome Element) Λهࡌ͢Δ͚ͩ ར༻ํ๏

    <side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
54. 54.

    • ਌ࢠؒͷ Component ʹ͓͍ͯɺProps ͰσʔλΛ౉͠ɺ Events ܦ༝ͰσʔλΛड͚औΔ Component ؒͷ௨৴

55. 55.

    Component ʹΑͬͯ ϞδϡʔϧԽ͢Δ͜ͱͰ։ൃޮ཰͸ ֨ஈʹ޲্

56. 56.

    Client-Side Routing

57. 57.

    • ͞ΒͳΔϏδωεཁٻʹΑΓΞϓϦέʔγϣϯతͳϞ ϊ͕ཁٻ͞ΕΔΑ͏ʹͳΔ • Single Page Application ޲͚ͷϥΠϒϥϦͱͯ͠ vue- router

    Λఏڙ WebαΠτ͔ΒWebΞϓϦ΁
58. 58.

    Component Λ࠶ར༻͢ܗͰ ΞϓϦԽ΁ରԠՄೳ

59. 59.

    Large-Scale State Management

60. 60.

    • ͞ΒʹWebΞϓϦ͕େن໛ʹͳͬͯ͘ΔͱɺComponent ؒͰঢ়ଶڞ༗ํ๏ɺ࠶ར༻ੑ͕໰୊ͱͳͬͯ͘Δ େن໛WebΞϓϦέʔγϣϯͷ໰୊ Component Component state state ??? Component

    state
61. 61.

    • ঢ়ଶ؅ཧ޲͚ͷϥΠϒϥϦͱͯ͠ vuex Λఏڙ Flux σʔλϑϩʔΞʔΩςΫνϟ

62. 62.

    vuex Λར༻͢Δ͜ͱͰ طଘͷ Component Λ֦ு͢ΔܗͰ ঢ়ଶΛूத؅ཧ͢Δ͜ͱ͕Ͱ͖Δ

63. 63.

    Build System &
 Development Experience

64. 64.

    • WebΞϓϦέʔγϣϯΛ࡞ΔͨΊʹɺϓϩδΣΫτΛ؆ ୯ʹηοτΞοϓ͢Δੜ੒πʔϧΛఏڙ Scaffold CLI πʔϧͷఏڙ

65. 65.

    • Component Խ͢ΔͨΊͷ࢓૊Έ΋ఏڙ Single File Component

66. 66.

    Single File Component ελΠϧ ςϯϓϨʔτ εΫϦϓτ

67. 67.

    • Component & vuex पΓͷσόοάπʔϧΛ Chrome ֦ு Ͱఏڙ σόοάπʔϧ

68. 68.

    Vue.js ͕ఏڙ͢Δ։ൃαϙʔτܥͷ πʔϧΛར༻͢Δ͜ͱͰຊ࣭తͰͳ͍΋ͷʹ ΄ͱΜͲ࣌ؒΛඅ΍͞ΕΔ͜ͱͳ͘ ܧଓతͳ։ൃʹઐ೦͢Δ͜ͱ͕Ͱ͖Δ

69. 69.

    ·ͱΊ • Progressive Framework ʹ͸ 5 ͭͷྖҬ͕ఆٛ͞Ε͍ͯΔ • Progressive Framework

    ͱ͸มԽ͢ΔϏδωεͷঢ়گʹ Ԡͯ͡ɺVue.jsίΞϥΠϒϥϦͱपลϥΠϒϥϦʹΑͬ ͯɺஈ֊తʹΞϓϦέʔγϣϯΛαϙʔτͰ͖ΔϑϨʔ ϜϫʔΫͰ͋Δ
70. 70.

    vuejs-jp slack • URL
 https://vuejs-jp-slackin.herokuapp.com • Vuejs ೔ຊޠެࣜαΠτܦ༝Ͱ΋δϣΠϯͰ͖·͢
 http://jp.vuejs.org
 


71. 71.

    Thanks!