Tweet
Tweet

Slide 1

Slide 1 text

SMARTER UI DEVELOPMENT Konstantin Lebedev

Slide 2

Slide 2 text

WEATHER APP

Slide 3

Slide 3 text

WEATHER APP

Slide 4

Slide 4 text

WEATHER APP

Slide 5

Slide 5 text

WEATHER APP

Slide 6

Slide 6 text

How can we test multiple visual states of a component? PROBLEM #1

Slide 7

Slide 7 text

TRAVEL APP ONBOARDING

Slide 8

Slide 8 text

TRAVEL APP ONBOARDING

Slide 9

Slide 9 text

TRAVEL APP ONBOARDING

Slide 10

Slide 10 text

TRAVEL APP ONBOARDING

Slide 11

Slide 11 text

How can we test visual states of a component that isn’t always visible on the screen? PROBLEM #2

Slide 12

Slide 12 text

STORYBOOK

Slide 13

Slide 13 text

Storybook - isolated environment to quickly develop and design UI components STORYBOOK

Slide 14

Slide 14 text

STORYBOOK

Slide 15

Slide 15 text

STORYBOOK

Slide 16

Slide 16 text

WRITING STORIES

Slide 17

Slide 17 text

STORYBOOK

Slide 18

Slide 18 text

STORYBOOK

Slide 19

Slide 19 text

STORYBOOK

Slide 20

Slide 20 text

STORY SHOTS

Slide 21

Slide 21 text

STORY-SHOTS

Slide 22

Slide 22 text

WITH STORYBOOK ● test components in isolation ● test multiple visual states ● live documentation for our UI

Slide 23

Slide 23 text

THANK YOU Konstantin Lebedev / @koss_lebedev