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

Future of Vue.js

kazupon
December 13, 2017

Future of Vue.js

Vue.jsの今後

kazupon

December 13, 2017
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

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

    View Slide

  2. ࣗݾ঺հ

    View Slide

  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

    View Slide

  4. ͸͡Ίʹ

    View Slide

  5. രൃͨ͠
    2017೥

    View Slide

  6. Google Trend

    View Slide

  7. • 2016೥
    GitHub Stars

    View Slide

  8. • 2017೥
    GitHub Stars

    View Slide

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

    View Slide

  10. VueConf 2017
    https://conf.vuejs.org

    View Slide

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

    View Slide

  12. Progressive ʹ
    ਐԽ͢ΔVue.js

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    (inheritAttrs, $attrs, $listeners)
    • ύϑΥʔϚϯεվળ

    View Slide

  17. 2017.10.13
    v2.5
    Level E
    • TypeScript ܕఆٛͷվળ
    • ͞ΒͳΔΤϥʔϋϯυϦϯάͷվળ
    • SFCͷؔ਺ܕίϯϙʔωϯτͷαϙʔτ

    View Slide

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

    View Slide

  19. View Slide

  20. StorybookͰαϙʔτ

    View Slide

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

    View Slide


  22. View Slide

  23. ͦΜͳத

    View Slide

  24. 2017.09.26

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. ࠓ೔࿩͢͜ͱ

    View Slide

  29. Vue.jsͷࠓޙ

    View Slide

  30. • Core
    • vue-test-utils
    • vue-cli
    • eslint-plugin-vue
    • vue-component-compiler
    • Style Guide
    • Cookbook
    Vue Project Roadmap

    View Slide

  31. Style Guide

    View Slide

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

    View Slide

  33. • Lead: @chrisvfritz
    • beta

    View Slide

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

    View Slide

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

    View Slide

  36. Cookbook

    View Slide

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

    View Slide

  38. • Lead: @chrisvfritz

    View Slide

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

    View Slide

  40. eslint-plugin-vue

    View Slide

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

    View Slide

  42. • Lead: @michalsnik

    @mysticatea
    • v4.0.0-beta.2

    View Slide

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

    View Slide

  44. 4.0
    Comming
    Soon…

    View Slide

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

    View Slide

  46. vue-test-utils

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. 1.0
    Comming
    Soon…

    View Slide

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

    View Slide

  54. vue-component-
    compiler

    View Slide

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

    View Slide

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

    View Slide

  57. • Lead: @znck

    @eddyerburgh
    • WIP

    View Slide

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

    View Slide

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

    View Slide

  60. vue-cli

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. • Lead: @yy990803

    @egoist
    • WIP

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    • …ͳͲ

    View Slide

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

    View Slide

  72. Core

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. όοΫϩά
    (ະఆ)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. 2018
    ΧϯϑΝϨϯε

    View Slide

  82. • Vue.js Conference Amsterdm
    • VueConf US 2018
    • Vue.js London 2018
    • VueConf EU 2018
    ͦͯ͠೔ຊ΋
    ։࠵ʹ޲͚ͯ४උதʂʂ

    View Slide

  83. ·ͱΊ

    View Slide

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

    View Slide

  85. • vue-component-compilerʹΑΓɺSFCͷί
    ϯύΠϧΛ͢ΔͨΊʹɺόϯυϥʹͱΒΘ
    Εͳ͍APIͱͯ͠ఏڙ͞ΕΔΑ͏ʹͳΔ༧

    • vue-cli 3.0 Ͱ͸ɺ࠶ઃܭ͞ΕΔ͜ͱʹΑ
    ΓɺϓϦηοτͱconfigϑΝΠϧʹΑΔɺ
    ϝϯςφϯε͠қ͘ɺ֦ுੑ͕ߴ͍ɺϓϩ
    δΣΫτ։ൃ؀ڥͷߏங͕ՄೳʹͳΔ༧ఆ
    ·ͱΊ

    View Slide

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

    View Slide

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

    View Slide

  88. One more thing …

    View Slide

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

    View Slide

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

    View Slide