A Storybook with Angular

DaFED#52
Speaker: Marko Letić

If we are talking about front-end development, constant struggles between design and development teams are a reality for many companies today. Although frameworks such as Angular or React provided benefits to the developers with reusing and combining built components they didn’t do much to solve this problem. The talk will cover 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. Different use-cases will be described using Angular as a framework of choice with practical examples.

Transcript

1. A Storybook with Angular 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! Marko Letic @NisamProgramer A Storybook with Angular