Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of Vue.js

38bee248082f6071230de65e9d74a944?s=47 kazupon
December 13, 2017

Future of Vue.js

Vue.jsの今後

38bee248082f6071230de65e9d74a944?s=128

kazupon

December 13, 2017
Tweet

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. 2017.09.26

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

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

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

  27. ࠓ೔࿩͢͜ͱ

  28. Vue.jsͷࠓޙ

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

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

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

  32. • Lead: @chrisvfritz • beta

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

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

  35. Cookbook

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

  37. • Lead: @chrisvfritz

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

  39. eslint-plugin-vue

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

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

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

  43. 4.0 Comming Soon…

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

  45. vue-test-utils

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

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

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

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

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

  51. 1.0 Comming Soon…

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

  53. vue-component- compiler

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

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

    compile parse / compile parse / compile vue-template- compiler vue-template- compiler vue-template- compiler
  56. • Lead: @znck
 @eddyerburgh • WIP

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

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

  59. vue-cli

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

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

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

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

    ޙͲΜ͚ͩ ͋Δͷʁ
  64. 3.0Ͱ࠶ઃܭ • ͜͏ͨ͠໰୊ʹରԠ͢ΔͨΊ࠶ઃܭ https://github.com/vuejs/vue-cli/issues/589

  65. • Lead: @yy990803
 @egoist • WIP

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

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

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

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

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

  71. Core

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

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

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

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

  76. όοΫϩά (ະఆ)

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

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

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

  80. 2018 ΧϯϑΝϨϯε

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

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

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

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

    ϝϯςφϯε͠қ͘ɺ֦ுੑ͕ߴ͍ɺϓϩ δΣΫτ։ൃ؀ڥͷߏங͕ՄೳʹͳΔ༧ఆ ·ͱΊ
  85. • Vue ίΞͷ2.x-nextͰ͸ɺAPIͷޓ׵ੑ͕อ ͨΕͭͭɺվળ͞ΕͨϦΞΫςΟϒγες Ϝ͕ఏڙ͞ΕΔ༧ఆ • ͨͩ͠ɺݱ࣌఺Ͱ͸αϙʔτର৅ͱͳΔϒ ϥ΢β͸ωΠςΟϒʹES2015Λαϙʔτ ͍ͯ͠Δ΋ͷͷΈ͕ର৅༧ఆ ·ͱΊ

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

  87. One more thing …

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

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