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
0
54

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
64

Other Decks in Technology

See All in Technology
JAWS DAYS 2026 ExaWizards_20260307
Avatar for ExaWizards exawizards
0
420
OCI Security サービス 概要
Avatar for oracle4engineer oracle4engineer
PRO
2
13k
情シスのための生成AI実践ガイド2026 / Generative AI Practical Guide for Business Technology 2026
Avatar for Akira Maeda glidenote
0
200
Yahoo!ショッピングのレコメンデーション・システムにおけるML実践の一例 
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
200
8万デプロイ
Avatar for iwamot iwamot
PRO
2
230
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
Avatar for oracle4engineer oracle4engineer
PRO
8
7.2k
堅牢.py#2 LT資料
Avatar for t3tra t3tra
0
140
The_Evolution_of_Bits_AI_SRE.pdf
Avatar for 株式会社ヌーラボ nulabinc
PRO
0
160
Go標準パッケージのI/O処理をながめる
Avatar for matumoto matumoto
0
160
[2026-03-07]あの日諦めたスクラムの答えを僕達はまだ探している。〜守ることと、諦めることと、それでも前に進むチームの話〜
Avatar for tosite tosite
0
200
Datadog の RBAC のすべて
Avatar for 株式会社ヌーラボ nulabinc
PRO
3
450
AWS DevOps Agent vs SRE俺 / AWS DevOps Agent vs me, the SRE
Avatar for SMS tech sms_tech
3
550

Featured

See All Featured
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2.4k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
160
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.6M
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
83
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
250
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
0
270
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
190
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k

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