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

Smarter UI Development

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Konstantin Konstantin
October 03, 2018
Technology
56
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
30
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
120
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
66

Other Decks in Technology

See All in Technology
タスク管理も1on1も、もう「管理」じゃない - KiroとBedrock AgentCoreで変わった“判断の仕事”
Avatar for Yusuke Shimizu yusukeshimizu
0
160
FASTでAIエージェントを作りまくろう！
Avatar for YukiOgawa yukiogawa
4
190
パワポ作るマンをMCP Apps化してみた
Avatar for iwamot iwamot
PRO
0
290
制約を設計する - 非決定性との境界線 / Designing constraints
Avatar for soudai sone soudai
PRO
4
740
AIエージェント時代に必要な オペレーションマネージャーのロールとは
Avatar for KentaroFujii kentarofujii
0
270
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
Avatar for Yuma Tsurugasaki tsurunosd
0
130
Data Enabling Team立ち上げました
Avatar for SansanTech sansantech
PRO
0
180
Oracle Cloud Infrastructure：2026年3月度サービス・アップデート
Avatar for oracle4engineer oracle4engineer
PRO
0
300
AIエージェント勉強会第3回 エージェンティックAIの時代がやってきた
Avatar for Y.Miyado ymiya55
0
210
スケーリングを封じられたEC2を救いたい
Avatar for いのうえ senseofunity129
0
130
Databricks Appsで実現する社内向けAIアプリ開発の効率化
Avatar for R-Miura r_miura
0
230
第26回FA設備技術勉強会 - Claude/Claude_codeでデータ分析 -
Avatar for コロッケそば happysamurai294
0
330

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
990
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
190
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
90
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
0
280
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.8k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
160
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
310

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