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
350
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
97
CSS in JS | Tech Movie Night vol.4
giuseppe
0
22
styled-jsx
giuseppe
5
2.8k
CSS convo over lunch
giuseppe
1
130
Other Decks in Technology
See All in Technology
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
2k
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
500
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
760
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
MySQL の SQL クエリチューニングの要所を掴む勉強会
andpad
2
6k
一生覚えておきたい「システム開発=コミュニケーション」〜初めての実務案件振り返りLT〜
maimyyym
0
110
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
260
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
450
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
130
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
200
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
Featured
See All Featured
Faster Mobile Websites
deanohume
299
30k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Side Projects
sachag
451
41k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
The Cult of Friendly URLs
andyhume
74
5.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Designing for Performance
lara
601
67k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
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