Upgrade to Pro — share decks privately, control downloads, hide ads and more …

view-source:https://twitter.com

 view-source:https://twitter.com

A very brief overview of twitter.com's frontend architecture

767ad16f5fb26d68793d0ffa86b37aef?s=128

Giuseppe Gurgone

January 25, 2017
Tweet

Transcript

  1. view-source:https://twitter.com A very brief overview of twitter.com’s frontend architecture

  2. None
  3. @giuseppegurgone 2009

  4. 2010 @giuseppegurgone

  5. 2010 @giuseppegurgone

  6. @giuseppegurgone 2010 #!NewTwitter Fully Client Side Application jQuery, Mustache, LABjs,

    Modernizr Home grown MVC “Necessary complexity” – Dan Webb
  7. 2012 @giuseppegurgone

  8. @giuseppegurgone 2012 Expandable tweets

  9. @giuseppegurgone 2012 Inline Previews – Previeweet

  10. Journey into twitter.com’s source code @giuseppegurgone Previeweet https://github.com/giuseppeg/Previeweet Reverse engineering

    Minified code Learnt a ton !0 ~ ,
  11. @giuseppegurgone Previeweet last iteration pre–cards

  12. @giuseppegurgone @danwrong yey! The future is coming and it looks

    just like the past, but more good underneath. — Tom Lea (@cwninja) May 23, 2012 Server side rendering – 4x faster Progressive Enhancement Flight.js – Component based UI framework CommonJS + AMD via Loadrunner hashbang #! Hello PushState
  13. @giuseppegurgone Architecture Flight.js – Twitter’s JS Framework Code splitting (bundles)

    App initialization (bootstrapping) Routing
  14. function inbox() { this.attributes({ myProp: 'hi' }) this.doSomething = function

    () { this.trigger(document, 'uiDoingSomething') /* ... */ } // after initializing the component this.after('initialize', function () { this.on('click', this.doSomething) }) } var Inbox = flight.component(inbox) /* Attach the component to a DOM node */ Inbox.attachTo('#inbox', { myProp: 'hello' }) Flight.js A component-based, event-driven JavaScript framework @giuseppegurgone
  15. Flight.js Components @giuseppegurgone Get a reference to a node this.$node

    Organised in UI and Data components Decoupled – trigger and subscribe to DOM events Isolated and easy to test and reason about
  16. @giuseppegurgone Flight.js Components

  17. Code Splitting Bundles @giuseppegurgone

  18. var UiTimeline = require('components/ui/Timeline') var DataTimeline = require('components/data/Timeline') /* ...

    */ function init(initData) { /* Attach components to DOM nodes */ UiTimeline.attachTo('#timeline', initData.timeline) DataTimeline.attachTo('#timeline', initData.timeline) /* ... */ } module.exports = init Code Splitting Bundles @giuseppegurgone
  19. <input type="hidden" id="init-data" class="json-data" value="{ App data in JSON }">

    <input type="hidden" class="swift-boot-module" value="app/pages/permalink"> <input type="hidden" id="swift-module-path" value="https://abs.twimg.com/c/swift/en"> <script src="https://abs.twimg.com/k/en/init.en.38255812c7627517cc63.js" async> </script> App Initialization Bootstrapping @giuseppegurgone
  20. /* Grab initial data */ var initData = {} try

    { initData = $.parseJSON( $('#init-data').val() ) } catch (e) {} /* Grab modules base path */ var basePath = using.path = $('#swift-module-path').val() /* Grab modules names */ var modules = $('.swift-boot-module').map(function (_, module) { return module.val() }).toArray() /* require modules and call their exported function (init) with initData */ using(modules, function () { [].slice.call(arguments).forEach(function (init) { init(initData) }) }) App Initialization Bootstrapping @giuseppegurgone
  21. App Initialization until a few days ago... @giuseppegurgone

  22. PushState via HTML5 History API Progressive Enhacement UI component to

    catch clicks on .js-nav links Data component to fetch data and update the URL / History UI component to update the UI Routing @giuseppegurgone
  23. Routing @giuseppegurgone Todd Kloots https://youtu.be/hrZl_EQUbRQ

  24. @giuseppegurgone #ThankYou