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

Smarter UI Development

Konstantin
October 03, 2018
Technology
0
38

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
100
Headless CMS
konstantin_lebedev
0
47

Other Decks in Technology

See All in Technology
Spring Bootで実装とインフラをこれでもかと分離するための試み
shintanimoto
7
860
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
130
AWSで作るセキュアな認証基盤with OAuth mTLS / Secure Authentication Infrastructure with OAuth mTLS on AWS
kaminashi
0
180
PicoRabbit: a Tiny Presentation Device Powered by Ruby
harukasan
PRO
2
240
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
1
610
AIエージェント開発手法と業務導入のプラクティス
ykosaka
5
1.6k
Cursor AgentによるパーソナルAIアシスタント育成入門―業務のプロンプト化・MCPの活用
os1ma
14
4.9k
Amazon CloudWatch Application Signals ではじめるバーンレートアラーム / Burn rate alarm with Amazon CloudWatch Application Signals
ymotongpoo
5
540
30代からでも遅くない！ 内製開発の世界に飛び込み、最前線で戦うLLMアプリ開発エンジニアになろう
minorun365
PRO
12
3.9k
LiteXとオレオレCPUで作る自作SoC奮闘記
msyksphinz
0
720
「経験の点」の位置を意識したキャリア形成 / Career development with an awareness of the “point of experience” position
pauli
4
100
意思決定を支える検索体験を目指してやってきたこと
hinatades
PRO
0
220

Featured

See All Featured
Writing Fast Ruby
sferik
628
61k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
760
Unsuck your backbone
ammeep
670
57k
Designing for humans not robots
tammielis
252
25k
Building Flexible Design Systems
yeseniaperezcruz
329
38k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Side Projects
sachag
452
42k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k

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