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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
66
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
78

Other Decks in Technology

See All in Technology
それでも、技術なブログを書く理由 #kichijojipm / Why I Still Write Tech Blogs Even Now
Avatar for ShinkuFencer shinkufencer
0
1.2k
AIツールを導入しても生産性はあがらない？ カオナビが直面した 3つの壁と乗り越え方。/ Overcoming 3 Barriers to AI-Driven Productivity at kaonavi
Avatar for 株式会社カオナビ kaonavi
0
420
SRENEXT_2026_Chairs__Talks_in_Tamachi.sre.pdf
Avatar for srenext srenext
1
160
CTOキーノート：AI時代の「つなぐ」を再定義 ― 真のIoTとリアルワールドAI【SORACOM Discovery 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
310
なぜ、あなたのエージェントは言うことを聞かないのか
Avatar for segavvy segavvy
1
570
オートマトンと字句解析でRoslynを読む
Avatar for tomokusaba tomokusaba
0
120
現場で使える AWS DevOps Agent 活用ノウハウ - Release Management 機能の検証結果を添えて / AWS DevOps Agent Release Management and Know-How
Avatar for Masanori Yamaguchi kinunori
4
690
データ活用研修 データマネジメント【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
4
740
エンタープライズデータへ安全につなぐ Production-ready なエージェント設計 ― AI × MCP リファレンスアーキテクチャ ― #AIDevDay
Avatar for CData Software Japan cdataj
1
210
DevOps Agentで運用判断をチーム資産にする ~Agent InstructionsとAgent Skillを継続的に育てる~
Avatar for fujioka-a fujioka6789
0
170
CloudWatchから始めるAWS監視
Avatar for butadora butadora
0
270
実践が先生だった— 新卒サーバーエンジニア1年目のリアル
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
190

Featured

See All Featured
Scaling GitHub
Avatar for Zach Holman holman
464
140k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
11k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
380
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
310
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
160
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
22k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
430
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
520

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