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

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

Other Decks in Technology

See All in Technology
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
1
390
67683b0a8d24009c731787b49881a9de?s=48 tomuro
0
320
E10d51de51c08e913216385be87dc1ca?s=48 pongzu
2
290
D0f5daa7cc3a26140c06ea29e5e235cc?s=48 noriyukitakei
13
7.3k
E53046bb9794560f541fcf2cf0b9d526?s=48 sayokomiura
0
320
8d5ec86449745c31872afc6efdaf2f0a?s=48 freedom_tk
1
230
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
120
Ad22fcf5773b906c08330f4d57242212?s=48 inductor
0
430
93951dd323433ad39f5bc635cc686f96?s=48 yusuketakagi
4
1.4k
966e29b84ae7dbde170f66b0bc75b7a6?s=48 ishiayaya
PRO
1
250
D8e79ab09f15e69d600c00131bf7d2a9?s=48 yfutamura
0
730
98a2aff83d5731c9e153a3f221fc08ab?s=48 kazkanda
0
250

Featured

See All Featured
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
118
4.9k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
120k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
147
6.7k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
683
180k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.6k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.7k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
23
1.3k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
Ecdea9b9714877b86cee08458f085481?s=48 trallard
17
900
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
630
48k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
409
58k

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