Vue on Storybook - Speaker Deck

Vue on Storybook

by kazupon

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Who are you ?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

[PR]

Slide 5

Slide 5 text

2017-07-07

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

We are hiring!! Front-end engineer Wanted!!   Let’s building Open Innovation Platform!! http://www.cuusoo.co.jp

Slide 9

Slide 9 text

Introduction ⛩

Slide 10

Slide 10 text

What’s Storybook?

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Oops! I’m so sorry!

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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-oﬀ Commutiby based Open Source Project • May 2017 : Release Storybook 3.0 https://medium.com/storybookjs/the-storybook-story-dd3c1ab0d2ce

Slide 15

Slide 15 text

For Vue.js ?

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

2017-05-28

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Other Frameworks or Libraries !?

Slide 21

Slide 21 text

Saw Roadmap of Storybook

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

WoW!! That’s interesting!!

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Joined as Collaborator

Slide 28

Slide 28 text

How to support Vue on Storybook

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

How to render Vue Components in Preview

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

So that’s it?

Slide 34

Slide 34 text

Preview for React error-display root

Slide 35

Slide 35 text

Preview for Vue error-display root

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

DEMO

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Storybook 3.2 Coming soon …

Slide 40

Slide 40 text

Conclusion

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Thanks!