$30 off During Our Annual Pro Sale. View Details »

Adaptation and Components

Nicolas Gallagher
April 09, 2014
Programming
6
930

Adaptation and Components

About adaptable systems and the benefits of the component abstraction when building web UI's.

Nicolas Gallagher

April 09, 2014
Tweet

More Decks by Nicolas Gallagher

See All by Nicolas Gallagher
React Native for web and beyond
necolas
5
910
Thinking beyond "Scalable CSS"
necolas
14
6.6k
Making Twitter UI Infrastructure
necolas
14
3.5k
CSS Application Architecture
necolas
15
520
HTML5 Boilerplate: past, present, and future
necolas
4
230
The purification of web development
necolas
5
310

Other Decks in Programming

See All in Programming
コロナ禍でRails Girlsを開催したお話
emorima
0
180
JavaScript Testing Framework: Under the Hood(JSConfJP2022)
yoshiaki_togami
0
2.5k
브런치 FE 심폐소생술
kakao
PRO
1
100
Web開発を補助する目的でPlaywrightを使っている話
aokiken
0
200
Why CoderDojo? @ DojoCon Japan 2022交流会LT
kwaka1208
0
180
SymfonyCon 2022 Keynote: Webhooks
fabpot
1
1.1k
Symfony & Hotwire: an efficient combo to quickly develop complex applications
florentdestremau
0
140
golang.org/x/text/transformを用いた文字列変換のススメ
tomtwinkle
0
170
『良いコード／悪いコードで学ぶ設計入門』を一歩深める読み方 / deepen good code bad code
minodriven
12
4.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
20
6.8k
Ship Faster With Feature Flags
davidodari
0
170
傾聴対話ライブラリ実装 -おうむ返し-
sadahry
0
1k

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
The Pragmatic Product Professional
lauravandoore
19
3.3k
Practical Orchestrator
shlominoach
178
8.9k
Visualization
eitanlees
126
12k
Fireside Chat
paigeccino
16
1.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
7
3.1k
Infographics Made Easy
chrislema
234
17k
Optimizing for Happiness
mojombo
364
64k
How to train your dragon (web standard)
notwaldorf
64
4.1k
What the flash - Photography Introduction
edds
64
10k
GitHub's CSS Performance
jonrohan
1020
430k
Keith and Marios Guide to Fast Websites
keithpitt
405
21k

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