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
440
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
110
CSS in JS | Tech Movie Night vol.4
giuseppe
0
24
styled-jsx
giuseppe
5
2.9k
CSS convo over lunch
giuseppe
1
130
Other Decks in Technology
See All in Technology
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
FastConnect の冗長性
ocise
1
9.6k
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
RSNA2024振り返り
nanachi
0
500
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
依存関係があるコンポーネントは Barrel ファイルでまとめよう
azukiazusa1
3
530
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building an army of robots
kneath
302
45k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Why Our Code Smells
bkeepers
PRO
335
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How GitHub (no longer) Works
holman
313
140k
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