Overview of a work-in-progress effort to create generalized UI infrastructure for Twitter web applications.
@necolasMaking TwitterUI infrastructure
View Slide
“I thought you do CSS?”
TweetDeckTwitter Cardstwitter.comDotfilesFlightJSSUITCSS
A brief history
At Twitter, we design andbuild lots of web apps
twitter.commobile.twitter.comtweetdeck.twitter.comanalytics.twitter.comads.twitter.comvine.co
Web apps at scale arecomplex adaptive systems
Web engineering at scalecan be expensive
Artwork by
But web apps are beingcommodified at Twitter
Why are we building appsfrom scratch* every time?* or cloning parts of each other’s apps
What can we do toenhance expertise?
A project to create a webUI infrastructure
1 September!!10 OctoberSTARTTODAY
7 guiding principles
Solve a known problem.1
Focus on outcomes andprocess, not tools.2
Design for adaptability,not perfection.3
Components are the primaryunit of scale.4
Ready-made,not tailor-made.5
Make skillful use ofwhat is at hand.6
Documentation & ownershipover institutional knowledge.7
“If HP knew what HP knows,we would be 3 times moreprofitable.Lew Platt, former CEO of HP
System overview
•UI components & automatic gallery.•Browser unit/e2e testing.•Asset deploy pipeline.•Localization.•Simple developer workflow.
Infrastructure modules3rd partymodulesOur modulesBrowser modules3rd partymodulesOur modules
web-client├── package.json├── config├── lib├── node_modules├── script└── src
UI components
web-client/src├── package.json├── node_modules└── web_modules
web-client/src/web_modules/├── character-counter├── product-data-store├── ui-Button├── ui-HomePage├── ui-Icon├── ui-ProductPage├── ui-ProgressBar└── ui-ReplyBox
web-client/src/web_modules/ui-Icon├── OWNERS├── README├── index.css├── index.js├── index.soy├── IconView.scala├── lib└── test
Browser testing
Karma for unit tests*.spec.unit.js!The Intern for e2e tests*.spec.e2e.js
this.remote.get(homePageUrl).findByClassName('Signup-name').click().type('necolas').end()Webdriver API
Homepage.signup = Signup!Homepage.signup.username('necolas')Homepage.signup.password('*****')Homepage.signup.submit()Component Object Design
Asset pipeline
Developer workflow
CHANGE REVIEW(OPT-IN TESTING)AUTO RE-BUILD
$ make install$ make build$ make test$ make start$ make client-start$ make client-ui-module name="Icon"
Closing thoughts
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.
Artwork by npr
“…scientific and technicalwork is made invisible by itsown success.Bruno Latour, philosopher and sociologist of science
@necolasThank you