Reducing complexity with a Component API

Transcript

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 SHARED SPECIFIC HOTELS The rebuild
11. HTML CSS JS SHARED SPECIFIC High Reuse Low Reuse HOTELS The rebuild
12. HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching Low Reuse Weak Caching HOTELS The rebuild
13. HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk HOTELS The rebuild
14. HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
15. HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk The rebuild
16. HTML CSS JS SHARED SPECIFIC 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