Smarter UI Development

800c1a87c30c83ccc214e220b09e4def?s=47 Konstantin
October 03, 2018
Technology
0
11

Smarter UI Development

In this short presentation, we explore how we can build UI "the smart way" using StoryBook.

800c1a87c30c83ccc214e220b09e4def?s=128

Konstantin

October 03, 2018
Tweet

More Decks by Konstantin

See All by Konstantin
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
13
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
60
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
19

Other Decks in Technology

See All in Technology
26173c2f52b5aa5d06e6806c7a9478d3?s=48 laprasdrum
0
350
E2640ce3612d9e7848dc957b519d8ca0?s=48 polar3130
2
240
344128574661d939ea4cfe969823b774?s=48 syamauchi
0
120
Cb7edd153cf503f44c727b73647558bf?s=48 tetsuroito
0
1k
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2k
Cbc297b07593321e52c75a9ebcc0f843?s=48 jacopen
5
660
39adbc0cddb8c0ea8470c80248e9e71b?s=48 hyodol2513
2
480
Ae4ace6ba2b695fd37e4121faef66b43?s=48 katsushun89
0
210
9df0566fad9c9ca3bf669917848878fe?s=48 i35_267
2
120
81603b1fb3b31483780be0700ed183e8?s=48 gabidavila
0
230
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
3
280
11b879ad001638b95dd62331eed65505?s=48 fortegp05
0
250

Featured

See All Featured
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
330
29k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
236
23k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
308
21k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
144
19k
E13c31390e0369fcd5972292ce0e7b92?s=48 jnunemaker
PRO
40
4.3k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1020
360k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
18
900
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
104
10k
79acae287842acf29084005533a7fb3b?s=48 hursman
103
9.1k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
16k

Transcript

  1. SMARTER UI DEVELOPMENT Konstantin Lebedev

  2. WEATHER APP

  3. WEATHER APP

  4. WEATHER APP

  5. WEATHER APP

  6. How can we test multiple visual states of a component?

    PROBLEM #1

  7. TRAVEL APP ONBOARDING

  8. TRAVEL APP ONBOARDING

  9. TRAVEL APP ONBOARDING

  10. TRAVEL APP ONBOARDING

  11. How can we test visual states of a component that

    isn’t always visible on the screen? PROBLEM #2

  12. STORYBOOK

  13. Storybook - isolated environment to quickly develop and design UI

    components STORYBOOK

  14. STORYBOOK

  15. STORYBOOK

  16. WRITING STORIES

  17. STORYBOOK

  18. STORYBOOK

  19. STORYBOOK

  20. STORY SHOTS

  21. STORY-SHOTS

  22. WITH STORYBOOK • test components in isolation • test multiple

    visual states • live documentation for our UI

  23. THANK YOU Konstantin Lebedev / @koss_lebedev