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
57
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
180
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
90
Other Decks in Technology
See All in Technology
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
160
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
160
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
100
alecthomas/kong はいいぞ
fujiwara3
6
750
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.3k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
160
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
130
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
300
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
8
550
AI工学特論: MLOps・継続的評価
asei
10
1.9k
Shadow DOM & Security - Exploring the boundary between light and shadow
masatokinugawa
0
740
みんな Kiro ってる?
r3_yamauchi
PRO
0
120
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
Rails Girls Zürich Keynote
gr2m
95
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Navigating Team Friction
lara
187
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Faster Mobile Websites
deanohume
308
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Producing Creativity
orderedlist
PRO
346
40k
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