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 " ";

8. None

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

19. None

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; }
23. None

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

29. None

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

32. None

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
 })
35. None

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"
 })
37. None
38. None

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

45. None
46. None

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