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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
48

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
27
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
110
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
54

Other Decks in Technology

See All in Technology
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
Avatar for Hajime Kato hjmkth
1
290
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
Avatar for BrainPad brainpadpr
3
410
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
Avatar for emi emiki
0
240
ACA でMAGI システムを社内で展開しようとした話
Avatar for Yuji Masaoka | まっぴぃ mappie_kochi
1
310
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ：検査・適応で未来を開発 / AI-driven product owner. scrummat2025
Avatar for yosuke nagai yosuke_nagai
3
830
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう！ / Let's build an OAuth protected remote MCP server based on AWS managed services
Avatar for 株式会社カミナシ kaminashi
3
300
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
Avatar for oracle4engineer oracle4engineer
PRO
3
210
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
Avatar for Ken'ichirou Kimura kenichirokimura
3
300
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
Avatar for Sansan R&D sansan_randd
0
130
10年の共創が示す、これからの開発者と企業の関係 ～ Crossroad
Avatar for SORACOM soracom
PRO
1
720
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す：設計と活用事例
Avatar for Fumiya Sakai fumiyasac0921
0
160
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
Avatar for おーしろ noayaoshiro
0
260

Featured

See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
9
590
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
2
320
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k

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