Future of 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. ͞Βʹ ൟӫ͢Δ ΤίγεςϜ

19. None

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. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