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
AIがコードを書く時代、人間は何を保証するのか———馬場さんと考える、開発者に求められる新しい責任と価値 - TECH PLAY
Avatar for Toshiaki Baba netmarkjp
0
150
QAタスクをスキル化したいときに考えること
Avatar for aomoriringo aomoriringo
0
120
AIとハーネスで育てるトランスコンパイラ / 20260722 Yasushi Katayama
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
1.1k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
53k
『モンスターストライク』 の運営に伴走する！ データ民主化への 解析グループの3つのアプローチ
Avatar for MIXI ENGINEERS mixi_engineers
PRO
0
160
AIがAPIを書く時代に、私たちは何を設計すべきか
Avatar for 草薙昭彦 nagix
0
120
オートマトンと字句解析でRoslynを読む
Avatar for tomokusaba tomokusaba
0
120
データエンジニアこそ組織のオントロジーに向き合うべき — 問いに答えるAIから、事業を動かすAIへ
Avatar for harry gappy50
4
1.1k
大 AI 時代におけるC# の事情 ～ぶっちゃけトークを交えながら～
Avatar for neno nenonaninu
1
520
AI研修(Day2)【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
1.4k
Power Automateアップデート情報
Avatar for MiyakeMito miyakemito
0
280
害獣害虫を自動判別！ ペストコントロール支援ビジネス成功のヒント【SORACOM Discovery 2026】
Avatar for SORACOM（ソラコム） soracom
PRO
0
120

Featured

See All Featured
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
510
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.9k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
190
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
390
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
600
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
Visualization
Avatar for Eitan Lees eitanlees
152
17k

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