Reducing complexity with a Component API

Reducing Complexity with a Component API

Ian Feather

Complexity

High risk, high fear

Intertwined

Low reuse

Technical debt

!

Complexity at

" ";

This time we’ll nail it

HTML CSS JS

SHA

RED

SPEC

IFIC

HOTELS

The rebuild

HTML CSS JS

SHA

RED

SPEC

IFIC

High Reuse

Low ReuseHOTELS

The rebuild

HTML CSS JS

SHA

RED

SPEC

IFIC

High ReuseStrong Caching

Low ReuseWeak CachingHOTELS

The rebuild

HTML CSS JS

SHA

RED

SPEC

IFIC

High ReuseStrong CachingHigh Risk

Low ReuseWeak CachingLow Risk

HOTELS

The rebuild

HTML CSS JS

SHA

RED

SPEC

IFIC

HOTELS PLACES SEARCH THEME

High Reuse Strong CachingHigh Risk

Low Reuse Weak Caching Low Risk

The rebuild

HTML CSS JS

SHA

RED

SPEC

IFIC

HOTELS PLACES SEARCH THEME

High Reuse Strong CachingHigh Risk

Low Reuse Weak Caching Low Risk

The rebuild

HTML CSS JS

SHA

RED

SPEC

IFIC

HOTELS PLACES SEARCH THEME

High Reuse Strong CachingHigh Risk

Low Reuse Weak Caching Low Risk

The rebuild

This model doesn’t favourthe front end

We need a differentsolution

It should feel as easy asworking on a small site

A Style Guide wouldhelp, right?

/* Styleguide [Buttons] !<button class=“btn-primary”>Button</button> <button class=“btn-secondary”>Button</button> !*/ !.btn—primary { background: blue; } !.btn—secondary { background: red; }

A Style Guide isn’tthe mechanism

We need to decouple ourUI Layer from the application

Component Layer & API

What is a component?

Create an API to standardisefetching these components

= component(“form/search”, { label: search})

<form action="/search"> <label class="accessibility" for="search-q">Search</label> <input id="search-q" name="q" tabindex="1" type=“search"/> <button name="search-q-submit" type="submit">Search</button> </form>

= component(“form/search”, { label: search})

component(“input/search”, { label: search,

autocomplete: true})

<form action="/search"> <label class="accessibility" for="search-q">Search</label> <input class="js-autocomplete" id="search-q" name=“q" /> <button name="search-q-submit" type="submit">Search</button> <div class="js-autocomplete-container"></div> </form>

component(“input/search”, { label: search,

autocomplete: true})

component("cards/collection_card", { double?: true,

slug: "/top-things-to-do—in-paris",

title: "Top things to do in Paris",

image_url: "/assets/paris.jpg" })

SPEC

IFIC

Low RiskLow Reuse

HOTELS PLACES SEARCH THEME

HTML CSS JS

SHA

RED High Risk

High Reuse

SPEC

IFIC

Low RiskLow Reuse

HOTELS PLACES SEARCH THEME

HTML CSS JS

SHA

RED High Risk

High Reuse

Low RiskHigh ReuseComponent Layer & API

Rizzo !

Component Layer, API & Style Guide

Our Style Guide can be justanother data-driven application

A ready-made visual regression test suite

Enables Style Guide driven development

Why would youwant to use a

Component API?

You’ll havehappier developers

You’ll havevisual consistency

You’ll be able torefactor easily

You won’t have to tweak padding values

(as much)

It can feel like workingon a small site

Thank you

@ianfeather

http://rizzo.lonelyplanet.com