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
SHAREDSPECIFIC
HOTELS
The rebuild
HTML CSS JS
SHAREDSPECIFIC
High Reuse
Low Reuse
HOTELS
The rebuild
HTML CSS JS
SHAREDSPECIFIC
High Reuse
Strong Caching
Low Reuse
Weak CachingHOTELS
The rebuild
HTML CSS JS
SHAREDSPECIFIC
High Reuse
Strong Caching
High Risk
Low Reuse
Weak Caching
Low Risk
HOTELS
The rebuild
HTML CSS JS
SHAREDSPECIFIC
HOTELS PLACES SEARCH THEME
High Reuse
Strong Caching

High Risk
Low Reuse
Weak Caching

Low Ris...
HTML CSS JS
SHAREDSPECIFIC
HOTELS PLACES SEARCH THEME
High Reuse
Strong Caching

High Risk
Low Reuse
Weak Caching

Low Ris...
HTML CSS JS
SHAREDSPECIFIC
HOTELS PLACES SEARCH THEME
High Reuse
Strong Caching

High Risk
Low Reuse
Weak Caching

Low Ris...
This model doesn’t favour

the front end
We need a different

solution
It should feel as easy as

working on a small site
A Style Guide would

help, right?
/* Styleguide [Buttons]
!
<button class=“btn-primary”>Button</button>
<button class=“btn-secondary”>Button</button>
!
*/
!...
A Style Guide isn’t

the mechanism
We need to decouple our

UI Layer from the application
Component Layer & API
What is a component?
Create an API to standardise

fetching 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=...
component(“input/search”, {

label: search,
autocomplete: true

})
<form action="/search">
<label class="accessibility" for="search-q">Search</label>
<input class="js-autocomplete" id="sear...
component("cards/collection_card", { 



double?: true,
slug: "/top-things-to-do—in-paris",
title: "Top things to do in Pa...
SPECIFIC
Low Risk

Low Reuse
HOTELS PLACES SEARCH THEME
HTML CSS JS
SHARED
High Risk
High Reuse
SPECIFIC
Low Risk

Low Reuse
HOTELS PLACES SEARCH THEME
HTML CSS JS
SHARED
High Risk
High Reuse
Low Risk

High Reuse
Compo...
Rizzo
!
Component Layer, API 

& Style Guide
Our Style Guide can be just

another data-driven application
A ready-made visual 

regression test suite
Enables Style Guide 

driven development
Why would you

want to use a

Component API?
You’ll have

happier developers
You’ll have

visual consistency
You’ll be able to

refactor easily
You won’t have to

tweak padding values

(as much)
It can feel like working

on a small site
Thank you
@ianfeather



http://rizzo.lonelyplanet.com
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Reducing complexity with a Component API
Upcoming SlideShare
Loading in …5
×

Reducing complexity with a Component API

3,486 views

Published on

Published in: Technology, Design

Reducing complexity with a Component API

  1. 1. Reducing Complexity with a Component API Ian Feather
  2. 2. Complexity
  3. 3. High risk, high fear
  4. 4. Intertwined
  5. 5. Low reuse
  6. 6. Technical debt
  7. 7. ! Complexity at " ";
  8. 8. This time we’ll nail it
  9. 9. HTML CSS JS SHAREDSPECIFIC HOTELS The rebuild
  10. 10. HTML CSS JS SHAREDSPECIFIC High Reuse Low Reuse HOTELS The rebuild
  11. 11. HTML CSS JS SHAREDSPECIFIC High Reuse Strong Caching Low Reuse Weak CachingHOTELS The rebuild
  12. 12. HTML CSS JS SHAREDSPECIFIC High Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk HOTELS The rebuild
  13. 13. HTML CSS JS SHAREDSPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
  14. 14. HTML CSS JS SHAREDSPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
  15. 15. HTML CSS JS SHAREDSPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
  16. 16. This model doesn’t favour
 the front end
  17. 17. We need a different
 solution
  18. 18. It should feel as easy as
 working on a small site
  19. 19. A Style Guide would
 help, right?
  20. 20. /* Styleguide [Buttons] ! <button class=“btn-primary”>Button</button> <button class=“btn-secondary”>Button</button> ! */ ! .btn—primary { background: blue; } ! .btn—secondary { background: red; }
  21. 21. A Style Guide isn’t
 the mechanism
  22. 22. We need to decouple our
 UI Layer from the application
  23. 23. Component Layer & API
  24. 24. What is a component?
  25. 25. Create an API to standardise
 fetching these components
  26. 26. = component(“form/search”, {
 label: search
 })

  27. 27. <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
 })

  28. 28. component(“input/search”, {
 label: search, autocomplete: true
 })
  29. 29. <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
 })
  30. 30. 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"
 })
  31. 31. SPECIFIC Low Risk
 Low Reuse HOTELS PLACES SEARCH THEME HTML CSS JS SHARED High Risk High Reuse
  32. 32. SPECIFIC Low Risk
 Low Reuse HOTELS PLACES SEARCH THEME HTML CSS JS SHARED High Risk High Reuse Low Risk
 High Reuse Component Layer & API
  33. 33. Rizzo ! Component Layer, API 
 & Style Guide
  34. 34. Our Style Guide can be just
 another data-driven application
  35. 35. A ready-made visual 
 regression test suite
  36. 36. Enables Style Guide 
 driven development
  37. 37. Why would you
 want to use a
 Component API?
  38. 38. You’ll have
 happier developers
  39. 39. You’ll have
 visual consistency
  40. 40. You’ll be able to
 refactor easily
  41. 41. You won’t have to
 tweak padding values
 (as much)
  42. 42. It can feel like working
 on a small site
  43. 43. Thank you @ianfeather
 
 http://rizzo.lonelyplanet.com

×