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

Smarter UI Development

Konstantin
October 03, 2018
Technology
0
23

Smarter UI Development

In this short presentation, we explore how we can build UI "the smart way" using StoryBook.

Konstantin

October 03, 2018
Tweet

More Decks by Konstantin

See All by Konstantin
Global state management
konstantin_lebedev
0
24
Rematch - Redux with superpowers
konstantin_lebedev
0
83
Headless CMS
konstantin_lebedev
0
31

Other Decks in Technology

See All in Technology
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
PHPカンファレンス小田原2024
ysknsid25
3
660
少数チームで挑む： SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
530
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
650
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
300
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
190
オーナーシップを持つ領域を明確にする
konifar
10
2k
Apple Vision Pro trial session
akkeylab
0
120
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
5
2.9k
[PlatformCon 24] Platform Orchestrators: The Missing Middle of Internal Developer Platforms?
danielbryantuk
1
170
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
200
DevOpsメトリクスとアウトカムの接続にトライ！開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
180

Featured

See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
Designing the Hi-DPI Web
ddemaree
276
33k
Why Our Code Smells
bkeepers
PRO
331
56k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Happy Clients
brianwarren
91
6.4k
Agile that works and the tools we love
rasmusluckow
324
20k
What's new in Ruby 2.0
geeforr
337
31k
Adopting Sorbet at Scale
ufuk
67
8.6k
Typedesign – Prime Four
hannesfritz
36
2k
Music & Morning Musume
bryan
41
5.6k
What the flash - Photography Introduction
edds
64
11k

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