Bridging the gap between UX and development – A Storybook
- 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
- 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