The Progressive Framework

Transcript

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

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

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

4. 2016-08-12

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

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

7. Vue.js 2.0 Coming soon … Please Wait

8. Vue.js ͷঢ়گ

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

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

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

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

13. ΧϯϑΝϨϯε Πϕϯτ

14. None

15. Laracon US
 & Laracon EU

16. Evan ࢯ͕ొஃʂ

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

18. Progressive Framework

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

20. ϑϨʔϜϫʔΫ

21. None

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

38. ϑϩϯτΤϯυਏ͍໰୊

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

40. Progressive Framework

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

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

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

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

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

45. Declarative Rendering

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

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

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

    ... }) </script>

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

50. Component System

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

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

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

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

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

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

56. Client-Side Routing

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

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

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

59. Large-Scale State Management

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

    state

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

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

63. Build System &
 Development Experience

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

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

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

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

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

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

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

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


71. Thanks!