Making Twitter UI Infrastructure

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

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
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?
15. A project to create a web UI infrastructure
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
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
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
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
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