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
62
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
32
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
130
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
71

Other Decks in Technology

See All in Technology
Fラン学生が考える、AI時代のデザインに執着した突破口
Avatar for husensan husengs7
1
240
GitHub Copilot CLI の Rubber Duck 機能を使ってコーディングの品質をあげよう #techbaton_findy
Avatar for すてにゃん stefafafan
2
640
Orchestration Development Workshopを半期実施して
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
340
Amazon Bedrock で生成AI活用サービスをセキュアに構築する方法
Avatar for Takanori Suzuki takanorig
1
110
SDDで⾒える、AIコーディングの"内訳"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
370
エムスリーテクノロジーズ株式会社 エンジニア向け紹介資料 / M3 Technologies Company Deck
Avatar for M3 Engineering m3_engineering
0
220
ECSのTerraformモジュールにコントリビュートした話
Avatar for Haruka Sakihara harukasakihara
1
330
TypeScriptで実現する既存APIを活用したリモートMCPサーバー構築 / TSKaigi 2026
Avatar for Shodai Suzuki soarteclab
1
250
Loadbalancing exporter internals
Avatar for ymotongpoo ymotongpoo
1
120
GitHub Copilot のこれまでとこれから: From Copilot to Collaborative Agents
Avatar for yuriemori yuriemori
1
130
AI時代に改めて考える、ドメイン駆動設計 - モデリングが「AIへの共通言語」になる
Avatar for Koichiro Matsuoka littlehands
7
1.8k
Agent Development Kit (ADK)で学ぶ実践Context Engineeringと社内での応用例
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
360

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
New Earth Scene 8
Avatar for Sydney Stone popppiees
3
2.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.2k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
430
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
65
55k
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
360
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
360
30k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
920
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
150

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