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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
65
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
33
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
130
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
76

Other Decks in Technology

See All in Technology
次世代ランサムウェア対策の考察 / 20260704 Mitsutoshi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
5
1.7k
【FinOps】データドリブンな意思決定を目指して
Avatar for kaita z63d
3
580
水を運ぶ人としてのリーダーシップ
Avatar for izumii19 izumii19
4
1.2k
SRE歴2ヶ月でも開発6年の知見を活かして、チームで止まっていた環境改善を前に進めた話
Avatar for a_ono a_ono
0
170
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
8.3k
“ID沼入口” - 基本とセキュリティから始める、考え続けるためのID管理技術勉強会 告知&イントロ
Avatar for ritou ritou
0
370
Baseline対応のDOMの型定義を作った
Avatar for uhyo uhyo
2
570
デジタル・デザイン：次の50年を描く「進化する青写真」
Avatar for Sayaka Ishizuka y150saya
0
780
最近評価が難しくなった
Avatar for Mitsui maroon8021
0
110
AIで政治は変わるのか？ — 中高生と考えたAI時代の民主主義（東海高校サタデープログラム）
Avatar for 須田英太郎 eitarosuda
0
360
『AIに負けない』より『AIと遊ぶ』」〜ワクワクが最強のテスト・QA学習戦略_公開用
Avatar for odan tomohiro odan611
1
350
時期が悪い！それでもRaspberry Piを買って遊んで活用するには / 20260627-osc26do-rpi-jikigawarui
Avatar for Akira Ouchi akkiesoft
1
960

Featured

See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
280
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Side Projects
Avatar for Sacha Greif sachag
455
43k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
490
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
150
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.8k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
400
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
270
The Curious Case for Waylosing
Avatar for Cassini Nazir cassininazir
1
420
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
9.5k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.6k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
210

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