1. Reducing Complexity
with a Component API
Ian Feather

2. Complexity

3. High risk, high fear

4. Intertwined

5. Low reuse

6. Technical debt

7. !
Complexity at
" ";

9. This time we’ll nail it

10. HTML CSS JS
SHAREDSPECIFIC
HOTELS
The rebuild

11. HTML CSS JS
SHAREDSPECIFIC
High Reuse
Low Reuse
HOTELS
The rebuild

12. HTML CSS JS
SHAREDSPECIFIC
High Reuse
Strong Caching
Low Reuse
Weak CachingHOTELS
The rebuild

13. HTML CSS JS
SHAREDSPECIFIC
High Reuse
Strong Caching
High Risk
Low Reuse
Weak Caching
Low Risk
HOTELS
The rebuild

14. HTML CSS JS
SHAREDSPECIFIC
HOTELS PLACES SEARCH THEME
High Reuse
Strong Caching
High Risk
Low Reuse
Weak Caching
Low Risk
The rebuild

15. HTML CSS JS
SHAREDSPECIFIC
HOTELS PLACES SEARCH THEME
High Reuse
Strong Caching
High Risk
Low Reuse
Weak Caching
Low Risk
The rebuild

16. HTML CSS JS
SHAREDSPECIFIC
HOTELS PLACES SEARCH THEME
High Reuse
Strong Caching
High Risk
Low Reuse
Weak Caching
Low Risk
The rebuild

17. This model doesn’t favour
the front end

18. We need a different
solution

20. It should feel as easy as
working on a small site

21. A Style Guide would
help, right?

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

24. A Style Guide isn’t
the mechanism

25. We need to decouple our
UI Layer from the application

26. Component Layer & API

27. What is a component?

28. Create an API to standardise
fetching these components

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

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

33. component(“input/search”, {
label: search,
autocomplete: true
})

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

36. 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"
})

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

40. SPECIFIC
Low Risk
Low Reuse
HOTELS PLACES SEARCH THEME
HTML CSS JS
SHARED
High Risk
High Reuse
Low Risk
High Reuse
Component Layer & API

41. Rizzo
!
Component Layer, API
& Style Guide

42. Our Style Guide can be just
another data-driven application

43. A ready-made visual
regression test suite

44. Enables Style Guide
driven development

47. Why would you
want to use a
Component API?

48. You’ll have
happier developers

49. You’ll have
visual consistency

50. You’ll be able to
refactor easily

51. You won’t have to
tweak padding values
(as much)

52. It can feel like working
on a small site

53. Thank you
@ianfeather
http://rizzo.lonelyplanet.com