Applied Principles of Componentization
Component
: a constituent part : ingredient
Component
Some ingredients are atomic, like sugar
Component
Some are processed such as canned goods.
Component
Others are even composed of other ingredients themselves.
Component
Components are therfore composable by nature. It is a inherent quality.
in fact "component" and "compose" come from the same origin
Separation of Concerns
Discovering Boundries
- Structure (Markup)
- Style (CSS)
- Behavior (JS)
Structure (Markup)Style (CSS)Behavior (JS)
Neutrons
Electrons
Protons
- Structure (Markup)
- Style (CSS)
- Behavior (JS)
Sub-Atomic
Every component is composed of one or more of these.
No individual item is particularly useful* on its own.
* Let's not carry the analogy farther than it is intended
Atomic
Oxygen
<Button />
protons: 8
neutrons: 8
electrons: 8
html: <button></button>
css: button { ... }
js: button.onclick = () => {...}
- Composed directly of sub-atomic particles.
- A different configuration of these same particles may not be Oxygen.
- Composed directly of sub-atomic pieces.
- A different configuration of these same pieces may not be a <Button />.
Molecular
H O
<Login />
- Composed of other atomic or molecular components.
- Composed of other atomic or molecular components.
2
Discovering the Proper Separation of Concern
- Conceptual Definition
- Generic Implementation
- Specific Implementation
Just 3 simple steps
Anatomy of a Component
Stage 1: Plutonic Ideal
Conceptual UX and Design patterns (not mocks)
Micro-problem statement
Stage 2: Actualized Ideal
Code implementation of plutonic ideal. Very general purpose
Stage 3: Instances
In context implementations of Stage 2 component including contextual styles*
DEMO
TIME!
Button, Field
An app may be thought of as a specific composition of components
On the web, component composition is expressed as a tree
But the structure of this tree is insufficient on its own, vis-à-vis layout.
CSS gives us a design language that includes layout.
But in a componentized architecture, design and layout are distinct.
Design
The visual and experiential qualities that comprise a thing
Layout
The position of a thing in space relative to other things within the whole
Components should not express or impose layout upon themselves.
How can we express layout, without polluting our component's design with layout info?
Components may impose layout upon their immediate children
The Box Model
margin
border
padding
content
Components style themselves border inward
margin
border
padding
content
Components position their immediate children
margin
border
padding
content
position
flex
float
top
left
bottom
right
display*
width
height
Layout Properties
position
top
bottom
left
right
Non-Layout Properties
...css
display*
margin
height
width
flex
Layout Components
DEMO
TIME!
Grid, Row