Reducing complexity with a Component API

649e3d33ce29a5e6bb4ff3025c6aaffa?s=47 Ianfeather
April 25, 2014
54

Reducing complexity with a Component API

649e3d33ce29a5e6bb4ff3025c6aaffa?s=128

Ianfeather

April 25, 2014
Tweet

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