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

  1. Conceptual Definition
  2. Generic Implementation
  3. 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