Pro Yearly is on sale from $80 to $50! »

Making Twitter UI Infrastructure

Making Twitter UI Infrastructure

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

992c9c162c4c62ec0e2621b4f2206533?s=128

Nicolas Gallagher

October 10, 2014
Tweet

Transcript

  1. @necolas Making Twitter UI infrastructure

  2. “I thought you do CSS?”

  3. TweetDeck Twitter Cards twitter.com Dotfiles FlightJS SUITCSS

  4. A brief history

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

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

  7. Web apps at scale are complex adaptive systems

  8. None
  9. Web engineering at scale can be expensive

  10. Artwork by

  11. But web apps are being commodified at Twitter

  12. Why are we building apps from scratch* every time? *

    or cloning parts of each other’s apps
  13. What can we do to enhance expertise?

  14. None
  15. A project to create a web UI infrastructure

  16. None
  17. None
  18. 1 September ! ! 10 October START TODAY

  19. 7 guiding principles

  20. Solve a known problem. 1

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

  22. Design for adaptability, not perfection. 3

  23. Components are the primary unit of scale. 4

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

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

  26. Documentation & ownership over institutional knowledge. 7

  27. “If HP knew what HP knows, we would be 3

    times more profitable. Lew Platt, former CEO of HP
  28. System overview

  29. None
  30. •UI components & automatic gallery. •Browser unit/e2e testing. •Asset deploy

    pipeline. •Localization. •Simple developer workflow.
  31. Infrastructure modules 3rd party modules Our modules Browser modules 3rd

    party modules Our modules
  32. web-client ├── package.json ├── config ├── lib ├── node_modules ├──

    script └── src
  33. UI components

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

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

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

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

  39. None
  40. None
  41. web-client/src/web_modules/ ├── character-counter ├── product-data-store ├── ui-Button ├── ui-HomePage ├──

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

    ui-Icon ├── ui-ProductPage ├── ui-ProgressBar └── ui-ReplyBox
  43. web-client/src/web_modules/ui-Icon ├── OWNERS ├── README ├── index.css ├── index.js ├──

    index.soy ├── IconView.scala ├── lib └── test
  44. Browser testing

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

    tests *.spec.e2e.js
  46. this.remote .get(homePageUrl) .findByClassName('Signup-name') .click() .type('necolas') .end() Webdriver API

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

  48. Asset pipeline

  49. None
  50. Developer workflow

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

  52. $ make install $ make build $ make test $

    make start $ make client-start $ make client-ui-module name="Icon"
  53. Closing thoughts

  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.
  55. Artwork by npr

  56. “…scientific and technical work is made invisible by its own

    success. Bruno Latour, philosopher and sociologist of science
  57. @necolas Thank you