Slide 1

Slide 1 text

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