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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
46

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
ecspressoの設計思想に至る道 / sekkeinight2025
Avatar for FUJIWARA Shunichiro fujiwara3
12
2.3k
AIに全任せしないコーディングとマネジメント思考
Avatar for kichion kikuchikakeru
0
390
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
Avatar for kasacchiful kasacchiful
0
120
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
Avatar for nihonbuson nihonbuson
PRO
0
390
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
Avatar for Mutz mutsumix
0
140
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
Avatar for LayerX layerx
PRO
4
1.3k
株式会社島津製作所_研究開発（集団協業と知的生産）の現場を支える、OSS知識基盤システムの導入
Avatar for Kuniharu, AKAHANE (赤羽根/州晴) akahane92
1
1.3k
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
Avatar for os1ma os1ma
9
1.4k
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする～遊びやすさと競技性の両立～
Avatar for Cygames cygames
PRO
1
240
Claude CodeでKiroの仕様駆動開発を実現させるには...
Avatar for Gota gotalab555
3
650
Kiroから考える AIコーディングツールの潮流
Avatar for Oikon s4yuba
3
600
Kiroでインフラ要件定義～テスト
 を実施してみた
Avatar for nagisa_53 nagisa53
2
230

Featured

See All Featured
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.9k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k

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