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
53
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
200
Welcome & Tech Vision Keynote
linedevth
0
180
Building the Future: LINE API Updates in 2024
linedevth
1
170
Revolutionizing Telepharmacy with The POWER of Gen AI and LINE API
linedevth
0
180
Seamless Inventory Management with ChatGPT and LINE SHOPPING API
linedevth
0
120
The Future of LINE Retail Chatbot using Gemini AI
linedevth
0
290
Domain Data Platform for Scalable Data Management
linedevth
0
110
Building a Fortune Teller App with OpenAI From Chatbot to Voice Assistant
linedevth
0
95
B.A.A.S - BeTask AI and Automation for SMEs
linedevth
0
86
Other Decks in Technology
See All in Technology
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
140
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
550
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
270
実践! AIエージェント導入記
1mono2prod
0
130
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
470
Claude Code どこまでも/ Claude Code Everywhere
nwiizo
53
31k
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
270
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
2
220
Agentic Workflowという選択肢を考える
tkikuchi1002
1
350
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
470
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
2
1.2k
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
140
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Fireside Chat
paigeccino
37
3.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
BBQ
matthewcrist
89
9.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Why Our Code Smells
bkeepers
PRO
337
57k
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