Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
72
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
39
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
140
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
89

Other Decks in Technology

See All in Technology
20260929_AmazonGuardDutyの検出通知メールにAWS DevOpsAgentの調査結果を追加する
Avatar for yhana yhana
1
410
インバスケット試験対策アプリを 作って見えたAIエージェント構築 ナレッジ2選
Avatar for ShichijoYuhi shichijoyuhi
1
110
AIに攻撃される前に、AIに攻撃させる
Avatar for Kazuyoshi Tsuchiya tsuchikazu
0
110
Claude Designがめちゃくちゃ便利なので使ってほしい
Avatar for morimorikochan diggymo
0
190
HolmesGPTで始めるSREエージェント入門！プラットフォームの障害調査はAIにお任せ 〜
Avatar for SANGHYUK LEE sanghyuk
0
250
IR Today: Theory, Practice, and Agents
Avatar for Daniel Tunkelang dtunkelang
0
320
人にやさしく、AIにやさしく、書き手を選ばないIaCのガードレール再考 / Rethinking IaC Guardrails for Humans and AI Alike
Avatar for kohbis kohbis
5
2k
「とりあえず動く」の先へ。 AI時代のチーム開発と内部設計/2026-slsdays
Avatar for Serverless Operations slsops
0
110
LLM機能を自作して分かるSnowflake Cortex AIの強み
Avatar for Nayuta S. nayuts
0
170
spanner-autoscalerに学ぶ
CRD設計パターン
〜自動化と緊急時対応を両立する
Kubernetesコントローラーの作り方〜
Avatar for tkuchiki tkuchiki
0
220
AI Native Platform Engineering 〜PlatformとAgileで“作る速さ”を“価値”へ〜
Avatar for Yuya Mizorogi uya116
0
590
Apache Iceberg が拓く AI 時代のオープンレイクハウス
Avatar for Tomohiro Tanaka tomtanaka
0
210

Featured

See All Featured
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
3k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
890
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
480
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
203
76k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
6.1k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
410
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
320
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
1
540

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