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
47
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
170
Welcome & Tech Vision Keynote
linedevth
0
150
Building the Future: LINE API Updates in 2024
linedevth
1
150
Revolutionizing Telepharmacy with The POWER of Gen AI and LINE API
linedevth
0
170
Seamless Inventory Management with ChatGPT and LINE SHOPPING API
linedevth
0
110
The Future of LINE Retail Chatbot using Gemini AI
linedevth
0
240
Domain Data Platform for Scalable Data Management
linedevth
0
89
Building a Fortune Teller App with OpenAI From Chatbot to Voice Assistant
linedevth
0
79
B.A.A.S - BeTask AI and Automation for SMEs
linedevth
0
73
Other Decks in Technology
See All in Technology
開発視点でAWS Signerを考えてみよう!! ~コード署名のその先へ~
masakiokuda
3
160
新卒エンジニアがCICDをモダナイズしてみた話
akashi_sn
2
210
SREの視点で考えるSIEM活用術 〜AWS環境でのセキュリティ強化〜
coconala_engineer
1
290
Recap of Next - Google Cloud で実践する クラウドネイティブ最前線 / The Frontlines of Cloud-Native with Insights from Google Cloud
aoto
PRO
1
100
The Tale of Leo: Brave Lion and Curious Little Bug
canalun
1
120
Terraform Cloudで始めるおひとりさまOrganizationsのすゝめ
handy
2
170
Amazon S3 Tables + Amazon Athena / Apache Iceberg
okaru
0
270
Cross Data Platforms Meetup LT 20250422
tarotaro0129
1
410
AIと開発者の共創: エージェント時代におけるAIフレンドリーなDevOpsの実践
bicstone
1
300
watsonx.data上のベクトル・データベース Milvusを見てみよう/20250418-milvus-dojo
mayumihirano
0
110
Amazon CloudWatchで始める エンドユーザー体験のモニタリング
o11yfes2023
0
180
LangfuseでAIエージェントの 可観測性を高めよう!/Enhancing AI Agent Observability with Langfuse!
jnymyk
1
220
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
76
9.3k
Speed Design
sergeychernyshev
29
900
Music & Morning Musume
bryan
47
6.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Producing Creativity
orderedlist
PRO
344
40k
Designing Experiences People Love
moore
141
24k
Facilitating Awesome Meetings
lara
54
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.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