Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adaptation and Components

Avatar for Nicolas Gallagher 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.
Avatar for Nicolas Gallagher

Nicolas Gallagher

April 09, 2014
Tweet

More Decks by Nicolas Gallagher

See All by Nicolas Gallagher
React Native for web and beyond
Avatar for Nicolas Gallagher necolas
5
990
Thinking beyond "Scalable CSS"
Avatar for Nicolas Gallagher necolas
14
6.9k
Making Twitter UI Infrastructure
Avatar for Nicolas Gallagher necolas
14
4.2k
CSS Application Architecture
Avatar for Nicolas Gallagher necolas
15
580
HTML5 Boilerplate: past, present, and future
Avatar for Nicolas Gallagher necolas
4
260
The purification of web development
Avatar for Nicolas Gallagher necolas
5
530

Other Decks in Programming

See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
Avatar for Oikon s4yuba
16
10k
WindowInsetsだってテストしたい
Avatar for RyuNen344 ryunen344
1
240
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
Avatar for コドモン開発チーム codmoninc
1
14k
PHPでWebSocketサーバーを実装しよう2025
Avatar for kubotak kubotak
0
270
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
3
1.2k
5つのアンチパターンから学ぶLT設計
Avatar for Narihara narihara
1
160
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
230
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
0
440
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
280
GitHub Copilot and GitHub Codespaces Hands-on
Avatar for Kento.Yamada ymd65536
2
140
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
520
Discover Metal 4
Avatar for rei rei315
2
120

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
281
13k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
680
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
138
34k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k

Transcript

  1. Adaptation and Components @necolas

  2. “Adaption” vs “Change”

  3. “Adaptable” vs “Adaptive”

  4. Adaptable systems

  5. 2013 App 2014 App 2012 App

  6. The ability to adapt-in-time is business-critical

  7. Complexity affects the ability to adapt

  8. Technology type as an organising principle

  9. HTML A B C D ... CSS A B C

    D ... JS A B C D ... UNIT A B C D ... ... A B C D ...

  10. HTML A B C D ... CSS A B C

    D ... JS A B C D ... UNIT A B C D ... ... A B C D ...

  11. HTML AD B CD D ... CSS A AB C

    D ... JS A B C D ... UNIT A B C D ... ... A B AC D ...

  12. Leaky abstractions increase complexity

  13. <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>

  14. <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>

  15. <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>

  16. /* avatar */ .avatar { } /* tweet */ .tweet

    { } .tweet .avatar { } .tweet .text {} /* user card */ .user { } .user .avatar { }

  17. Modularity is not enough

  18. Components as the primary unit of scale

  19. A HTML CSS JS UNIT ...

  20. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ...

  21. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ...

  22. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ...

  23. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...

  24. Components are simple

  25. Components are composable & configurable

  26. Reduces emergent complexity

  27. Adaptable over reusable

  28. facebook.github.io/react Defining components with React

  29. /** @jsx React.DOM */ var Photo = React.createClass({ render: function

    () { return ( <img src={this.props.src} /> ); } });

  30. <Photo src="photo.jpg"> </Photo>

  31. <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>

  32. <Photo src="photo.jpg" size="large" crop="circle"> Half-Dome in Yosemite National Park <Attribution

    owner="necolas" /> </Photo>

  33. suitcss.github.io Styling components with SUIT CSS

  34. <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>

  35. <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>

  36. <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>

  37. /** @define Photo */ .Photo {} /* Component */ .Photo--large

    {} /* Component modifier */ .Photo-crop {} /* Component descendent */ .Photo-crop--circle {} /* Descendent modifier */ .Photo-img {} .Photo-caption {}

  38. <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>

  39. <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>

  40. github.com/component/component Managing components with Component

  41. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...

  42. A HTML CSS JS UNIT ...

  43. A HTML CSS JS UNIT ... component.json

  44. A HTML CSS JS UNIT ... component.json B

  45. A HTML CSS JS UNIT ... component.json B C D

    E F

  46. { "name": "tweet", "styles": [ "tweet.css" ], "scripts": [ "tweet.js"

    ], "dependencies": { "suitcss/utils": "0.8.0" }, "locals": [ "avatar", "inline-tweetbox", "tweet-actions" ] }

  47. Building web UI is more than a CSS problem

  48. The end @necolas