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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
69
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
34
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
140
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
82

Other Decks in Technology

See All in Technology
まちスペース®とデジタルツインと「まちづくり」
Avatar for hiro_OGI hiro_ogi
0
130
Reference-Free Image Quality Assessment for Virtual Try-On via Human Feedback
Avatar for ZOZO Developers zozotech
PRO
0
640
老害フォレンジッカーはAI羊の夢を見るか？
Avatar for tadmaddad tadmaddad
0
350
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
20k
制約理論（ToC）入門　2026版
Avatar for Recruit recruitengineers
PRO
8
2.6k
【AG-UI × A2UI × MCP Apps】Generative UIをやさしく解説する
Avatar for NRI Netcom nrinetcom
PRO
1
140
JavaScript 研修 (2026)
Avatar for Recruit recruitengineers
PRO
2
630
My broken English still works: speaking at global OSS events
Avatar for Naruhiko Ogasawara naruoga
0
110
その“隠したつもり”が命取り ── 自前と平文をやめて「正解」に委ねる
Avatar for kuroneko kuroneko13
0
130
カートの信頼性を担保するWireMockを使ったe2eテスト
Avatar for ykagano ykagano
0
530
Sets in Go
Avatar for Luciano Ramalho ramalho
1
1k
TypeScript入門 2026
Avatar for Recruit recruitengineers
PRO
3
690

Featured

See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
550
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.5k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
300
Un-Boring Meetings
Avatar for Sebastian Deterding codingconduct
0
390
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
3
1.1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
18k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k

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