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

Adaptation and Components

Adaptation and Components

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

Nicolas Gallagher

April 09, 2014
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

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