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

Smarter UI Development

Konstantin
October 03, 2018
Technology
0
19

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
20
Rematch - Redux with superpowers
konstantin_lebedev
0
76
Headless CMS
konstantin_lebedev
0
26

Other Decks in Technology

See All in Technology
Vision.framework - 商品画像からのテキスト検出と並列化実装への試み
hcrane
0
180
カーネルコードの歩き方
sat
PRO
2
2.3k
心理的安全性に対して個人とチームで取り組んできたこと
hiro_torii
1
130
ChatGPTで開発者の英語の悩みを解決
takagimeow
0
110
守りから「攻め」の開発へ！New Relicを活用してサービスと共に成長するチームになる
yoshikikomoriya
0
320
CyberAgent AI事業本部MLOps研修応用編
nsakki55
32
15k
全世界のユーザー体験の改善にNew Relic Mobileをどのように活用したか/How New Relic Mobile was used to improve the global user experience
isaoshimizu
1
350
[春のDojo祭り'23] データドリブンな時代に求められるプロセスマイニング入門
tkhresk
0
130
Profiling a Java Application @DevDays 2023
victorrentea
1
470
0518LLMmeetup_LLMシステムの非機能要件対応_現場レポート.pdf
hirosatogamo
4
3.7k
ほーるちーむあぷろーち for babies #scrumniigata #SigSQA / Whole-Team Approach (WhTA) for babies
caori_t
1
410
Mirror mirror... what am I typing next?
spinscale
0
130

Featured

See All Featured
Code Review Best Practice
trishagee
52
12k
Bootstrapping a Software Product
garrettdimon
PRO
299
110k
Building an army of robots
kneath
300
41k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
13
1.4k
Gamification - CAS2011
davidbonilla
75
4.2k
BBQ
matthewcrist
75
8.2k
Building Effective Engineering Teams - LeadDev
addyosmani
5
570
Scaling GitHub
holman
453
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
23
1.8k
4 Signs Your Business is Dying
shpigford
171
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
341
18k

Transcript

  1. SMARTER UI
    DEVELOPMENT
    Konstantin Lebedev

    View Slide

  2. WEATHER APP

    View Slide

  3. WEATHER APP

    View Slide

  4. WEATHER APP

    View Slide

  5. WEATHER APP

    View Slide

  6. How can we test multiple visual
    states of a component?
    PROBLEM #1

    View Slide

  7. TRAVEL APP ONBOARDING

    View Slide

  8. TRAVEL APP ONBOARDING

    View Slide

  9. TRAVEL APP ONBOARDING

    View Slide

  10. TRAVEL APP ONBOARDING

    View Slide

  11. How can we test visual states of a
    component that isn’t always visible
    on the screen?
    PROBLEM #2

    View Slide

  12. STORYBOOK

    View Slide

  13. Storybook - isolated environment
    to quickly develop and design UI
    components
    STORYBOOK

    View Slide

  14. STORYBOOK

    View Slide

  15. STORYBOOK

    View Slide

  16. WRITING STORIES

    View Slide

  17. STORYBOOK

    View Slide

  18. STORYBOOK

    View Slide

  19. STORYBOOK

    View Slide

  20. STORY SHOTS

    View Slide

  21. STORY-SHOTS

    View Slide

  22. WITH STORYBOOK
    ● test components in isolation
    ● test multiple visual states
    ● live documentation for our UI

    View Slide

  23. THANK YOU
    Konstantin Lebedev / @koss_lebedev

    View Slide