VueConf US 2018

Talks

1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js

CJ

25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

A Short Synopsis of Vue Storybook

A Short Synopsis of Vue Storybook

Peter Finn

Peter is a UI Engineer at SalesLoft in Atlanta where he started the Atlanta Vue.js meetup. In his talk he shows how using Storybook makes it easy to create a Design System for your application, and do visual unit testing.

Design Systems

Peter thinks responsible Vue developers need to speak the language of design. A design system is a series of design components that can be reused in different combinations. They create a common language between designers, give a productivity boost, and help designers and developers speak the same language.

For example, here is MailChimp’s design system and here’s Atlassian’s design system.
A design system is like a living Style Guide, which contains all the reusable components.

What is Storybook?

Storybook is a UI development environment. You get started with it by writing stories like you see here:

As you can see, it’s a way to write code that documents. Once you run Storybook it shows up in the web interface:

In the web interface you can see all the different use-cases for each component. This also allows designers / developers to try out your design before I decide if I want to use it (see the React Date Picker).

As of July 2017 you can now use Storybook with Vue.

Storybook Driven Development

Using Storybook building Vue applications starts to change. Peter thinks of it as Test Driven Development with your eyes AKA Visual Unit Testing. However, Visual Unit Testing is more fun to do, and it’s just two steps:

  1. Write stories that represent all of the different states of your component.
  2. Make each story work.

If you like, you can even use a Storybook plugin to write actual Jest unit tests around your Visual Unit Tests. Storybook allows you to write documentation first and test component visuals inside a sandbox. Essentially you’re documenting, testing, and developing at the same time.

How we use Storybook

At SalesLoft they have a Ruby on Rails API. Originally they had an independent Style Guide that had to be updated manually every time an update was made to the code. Storybook, on the other hand, allows you to render the code in real time inside the app, not independent of it.

This makes it easier than ever to enforce design standards, and have less chaos in your code.

Peter says sharing code has never been easier as there’s less reinventing the wheel. No longer are people creating 5 different versions of drop down menus. In the video peter walked through a bunch of visual demos showing all the functionality of Storybook.

The Storybook Ecosystem is Thriving

Peter says the ecosystem of storybook is amazing, and it’s super easy to write plugins. Here are a few:

  • Storybook Info allows you to display other types of documentation.
  • Storybook Knobs gives you toggles and knobs so you can test without having to create new stories.
  • Storybook Jest, brings Jest unit testing into Storybook.
  • Storyshots, which allows you to create automatic Jest Snapshots.

Learn more at storybook.js.org