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.
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.
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.
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:
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.
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.
Peter says the ecosystem of storybook is amazing, and it’s super easy to write plugins. Here are a few:
Learn more at storybook.js.org