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

Smarter UI Development

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
53

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
63

Other Decks in Technology

See All in Technology
Mosaic AI Gatewayでコーディングエージェントを配るための運用Tips / JEDAI 2026 新春 Meetup! AIコーディング特集
Avatar for GENDA genda
0
150
Webhook best practices for rock solid and resilient deployments
Avatar for Guillaume Laforge glaforge
1
260
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
2.7k
Agile Leadership Summit Keynote 2026
Avatar for seki at druby.org m_seki
1
340
顧客の言葉を、そのまま信じない勇気
Avatar for yamatai12 yamatai1212
1
330
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
Avatar for Shun bbqallstars
4
1.6k
広告の効果検証を題材にした因果推論の精度検証について
Avatar for ZOZO Developers zozotech
PRO
0
100
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
130
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.1k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
160
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
73k
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
Avatar for usanchuu usanchuu
3
430

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
130
Done Done
Avatar for chrislema chrislema
186
16k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.7k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
300
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
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