Component
Design Thinking
View
Component
Component
Component
Component
View
View
View
Because ...
- Work with others
- Reduce development time
- Prettier / Clearer code
Design
Functionality
Complexity
Naming
What is Design ?
Take a broad view of the project
- structure
- packages (version)
- ASK !!
Functionality
Search bar
Comment
Message
TextInput + Tag friends + Stickers ...
TextInput + Auto complete + Search button ...
TextInput + Tag friends + Many options ...
...
Functionality
SearchBarInput
TextInput
CommentInput
MessageInput
value
onChange
events callback
Functionality
TextInput
Tell what users do
User actions
Any component need TextInput
(
)
Functionality
Q: What if I want some middlewares ...
constructor
getDerivedStateFromProps
componentDidMount
componentDidUpdate
...
How React.js do ?
Functionality
Q: What if I want some middlewares ...
TextInput
beforeOnChange
user typing
afterOnChange
changeStatus
afterOnChange
From wrapper perspective:
From component perspective:
Functionality
Q: What if I want to render some special text
{
value: '安安 ShauShan Yen for example',
meta: {
tags: [{
from: 3,
to: 15,
url: 'https://',
}]
}
}
Maybe ...
TextInput
renderTags = true
Functionality
Q: What if we need several different styles of input
TextInput
customStyle
If not often ...
View
TextInput
customStyle
...props
View
SmallTextInput
Bind custom styles here
If frequently used ...
Complexity
TextInput
customStyle
...props
View
SmallTextInput
SearchBarTextInput
Feature wrapper
Style wrapper
...
(Behavior wrappers)
Complexity
over-engineering
- Too much wrappers
- I want a very very general component !!
- Pack behavior into global function (X -> Y)
- Don't predict the future, but make it flexible
Solved by:
Complexity
What is flexible ?
<TextInput
small
inline
noBorder
noBackground /><TextInput
customStyle={{
height: 30,
display: 'inline-block',
border: 0,
backgroundColor: 'transparent',
}} />OR
Naming
- Don't abbreviate words all the time
- Good understanding is the most important thing
- Name = Feature
Summary
亂寫一時爽，重構火葬場
Thanks
Component Design Thinking
By Travor Lee
