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
58
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
210
Welcome & Tech Vision Keynote
linedevth
0
190
Building the Future: LINE API Updates in 2024
linedevth
1
180
Revolutionizing Telepharmacy with The POWER of Gen AI and LINE API
linedevth
0
190
Seamless Inventory Management with ChatGPT and LINE SHOPPING API
linedevth
0
130
The Future of LINE Retail Chatbot using Gemini AI
linedevth
0
300
Domain Data Platform for Scalable Data Management
linedevth
0
120
Building a Fortune Teller App with OpenAI From Chatbot to Voice Assistant
linedevth
0
100
B.A.A.S - BeTask AI and Automation for SMEs
linedevth
0
92
Other Decks in Technology
See All in Technology
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
840
Tableau API連携の罠!?脱スプシを夢見たはずが、逆に依存を深めた話
cuebic9bic
3
210
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
200
Mambaで物体検出 完全に理解した
shirarei24
2
210
Claude CodeでKiroの仕様駆動開発を実現させるには...
gotalab555
3
890
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.7k
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
850
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
Amazon Bedrock AgentCoreのフロントエンドを探す旅 (Next.js編)
kmiya84377
1
110
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
110
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
650
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Practical Orchestrator
shlominoach
190
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Building an army of robots
kneath
306
45k
What's in a price? How to price your products and services
michaelherold
246
12k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
KATA
mclloyd
31
14k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Being A Developer After 40
akosma
90
590k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Producing Creativity
orderedlist
PRO
346
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.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