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
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
9
3.4k
CNCF Project の作者が考えている OSS の運営
utam0k
6
710
Formの複雑さに立ち向かう
bmthd
1
810
DROBEの生成AI活用事例 with AWS
ippey
0
130
Spring gRPC について / About Spring gRPC
mackey0225
0
220
技術を根付かせる / How to make technology take root
kubode
1
240
Lottieアニメーションをカスタマイズしてみた
tahia910
0
120
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
490
Open source software: how to live long and go far
gaelvaroquaux
0
630
Immutable ActiveRecord
megane42
0
140
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
730
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
A better future with KSS
kneath
238
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Code Reviewing Like a Champion
maltzj
521
39k
Embracing the Ebb and Flow
colly
84
4.6k
Agile that works and the tools we love
rasmusluckow
328
21k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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