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

Smarter UI Development

Avatar for Konstantin Konstantin
October 03, 2018
Technology
0
40

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
Tweet

More Decks by Konstantin

See All by Konstantin
Global state management
Avatar for Konstantin konstantin_lebedev
0
24
Rematch - Redux with superpowers
Avatar for Konstantin konstantin_lebedev
0
110
Headless CMS
Avatar for Konstantin konstantin_lebedev
0
48

Other Decks in Technology

See All in Technology
ドキュメント管理の理想と現実
Avatar for Ohara Kazuhiro kazuhe
3
310
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
2
450
LT Slide 2025-04-22
Avatar for Shigeki Shoji takesection
0
110
Dataverseの検索列について
Avatar for MiyakeMito miyakemito
1
170
ここはMCPの夜明けまえ
Avatar for nwiizo nwiizo
32
13k
MCPを理解する
Avatar for Yudai Hayashi yudai00
12
9k
Gateway H2 モジュールで
スマートホーム入門
Avatar for MinoruInachi minoruinachi
0
120
ビジネスとデザインとエンジニアリングを繋ぐために 一人のエンジニアは何ができるか / What can a single engineer do to connect business, design, and engineering?
Avatar for 株式会社カミナシ kaminashi
2
860
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
5.4k
GraphQLを活用したリアーキテクチャに対応するSLI/Oの再設計
Avatar for coconala_engineer coconala_engineer
0
190
Databricksで完全履修！オールインワンレイクハウスは実在した！
Avatar for Akihiro Kuwano akuwano
0
140
MySQL Indexes and Histograms – How they really speed up your queries
Avatar for lefred lefred
0
140

Featured

See All Featured
Fontdeck: Realign not Redesign
Avatar for Paul Robert Lloyd paulrobertlloyd
84
5.5k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
23
1.6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
29
920
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
14
1.4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
6.9k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Side Projects
Avatar for Sacha Greif sachag
453
42k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
530
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
63
7.7k
Building an army of robots
Avatar for Kyle Neath kneath
305
45k

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