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
1k
Thinking beyond "Scalable CSS"
Avatar for Nicolas Gallagher necolas
14
7k
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
540

Other Decks in Programming

See All in Programming
『リコリス・リコイル』に学ぶ！！ 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
Avatar for わんこ(Wanko_IT) wanko_it
1
610
MLH State of the League: 2026 Season
Avatar for Swift theycallmeswift
0
170
自作OSでDOOMを動かしてみた
Avatar for Zakki zakki0925224
1
1.4k
Updates on MLS on Ruby (and maybe more)
Avatar for sylph01 sylph01
1
160
🔨 小さなビルドシステムを作る
Avatar for Mutsuha Asada momeemt
2
610
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
2
270
TDD 実践ミニトーク
Avatar for Daisuke Garaike contour_gara
1
250
もうちょっといいRubyプロファイラを作りたい (2025)
Avatar for osyoyu osyoyu
0
160
学習を成果に繋げるための個人開発の考え方 〜 「学習のための個人開発」のすすめ / personal project for leaning
Avatar for panda_program panda_program
1
110
ゲームの物理
Avatar for Fadis fadis
5
1.6k
Understanding Ruby Grammar Through Conflicts
Avatar for yui-knk yui_knk
1
140
A Gopher's Guide to Vibe Coding
Avatar for Daniela Petruzalek danicat
0
180

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.6k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
55
13k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Done Done
Avatar for chrislema chrislema
185
16k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
1.4k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
83
9.1k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.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