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
59
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
190
Revolutionizing Telepharmacy with The POWER of Gen AI and LINE API
linedevth
0
200
Seamless Inventory Management with ChatGPT and LINE SHOPPING API
linedevth
0
130
The Future of LINE Retail Chatbot using Gemini AI
linedevth
0
310
Domain Data Platform for Scalable Data Management
linedevth
0
120
Building a Fortune Teller App with OpenAI From Chatbot to Voice Assistant
linedevth
0
110
B.A.A.S - BeTask AI and Automation for SMEs
linedevth
0
96
Other Decks in Technology
See All in Technology
JOAI発表資料 @ 関東kaggler会
joai_committee
1
360
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
140
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
4
1.1k
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
9
2.8k
帳票Vibe Coding
terurou
0
140
JavaScript 研修
recruitengineers
PRO
3
240
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
190
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
LLMエージェント時代に適応した開発フロー
hiragram
1
420
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
24
6.4k
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Featured
See All Featured
Building an army of robots
kneath
306
46k
Being A Developer After 40
akosma
90
590k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
A Tale of Four Properties
chriscoyier
160
23k
A designer walks into a library…
pauljervisheath
207
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Writing Fast Ruby
sferik
628
62k
BBQ
matthewcrist
89
9.8k
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