reducing complexity with a component api
DESCRIPTION
TRANSCRIPT
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