Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Reducing complexity with a Component API
Search
Ianfeather
April 25, 2014
0
160
Reducing complexity with a Component API
Ianfeather
April 25, 2014
Tweet
Share
More Decks by Ianfeather
See All by Ianfeather
Building Resilient Front End Systems (Smashingconf)
ianfeather
0
100
Building Resilient Frontend Systems (All Day Hey)
ianfeather
1
480
Building Resilient Frontend Systems (@frontendne)
ianfeather
1
180
Testing Without Assertions
ianfeather
0
130
Building Resilient Frontend Systems - NationJS
ianfeather
0
190
Establishing Performance Contexts
ianfeather
0
110
Web Fonts and Performance
ianfeather
0
170
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
What's in a price? How to price your products and services
michaelherold
243
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Cult of Friendly URLs
andyhume
78
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Typedesign – Prime Four
hannesfritz
40
2.4k
Building an army of robots
kneath
302
44k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Transcript
Reducing Complexity with a Component API Ian Feather
Complexity
High risk, high fear
Intertwined
Low reuse
Technical debt
! Complexity at " ";
None
This time we’ll nail it
HTML CSS JS SHARED SPECIFIC HOTELS The rebuild
HTML CSS JS SHARED SPECIFIC High Reuse Low Reuse HOTELS
The rebuild
HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching Low
Reuse Weak Caching HOTELS The rebuild
HTML CSS JS SHARED SPECIFIC High Reuse Strong Caching High
Risk Low Reuse Weak Caching Low Risk HOTELS The rebuild
HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High
Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk The rebuild
HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High
Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk The rebuild
HTML CSS JS SHARED SPECIFIC HOTELS PLACES SEARCH THEME High
Reuse Strong Caching High Risk Low Reuse Weak Caching Low Risk The rebuild
This model doesn’t favour the front end
We need a different solution
None
It should feel as easy as working on a small
site
A Style Guide would help, right?
/* Styleguide [Buttons] ! <button class=“btn-primary”>Button</button> <button class=“btn-secondary”>Button</button> ! */
! .btn—primary { background: blue; } ! .btn—secondary { background: red; }
None
A Style Guide isn’t the mechanism
We need to decouple our UI Layer from the application
Component Layer & API
What is a component?
Create an API to standardise fetching these components
None
= component(“form/search”, { label: search })
<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 })
None
component(“input/search”, { label: search, autocomplete: true })
<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 })
None
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" })
None
None
SPECIFIC Low Risk Low Reuse HOTELS PLACES SEARCH THEME HTML
CSS JS SHARED High Risk High Reuse
SPECIFIC Low Risk Low Reuse HOTELS PLACES SEARCH THEME HTML
CSS JS SHARED High Risk High Reuse Low Risk High Reuse Component Layer & API
Rizzo ! Component Layer, API & Style Guide
Our Style Guide can be just another data-driven application
A ready-made visual regression test suite
Enables Style Guide driven development
None
None
Why would you want to use a Component API?
You’ll have happier developers
You’ll have visual consistency
You’ll be able to refactor easily
You won’t have to tweak padding values (as much)
It can feel like working on a small site
Thank you @ianfeather http://rizzo.lonelyplanet.com