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

Adaptation and Components

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Nicolas Gallagher Nicolas Gallagher
April 09, 2014
Programming
6
1.4k

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.3k
CSS Application Architecture
Avatar for Nicolas Gallagher necolas
15
600
HTML5 Boilerplate: past, present, and future
Avatar for Nicolas Gallagher necolas
4
290
The purification of web development
Avatar for Nicolas Gallagher necolas
5
600

Other Decks in Programming

See All in Programming
CSC307 Lecture 12
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
Rails Girls Tokyo 18th GMO Pepabo Sponsor Talk
Avatar for Yuto Kondo yutokyokutyo
0
180
AI時代でも変わらない技術コミュニティの力～10年続く“ゆるい”つながりが生み出す価値
Avatar for Takehata Naoto n_takehata
2
560
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
2
2.1k
あなたはユーザーではない #PdENight
Avatar for Takuma Kajikawa kajitack
4
290
What Spring Developers Should Know About Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
120
エージェント開発初心者の僕が エージェントを作った話と今後やりたいこと
Avatar for ta-hasunuma thasu0123
0
220
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
480
20260228_JAWS_Beginner_Kansai
Avatar for Takuya Yonezawa takuyay0ne
5
410
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
130
AIプロダクト時代のQAエンジニアに求められること
Avatar for imtnd imtnd
1
510
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
2k

Featured

See All Featured
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
140
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
71
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.1k
Side Projects
Avatar for Sacha Greif sachag
455
43k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
740
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.4k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
450
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
130

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