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
   

   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