Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Decoupling UI components for better reusability...
Search
LINE Developers Thailand
October 25, 2024
Technology
0
52
Decoupling UI components for better reusability and test with Storybook
Decoupling UI components for better reusability and test with Storybook
LINE Developers Thailand
October 25, 2024
Tweet
Share
More Decks by LINE Developers Thailand
See All by LINE Developers Thailand
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
190
Welcome & Tech Vision Keynote
linedevth
0
170
Building the Future: LINE API Updates in 2024
linedevth
1
160
Revolutionizing Telepharmacy with The POWER of Gen AI and LINE API
linedevth
0
180
Seamless Inventory Management with ChatGPT and LINE SHOPPING API
linedevth
0
110
The Future of LINE Retail Chatbot using Gemini AI
linedevth
0
260
Domain Data Platform for Scalable Data Management
linedevth
0
100
Building a Fortune Teller App with OpenAI From Chatbot to Voice Assistant
linedevth
0
91
B.A.A.S - BeTask AI and Automation for SMEs
linedevth
0
81
Other Decks in Technology
See All in Technology
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.2k
從開發到架構設計的可觀測性實踐
philipz
0
110
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
ローカル環境でAIを動かそう!
falken
PRO
1
170
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
Azure Developer CLI と Azure Deployment Environment / Azure Developer CLI and Azure Deployment Environment
nnstt1
1
130
MCP で繋ぐ Figma とデザインシステム〜LLM を使った UI 実装のリアル〜
kimuson
2
1.3k
Scale Security Programs with Scorecarding
ramimac
0
440
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
210
実践Kafka Streams 〜イベント駆動型アーキテクチャを添えて〜
joker1007
0
410
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Navigating Team Friction
lara
186
15k
Producing Creativity
orderedlist
PRO
346
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Practical Orchestrator
shlominoach
188
11k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Transcript
Decoupling UI components for better reusability and test with Storybook
Frontend world
UI Frameworks
TEST
• Component segmentation for reusability • Problems we encounter when
implementing a new component • The solution that we test a new component by storybook Agenda
• Action by click or typing • Integrate API •
Integrate stores What do we do on the page
• Handle action event • Call API • Manage data
from API • Re-render view when data changed Spaghetti man Button Button Button Contents Button
Component segmentation for reusability
Input Type 1 Input Type 2 Input Type 3
None
Panel for 5 Button and Content Button Button Contents Label
Button Button Button • Render component • Action by clicked button Focus • Integrate with API • Mutate data Out of scope
Overview Button Button Contents Panel 1 Button Button Button Panel
3 Button Button Button Panel 2 Button Button Button Button Button Contents Panel 4 Button Button Button Container Container • Listen event from each panel to handle action • Action to call API • Action to stores
Problems we encounter when implementing a new component
Test and review
How do we test > Unit test in each component
> Automation test
Issues we often encounter during reviews
A lot of files changed
None
None
The solution that we test a new component by storybook
None
Storybook
None
Reviewer Create PR
Key takeaways > Making components easily reusable > Storybook helps
reduce the time spent on testing and reviewing > Let’s have fun with the storybook
None