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.3k
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
970
Thinking beyond "Scalable CSS"
necolas
14
6.9k
Making Twitter UI Infrastructure
necolas
14
4.1k
CSS Application Architecture
necolas
15
560
HTML5 Boilerplate: past, present, and future
necolas
4
250
The purification of web development
necolas
5
460
Other Decks in Programming
See All in Programming
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
GAEログのコスト削減
mot_techtalk
0
110
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
Honoとフロントエンドの 型安全性について
yodaka
4
250
sappoRo.R #12 初心者セッション
kosugitti
0
230
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Building Applications with DynamoDB
mza
93
6.2k
What's in a price? How to price your products and services
michaelherold
244
12k
Embracing the Ebb and Flow
colly
84
4.6k
Statistics for Hackers
jakevdp
797
220k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How STYLIGHT went responsive
nonsquared
98
5.3k
Gamification - CAS2011
davidbonilla
80
5.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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