Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
What to Upload to SlideShare
Loading in …3
×
1 of 53

Reducing complexity with a Component API

16

Share

Download to read offline

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

×