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
44
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
150
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
160
Seamless Inventory Management with ChatGPT and LINE SHOPPING API
linedevth
0
100
The Future of LINE Retail Chatbot using Gemini AI
linedevth
0
240
Domain Data Platform for Scalable Data Management
linedevth
0
87
Building a Fortune Teller App with OpenAI From Chatbot to Voice Assistant
linedevth
0
76
B.A.A.S - BeTask AI and Automation for SMEs
linedevth
0
70
Other Decks in Technology
See All in Technology
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
140
30代エンジニアが考える、エンジニア生存戦略~~セキュリティを添えて~~
masakiokuda
4
2k
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
ペアプログラミングにQAが加わった!職能を超えたモブプログラミングの事例と学び
tonionagauzzi
1
130
LINE Notify互換のボットを作った話
kenichirokimura
0
170
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
100
職種に名前が付く、ということ/The fact that a job title has a name
bitkey
1
230
AWS CDK コントリビュート はじめの一歩
yendoooo
1
110
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
260
Why Go?
xpmatteo
0
130
PHPでアクターモデルを活用したSagaパターンの実践法 / php-saga-pattern-with-actor-model
ytake
0
990
AIエージェント完全に理解した
segavvy
4
250
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
Git: the NoSQL Database
bkeepers
PRO
429
65k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
Being A Developer After 40
akosma
90
590k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Facilitating Awesome Meetings
lara
53
6.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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