Future of Vue.js

Transcript

1. 1.

   Future of Vue.js Vue.js v-meetup #6 2017.12.13 @kazupon

2. 2.

   ࣗݾ঺հ

3. 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. 4.

   ͸͡Ίʹ

5. 5.

   രൃͨ͠ 2017೥

6. 6.

   Google Trend

7. 7.

   • 2016೥ GitHub Stars

8. 8.

   • 2017೥ GitHub Stars

9. 9.

   ॳͷެࣜ ΧϯϑΝϨϯε ։࠵

10. 10.

    VueConf 2017 https://conf.vuejs.org

11. 11.

    VueConf 2017 Photo Reference by Laravel-Vuejs https://www.laravel-vuejs.com/what-we-learned-at-vueconf/

12. 12.

    Progressive ʹ ਐԽ͢ΔVue.js

13. 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. 14.

    2017.02.26 v2.2 Initial D • SSRͷվળ • ΤϥʔϋϯυϦϯάͷվળ • ίϯϙʔωϯτ޲͚v-modelͷΧελϚΠζ

    • Provide / Inject
15. 15.

    2017.04.27 v2.3 JoJo’s Bizarre Adventure • SSRͷվળ • ඇಉظίϯϙʔωϯτͷվળ •

    ؔ਺ܕίϯϙʔωϯτͷվળ
16. 16.

    2017.07.13 v2.4 Kill la Kill • SSRͷϑϧରԠ • ༰қͳϥούίϯϙʔωϯτͷ࡞੒αϙʔτ
 (inheritAttrs,

    $attrs, $listeners) • ύϑΥʔϚϯεվળ
17. 17.

    2017.10.13 v2.5 Level E • TypeScript ܕఆٛͷվળ • ͞ΒͳΔΤϥʔϋϯυϦϯάͷվળ •

    SFCͷؔ਺ܕίϯϙʔωϯτͷαϙʔτ
18. 18.

    ͞Βʹ ൟӫ͢Δ ΤίγεςϜ

19. 19.

    None
20. 20.

    StorybookͰαϙʔτ

21. 21.

    ͞ΒͳΔڧྗͳ ίΞνʔϜϝϯό ͷδϣΠϯ

22. 22.

    …

23. 23.

    ͦΜͳத

24. 24.

    2017.09.26

25. 25.

    AMA with Vue.js Team https://hashnode.com/ama/with-vuejs-team-cj7itlrki03ae62wuv2r2005s

26. 26.

    Vue.jsίΞνʔϜ͚ͩͲ ͳΜ͔ฉ͖͍ͨ͜ͱ͋ Δʁ

27. 27.

    কདྷʹΉ͚ͨϩʔυϚοϓΛެ։ https://github.com/vuejs/roadmap

28. 28.

    ࠓ೔࿩͢͜ͱ

29. 29.

    Vue.jsͷࠓޙ

30. 30.

    • Core • vue-test-utils • vue-cli • eslint-plugin-vue • vue-component-compiler

    • Style Guide • Cookbook Vue Project Roadmap
31. 31.

    Style Guide

32. 32.

    ެࣜελΠϧΨΠυ • Vue.jsϓϩδΣΫτͰͷ։ൃͷखॿ ͚ͱͳΔελΠϧΨΠυΛఏڙ

33. 33.

    • Lead: @chrisvfritz • beta

34. 34.

    ެࣜυΩϡϝϯτʹެ։ࡁΈ

35. 35.

    ESLintͱͷΠϯςάϨʔγϣϯ • eslint-plugin-vueͰࣗಈνΣοΫͰ ͖ΔΑ͏ڞಉ࡞ۀத https://github.com/vuejs/eslint-plugin-vue/issues/77

36. 36.

    Cookbook

37. 37.

    ެࣜΫοΫϒοΫ • Α͋͘Δམͱ݀͠΁ͷରॲ͕ॻ͔ ΕͨυΩϡϝϯτ

38. 38.

    • Lead: @chrisvfritz

39. 39.

    ணख͸͜Ε͔Β • ελΠϧΨΠυͷରԠ͕͋ΔͨΊɺ ·ͩ࡞ۀʹணखͰ͖͍ͯͳ͍ • ͜Ε͔Βணख͢Δͱ͍ͬͨঢ়گ

40. 40.

    eslint-plugin-vue

41. 41.

    ެࣜESLintϓϥάΠϯ • Vue.js޲͚ͷίʔυΛϦϯτͯ͘͠ ΕΔϓϥάΠϯ

42. 42.

    • Lead: @michalsnik
 @mysticatea • v4.0.0-beta.2

