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
Adaptation and Components
Search
Nicolas Gallagher
April 09, 2014
Programming
6
1.2k
Adaptation and Components
About adaptable systems and the benefits of the component abstraction when building web UI's.
Nicolas Gallagher
April 09, 2014
Tweet
Share
More Decks by Nicolas Gallagher
See All by Nicolas Gallagher
React Native for web and beyond
necolas
5
960
Thinking beyond "Scalable CSS"
necolas
14
6.8k
Making Twitter UI Infrastructure
necolas
14
4k
CSS Application Architecture
necolas
15
550
HTML5 Boilerplate: past, present, and future
necolas
4
250
The purification of web development
necolas
5
410
Other Decks in Programming
See All in Programming
Hermes: Better Performance with Bytecode Translation (React Universe 2024)
tmikov2023
0
100
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
940
マルチモジュールにおけるテスト最適化
fxwx23
0
210
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
Composing an API the *right* way (Droidcon New York 2024)
zsmb
2
170
Rubyとクリエイティブコーディングの輪の広がり / The Growing Circle of Ruby and Creative Coding
chobishiba
1
270
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
1k
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
4
90k
全部見せます! クラシルリワードのSwiftTesting移行プロジェクト
uetyo
0
210
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
130
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Atom: Resistance is Futile
akmur
261
25k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Happy Clients
brianwarren
96
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.8k
The Mythical Team-Month
searls
218
43k
Optimizing for Happiness
mojombo
375
69k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
Transcript
Adaptation and Components @necolas
“Adaption” vs “Change”
“Adaptable” vs “Adaptive”
Adaptable systems
2013 App 2014 App 2012 App
The ability to adapt-in-time is business-critical
Complexity affects the ability to adapt
Technology type as an organising principle
HTML A B C D ... CSS A B C
D ... JS A B C D ... UNIT A B C D ... ... A B C D ...
HTML A B C D ... CSS A B C
D ... JS A B C D ... UNIT A B C D ... ... A B C D ...
HTML AD B CD D ... CSS A AB C
D ... JS A B C D ... UNIT A B C D ... ... A B AC D ...
Leaky abstractions increase complexity
<article class="user"> <div class="avatar"> <img class="avatar-img" ...> <div class="tooltip hidden">...</div>
</div> <button class="btn btn-follow"> <span class="btn-icon"> <span class="icn icn-follow"></span> </span> <span class= "btn-text">...</span> </button> </article>
<article class="user"> <button class="btn btn-follow"> <span class="btn-icon"> <span class="icn icn-follow"></span>
</span> <span class= "btn-text">...</span> </button> </article> <div class="avatar"> <img class="avatar-img" ...> <div class="tooltip hidden">...</div> </div>
<article class="user"> <button class="btn btn-follow"> <span class="btn-icon"> <span class="icn icn-follow"></span>
</span> <span class= "btn-text">...</span> </button> </article> <div class="avatar"> <img class="user-img avatar-img" ...> <div class="tooltip hidden">...</div> </div>
/* avatar */ .avatar { } /* tweet */ .tweet
{ } .tweet .avatar { } .tweet .text {} /* user card */ .user { } .user .avatar { }
Modularity is not enough
Components as the primary unit of scale
A HTML CSS JS UNIT ...
A HTML CSS JS UNIT ... B HTML CSS JS
UNIT ...
A HTML CSS JS UNIT ... B HTML CSS JS
UNIT ... C HTML CSS JS UNIT ...
A HTML CSS JS UNIT ... B HTML CSS JS
UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ...
A HTML CSS JS UNIT ... B HTML CSS JS
UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...
Components are simple
Components are composable & configurable
Reduces emergent complexity
Adaptable over reusable
facebook.github.io/react Defining components with React
/** @jsx React.DOM */ var Photo = React.createClass({ render: function
() { return ( <img src={this.props.src} /> ); } });
<Photo src="photo.jpg"> </Photo>
<figure className={'photo' + this.props.size}> <span className={'crop' + this.props.crop}> <img className="img"
src={this.props.src} alt= "" /> </span> <figcaption className="caption"> {this.props.children} </figcaption> </figure>
<Photo src="photo.jpg" size="large" crop="circle"> Half-Dome in Yosemite National Park <Attribution
owner="necolas" /> </Photo>
suitcss.github.io Styling components with SUIT CSS
<figure className={'photo' + this.props.size}> <span className={'crop' + this.props.crop}> <img className="img"
src={this.props.src} alt= "" /> </span> <figcaption className="caption"> {this.props.children} </figcaption> </figure>
<figure className={'photo' + this.props.size}> <span className={'crop' + this.props.crop}> <img className="img"
src={this.props.src} alt="" /> </span> <figcaption className="caption"> {this.props.children} </figcaption> </figure>
<figure className={'Photo Photo--' + this.props.size}> <span className={'Photo-crop Photo-crop--' + this.props.crop}>
<img className="Photo-img" src={this.props.src} alt="" /> </span> <figcaption className="Photo-caption u-textBreak"> {this.props.children} </figcaption> </figure>
/** @define Photo */ .Photo {} /* Component */ .Photo--large
{} /* Component modifier */ .Photo-crop {} /* Component descendent */ .Photo-crop--circle {} /* Descendent modifier */ .Photo-img {} .Photo-caption {}
<figure className={'Photo Photo--' + this.props.size}> <span className={'Photo-crop Photo-crop--' + this.props.crop}>
<img className="Photo-img" src={this.props.src} alt="" /> </span> <figcaption className="Photo-caption u-textBreak"> {this.props.children} </figcaption> </figure>
<figure className={'Photo Photo--' + this.props.size}> <span className={'Photo-crop Photo-crop--' + this.props.crop}>
<img className="Photo-img" src={this.props.src} alt="" /> </span> <figcaption className="Photo-caption u-textBreak"> {this.props.children} </figcaption> <Attribution owner={this.props.owner} /> </figure>
github.com/component/component Managing components with Component
A HTML CSS JS UNIT ... B HTML CSS JS
UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...
A HTML CSS JS UNIT ...
A HTML CSS JS UNIT ... component.json
A HTML CSS JS UNIT ... component.json B
A HTML CSS JS UNIT ... component.json B C D
E F
{ "name": "tweet", "styles": [ "tweet.css" ], "scripts": [ "tweet.js"
], "dependencies": { "suitcss/utils": "0.8.0" }, "locals": [ "avatar", "inline-tweetbox", "tweet-actions" ] }
Building web UI is more than a CSS problem
The end @necolas