Future of Vue.js

Vue.jsの今後

Transcript

1. Future of Vue.js Vue.js v-meetup #6 2017.12.13 @kazupon
2. ࣗݾ঺հ
3. kazupon Vue.js Core Team Vue.js japan users group organizer vue-i18n, vuejs/jp.vuejs.org maintainer storybook vue support member CUUSOO SYSTEM CTO @kazu_pon kazupon
4. ͸͡Ίʹ
5. രൃͨ͠ 2017೥
6. Google Trend
7. • 2016೥ GitHub Stars
8. • 2017೥ GitHub Stars
9. ॳͷެࣜ ΧϯϑΝϨϯε ։࠵
10. VueConf 2017 https://conf.vuejs.org
11. VueConf 2017 Photo Reference by Laravel-Vuejs https://www.laravel-vuejs.com/what-we-learned-at-vueconf/
12. Progressive ʹ ਐԽ͢ΔVue.js
13. 2017.02.26 v2.2 Initial D 2017.04.27 v2.3 JoJo’s Bizarre Adventure 2017.07.13 v2.4 Kill la Kill 2017.10.13 v2.5 Level E
14. 2017.02.26 v2.2 Initial D • SSRͷվળ • ΤϥʔϋϯυϦϯάͷվળ • ίϯϙʔωϯτ޲͚v-modelͷΧελϚΠζ • Provide / Inject
15. 2017.04.27 v2.3 JoJo’s Bizarre Adventure • SSRͷվળ • ඇಉظίϯϙʔωϯτͷվળ • ؔ਺ܕίϯϙʔωϯτͷվળ
16. 2017.07.13 v2.4 Kill la Kill • SSRͷϑϧରԠ • ༰қͳϥούίϯϙʔωϯτͷ࡞੒αϙʔτ
 (inheritAttrs, $attrs, $listeners) • ύϑΥʔϚϯεվળ
17. 2017.10.13 v2.5 Level E • TypeScript ܕఆٛͷվળ • ͞ΒͳΔΤϥʔϋϯυϦϯάͷվળ • SFCͷؔ਺ܕίϯϙʔωϯτͷαϙʔτ
18. ͞Βʹ ൟӫ͢Δ ΤίγεςϜ
20. StorybookͰαϙʔτ
21. ͞ΒͳΔڧྗͳ ίΞνʔϜϝϯό ͷδϣΠϯ
22. …
23. ͦΜͳத
24. 2017.09.26
25. AMA with Vue.js Team https://hashnode.com/ama/with-vuejs-team-cj7itlrki03ae62wuv2r2005s
26. Vue.jsίΞνʔϜ͚ͩͲ ͳΜ͔ฉ͖͍ͨ͜ͱ͋ Δʁ
27. কདྷʹΉ͚ͨϩʔυϚοϓΛެ։ https://github.com/vuejs/roadmap
28. ࠓ೔࿩͢͜ͱ
29. Vue.jsͷࠓޙ
30. • Core • vue-test-utils • vue-cli • eslint-plugin-vue • vue-component-compiler • Style Guide • Cookbook Vue Project Roadmap
31. Style Guide
32. ެࣜελΠϧΨΠυ • Vue.jsϓϩδΣΫτͰͷ։ൃͷखॿ ͚ͱͳΔελΠϧΨΠυΛఏڙ
33. • Lead: @chrisvfritz • beta
34. ެࣜυΩϡϝϯτʹެ։ࡁΈ
35. ESLintͱͷΠϯςάϨʔγϣϯ • eslint-plugin-vueͰࣗಈνΣοΫͰ ͖ΔΑ͏ڞಉ࡞ۀத https://github.com/vuejs/eslint-plugin-vue/issues/77
36. Cookbook
37. ެࣜΫοΫϒοΫ • Α͋͘Δམͱ݀͠΁ͷରॲ͕ॻ͔ ΕͨυΩϡϝϯτ
38. • Lead: @chrisvfritz
39. ணख͸͜Ε͔Β • ελΠϧΨΠυͷରԠ͕͋ΔͨΊɺ ·ͩ࡞ۀʹணखͰ͖͍ͯͳ͍ • ͜Ε͔Βணख͢Δͱ͍ͬͨঢ়گ
40. eslint-plugin-vue
41. ެࣜESLintϓϥάΠϯ • Vue.js޲͚ͷίʔυΛϦϯτͯ͘͠ ΕΔϓϥάΠϯ
42. • Lead: @michalsnik
 @mysticatea • v4.0.0-beta.2
