Making reusable component A to Z (feat React, UI design)

— 
Yurim Jalynne Jin 
 
Zepl
Front-end Engineer
Making Reusable Component A to Z
feat. React, UI Design

Timeline
3
1. Introduction
2. Front-end: ‘Interaction’ and ‘State’
3. Component
4. Making reusable component A to Z
5. Closing

Goal of this session
4
1. For front-end beginner 
→ You can explain the ‘state’, ‘interaction’ and the ‘component’ after this
session
2. For whom knows JavaScript but not familiar to ‘Reusable component’ 
→You can design the architecture of the reusable component after this
session
3. For whom already familiar to ‘Reusable component’ 
→ This session can be the chance to refer other company’s use-case

Introduction
5
UI/UX Oriented Front-end Engineer
—
Zepl Software Engineer
(before) Lezhin Entertainment / SMARTSTUDY
React, Vue and Django / Boxing, Jiu-Jitsu, Ballet

Zepl,
heaven for Front-end developers…
6

7
• What is Zepl? 
Data science
version of the
Google docs
•Complicated
user interactions
and huge state
management
Zepl,
heaven and hell for Front-end developers…

8
Hmm… this sound’s like usual work for FE developers
Why and what does it means for FE
developers?
Complicated user interactions
and huge state mangement?

States and
Interactions
9
Necessity of user Interactions and state management 
to learn from the evolution of ‘Paper sharing service’
Chapter.1

Paper sharing service v1.0.0
10
States
1. Id
2. Title
3. Author
4. Contents
Interactions
1. Fetch paper data
paper.com/paper-id-123
Title of the paper
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua.
by Jane Doe
Data(text/img) that user
can see
Interaction with
user and website

11
23 likes
States
1. Paper data(tite,
author…)
2. Count of the
‘likes’(23)
3. Am I clicked
‘like’ button? 
(true/false)
Interactions
1. Fetch paper data
and likes count
2. Mark ‘like' button
3. Unmark ‘like’
button
can see
Interaction with
user and websitepaper.com/paper-id-123
Title of the paper
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua.
by Jane Doe

12
paper.com/timeline
Trending papers
1904
My papers
States
1. Trending papers(title,
author…)
2. Total counts of likes
3. My papers(title,
author…)
Interactions
1. Fetch trending papers
2. Fetch my papers
3. Fetch total counts of
likes
…
8. Sort paper by likeCount
9. Search paper by title
can see
Interaction with
user and website

Relationships between States and Interactions
13
State is the data related to user interaction that FE stored to give users a richer
and more dynamic experience.
This state is also received and displayed from the server's data, 
but should be able to change every minute depending on the user's interaction
→ State == Front-end-oriented Database
Likes from Server: 20
20
Click like buttonLikes state in UI : 20
21 21
Likes state in UI : 21
Let server
know the number
Likes state in UI : 21

Component
14
Chapter.2
State, Interactions, and Component

Component is a frame that contains
Interactions and States
15
Paper list
(title, author, likes)
sortsearch
Go to upload pageFrame of the Table component

16

17
Beer list
(beer name, people, likes)
Go to add beer page
Frame of the Table component
sortsearch

18

If you pass the Interactions and States
19
You can reuse the same component but different data whenever you want
Table component - reused 52 times Button component - reused 172 times

3 types of components in the real world
20
Type 1. The component that I made from A to Z
Type 2. Custom the external library (e.g. datatables, bootstrap)
Type 3. Super-custom the external library(You can’t even imagine this
was the bootstrap…)

6 steps to make a
Reusable components 
21
Chapter.3

Step 1. UI Design→[State&Action&UI]
22
1.List up the States and Actions based on the design from
designer
2.Just right down all the elements and the way to control them
3.Also right down the UI requirements
4.Review the list with designer
*those who doesn’t have designer…

UI Design→[State&Action&UI]
23
State
1.Dataset of table header
1.*text
2.Desired width
3.Is sort enabled
2.Dataset of table data
1.*text
3.Base column to be sorted
4.Sort asc/desc
5.Placeholder for empty data
Action
1.Sort table asc/desc if you click the table header
2.Able to pass custom sort function
UI
1.Able to pass the desired width of
each column
2.*Responsive design

Step 2. Investigate other libraries
24
1. Examine how other libraries
created similar components. 
Good to take notes while
investigation 
- Library ‘A’ made column architecture like this! 
- The way the A function is implemented is
luxurious! We can benchmark this.
2. If we find a library that meets our
requirements, can we directly use
it? => No!

* Things to be considered customizing the external library
25
✓Does it meets our requirements?
✓Isn’t it too heavier than our requirements?
✓Easy to custom? Do you think I still can easily custom it 1 year
later?
✓Has maintenance been active until recently? (check the latest
commit)
✓Is it possible to maintain without impact if library development
is stopped in the middle?
*We need to find a library to satisfy all the bullet points above

*If you find a library that you think you can use, 
be sure to share it with your teammates before using it.
26

Step 3. Design the skeleton of the code
27
1.Assume that we already have this
component. Pass the properties defined
from Step.1 (e.g. pass desired array to
‘columns’)
2.Similar with TDD. More like a DDD, since
we make skeleton of the code from
design
3.Must start with making a MVP(Minimum
Viable Product)! Postpone all the feature
which is not required to next step
4.[MVP] pass only columns and datasource
<Table
columns={[
{
title: "논문 제목", dataIndex: “title", width: 7,
},
{
title: “저자", dataIndex: “author", width: 3,
},
{
title: "좋아요 수", dataIndex: “likes", width: 1,
},
]}
dataSource={[
{
key: "n1",
title: "밤과 라면의 상관관계",
author: "장뫄뫄",
likes: 3,
},
{
key: "n2",
title: "리유저블 컴포넌트에 관한 연구",
author: "이뫄뫄",
likes: 10,
},
]}
/>

