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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
56
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
30
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
120
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
66

Other Decks in Technology

See All in Technology
遊びで始めたNew Relic MCP、​気づいたらChatOpsな​オブザーバビリティボットができてました/From New Relic MCP to a ChatOps Observability Bot
Avatar for AEON aeonpeople
1
150
GitHub Advanced Security × Defender for Cloudで開発とSecOpsのサイロを超える: コードとクラウドをつなぐ、開発プラットフォームのセキュリティ
Avatar for yuriemori yuriemori
1
120
Databricks Lakehouse Federationで 運用負荷ゼロのデータ連携
Avatar for Kenji Matsuda nek0128
0
100
20260323_データ分析基盤でGeminiを使う話
Avatar for yuichi 1210yuichi0
0
210
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
11k
自分をひらくと次のチャレンジの敷居が下がる
Avatar for aki sudoakiy
5
1.6k
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
16
410k
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか？
Avatar for nagisa_53 nagisa53
1
240
JSTQB Expert Levelシラバス 「テストマネジメント」日本語版のご紹介
Avatar for ymty ymty
0
110
Podcast配信で広がったアウトプットの輪～70人と音声発信してきた7年間～/outputconf_01
Avatar for FORTE fortegp05
0
180
タスク管理も1on1も、もう「管理」じゃない - KiroとBedrock AgentCoreで変わった“判断の仕事”
Avatar for Yusuke Shimizu yusukeshimizu
0
160
昔話で振り返るAWSの歩み ～S3誕生から20年、クラウドはどう進化したのか～
Avatar for NRI Netcom nrinetcom
PRO
0
130

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
160
Leo the Paperboy
Avatar for Maya Tellez mayatellez
6
1.6k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
240
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
52k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
180
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
620
Code Reviewing Like a Champion
Avatar for maltzj maltzj
528
40k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
320

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