The main topic of this talk is a short introduction to Storybook.js, JavaScript library that allows us to create independent and interactive UX components from already existing ones, developed in frameworks such as Angular, React or Vue. Reusing the components, we create an isolated environment that can be shared within the organization and enable a collaboration between designers and developers on a whole new level. Different use-cases will be described using Angular as a framework of choice with practical examples.

1. Bridging the gap between UX and development
A Storybook
Marko Letic
@NisamProgramer

2. About me
• Front End Lead @AVA
• Tech Speaker @Mozilla
• PhD student @FTN
• Book reviewer @Manning specialized in JS related topics
• JS enthusiast

3. Brand book example - Foursquare

4. Brand book example - Bing

5. Brand book example - Walmart

9. “It’s through mistakes that you actually can grow.
You have to get bad in order to get good.”
- Paula Scher

10. Design system
The single source of truth which groups all the elements that
will allow the teams to design, realize and develop a product.

11. Building a design system
Style guide - as indicated by its name- will focus on graphic styles
(colours, fonts, illustrations…) and their usage.
Pattern library - will integrate functional components and their usage.

12. Lightning Design System by Salesforce

13. Lightning Design System by Salesforce

14. Pros
• Framework agnostic (pure HTML/CSS/JS)
• Easy to run (usually without any http-server)
• Prototype faster
• Can extend already existing solutions (Bootstrap, Material…)

15. Cons
• Incompatibility with components built in Angular, React, Vue…
• Building same components more than once
• Difficult to maintain - not in sync with the application
• Issues with inconsistency
• Ownership problems

16. Storybook
• Development environment for UI components
• Browse a component library
• View different states of each component
• Interactively develop, design and test components
• Isolated environment

17. Storybook
Supported frameworks:
Used by:

18. react-beautiful-dnd
• Accessible drag and drop for lists with React
• Specifically built for vertical and horizontal lists
• npm install react-beautiful-dnd —save
• Github
• Storybook online

19. LET’S USE STORYBOOK WITH
ANGULAR

20. Install steps
Install Angular
Install Storybook

21. Test application
• Project management tracking app
• Built in Angular (version 7)
• Using “Drag and drop” module from Angular material
• GITHUB: https://github.com/mletic/angular-pm-board
• LIVE EXAMPLE: https://mletic.github.io/angular-pm-board

23. DEMO TIME!

24. Pros
• Integrates with Angular, React, Vue and other frameworks
• Immediate feedback on changes
• Change history through code versioning
• Manual tests are easier
• Snapshot testing
• Component isolation

25. Cons
• Requires more time to implement
• Not enough resources online
• Official documentation is incomplete
• Designers need to get familiar with the used framework and the project setup

26. Design modular to build modular!

27. THANK YOU!
Bridging the gap between UX and development
A Storybook
Marko Letic
@NisamProgramer