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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
52

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
29
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
120
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
62

Other Decks in Technology

See All in Technology
2025年 山梨の技術コミュニティを振り返る
Avatar for しみず ゆうき yuukis
0
140
Entity Framework Core におけるIN句クエリ最適化について
Avatar for tkym htkym
0
140
Oracle Cloud Infrastructure：2025年12月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
150
Agent Skillsがハーネスの垣根を超える日
Avatar for Gota gotalab555
7
5k
BidiAgent と Nova 2 Sonic から​考える音声 AI について
Avatar for Yuuki Yamashita yama3133
2
140
MySQLのSpatial(GIS)機能をもっと充実させたい ～ MyNA望年会2025LT
Avatar for sakaik sakaik
0
190
AI駆動開発ライフサイクル（AI-DLC）の始め方
Avatar for ryansbcho79 ryansbcho79
0
280
松尾研LLM講座2025 応用編Day3「軽量化」 講義資料
Avatar for Aratako aratako
14
4.8k
スクラムマスターが
スクラムチームに入って取り組む5つのこと
- スクラムガイドには書いてないけど入った当初から取り組んでおきたい大切なこと -
Avatar for scrummasudar scrummasudar
0
410
普段使ってるClaude Skillsの紹介(by Notebooklm)
Avatar for Higuchi kokoro zerebom
8
2.6k
AI with TiDD
Avatar for Shiraji shiraji
1
330
AWS Lambda durable functions を使って AWS Lambda の15分の壁を超えてみよう
Avatar for MatsuzawaTakeshi matsuzawatakeshi
0
120

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
110
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
110
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
860
Scaling GitHub
Avatar for Zach Holman holman
464
140k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
80
Designing for Performance
Avatar for Lara Hogan lara
610
70k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
74

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