43. ެࣜελΠϧΨΠυରԠத https://twitter.com/michalsnik/status/934340597720154113
44. 4.0 Comming Soon…
45. ಺༰ʹ͍ͭͯ͸ ͜ͷޙͷൃදͰʂ
46. vue-test-utils
47. ୯ମςετ޲͚ͷެࣜϥΠϒϥϦ
48. എܠ https://github.com/vuejs/vue-test-utils/issues/1
49. • Lead: @eddyerburgh • v1.0.0-beta.7
50. • ίϛϡχςΟʹΑΔ຋༁Ͱ֤ݴޠ޲ ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔ υΩϡϝϯτ https://vue-test-utils.vuejs.org/
51. 1.0 ʹ޲͚ͨ࠷ऴௐ੔ https://github.com/vuejs/vue-test-utils/issues/246
52. 1.0 Comming Soon…
53. ಺༰ʹ͍ͭͯ͸ ͜ͷޙͷൃදͰʂ
54. vue-component- compiler
55. SFCͷίϯύΠϥ • όϯυϥʹͱΒΘΕͳ͍APIΛϥΠ ϒϥϦͱͯ͠ఏڙ vue-component-compiler API
56. ҎԼͷ՝୊ղܾΛ໨త • SFCίϯύΠϧϩδοΫͷॏෳͷআڈ • ϝϯςφϯεͷվળ vue-loader rollup-plugin-vue vueify parse / compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
57. • Lead: @znck
 @eddyerburgh • WIP
58. • ࠷ॳͷ࣮૷͸େମऴΘ͍ͬͯΔঢ়گ ݱࡏϨϏϡʔ଴ͪ https://github.com/vuejs/vue-component-compiler/pull/29
59. Parcel΋ରԠ͢Δ͔΋ https://github.com/parcel-bundler/parcel/issues/5
60. vue-cli
61. VueϓϩδΣΫτߏஙCLI • ݱࡏͷ࠷৽όʔδϣϯ: v2.9.2 ָʹ։ൃ؀ڥ ΛߏஙͰ͖ͯ ͙͢ʹ։ൃͰ ͖Δʂ
62. ͔͠͠ ͍Ζ͍Ζͱ ໰୊͕͋Δ
63. ςϯϓϨʔτͷϝϯς͕େม • ϓϩδΣΫτͷมߋͱςϯϓϨʔ τͷมߋͷಉظ • ςϯϓϨʔτͷόʔδϣϯ؅ཧ
64. CLI͔Β໰ΘΕΔ࣭໰߲໨ • ஌ࣝΛཁ͢Δ΋ͷ͕͋ͬͯॳ৺ऀʹ༏͠ ͘ͳ͍ • ࣭໰߲໨͕ଟ͗͢Δ ESLintʁ Jestʁ NightWatchʁ … ޙͲΜ͚ͩ ͋Δͷʁ
65. 3.0Ͱ࠶ઃܭ • ͜͏ͨ͠໰୊ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589
66. • Lead: @yy990803
 @egoist • WIP
