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

Smarter UI Development

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

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
15
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
71
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
22

Other Decks in Technology

See All in Technology
3e66b3ccfa617b78c59d9dec865aa29f?s=48 noppefoxwolf
1
440
C983c1e22d0d19f21590b83884d9b754?s=48 apachan
0
1.5k
C58d9fc209cfdc0b822f851911110fa6?s=48 coe
4
460
179d41d0fdd38c6980de9f2ae0e4768a?s=48 9wick
0
130
4ef794bdea63fc6153845bb26bac38a2?s=48 ridwy
0
150
2f42f32689c8244280dd01d864f92079?s=48 dwchiang
0
110
Cfd6a7b025c390205d1dd8765230bca1?s=48 kiwi26
0
110
179d41d0fdd38c6980de9f2ae0e4768a?s=48 9wick
0
110
D0acab281cd715f03af84f51ebd71faa?s=48 utam0k
1
630
B4edef9fde5f33ef95409f564d21e542?s=48 trickart
3
360
3963d978958a24d83c4cedb0318aafd6?s=48 doko_w
0
100
3009eedce0d0f7ae45987a7bd8f57b85?s=48 nkjzm
0
140

Featured

See All Featured
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
448
36k
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
302
40k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
78b475797a14c84799063c7cd073962f?s=48 holman
451
140k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
404
20k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
335
29k
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
0
320
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
34
2.4k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
612
56k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
D36d2c1821af9249b69ff7f5ed60529b?s=48 tammielis
240
23k

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