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

Other Decks in Technology

See All in Technology
9a883e4b99553b96d3ecf5a47aa6f233?s=48 khrd
1
660
A1792748885fe8f2555d9c718ee7ae53?s=48 joytomo
0
100
8a84268593355816432ceaf78777d585?s=48 dena_tech
0
210
0d5d8fb9cc4c06f581825f5a61d3f5f1?s=48 mizzy
3
150
Db4af41c084fb66f56725d0b3b40fb09?s=48 go5paopao
4
540
C75d933a1fe7006740250081b4c9c697?s=48 uzabasetech
2
750
5a065e7ea7c56f4b04c2271771688df3?s=48 raykataoka
9
8.7k
7ff130a0c1a4966472a4bdfaaf05e791?s=48 chandi
0
150
1bfc6e2ed04a895bb36f36b86828b689?s=48 110y
2
11k
C21becdee5cd08b34c7452276e64c1fe?s=48 yamamuteki
3
850
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
6
1.3k
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
1
280

Featured

See All Featured
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
860k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
1.4k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
329
15k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.5k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
217
16k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
120k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.5k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
775
200k
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
23
3.9k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
257
17k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
56
5.4k

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