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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
47

Smarter UI Development

In this short presentation, we explore how we can build UI "the smart way" using StoryBook.

Avatar for Konstantin

Konstantin

October 03, 2018
Tweet

More Decks by Konstantin

See All by Konstantin
Global state management
Avatar for Konstantin konstantin_lebedev
0
25
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
110
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
53

Other Decks in Technology

See All in Technology
KotlinConf 2025_イベントレポート
Avatar for ソニー株式会社 sony
1
120
EncryptedSharedPreferences が deprecated になっちゃった！どうしよう！ / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
Avatar for Yuki Anzai yanzm
0
230
研究開発と製品開発、両利きのロボティクス
Avatar for Yutaka Kondo youtalk
1
520
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
Avatar for cm-usuda-keisuke cmusudakeisuke
1
240
ガチな登山用デバイスからこんにちは
Avatar for halka halka
1
240
allow_retry と Arel.sql / allow_retry and Arel.sql
Avatar for Shintani Teppei euglena1215
1
160
データアナリストからアナリティクスエンジニアになった話
Avatar for hatsu hiyokko_data
2
440
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
Avatar for KoheiOgawa shisyu_gaku
0
150
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
Avatar for Kento Kimura aoto
PRO
0
360
機械学習を扱うプラットフォーム開発と運用事例
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
230
S3アクセス制御の設計ポイント
Avatar for tommy tommy0124
3
190
Agile PBL at New Grads Trainings
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
410

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
61k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
268
13k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.5k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
13k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
1
37
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
112
20k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k

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