About adaptable systems and the benefits of the component abstraction when building web UI's.
Adaptation andComponents@necolas
View Slide
“Adaption” vs “Change”
“Adaptable” vs “Adaptive”
Adaptable systems
2013App2014App2012App
The ability to adapt-in-timeis business-critical
Complexity affects theability to adapt
Technology type as anorganising principle
HTML A B C D ...CSS A B C D ...JS A B C D ...UNIT A B C D ...... A B C D ...
HTML AD B CD D ...CSS A AB C D ...JS A B C D ...UNIT A B C D ...... A B AC D ...
Leaky abstractionsincrease complexity
......
/* avatar */.avatar { }/* tweet */.tweet { }.tweet .avatar { }.tweet .text {}/* user card */.user { }.user .avatar { }
Modularity is not enough
Components as theprimary unit of scale
A HTML CSS JS UNIT ...
A HTML CSS JS UNIT ...B HTML CSS JS UNIT ...
A HTML CSS JS UNIT ...B HTML CSS JS UNIT ...C HTML CSS JS UNIT ...
A HTML CSS JS UNIT ...B HTML CSS JS UNIT ...C HTML CSS JS UNIT ...D HTML CSS JS UNIT ...
A HTML CSS JS UNIT ...B HTML CSS JS UNIT ...C HTML CSS JS UNIT ...D HTML CSS JS UNIT ...... HTML CSS JS UNIT ...
Components are simple
Components arecomposable & configurable
Reduces emergentcomplexity
Adaptable over reusable
facebook.github.io/reactDefining componentswith React
/** @jsx React.DOM */var Photo = React.createClass({render: function () {return ();}});
{this.props.children}
crop="circle">Half-Dome in Yosemite National Park
suitcss.github.ioStyling componentswith SUIT CSS
this.props.crop}>{this.props.children}
/** @define Photo */.Photo {} /* Component */.Photo--large {} /* Component modifier */.Photo-crop {} /* Component descendent */.Photo-crop--circle {} /* Descendent modifier */.Photo-img {}.Photo-caption {}
github.com/component/componentManaging componentswith Component
A HTML CSS JS UNIT ...component.json
A HTML CSS JS UNIT ...component.jsonB
A HTML CSS JS UNIT ...component.jsonB CDE F
{"name": "tweet","styles": ["tweet.css"],"scripts": ["tweet.js"],"dependencies": {"suitcss/utils": "0.8.0"},"locals": ["avatar","inline-tweetbox","tweet-actions"]}
Building web UI is morethan a CSS problem
The end@necolas