SlideShare ist ein Scribd-Unternehmen logo
1 von 44
Downloaden Sie, um offline zu lesen


—

Yurim Jalynne Jin



Zepl
Front-end Engineer
Making Reusable Component A to Z
feat. React, UI Design
2
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
Yurim Jalynne Jin

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
Paper sharing service v2.0.0
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
Data(text/img) that user
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
Paper sharing service v3.0.0
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
Data(text/img) that user
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 from Server: 20
Likes state in UI : 21
Let server
know the number
Likes from Server: 21
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
Component is a frame that contains
Interactions and States
17
Beer list
(beer name, people, likes)
Go to add beer page
Component is a frame that contains
Interactions and States
Frame of the Table component
sortsearch
18
Component is a frame that contains
Interactions and States
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
Demo (Video)
38
Wrap up
39
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
43
Outline
Sidebar
Paragraph


—

Yurim Jalynne Jin

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

Weitere ähnliche Inhalte

Mehr von Yurim Jin

신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]Yurim Jin
 
모임 뒤에 사람있어요 - 9XD 1년 회고
모임 뒤에 사람있어요 - 9XD 1년 회고모임 뒤에 사람있어요 - 9XD 1년 회고
모임 뒤에 사람있어요 - 9XD 1년 회고Yurim Jin
 
[9x년생 개발자 모임 송년회] Red Black Tree
[9x년생 개발자 모임 송년회] Red Black Tree[9x년생 개발자 모임 송년회] Red Black Tree
[9x년생 개발자 모임 송년회] Red Black TreeYurim Jin
 
[제6회] 9x년생 개발자 모임
[제6회] 9x년생 개발자 모임[제6회] 9x년생 개발자 모임
[제6회] 9x년생 개발자 모임Yurim Jin
 
JEJUPICK [2016 Oh My Jeju Hackathon]
JEJUPICK [2016 Oh My Jeju Hackathon]JEJUPICK [2016 Oh My Jeju Hackathon]
JEJUPICK [2016 Oh My Jeju Hackathon]Yurim Jin
 
[제5회] 9x년생 개발자 모임
[제5회] 9x년생 개발자 모임[제5회] 9x년생 개발자 모임
[제5회] 9x년생 개발자 모임Yurim Jin
 
[제4회] 9x년생 개발자 모임
[제4회] 9x년생 개발자 모임[제4회] 9x년생 개발자 모임
[제4회] 9x년생 개발자 모임Yurim Jin
 
[제3회] 9x년생 개발자 모임
[제3회] 9x년생 개발자 모임[제3회] 9x년생 개발자 모임
[제3회] 9x년생 개발자 모임Yurim Jin
 
신입 개발자 생활백서
신입 개발자 생활백서신입 개발자 생활백서
신입 개발자 생활백서Yurim Jin
 
[제2회] 9x년생 개발자 모임
[제2회] 9x년생 개발자 모임[제2회] 9x년생 개발자 모임
[제2회] 9x년생 개발자 모임Yurim Jin
 
율무에 관한 5가지 썰
율무에 관한 5가지 썰율무에 관한 5가지 썰
율무에 관한 5가지 썰Yurim Jin
 
"나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음...
"나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음..."나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음...
"나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음...Yurim Jin
 
Soundlight Around NHN NEXT [141212 Data visualization]
Soundlight Around NHN NEXT [141212 Data visualization]Soundlight Around NHN NEXT [141212 Data visualization]
Soundlight Around NHN NEXT [141212 Data visualization]Yurim Jin
 
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]Yurim Jin
 

Mehr von Yurim Jin (14)

신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]신입 개발자 생활백서 [개정판]
신입 개발자 생활백서 [개정판]
 
모임 뒤에 사람있어요 - 9XD 1년 회고
모임 뒤에 사람있어요 - 9XD 1년 회고모임 뒤에 사람있어요 - 9XD 1년 회고
모임 뒤에 사람있어요 - 9XD 1년 회고
 
[9x년생 개발자 모임 송년회] Red Black Tree
[9x년생 개발자 모임 송년회] Red Black Tree[9x년생 개발자 모임 송년회] Red Black Tree
[9x년생 개발자 모임 송년회] Red Black Tree
 
[제6회] 9x년생 개발자 모임
[제6회] 9x년생 개발자 모임[제6회] 9x년생 개발자 모임
[제6회] 9x년생 개발자 모임
 
JEJUPICK [2016 Oh My Jeju Hackathon]
JEJUPICK [2016 Oh My Jeju Hackathon]JEJUPICK [2016 Oh My Jeju Hackathon]
JEJUPICK [2016 Oh My Jeju Hackathon]
 
[제5회] 9x년생 개발자 모임
[제5회] 9x년생 개발자 모임[제5회] 9x년생 개발자 모임
[제5회] 9x년생 개발자 모임
 
[제4회] 9x년생 개발자 모임
[제4회] 9x년생 개발자 모임[제4회] 9x년생 개발자 모임
[제4회] 9x년생 개발자 모임
 
[제3회] 9x년생 개발자 모임
[제3회] 9x년생 개발자 모임[제3회] 9x년생 개발자 모임
[제3회] 9x년생 개발자 모임
 
신입 개발자 생활백서
신입 개발자 생활백서신입 개발자 생활백서
신입 개발자 생활백서
 