43. 43.

    ެࣜελΠϧΨΠυରԠத https://twitter.com/michalsnik/status/934340597720154113

44. 44.

    4.0 Comming Soon…

45. 45.

    ಺༰ʹ͍ͭͯ͸ ͜ͷޙͷൃදͰʂ

46. 46.

    vue-test-utils

47. 47.

    ୯ମςετ޲͚ͷެࣜϥΠϒϥϦ

48. 48.

    എܠ https://github.com/vuejs/vue-test-utils/issues/1

49. 49.

    • Lead: @eddyerburgh • v1.0.0-beta.7

50. 50.

    • ίϛϡχςΟʹΑΔ຋༁Ͱ֤ݴޠ޲ ͚ʹυΩϡϝϯτ͕΄΅ἧ͍ͬͯΔ υΩϡϝϯτ https://vue-test-utils.vuejs.org/

51. 51.

    1.0 ʹ޲͚ͨ࠷ऴௐ੔ https://github.com/vuejs/vue-test-utils/issues/246

52. 52.

    1.0 Comming Soon…

53. 53.

    ಺༰ʹ͍ͭͯ͸ ͜ͷޙͷൃදͰʂ

54. 54.

    vue-component- compiler

55. 55.

    SFCͷίϯύΠϥ • όϯυϥʹͱΒΘΕͳ͍APIΛϥΠ ϒϥϦͱͯ͠ఏڙ vue-component-compiler API

56. 56.

    ҎԼͷ՝୊ղܾΛ໨త • SFCίϯύΠϧϩδοΫͷॏෳͷআڈ • ϝϯςφϯεͷվળ vue-loader rollup-plugin-vue vueify parse /

    compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
57. 57.

    • Lead: @znck
 @eddyerburgh • WIP

58. 58.

    • ࠷ॳͷ࣮૷͸େମऴΘ͍ͬͯΔঢ়گ ݱࡏϨϏϡʔ଴ͪ https://github.com/vuejs/vue-component-compiler/pull/29

59. 59.

    Parcel΋ରԠ͢Δ͔΋ https://github.com/parcel-bundler/parcel/issues/5

60. 60.

    vue-cli

61. 61.

    VueϓϩδΣΫτߏஙCLI • ݱࡏͷ࠷৽όʔδϣϯ: v2.9.2 ָʹ։ൃ؀ڥ ΛߏஙͰ͖ͯ ͙͢ʹ։ൃͰ ͖Δʂ

62. 62.

    ͔͠͠ ͍Ζ͍Ζͱ ໰୊͕͋Δ

63. 63.

    ςϯϓϨʔτͷϝϯς͕େม • ϓϩδΣΫτͷมߋͱςϯϓϨʔ τͷมߋͷಉظ • ςϯϓϨʔτͷόʔδϣϯ؅ཧ

64. 64.

    CLI͔Β໰ΘΕΔ࣭໰߲໨ • ஌ࣝΛཁ͢Δ΋ͷ͕͋ͬͯॳ৺ऀʹ༏͠ ͘ͳ͍ • ࣭໰߲໨͕ଟ͗͢Δ ESLintʁ Jestʁ NightWatchʁ …

    ޙͲΜ͚ͩ ͋Δͷʁ
65. 65.

    3.0Ͱ࠶ઃܭ • ͜͏ͨ͠໰୊ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589

66. 66.

    • Lead: @yy990803
 @egoist • WIP

67. 67.

    3.0 ΞʔΩςΫνϟ ⚠ݱࡏ·ͩઃܭதͷஈ֊ͷ΋ͷͰ͢ʂ

68. 68.

    ৽͍͠ΞʔΩςΫνϟ • ϓϦηοτϞσϧͷ࠾༻ • ίϚϯυͰΦϯσϚϯυͰϓϦηο τͷ௥ՃՄೳ • ϓϦηοτຖʹnpmͰ؅ཧՄೳ • ϓϦηοτଆͰscaffoldingΛఆٛ

    Մೳ
69. 69.

    ৽͍͠ΞʔΩςΫνϟ • ϕʔε͸webpackςϯϓϨʔτ • browserify͸ഇࢭ͍ͯ͘͠༧ఆ

70. 70.

    ৽͍͠ΞʔΩςΫνϟ • configϑΝΠϧʹΑΔूத؅ཧ • ؀ڥม਺ • APIϓϩΩγ • webpack-chainʹΑΔ௿Ϩϕϧઃ ఆ

    • …ͳͲ
