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
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
2.2k
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.6k
RubyとGoでゼロから作る証券システム： 高信頼性が求められるシステムのコードの外側にある設計と運用のリアル
Avatar for free_world21 free_world21
0
130
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
310
PostgreSQL を使った快適な go test 環境を求めて
Avatar for Kotaro Otaka otakakot
0
370
Rails Girls Tokyo 18th GMO Pepabo Sponsor Talk
Avatar for Yuto Kondo yutokyokutyo
0
180
go directiveを最新にしすぎないで欲しい話──あるいは、Go 1.26からgo mod initで作られるgo directiveの値が変わる話 / Go 1.26 リリースパーティ
Avatar for Arthur arthur1
2
400
New in Go 1.26 Implementing go fix in product development
Avatar for sunecosuri sunecosuri
0
100
Python’s True Superpower
Avatar for Hynek Schlawack hynek
0
190
あなたはユーザーではない #PdENight
Avatar for Takuma Kajikawa kajitack
4
290
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
420
メタプログラミングで実現する「コードを仕様にする」仕組み/nikkei-tech-talk43
Avatar for 日本経済新聞社 エンジニア採用事務局 nikkei_engineer_recruiting
0
130

Featured

See All Featured
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
130
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
11k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
180
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
75
5.1k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
95
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
2
65
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
140
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
110
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.7k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
460
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k

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