67. 3.0 ΞʔΩςΫνϟ ⚠ݱࡏ·ͩઃܭதͷஈ֊ͷ΋ͷͰ͢ʂ
68. ৽͍͠ΞʔΩςΫνϟ • ϓϦηοτϞσϧͷ࠾༻ • ίϚϯυͰΦϯσϚϯυͰϓϦηο τͷ௥ՃՄೳ • ϓϦηοτຖʹnpmͰ؅ཧՄೳ • ϓϦηοτଆͰscaffoldingΛఆٛ Մೳ
69. ৽͍͠ΞʔΩςΫνϟ • ϕʔε͸webpackςϯϓϨʔτ • browserify͸ഇࢭ͍ͯ͘͠༧ఆ
70. ৽͍͠ΞʔΩςΫνϟ • configϑΝΠϧʹΑΔूத؅ཧ • ؀ڥม਺ • APIϓϩΩγ • webpack-chainʹΑΔ௿Ϩϕϧઃ ఆ • …ͳͲ
71. ৽͍͠ΞʔΩςΫνϟ • vue-cliͷ෼཭ • ैདྷͷ vue build ͸ΞυΦϯ͢Δܗ Ͱར༻Ͱ͖ΔΑ͏ʹ͢Δ
72. Core
73. • Lead: @yy990803 • called `2.x-next` • 2018 early Vue 3.0 ?
74. • େ͖ͳഁյతมߋ͸͠ͳ͍༧ఆ • 2.xܥͱฏߦͯ͠ϝϯς͞ΕΔ APIͷޓ׵ੑͱ2.x 2.x 2.x-next 2.5
75. • ωΠςΟϒʹES2015Λαϙʔτ͢ Δϒϥ΢βͷΈʂ ର৅ϒϥ΢β
76. • ES2015 Proxy Ͱॻ͖׵͑Δ༧ఆ ϦΞΫςΟϒγεςϜͷվળ 2.x 2.x-next Ҏ߱
77. όοΫϩά (ະఆ)
78. • SFC͔Βม׵͢ΔCLIΛαϙʔτ͢Δ͔΋͠Εͳ͍ WebComponentsରԠ https://www.youtube.com/watch?v=wZN_FtZRYC8&t=2397s
79. • Class Fields ͱ Decorators ͕ stage-4ʹͳͬͨͱ ͖ରԠ͢Δ͔΋͠Εͳ͍ ΫϥεϕʔεͷAPIఏڙ
80. • WebAssemblyଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ʹ ͳͬͨΒ࢖͏͔΋͠Εͳ͍ WebAssemblyରԠ https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md
81. 2018 ΧϯϑΝϨϯε
82. • Vue.js Conference Amsterdm • VueConf US 2018 • Vue.js London 2018 • VueConf EU 2018 ͦͯ͠೔ຊ΋ ։࠵ʹ޲͚ͯ४උதʂʂ
83. ·ͱΊ
84. • ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹ Αͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ • ελΠϧΨΠυɺࠓޙΫοΫϒοΫʹΑΓ ͞ΒʹυΩϡϝϯτ͕ॆ࣮͍ͯ͘͠ • vue-test-utilsɺeslint-plugin-vue͸ɺͦΖͦ Ζਖ਼ࣜϦϦʔε͞ΕΔ ·ͱΊ
85. • vue-component-compilerʹΑΓɺSFCͷί ϯύΠϧΛ͢ΔͨΊʹɺόϯυϥʹͱΒΘ Εͳ͍APIͱͯ͠ఏڙ͞ΕΔΑ͏ʹͳΔ༧ ఆ • vue-cli 3.0 Ͱ͸ɺ࠶ઃܭ͞ΕΔ͜ͱʹΑ ΓɺϓϦηοτͱconfigϑΝΠϧʹΑΔɺ ϝϯςφϯε͠қ͘ɺ֦ுੑ͕ߴ͍ɺϓϩ δΣΫτ։ൃ؀ڥͷߏங͕ՄೳʹͳΔ༧ఆ ·ͱΊ
86. • Vue ίΞͷ2.x-nextͰ͸ɺAPIͷޓ׵ੑ͕อ ͨΕͭͭɺվળ͞ΕͨϦΞΫςΟϒγες Ϝ͕ఏڙ͞ΕΔ༧ఆ • ͨͩ͠ɺݱ࣌఺Ͱ͸αϙʔτର৅ͱͳΔϒ ϥ΢β͸ωΠςΟϒʹES2015Λαϙʔτ ͍ͯ͠Δ΋ͷͷΈ͕ର৅༧ఆ ·ͱΊ
87. Vue.jsͷϛογϣϯ ։ൃମݧΛΑ͘͢ΔͨΊʹ ࠓޙ΋औΓ૊ΜͰ͍͘
88. One more thing …
89. • 2018೥3݄·ͨ͸4݄։࠵༧ఆ • teratail͞Μαϙʔτ Vue.jsॳ৺ऀ޲͚ϋϯζΦϯ ͜Μͳײ͡Ͱू·ͬͯ΍Γ·͢ʂ (React.jsͷ࣌ͷ༷ࢠ)
90. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