Step 4. Implement the component based on the skeleton
28
1.Finally we can code! 
You can now implement the
component based on the skeleton
you made from previous step
const Table = ({
columns,
dataSource,
}) => (
<table>
<thead>
<tr>
{map((column) => {
const { dataIndex } = column;
return (
<TableHeader dataIndex={dataIndex} key={dataIndex} width={column
column.title
</TableHeader>
);
}, columns)}
</tr>
</thead>
<tbody>
{map(
data => (
<TableRow key={data.key}>
{map(column => (
<TableData
width={column.width}
key={column.dataIndex}
>
{get(column.dataIndex, data)}
</TableData>
),
columns)}
</TableRow>
),
dataSource,
)}
</tbody>
</table>

Finished making MVP!
29
See if it’s work well. Go to pub and drink beer

Step 5. Implement the detailed features
30
You can make a detailed features now. But you need to decide whether this
component will be Stateful or Stateless
(Required states for sort feature : 1. sort key 2. sort direction 3. sort function)
A. Stateful (I have my secret states)
“You don’t need to pass any states. I will
control everything”
B. Stateless (I don’t have any secrets)
“I don’t know how to control states… I just show the
UI without any modification”

A. Stateful Component
31
// Using reusable component
<Table
columns={[]}
dataSource=[…]
/>
// Reusable component
const Table = ({columns, dataSource}) => {
const [sortAsc, setSortAsc] = false;
const [sortKey, setSortKey] = “likes”;
return (
<table>
<th onClick={() => setSortAsc(!sortAsc)}>
정렬하기
</th>
{dataSource.sort(sortKey, sortAsc)}
</table>
);
}
Store the state(sort asc? desc? which key to be sorted?) inside of the component
=> Don’t need to manage the state when using this reusable component.
Because it already has inside. Simpler to use. Harder to predict the states inside
Hey, you don’t need to manage
anything :) I can control everything

B. Stateless Component
32
// Using table component
const [sortAsc, setSortAsc] = false;
const [sortKey, setSortKey] = “likes”;
<Table
dataSource={
dataSourceArray.filterBy({title,
likes}
)}
onClickSort={
selectedKey =>
customSortAction({ selectedKey })
}
sortIndex={sortKey}
sortDirection={sortAsc}
/>
// Reusable component
const Table = ({columns, dataSource, onClickSort,
sortIndex, sortDirection}) => {
return (
<table>
<th sortDirection={sortDirection}>
정렬하기
</th>
{dataSource.sort(sortKey, sortAsc)}
</table>
);
}
Store the state(sort asc? desc? which key to be sorted?) outside of the component
=> We need to newly set the state every time we use the component. More
complex to use, but simpler and predictable code inside
Hello sir?
You need to sort
by yourself

A(Stateful) seems easier to use! 
But why do we need B(Stateless) component?
33
1.When building a real-world’s service, it is common to make a
component for the multiple purpose 
-> the extendibility and flexibility is really really important
2.(e.g.) In A(stateful) component, we always sort by numerical or
alphabetical order
Q. But what if we want to sort by timestamp? 
Q. What if we want to POST the data to server every time we sort? 
Q. What if we want to set 2+ sort key
If this component used in various case, it’ll be better to build a
Stateless(B) component to control easily

Let’s mix A and B!
34
We don’t need to choose only one.
Our ideal component will sort by themself, but we can
always override the feature when we have the unique case

6. Final step! Documentation
35
Thank you for following.
But if you stop in previous step, it’ll be the ‘Non-Reusable
component’
If you don’t do Documentation, you MUST forget the features
even if they are all your’s
(I also forgot most of the features while preparing this session - thx to my
documentation)

But.. it’s annoying!
36
1. The component will updated frequently. So it’s not easy
to maintain both code and document
2. I dont’ know which tool I need to use. Can I write both
code and the text?
3. I’d like to see interactive example of the reusable
component

There’s a cool tool - Storybook!
37
1. You can build static
documentation site like Vuepress
Docusaurus with simple command 
npx -p @storybook/cli sb init
2. You can put the reusable
component like you put it in the
real code for the website - then
it’ll render the component
3. It supports React, Vue, Angular,
general HTML or many other
environments

Recap! Steps to make a custom component
40
1. Turn design into component document -> 
1. State 2. Action 3. UI requirements
2. Decide whether to use external library or make a new one - You
need to look up the future more than a 6 months
3. Do DDD! Make skeleton of the code first
4. Decide - Stateful vs Stateless
5. Documentation (You can use tools like Storybook)

Don’t you wanna see my components?
41
Skeleton
Select
Button
Table
InlineSearch
Carousel
SearchableSelect
These are my adorable children!

42
SearchBox
NavBar
SideNav
Section
CollapsibleSection
Modal
Creatable

— 
email: jayjinjay@gmail.com
FB: https://www.facebook.com/jay.jin.0427
twitter: @jayjinjay
Thank you Hanoi!

Making reusable component A to Z (feat React, UI design)

Recommended

Recommended

More Related Content

More from Yurim Jin

More from Yurim Jin (14)

Recently uploaded

Recently uploaded (20)

Making reusable component A to Z (feat React, UI design)