Adaptation and Components

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

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