Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
view-source:https://twitter.com
Search
Giuseppe Gurgone
January 25, 2017
Technology
0
470
view-source:https://twitter.com
A very brief overview of twitter.com's frontend architecture
Giuseppe Gurgone
January 25, 2017
Tweet
Share
More Decks by Giuseppe Gurgone
See All by Giuseppe Gurgone
Babel Plugins 101
giuseppe
0
130
CSS in JS | Tech Movie Night vol.4
giuseppe
0
28
styled-jsx
giuseppe
5
2.9k
CSS convo over lunch
giuseppe
1
140
Other Decks in Technology
See All in Technology
ヘブンバーンズレッドにおける、世界観を活かしたミニゲーム企画の作り方
gree_tech
PRO
0
570
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
4
1.2k
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
120
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
140
テストを軸にした生き残り術
kworkdev
PRO
0
180
おやつは300円まで!の最適化を模索してみた
techtekt
PRO
0
280
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
Kubernetes における cgroup v2 でのOut-Of-Memory 問題の解決
pfn
PRO
0
460
Codeful Serverless / 一人運用でもやり抜く力
_kensh
5
260
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
370
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
2
370
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
How to Ace a Technical Interview
jacobian
279
23k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
It's Worth the Effort
3n
187
28k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
view-source:https://twitter.com A very brief overview of twitter.com’s frontend architecture
None
@giuseppegurgone 2009
2010 @giuseppegurgone
2010 @giuseppegurgone
@giuseppegurgone 2010 #!NewTwitter Fully Client Side Application jQuery, Mustache, LABjs,
Modernizr Home grown MVC “Necessary complexity” – Dan Webb
2012 @giuseppegurgone
@giuseppegurgone 2012 Expandable tweets
@giuseppegurgone 2012 Inline Previews – Previeweet
Journey into twitter.com’s source code @giuseppegurgone Previeweet https://github.com/giuseppeg/Previeweet Reverse engineering
Minified code Learnt a ton !0 ~ ,
@giuseppegurgone Previeweet last iteration pre–cards
@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
@giuseppegurgone Architecture Flight.js – Twitter’s JS Framework Code splitting (bundles)
App initialization (bootstrapping) Routing
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
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
@giuseppegurgone Flight.js Components
Code Splitting Bundles @giuseppegurgone
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
<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
/* 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
App Initialization until a few days ago... @giuseppegurgone
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
Routing @giuseppegurgone Todd Kloots https://youtu.be/hrZl_EQUbRQ
@giuseppegurgone #ThankYou