Your SlideShare is downloading. ×
Reducing complexity with a Component API
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Reducing complexity with a Component API

1,901
views

Published on

Published in: Technology, Design

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,901
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
30
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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. This time we’ll nail it
  • 9. HTML CSS JS SHAREDSPECIFIC HOTELS The rebuild
  • 10. HTML CSS JS SHAREDSPECIFIC High Reuse Low Reuse HOTELS The rebuild
  • 11. HTML CSS JS SHAREDSPECIFIC High Reuse Strong Caching Low Reuse Weak CachingHOTELS The rebuild
  • 12. HTML CSS JS SHAREDSPECIFIC High Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk HOTELS The rebuild
  • 13. HTML CSS JS SHAREDSPECIFIC HOTELS PLACES SEARCH THEME High Reuse Strong Caching
 High Risk Low Reuse Weak Caching
 Low Risk 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. This model doesn’t favour
 the front end
  • 17. We need a different
 solution
  • 18. It should feel as easy as
 working on a small site
  • 19. A Style Guide would
 help, right?
  • 20. /* Styleguide [Buttons] ! <button class=“btn-primary”>Button</button> <button class=“btn-secondary”>Button</button> ! */ ! .btn—primary { background: blue; } ! .btn—secondary { background: red; }
  • 21. A Style Guide isn’t
 the mechanism
  • 22. We need to decouple our
 UI Layer from the application
  • 23. Component Layer & API
  • 24. What is a component?
  • 25. Create an API to standardise
 fetching these components
  • 26. = component(“form/search”, {
 label: search
 })

  • 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. component(“input/search”, {
 label: search, autocomplete: true
 })
  • 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. 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. SPECIFIC Low Risk
 Low Reuse HOTELS PLACES SEARCH THEME HTML CSS JS SHARED High Risk High Reuse
  • 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. Rizzo ! Component Layer, API 
 & Style Guide
  • 34. Our Style Guide can be just
 another data-driven application
  • 35. A ready-made visual 
 regression test suite
  • 36. Enables Style Guide 
 driven development
  • 37. Why would you
 want to use a
 Component API?
  • 38. You’ll have
 happier developers
  • 39. You’ll have
 visual consistency
  • 40. You’ll be able to
 refactor easily
  • 41. You won’t have to
 tweak padding values
 (as much)
  • 42. It can feel like working
 on a small site
  • 43. Thank you @ianfeather
 
 http://rizzo.lonelyplanet.com

×