Pro Yearly is on sale from $80 to $50! »

A Storybook with Angular

C1d9295b73069d0182d61895048713d8?s=47 DaFED
February 13, 2019

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.

C1d9295b73069d0182d61895048713d8?s=128

DaFED

February 13, 2019
Tweet

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

  6. None
  7. None
  8. None
  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
  22. None
  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