The Progressive Framework

gotanda.js #5 in toreta
progressive framework for japanese

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. ΧϯϑΝϨϯε Πϕϯτ
15. Laracon US
 & Laracon EU
16. Evan ࢯ͕ొஃʂ
17. 2.0 ͷϦϦʔε
 ଴ͪԕ͍͠Ͱ͕͢
18. Progressive Framework
19. Vue.js ͷॏཁͳίϯηϓτͳͷͰ ࠓ೔͸͜Εʹ͍ͭͯ࿩͠·͢
20. ϑϨʔϜϫʔΫ
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!