$30 off During Our Annual Pro Sale. View Details »

Making Twitter UI Infrastructure

Making Twitter UI Infrastructure

Overview of a work-in-progress effort to create generalized UI infrastructure for Twitter web applications.

Nicolas Gallagher

October 10, 2014
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

Transcript

  1. @necolas
    Making Twitter
    UI infrastructure

    View Slide

  2. “I thought you do CSS?”

    View Slide

  3. TweetDeck
    Twitter Cards
    twitter.com
    Dotfiles
    FlightJS
    SUITCSS

    View Slide

  4. A brief history

    View Slide

  5. At Twitter, we design and
    build lots of web apps

    View Slide

  6. twitter.com
    mobile.twitter.com
    tweetdeck.twitter.com
    analytics.twitter.com
    ads.twitter.com
    vine.co

    View Slide

  7. Web apps at scale are
    complex adaptive systems

    View Slide

  8. View Slide

  9. Web engineering at scale
    can be expensive

    View Slide

  10. Artwork by

    View Slide

  11. But web apps are being
    commodified at Twitter

    View Slide

  12. Why are we building apps
    from scratch* every time?
    * or cloning parts of each other’s apps

    View Slide

  13. What can we do to
    enhance expertise?

    View Slide

  14. View Slide

  15. A project to create a web
    UI infrastructure

    View Slide

  16. View Slide

  17. View Slide

  18. 1 September
    !
    !
    10 October
    START
    TODAY

    View Slide

  19. 7 guiding principles

    View Slide

  20. Solve a known problem.
    1

    View Slide

  21. Focus on outcomes and
    process, not tools.
    2

    View Slide

  22. Design for adaptability,
    not perfection.
    3

    View Slide

  23. Components are the primary
    unit of scale.
    4

    View Slide

  24. Ready-made,
    not tailor-made.
    5

    View Slide

  25. Make skillful use of
    what is at hand.
    6

    View Slide

  26. Documentation & ownership
    over institutional knowledge.
    7

    View Slide

  27. “If HP knew what HP knows,
    we would be 3 times more
    profitable.
    Lew Platt, former CEO of HP

    View Slide

  28. System overview

    View Slide

  29. View Slide

  30. •UI components & automatic gallery.
    •Browser unit/e2e testing.
    •Asset deploy pipeline.
    •Localization.
    •Simple developer workflow.

    View Slide

  31. Infrastructure modules
    3rd party
    modules
    Our modules
    Browser modules
    3rd party
    modules
    Our modules

    View Slide

  32. web-client
    ├── package.json
    ├── config
    ├── lib
    ├── node_modules
    ├── script
    └── src

    View Slide

  33. UI components

    View Slide

  34. View Slide

  35. Infrastructure modules
    3rd party
    modules
    Our modules
    Browser modules
    3rd party
    modules
    Our modules

    View Slide

  36. web-client/src
    ├── package.json
    ├── node_modules
    └── web_modules

    View Slide

  37. Infrastructure modules
    3rd party
    modules
    Our modules
    Browser modules
    3rd party
    modules
    Our modules

    View Slide

  38. web-client/src
    ├── package.json
    ├── node_modules
    └── web_modules

    View Slide

  39. View Slide

  40. View Slide

  41. web-client/src/web_modules/
    ├── character-counter
    ├── product-data-store
    ├── ui-Button
    ├── ui-HomePage
    ├── ui-Icon
    ├── ui-ProductPage
    ├── ui-ProgressBar
    └── ui-ReplyBox

    View Slide

  42. web-client/src/web_modules/
    ├── character-counter
    ├── product-data-store
    ├── ui-Button
    ├── ui-HomePage
    ├── ui-Icon
    ├── ui-ProductPage
    ├── ui-ProgressBar
    └── ui-ReplyBox

    View Slide

  43. web-client/src/web_modules/ui-Icon
    ├── OWNERS
    ├── README
    ├── index.css
    ├── index.js
    ├── index.soy
    ├── IconView.scala
    ├── lib
    └── test

    View Slide

  44. Browser testing

    View Slide

  45. Karma for unit tests
    *.spec.unit.js
    !
    The Intern for e2e tests
    *.spec.e2e.js

    View Slide

  46. this.remote
    .get(homePageUrl)
    .findByClassName('Signup-name')
    .click()
    .type('necolas')
    .end()
    Webdriver API

    View Slide

  47. Homepage.signup = Signup
    !
    Homepage.signup.username('necolas')
    Homepage.signup.password('*****')
    Homepage.signup.submit()
    Component Object Design

    View Slide

  48. Asset pipeline

    View Slide

  49. View Slide

  50. Developer workflow

    View Slide

  51. CHANGE REVIEW
    (OPT-IN TESTING)
    AUTO RE-BUILD

    View Slide

  52. $ make install
    $ make build
    $ make test
    $ make start
    $ make client-start
    $ make client-ui-module name="Icon"

    View Slide

  53. Closing thoughts

    View Slide

  54. 1. Solve a known problem.
    2. Focus on outcomes and processes.
    3. Design for adaptability.
    4. Components as the unit of scale.
    5. Ready-made.
    6. Use what is at hand.
    7. Documentation & ownership.

    View Slide

  55. Artwork by npr

    View Slide

  56. “…scientific and technical
    work is made invisible by its
    own success.
    Bruno Latour, philosopher and sociologist of science

    View Slide

  57. @necolas
    Thank you

    View Slide