Slide 1
Slide 1 text
@necolas
Making Twitter
UI infrastructure
Slide 2
Slide 2 text
“I thought you do CSS?”
Slide 3
Slide 3 text
TweetDeck
Twitter Cards
twitter.com
Dotfiles
FlightJS
SUITCSS
Slide 4
Slide 4 text
A brief history
Slide 5
Slide 5 text
At Twitter, we design and
build lots of web apps
Slide 6
Slide 6 text
twitter.com
mobile.twitter.com
tweetdeck.twitter.com
analytics.twitter.com
ads.twitter.com
vine.co
Slide 7
Slide 7 text
Web apps at scale are
complex adaptive systems
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
Web engineering at scale
can be expensive
Slide 10
Slide 10 text
Artwork by
Slide 11
Slide 11 text
But web apps are being
commodified at Twitter
Slide 12
Slide 12 text
Why are we building apps
from scratch* every time?
* or cloning parts of each other’s apps
Slide 13
Slide 13 text
What can we do to
enhance expertise?
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
A project to create a web
UI infrastructure
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
1 September
!
!
10 October
START
TODAY
Slide 19
Slide 19 text
7 guiding principles
Slide 20
Slide 20 text
Solve a known problem.
1
Slide 21
Slide 21 text
Focus on outcomes and
process, not tools.
2
Slide 22
Slide 22 text
Design for adaptability,
not perfection.
3
Slide 23
Slide 23 text
Components are the primary
unit of scale.
4
Slide 24
Slide 24 text
Ready-made,
not tailor-made.
5
Slide 25
Slide 25 text
Make skillful use of
what is at hand.
6
Slide 26
Slide 26 text
Documentation & ownership
over institutional knowledge.
7
Slide 27
Slide 27 text
“If HP knew what HP knows,
we would be 3 times more
profitable.
Lew Platt, former CEO of HP
Slide 28
Slide 28 text
System overview
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
•UI components & automatic gallery.
•Browser unit/e2e testing.
•Asset deploy pipeline.
•Localization.
•Simple developer workflow.
Slide 31
Slide 31 text
Infrastructure modules
3rd party
modules
Our modules
Browser modules
3rd party
modules
Our modules
Slide 32
Slide 32 text
web-client
├── package.json
├── config
├── lib
├── node_modules
├── script
└── src
Slide 33
Slide 33 text
UI components
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Infrastructure modules
3rd party
modules
Our modules
Browser modules
3rd party
modules
Our modules
Slide 36
Slide 36 text
web-client/src
├── package.json
├── node_modules
└── web_modules
Slide 37
Slide 37 text
Infrastructure modules
3rd party
modules
Our modules
Browser modules
3rd party
modules
Our modules
Slide 38
Slide 38 text
web-client/src
├── package.json
├── node_modules
└── web_modules
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
web-client/src/web_modules/
├── character-counter
├── product-data-store
├── ui-Button
├── ui-HomePage
├── ui-Icon
├── ui-ProductPage
├── ui-ProgressBar
└── ui-ReplyBox
Slide 42
Slide 42 text
web-client/src/web_modules/
├── character-counter
├── product-data-store
├── ui-Button
├── ui-HomePage
├── ui-Icon
├── ui-ProductPage
├── ui-ProgressBar
└── ui-ReplyBox
Slide 43
Slide 43 text
web-client/src/web_modules/ui-Icon
├── OWNERS
├── README
├── index.css
├── index.js
├── index.soy
├── IconView.scala
├── lib
└── test
Slide 44
Slide 44 text
Browser testing
Slide 45
Slide 45 text
Karma for unit tests
*.spec.unit.js
!
The Intern for e2e tests
*.spec.e2e.js
Slide 46
Slide 46 text
this.remote
.get(homePageUrl)
.findByClassName('Signup-name')
.click()
.type('necolas')
.end()
Webdriver API
Slide 47
Slide 47 text
Homepage.signup = Signup
!
Homepage.signup.username('necolas')
Homepage.signup.password('*****')
Homepage.signup.submit()
Component Object Design
Slide 48
Slide 48 text
Asset pipeline
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Developer workflow
Slide 51
Slide 51 text
CHANGE REVIEW
(OPT-IN TESTING)
AUTO RE-BUILD
Slide 52
Slide 52 text
$ make install
$ make build
$ make test
$ make start
$ make client-start
$ make client-ui-module name="Icon"
Slide 53
Slide 53 text
Closing thoughts
Slide 54
Slide 54 text
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.
Slide 55
Slide 55 text
Artwork by npr
Slide 56
Slide 56 text
“…scientific and technical
work is made invisible by its
own success.
Bruno Latour, philosopher and sociologist of science
Slide 57
Slide 57 text
@necolas
Thank you