$30 off During Our Annual Pro Sale. View Details »

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
51

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
60

Other Decks in Technology

See All in Technology
re:Invent2025 コンテナ系アップデート振り返り(+CloudWatchログのアップデート紹介)
Avatar for 枡川健太郎 masukawa
0
340
生成AI時代におけるグローバル戦略思考
Avatar for Takaaki Yayoi taka_aki
0
120
eBPFとwaruiBPF
Avatar for Satoru Takeuchi sat
PRO
4
2.5k
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
Avatar for tomoki10 tomoki10
0
380
AWS re:Invent 2025で見たGrafana最新機能の紹介
Avatar for 濱田孝治 hamadakoji
0
310
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.3k
Overture Maps Foundationの3年を振り返る
Avatar for Toru Mori moritoru
0
170
生成AIでテスト設計はどこまでできる？ 「テスト粒度」を操るテーラリング術
Avatar for ks shota_kusaba
0
670
LLM-Readyなデータ基盤を高速に構築するためのアジャイルデータモデリングの実例
Avatar for Kashira kashira
0
230
第4回 「メタデータ通り」　リアル開催
Avatar for データ横丁 datayokocho
0
120
ChatGPTで論⽂は読めるのか
Avatar for Spatial AI Network spatial_ai_network
2
2.7k
GitHub Copilotを使いこなす 実例に学ぶAIコーディング活用術
Avatar for 74th(Atsushi Morimoto) 74th
3
2.4k

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
500
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k

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