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

Smarter UI Development

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

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
Global state management
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
16
Rematch - Redux with superpowers
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
74
Headless CMS
800c1a87c30c83ccc214e220b09e4def?s=48 konstantin_lebedev
0
24

Other Decks in Technology

See All in Technology
質の良い”カイゼン”の為の質の良い「振り返り」
Bf7fe621f4fe1615c228ef8a79b87282?s=48 shirayanagiryuji
0
110
DBRE 活動と information_schema
9513a9cc8ee9b5f2a8b4a5a914da8411?s=48 _awache
0
250
Step-by-Step MLOps and Microsoft Products
0fa6038e477031fcca028bab0efe07e3?s=48 shisyu_gaku
1
410
SPAとWebアプリケーションでCognitoの使い方はどう変わるのか？ / How do we use cognito with SPA and web applications?
7d75345644fa75da12a5e5215ac2352a?s=48 kitano_yuichi
0
330
QuickSight 触ってみた
67683b0a8d24009c731787b49881a9de?s=48 tomuro
0
350
AlexNet前夜
Be0f86176276318b4b9775d795278f7e?s=48 yushiku
PRO
0
550
VS Code Meetup #21 - もう一度知りたい基礎編 - ファイル操作、コーディングの基本編
Fc815be82d09a2e922d4000b65b9f83b?s=48 74th
0
140
塩漬けにしているMySQL 8.0.xxをバージョンアップしたくなる、ここ数年でのMySQL 8.0の改善点 / MySQL Update 202208
7fb060398b26ed622d34921bd64e4f5d?s=48 yoshiakiyamasaki
1
540
Power Automate for desktopで 配信環境を改善してみた話
C97407daeb9ad3a654e6a0ad8701b972?s=48 akiika
0
110
MySQL v5.7 勉強会/study-mysql-ver-5-7
8847086af047cbf895ab3277b59529fe?s=48 andpad
0
1.9k
EC／CRMの自社サービス開発をマネジメントするようになって1年でやってきたこととこれから / devio2022-takano-sho-road-to-good-development-team-management
Fee058832252e72722b8b03073ff6324?s=48 masaru_b_cl
0
350
データ分析のためのAWS Well-Architected -Data Analytics Lens-
Eefeb193691fd905cf9edafc98f7198d?s=48 maru1981
0
220

Featured

See All Featured
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.5k
Become a Pro
828ace851b606e1206900f26459f55ad?s=48 speakerdeck
PRO
3
900
Why You Should Never Use an ORM
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
47
7.6k
Three Pipe Problems
11c84dff30266b907714802088852677?s=48 jasonvnalue
89
8.7k
10 Git Anti Patterns You Should be Aware of
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
638
52k
Fantastic passwords and where to find them - at NoRuKo
8ec1383b240b5ba15ffb9743fceb3c0e?s=48 philnash
27
1.6k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenintech
48
2.6k
YesSQL, Process and Tooling at Scale
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
157
12k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
E425fe9f170efa0dfaf8ab69d7107418?s=48 aki_i
25
15k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
226
16k
Building Better People: How to give real-time feedback that sticks.
9952dfcd5d338f8a8e7175c8a8f65fb5?s=48 wjessup
344
17k
Dealing with People You Can't Stand - Big Design 2015
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
351
21k

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