Adaptation and Components

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

Transcript

1. Adaptation and
   Components
   @necolas
   

   View Slide

2. “Adaption” vs “Change”
   

   View Slide

3. “Adaptable” vs “Adaptive”
   

   View Slide

4. Adaptable systems
   

   View Slide

5. 2013
   App
   2014
   App
   2012
   App
   

   View Slide

6. The ability to adapt-in-time
   is business-critical
   

   View Slide

7. Complexity affects the
   ability to adapt
   

   View Slide

8. Technology type as an
   organising principle
   

   View Slide

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 ...
   

   View Slide

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 ...
    

    View Slide

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 ...
    

    View Slide

12. Leaky abstractions
    increase complexity
    

    View Slide

13. 
    
    
    ...
    
    
    
    
    
    ...
    
    
    

    View Slide

14. 
    
    
    
    
    ...
    
    
    
    
    ...
    
    

    View Slide

15. 
    
    
    
    
    ...
    
    
    
    
    ...
    
    

    View Slide

16. /* avatar */
    .avatar { }
    /* tweet */
    .tweet { }
    .tweet .avatar { }
    .tweet .text {}
    /* user card */
    .user { }
    .user .avatar { }
    

    View Slide

17. Modularity is not enough
    

    View Slide

18. Components as the
    primary unit of scale
    

    View Slide

19. A HTML CSS JS UNIT ...
    

    View Slide

20. A HTML CSS JS UNIT ...
    B HTML CSS JS UNIT ...
    

    View Slide

21. A HTML CSS JS UNIT ...
    B HTML CSS JS UNIT ...
    C HTML CSS JS UNIT ...
    

    View Slide

22. A HTML CSS JS UNIT ...
    B HTML CSS JS UNIT ...
    C HTML CSS JS UNIT ...
    D HTML CSS JS UNIT ...
    

    View Slide

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 ...
    

    View Slide

24. Components are simple
    

    View Slide

25. Components are
    composable & configurable
    

    View Slide

26. Reduces emergent
    complexity
    

    View Slide

27. Adaptable over reusable
    

    View Slide

28. facebook.github.io/react
    Defining components
    with React
    

    View Slide

29. /** @jsx React.DOM */
    var Photo = React.createClass({
    render: function () {
    return (
    
    );
    }
    });
    

    View Slide

30. 
    

    View Slide

31. 
    
    
    
    
    {this.props.children}
    
    
    

    View Slide

32. crop="circle">
    Half-Dome in Yosemite National Park
    
    
    

    View Slide

33. suitcss.github.io
    Styling components
    with SUIT CSS
    

    View Slide

34. 
    
    
    
    
    {this.props.children}
    
    
    

    View Slide

35. 
    
    
    
    
    {this.props.children}
    
    
    

    View Slide

36. 
    this.props.crop}>
    
    
    
    {this.props.children}
    
    
    

    View Slide

37. /** @define Photo */
    .Photo {} /* Component */
    .Photo--large {} /* Component modifier */
    .Photo-crop {} /* Component descendent */
    .Photo-crop--circle {} /* Descendent modifier */
    .Photo-img {}
    .Photo-caption {}
    

    View Slide

38. 
    this.props.crop}>
    
    
    
    {this.props.children}
    
    
    

    View Slide

39. 
    this.props.crop}>
    
    
    
    {this.props.children}
    
    
    
    

    View Slide

40. github.com/component/component
    Managing components
    with Component
    

    View Slide

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 ...
    

    View Slide

42. A HTML CSS JS UNIT ...
    

    View Slide

43. A HTML CSS JS UNIT ...
    component.json
    

    View Slide

44. A HTML CSS JS UNIT ...
    component.json
    B
    

    View Slide

45. A HTML CSS JS UNIT ...
    component.json
    B C
    D
    E F
    

    View Slide

46. {
    "name": "tweet",
    "styles": [
    "tweet.css"
    ],
    "scripts": [
    "tweet.js"
    ],
    "dependencies": {
    "suitcss/utils": "0.8.0"
    },
    "locals": [
    "avatar",
    "inline-tweetbox",
    "tweet-actions"
    ]
    }
    

    View Slide

47. Building web UI is more
    than a CSS problem
    

    View Slide

48. The end
    @necolas
    

    View Slide