A Storybook with Angular
Marko Letic
@NisamProgramer
Slide 2
Slide 2 text
About me
• Front End Lead @AVA
• Tech Speaker @Mozilla
• PhD student @FTN
• Book reviewer @Manning specialized in JS related topics
• JS enthusiast
Slide 3
Slide 3 text
Brand book example - Foursquare
Slide 4
Slide 4 text
Brand book example - Bing
Slide 5
Slide 5 text
Brand book example - Walmart
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
“It’s through mistakes that you actually can grow.
You have to get bad in order to get good.”
- Paula Scher
Slide 10
Slide 10 text
Design system
The single source of truth which groups all the elements that
will allow the teams to design, realize and develop a product.
Slide 11
Slide 11 text
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.
Slide 12
Slide 12 text
Lightning Design System by Salesforce
Slide 13
Slide 13 text
Lightning Design System by Salesforce
Slide 14
Slide 14 text
Pros
• Framework agnostic (pure HTML/CSS/JS)
• Easy to run (usually without any http-server)
• Prototype faster
• Can extend already existing solutions (Bootstrap, Material…)
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
Storybook
• Development environment for UI components
• Browse a component library
• View different states of each component
• Interactively develop, design and test components
• Isolated environment
Slide 17
Slide 17 text
Storybook
Supported frameworks:
Used by:
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
LET’S USE STORYBOOK WITH
ANGULAR
Slide 20
Slide 20 text
Install steps
Install Angular
Install Storybook
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
DEMO TIME!
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Design modular to build modular!
Slide 27
Slide 27 text
THANK YOU!
Marko Letic
@NisamProgramer
A Storybook with Angular