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
990
Thinking beyond "Scalable CSS"
necolas
14
6.9k
Making Twitter UI Infrastructure
necolas
14
4.1k
CSS Application Architecture
necolas
15
580
HTML5 Boilerplate: past, present, and future
necolas
4
260
The purification of web development
necolas
5
530
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
13
7.2k
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
580
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
590
技術同人誌をMCP Serverにしてみた
74th
1
570
童醫院敏捷轉型的實踐經驗
cclai999
0
210
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
350
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
470
GraphRAGの仕組みまるわかり
tosuri13
8
520
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Become a Pro
speakerdeck
PRO
28
5.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Designing for Performance
lara
609
69k
Making Projects Easy
brettharned
116
6.3k
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