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
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.4k
5年間のFintech × Rails実践に学ぶ - 基本に忠実な運用で築く高信頼性システム / 5 Years Fintech Rails Retrospective
ohbarye
8
2.4k
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
16
5.5k
AI Agent Dojo #1: watsonx OrchestrateAI エージェント体験
oniak3ibm
PRO
0
190
【GPT-5本出版記念】npaka による AIの今とこれから と AI時代の生存戦略
npaka
2
760
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
2
200
避けられないI/O待ちに対処する: Rails アプリにおけるSSEとasync gemの活用 / Tackling Inevitable I/O Latency in Rails Apps with SSE and the async gem
moznion
2
1.5k
今日から始めるpprof / Pprof workshop for beginners
ymotongpoo
6
700
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
140
Tomorrow graphlib, Let us use everybody
hayaosuzuki
0
120
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
390
みん強のこれまでとこれから
genshun9
1
350
Featured
See All Featured
KATA
mclloyd
32
14k
Making Projects Easy
brettharned
118
6.4k
Why Our Code Smells
bkeepers
PRO
339
57k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A Modern Web Designer's Workflow
chriscoyier
697
190k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Facilitating Awesome Meetings
lara
56
6.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Agile that works and the tools we love
rasmusluckow
330
21k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
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