Smarter UI Development

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

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

Want more?

800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
12
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
57
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
18
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
1
420
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
14
850
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
5
460
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
290
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
600
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
320
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
360
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
850
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
230

Transcript

  1. 1.

    SMARTER UI DEVELOPMENT Konstantin Lebedev

  2. 2.

    WEATHER APP

  3. 3.

    WEATHER APP

  4. 4.

    WEATHER APP

  5. 5.

    WEATHER APP

  6. 6.

    How can we test multiple visual states of a component?

    PROBLEM #1
  7. 7.

    TRAVEL APP ONBOARDING

  8. 8.

    TRAVEL APP ONBOARDING

  9. 9.

    TRAVEL APP ONBOARDING

  10. 10.

    TRAVEL APP ONBOARDING

  11. 11.

    How can we test visual states of a component that

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

    STORYBOOK

  13. 13.

    Storybook - isolated environment to quickly develop and design UI

    components STORYBOOK
  14. 14.

    STORYBOOK

  15. 15.

    STORYBOOK

  16. 16.

    WRITING STORIES

  17. 17.

    STORYBOOK

  18. 18.

    STORYBOOK

  19. 19.

    STORYBOOK

  20. 20.

    STORY SHOTS

  21. 21.

    STORY-SHOTS

  22. 22.

    WITH STORYBOOK • test components in isolation • test multiple

    visual states • live documentation for our UI
  23. 23.

    THANK YOU Konstantin Lebedev / @koss_lebedev