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

Thinking beyond "Scalable CSS"

Thinking beyond "Scalable CSS"

Good components empower designers and engineers by letting us think only about their inputs and outputs, not their internal complexity. This is how we are working to scale our web UI work at Twitter, and to think about CSS within this model of design and development.

Nicolas Gallagher

November 17, 2014
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

Transcript

  1. Nicolas Gallagher
    @necolas
    Thinking beyond
    “Scalable CSS”

    View full-size slide

  2. Artwork by Adele Palmquist

    View full-size slide

  3. Artwork by Rachel Schragis

    View full-size slide

  4. “We cannot solve our
    problems with the same
    thinking we used when we
    created them.
    Albert Einstein

    View full-size slide

  5. Scalable UI design

    View full-size slide

  6. UI components

    View full-size slide

  7. Tweet
    (fragment tree)
    Photo
    (fragment tree)

    View full-size slide

  8. Tweet
    (rendered composite tree)

    View full-size slide

  9. var $size = this.props.size;
    var $src = this.props.src
    var $content = this.props.content;
    !





    {$content}


    View full-size slide

  10. // ui-Homepage/index.js
    !
    var Attribution = require('ui-Attribution');
    var Photo = require('ui-Photo');
    !

    Half-Dome in Yosemite National Park


    View full-size slide

  11. /** @define Photo */
    !
    /* root */
    .Photo {}
    !
    /* modifier */
    .Photo--large {}
    !
    /* private tree */
    .Photo-crop {}
    .Photo-caption {}

    View full-size slide

  12. /** @define Photo; use strict */
    !
    /* root */
    .Photo {}
    !
    /* modifier */
    .Photo—-large .Attribution {}
    !
    /* private tree */
    .Photo-crop {}
    .Photo-caption {}
    BUILD ERROR
    postcss-bem-linter

    View full-size slide

  13. // ui-Photo/index.js
    !
    // css-only dependencies
    // (extracted by webpack)
    require('suitcss-utils-display');
    require('./index.css');
    !
    var Photo = function () {};
    !
    module.exports = Photo;

    View full-size slide

  14. Architecture &
    the file system

    View full-size slide

  15. web_modules
    ├── character-counter
    ├── store-product
    ├── ui-Attribution
    ├── ui-Button
    ├── ui-HomePage
    ├── ui-Photo
    ├── ui-ProgressBar
    └── ui-ReplyBox

    View full-size slide

  16. web_modules
    ├── character-counter
    ├── store-product
    ├── ui-Attribution
    ├── ui-Button
    ├── ui-HomePage
    ├── ui-Photo
    ├── ui-ProgressBar
    └── ui-ReplyBox

    View full-size slide

  17. web_modules/ui-Photo
    ├── lib
    ├── test
    ├── index.css
    ├── index.js
    ├── OWNERS
    └── README

    View full-size slide

  18. web_modules/ui-Photo
    ├── lib
    ├── test
    ├── index.css
    ├── index.js
    ├── OWNERS
    └── README

    View full-size slide

  19. Empathy &
    automation

    View full-size slide

  20. Artwork by npr

    View full-size slide

  21. “…scientific and technical
    work is made invisible by its
    own success.
    Bruno Latour (Sociologist of science)

    View full-size slide

  22. Nicolas Gallagher
    @necolas
    Merci!

    View full-size slide