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

Vue on Storybook

kazupon
June 27, 2017

Vue on Storybook

Node gakuen #26 in Japan

kazupon

June 27, 2017
Tweet

More Decks by kazupon

Other Decks in Programming

Transcript

  1. Vue on Storybook
    Node Gakuen #26
    2017-06-28 @kazupon

    View full-size slide

  2. Who are you ?

    View full-size slide

  3. kazupon
    Vue.js Core Team
    Vue.js japan users group organizer
    vue-i18n, vue docs maintainer
    CUUSOO SYSTEM CTO
    @kazu_pon kazupon

    View full-size slide

  4. Vue.js v-meetup #4
    https://vuejs-meetup.connpass.com/event/58071/

    View full-size slide

  5. Reporting about VueConf
    https://conf.vuejs.org

    View full-size slide

  6. We are hiring!!
    Front-end engineer Wanted!!

    Let’s building
    Open Innovation Platform!!
    http://www.cuusoo.co.jp

    View full-size slide

  7. Introduction

    View full-size slide

  8. What’s Storybook?

    View full-size slide

  9. Oops!
    I’m so sorry!

    View full-size slide

  10. What’s Storybook?
    https://storybook.js.org

    View full-size slide

  11. Storybook histories
    • Apr 2016 : Release “React Storybook” (Storybook 1.0)
    • Sep 2016 : Release as “Storybook” (Storybook 2.0)
    • Dec 2016 : Kadira Shut Down
    • Jan 2017 : Storybook development Idle
    • Mar 2017 : Provocative GitHub Issue #731
    • Apr 2017 : Kick-off Commutiby based Open Source Project
    • May 2017 : Release Storybook 3.0
    https://medium.com/storybookjs/the-storybook-story-dd3c1ab0d2ce

    View full-size slide

  12. For Vue.js ?

    View full-size slide

  13. vue-play
    • Inspired by Storybook
    https://github.com/vue-play

    View full-size slide

  14. Posted issue #64 on vue-play
    https://github.com/vue-play/vue-play/issues/64

    View full-size slide

  15. Other Frameworks
    or
    Libraries !?

    View full-size slide

  16. Saw Roadmap of Storybook

    View full-size slide

  17. WoW!!
    That’s interesting!!

    View full-size slide

  18. Feature Request on Storybook
    https://github.com/storybooks/storybook/issues/1262

    View full-size slide

  19. Need to help!
    https://twitter.com/left_pad/status/874273519764463618

    View full-size slide

  20. Joined as Collaborator

    View full-size slide

  21. How to support
    Vue
    on Storybook

    View full-size slide

  22. Storybook Architecture
    Preview
    (iframe)
    Manager
    2 Entry Points !!
    podda
    (store)
    store

    View full-size slide

  23. Render preview via postMessage
    Preview
    (iframe)
    Manager
    podda
    (store)
    store
    3. postMessage
    1. Select
    2. handle story
    4. get story
    5. render
    component

    View full-size slide

  24. How to render
    Vue Components
    in Preview

    View full-size slide

  25. Replace React to Vue
    Preview
    (iframe)
    Manager
    podda
    (store)
    store

    View full-size slide

  26. So that’s it?

    View full-size slide

  27. Preview for React
    error-display
    root

    View full-size slide

  28. Preview for Vue
    error-display
    root

    View full-size slide

  29. https://twitter.com/kazu_pon/status/876482321578303488

    View full-size slide

  30. Addon are supported?
    • Current Support addons:
    • addon-actions
    • addon-links
    • addon-knobs
    • addon-notes
    • In other addons, will be supported since 3.2

    View full-size slide

  31. Storybook 3.2
    Coming soon …

    View full-size slide

  32. Conclusion
    • Since Storybook 3.2, you'll be able to use the
    Vue components.
    • You’ll be able to accelerate development
    efficiency.
    • I have some ideas of Storybook for Vue.
    • I’ll try to contribution as Storybook team
    member.

    View full-size slide