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
150
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
470
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
160
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
296
20k
Navigating Team Friction
lara
183
14k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Designing Experiences People Love
moore
138
23k
Designing for Performance
lara
604
68k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
We Have a Design System, Now What?
morganepeng
49
7.2k
Code Reviewing Like a Champion
maltzj
519
39k
Producing Creativity
orderedlist
PRO
341
39k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
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