Download - Reducing complexity with a Component API
![Page 1: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/1.jpg)
Reducing Complexity with a Component API
Ian Feather
![Page 2: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/2.jpg)
Complexity
![Page 3: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/3.jpg)
High risk, high fear
![Page 4: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/4.jpg)
Intertwined
![Page 5: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/5.jpg)
Low reuse
![Page 6: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/6.jpg)
Technical debt
![Page 7: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/7.jpg)
!
Complexity at
" ";
![Page 8: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/8.jpg)
![Page 9: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/9.jpg)
This time we’ll nail it
![Page 10: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/10.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
HOTELS
The rebuild
![Page 11: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/11.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
High Reuse
Low ReuseHOTELS
The rebuild
![Page 12: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/12.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
High ReuseStrong Caching
Low ReuseWeak CachingHOTELS
The rebuild
![Page 13: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/13.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
High ReuseStrong CachingHigh Risk
Low ReuseWeak CachingLow Risk
HOTELS
The rebuild
![Page 14: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/14.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
HOTELS PLACES SEARCH THEME
High Reuse Strong CachingHigh Risk
Low Reuse Weak Caching Low Risk
The rebuild
![Page 15: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/15.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
HOTELS PLACES SEARCH THEME
High Reuse Strong CachingHigh Risk
Low Reuse Weak Caching Low Risk
The rebuild
![Page 16: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/16.jpg)
HTML CSS JS
SHA
RED
SPEC
IFIC
HOTELS PLACES SEARCH THEME
High Reuse Strong CachingHigh Risk
Low Reuse Weak Caching Low Risk
The rebuild
![Page 17: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/17.jpg)
This model doesn’t favourthe front end
![Page 18: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/18.jpg)
We need a differentsolution
![Page 19: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/19.jpg)
![Page 20: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/20.jpg)
It should feel as easy asworking on a small site
![Page 21: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/21.jpg)
A Style Guide wouldhelp, right?
![Page 22: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/22.jpg)
/* Styleguide [Buttons] !<button class=“btn-primary”>Button</button> <button class=“btn-secondary”>Button</button> !*/ !.btn—primary { background: blue; } !.btn—secondary { background: red; }
![Page 23: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/23.jpg)
![Page 24: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/24.jpg)
A Style Guide isn’tthe mechanism
![Page 25: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/25.jpg)
We need to decouple ourUI Layer from the application
![Page 26: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/26.jpg)
Component Layer & API
![Page 27: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/27.jpg)
What is a component?
![Page 28: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/28.jpg)
Create an API to standardisefetching these components
![Page 29: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/29.jpg)
![Page 30: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/30.jpg)
= component(“form/search”, { label: search})
![Page 31: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/31.jpg)
<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})
![Page 32: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/32.jpg)
![Page 33: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/33.jpg)
component(“input/search”, { label: search,
autocomplete: true})
![Page 34: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/34.jpg)
<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})
![Page 35: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/35.jpg)
![Page 36: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/36.jpg)
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" })
![Page 37: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/37.jpg)
![Page 38: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/38.jpg)
![Page 39: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/39.jpg)
SPEC
IFIC
Low RiskLow Reuse
HOTELS PLACES SEARCH THEME
HTML CSS JS
SHA
RED High Risk
High Reuse
![Page 40: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/40.jpg)
SPEC
IFIC
Low RiskLow Reuse
HOTELS PLACES SEARCH THEME
HTML CSS JS
SHA
RED High Risk
High Reuse
Low RiskHigh ReuseComponent Layer & API
![Page 41: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/41.jpg)
Rizzo !
Component Layer, API & Style Guide
![Page 42: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/42.jpg)
Our Style Guide can be justanother data-driven application
![Page 43: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/43.jpg)
A ready-made visual regression test suite
![Page 44: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/44.jpg)
Enables Style Guide driven development
![Page 45: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/45.jpg)
![Page 46: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/46.jpg)
![Page 47: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/47.jpg)
Why would youwant to use a
Component API?
![Page 48: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/48.jpg)
You’ll havehappier developers
![Page 49: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/49.jpg)
You’ll havevisual consistency
![Page 50: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/50.jpg)
You’ll be able torefactor easily
![Page 51: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/51.jpg)
You won’t have to tweak padding values
(as much)
![Page 52: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/52.jpg)
It can feel like workingon a small site
![Page 53: Reducing complexity with a Component API](https://reader034.vdocuments.net/reader034/viewer/2022052410/547ea131b379593f2b8b5541/html5/thumbnails/53.jpg)
Thank you
@ianfeather
http://rizzo.lonelyplanet.com