[제2회] 9x년생 개발자 모임
[제2회] 9x년생 개발자 모임[제2회] 9x년생 개발자 모임
[제2회] 9x년생 개발자 모임
 
율무에 관한 5가지 썰
율무에 관한 5가지 썰율무에 관한 5가지 썰
율무에 관한 5가지 썰
 
"나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음...
"나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음..."나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음...
"나는 네가 지난 여름에 산 것을 알고있다" - Google analytics 첫걸음...
 
Soundlight Around NHN NEXT [141212 Data visualization]
Soundlight Around NHN NEXT [141212 Data visualization]Soundlight Around NHN NEXT [141212 Data visualization]
Soundlight Around NHN NEXT [141212 Data visualization]
 
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
개발과 디자인은 재미있어 [141025 한국우분투커뮤니티 발표]
 

Kürzlich hochgeladen

Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoorTop Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoordharasingh5698
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756dollysharma2066
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdfankushspencer015
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfKamal Acharya
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapRishantSharmaFr
 
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...SUHANI PANDEY
 
Block diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.pptBlock diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.pptNANDHAKUMARA10
 
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Bookingroncy bisnoi
 
Design For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the startDesign For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the startQuintin Balsdon
 
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Call Girls in Nagpur High Profile
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptMsecMca
 
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank  Design by Working Stress - IS Method.pdfIntze Overhead Water Tank  Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank Design by Working Stress - IS Method.pdfEr. Suman Jyoti
 
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Bookingroncy bisnoi
 
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...Call Girls in Nagpur High Profile
 
Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01KreezheaRecto
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . pptDineshKumar4165
 

Kürzlich hochgeladen (20)

Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoorTop Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
(INDIRA) Call Girl Aurangabad Call Now 8617697112 Aurangabad Escorts 24x7
 
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leapUnleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
 
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
VIP Model Call Girls Kothrud ( Pune ) Call ON 8005736733 Starting From 5K to ...
 
Block diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.pptBlock diagram reduction techniques in control systems.ppt
Block diagram reduction techniques in control systems.ppt
 
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Wakad Call Me 7737669865 Budget Friendly No Advance Booking
 
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced LoadsFEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
 
Design For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the startDesign For Accessibility: Getting it right from the start
Design For Accessibility: Getting it right from the start
 
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
 
notes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.pptnotes on Evolution Of Analytic Scalability.ppt
notes on Evolution Of Analytic Scalability.ppt
 
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank  Design by Working Stress - IS Method.pdfIntze Overhead Water Tank  Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
 
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance BookingCall Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
Call Girls Walvekar Nagar Call Me 7737669865 Budget Friendly No Advance Booking
 
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
 
NFPA 5000 2024 standard .
NFPA 5000 2024 standard                                  .NFPA 5000 2024 standard                                  .
NFPA 5000 2024 standard .
 
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
(INDIRA) Call Girl Meerut Call Now 8617697112 Meerut Escorts 24x7
 
Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
 

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

  • 1. 
 —
 Yurim Jalynne Jin
 
 Zepl Front-end Engineer Making Reusable Component A to Z feat. React, UI Design
  • 2. 2
  • 3. Timeline 3 1. Introduction 2. Front-end: ‘Interaction’ and ‘State’ 3. Component 4. Making reusable component A to Z 5. Closing
  • 4. 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
  • 5. Introduction 5 Yurim Jalynne Jin
 UI/UX Oriented Front-end Engineer — Zepl Software Engineer (before) Lezhin Entertainment / SMARTSTUDY React, Vue and Django / Boxing, Jiu-Jitsu, Ballet
  • 6. Zepl, heaven for Front-end developers… 6
  • 7. 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. 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?
  • 9. States and Interactions 9 Necessity of user Interactions and state management
 to learn from the evolution of ‘Paper sharing service’ Chapter.1
  • 10. 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. Paper sharing service v2.0.0 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 Data(text/img) that user 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 sharing service v3.0.0 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 Data(text/img) that user can see Interaction with user and website
  • 13. 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 from Server: 20 Likes state in UI : 21 Let server know the number Likes from Server: 21 Likes state in UI : 21
  • 15. 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. 16 Component is a frame that contains Interactions and States
  • 17. 17 Beer list (beer name, people, likes) Go to add beer page Component is a frame that contains Interactions and States Frame of the Table component sortsearch
  • 18. 18 Component is a frame that contains Interactions and States
  • 19. 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
  • 20. 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…)
  • 21. 6 steps to make a Reusable components
 21 Chapter.3
  • 22. 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…
  • 23. 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
  • 24. 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!
  • 25. * 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
  • 26. *If you find a library that you think you can use,
 be sure to share it with your teammates before using it. 26
  • 27. 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, }, ]} />
  • 28. 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>
  • 29. Finished making MVP! 29 See if it’s work well. Go to pub and drink beer
  • 30. 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”
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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)
  • 36. 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
  • 37. 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
  • 40. 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)
  • 41. Don’t you wanna see my components? 41 Skeleton Select Button Table InlineSearch Carousel SearchableSelect These are my adorable children!
  • 44. 
 —
 Yurim Jalynne Jin
 email: jayjinjay@gmail.com FB: https://www.facebook.com/jay.jin.0427 twitter: @jayjinjay Thank you Hanoi!