71. 71.

    ৽͍͠ΞʔΩςΫνϟ • vue-cliͷ෼཭ • ैདྷͷ vue build ͸ΞυΦϯ͢Δܗ Ͱར༻Ͱ͖ΔΑ͏ʹ͢Δ

72. 72.

    Core

73. 73.

    • Lead: @yy990803 • called `2.x-next` • 2018 early Vue

    3.0 ?
74. 74.

    • େ͖ͳഁյతมߋ͸͠ͳ͍༧ఆ • 2.xܥͱฏߦͯ͠ϝϯς͞ΕΔ APIͷޓ׵ੑͱ2.x 2.x 2.x-next 2.5

75. 75.

    • ωΠςΟϒʹES2015Λαϙʔτ͢ Δϒϥ΢βͷΈʂ ର৅ϒϥ΢β

76. 76.

    • ES2015 Proxy Ͱॻ͖׵͑Δ༧ఆ ϦΞΫςΟϒγεςϜͷվળ 2.x 2.x-next Ҏ߱

77. 77.

    όοΫϩά (ະఆ)

78. 78.

    • SFC͔Βม׵͢ΔCLIΛαϙʔτ͢Δ͔΋͠Εͳ͍ WebComponentsରԠ https://www.youtube.com/watch?v=wZN_FtZRYC8&t=2397s

79. 79.

    • Class Fields ͱ Decorators ͕ stage-4ʹͳͬͨͱ ͖ରԠ͢Δ͔΋͠Εͳ͍ ΫϥεϕʔεͷAPIఏڙ

80. 80.

    • WebAssemblyଆ͔ΒDOMΞΫηεͰ͖ΔΑ͏ʹ ͳͬͨΒ࢖͏͔΋͠Εͳ͍ WebAssemblyରԠ https://github.com/WebAssembly/gc/blob/master/proposals/gc/Overview.md

81. 81.

    2018 ΧϯϑΝϨϯε

82. 82.

    • Vue.js Conference Amsterdm • VueConf US 2018 • Vue.js

    London 2018 • VueConf EU 2018 ͦͯ͠೔ຊ΋ ։࠵ʹ޲͚ͯ४උதʂʂ
83. 83.

    ·ͱΊ

84. 84.

    • ݱࡏɺίΞνʔϜ&ϓϩδΣΫτମ੍ʹ Αͬͯ։ൃ͕ਐΊΒΕ͍ͯΔ • ελΠϧΨΠυɺࠓޙΫοΫϒοΫʹΑΓ ͞ΒʹυΩϡϝϯτ͕ॆ࣮͍ͯ͘͠ • vue-test-utilsɺeslint-plugin-vue͸ɺͦΖͦ Ζਖ਼ࣜϦϦʔε͞ΕΔ ·ͱΊ

85. 85.

    • vue-component-compilerʹΑΓɺSFCͷί ϯύΠϧΛ͢ΔͨΊʹɺόϯυϥʹͱΒΘ Εͳ͍APIͱͯ͠ఏڙ͞ΕΔΑ͏ʹͳΔ༧ ఆ • vue-cli 3.0 Ͱ͸ɺ࠶ઃܭ͞ΕΔ͜ͱʹΑ ΓɺϓϦηοτͱconfigϑΝΠϧʹΑΔɺ

    ϝϯςφϯε͠қ͘ɺ֦ுੑ͕ߴ͍ɺϓϩ δΣΫτ։ൃ؀ڥͷߏங͕ՄೳʹͳΔ༧ఆ ·ͱΊ
86. 86.

    • Vue ίΞͷ2.x-nextͰ͸ɺAPIͷޓ׵ੑ͕อ ͨΕͭͭɺվળ͞ΕͨϦΞΫςΟϒγες Ϝ͕ఏڙ͞ΕΔ༧ఆ • ͨͩ͠ɺݱ࣌఺Ͱ͸αϙʔτର৅ͱͳΔϒ ϥ΢β͸ωΠςΟϒʹES2015Λαϙʔτ ͍ͯ͠Δ΋ͷͷΈ͕ର৅༧ఆ ·ͱΊ

87. 87.

    Vue.jsͷϛογϣϯ ։ൃମݧΛΑ͘͢ΔͨΊʹ ࠓޙ΋औΓ૊ΜͰ͍͘

88. 88.

    One more thing …

89. 89.

    • 2018೥3݄·ͨ͸4݄։࠵༧ఆ • teratail͞Μαϙʔτ Vue.jsॳ৺ऀ޲͚ϋϯζΦϯ ͜Μͳײ͡Ͱू·ͬͯ΍Γ·͢ʂ (React.jsͷ࣌ͷ༷ࢠ)

90. 90.

    ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