Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Storybook with Angular

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.

DaFED

February 13, 2019
Tweet

More Decks by DaFED

Other Decks in Technology

Transcript

  1. About me • Front End Lead @AVA • Tech Speaker

    @Mozilla • PhD student @FTN • Book reviewer @Manning specialized in JS related topics • JS enthusiast
  2. “It’s through mistakes that you actually can grow.
 You have

    to get bad in order to get good.” - Paula Scher
  3. Design system The single source of truth which groups all

    the elements that will allow the teams to design, realize and develop a product.
  4. 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.
  5. Pros • Framework agnostic (pure HTML/CSS/JS) • Easy to run

    (usually without any http-server) • Prototype faster • Can extend already existing solutions (Bootstrap, Material…)
  6. 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
  7. Storybook • Development environment for UI components • Browse a

    component library • View different states of each component • Interactively develop, design and test components • Isolated environment
  8. 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
  9. 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
  10. 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
  11. 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