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

Smarter UI Development

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Konstantin Konstantin
October 03, 2018
Technology
65
0

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

More Decks by Konstantin

See All by Konstantin
Global state management
Avatar for Konstantin konstantin_lebedev
0
33
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
130
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
76

Other Decks in Technology

See All in Technology
Docker Desktop不要の時代が来る？ WSL標準の「wslc」で Linuxコンテナを動かしてみた.
Avatar for ueponx ueponx
0
520
“詰む”前に仕組みを作れ 〜技術の波に溺れないためのキャッチアップ術〜
Avatar for Sugiyama Takaaki takasyou
8
5k
クラウドファンディング版StackChan 3体（4体）をインタラクティブな体験型作品にして展示もした話 / ｽﾀｯｸﾁｬﾝお誕生日会2026
Avatar for you（@youtoy） you
PRO
0
270
Text-to-SQLをAgentCoreで実現し、生成されるSQLの精度を定量的に評価する
Avatar for やくも yakumo
2
390
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
AIDLC_ヤフーショッピングの取り組み
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
450
Fabricをフル活用する AI Agent Hub -製造業特化AIエージェントの設計
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
190
そこにあるから地図ができる～位置を示す"モノ"を愉しむ～ - Interface 2026年6月号GPS特集オフ会 / interface_202606_GPS_offline
Avatar for sakaik sakaik
1
180
Agentic AI 時代のテスト手法: Kiro とはじめるプロパティベーステスト (AWS Summit Japan 2026 | DEV212)
Avatar for Hiroki Yamazaki ymhiroki
0
170
4人目のSREはAgent
Avatar for tanimuyk tanimuyk
0
360
“ID沼入口” - 基本とセキュリティから始める、考え続けるためのID管理技術勉強会 告知&イントロ
Avatar for ritou ritou
0
370
プライバシー保護の理論と実践
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
230

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
230
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1.1k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.9k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
760
Between Models and Reality
Avatar for mayunak mayunak
4
360
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
320
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
240
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
So, you think you're a good person
Avatar for Per Axbom axbom
PRO
2
2.1k

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