artsy at node on the road
DESCRIPTION
Slides for a talk given at Node on The Road found here: https://www.joyent.com/developers/videos/node-js-on-the-road-nyc-craig-spaeth-brennan-moore. These outline Artsy's (artsy.net) transition from a monolithic Ruby on Rails stack to a distributed system with Node.js powered front ends.TRANSCRIPT
Craig Spaeth & Brennan MooreArtsy Web Engineering@craigspaeth & @zamiang
WHY WE MIGRATED TO NODE
RUBY ON RAILSRUBYONRAILS
API
BACKBONE UI
IOS PROTOTYPE
BACKBONE UI
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WVEB
BROKE
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WVEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WVEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
T
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
MOBILE
WVEB
BROKEN
OBILE W
EB B
ROKEN
MOBILE
WEB
BROKEN
MOBILE
WEB
BROKEN
RUBYONRAILS
AN
ALY
TICS
EMA
L G
ENER
ATO
RS
API
AD
MIN
PA
NEL
CO
DE
IOS APP CMS
MOBILE
WEB
BROKEN
MOBILE
WVEB
BROKEN
PROBLEMS WITH BACKBONE + RAILS STACK
• Slow JS testing
• Ruby/JS—lack of re-use
• Hard to understand hybrid stack
• Huge single page app
• Bloated & slow assets
INTRODUCING NODE INTO THE STACK
RUBY API
BACKBONEFRONT-END
CMS
INTRODUCING NODE INTO THE STACK
CMS
RUBY API
BACKBONEFRONT-END
MOBILE WEB
Redirect mobile User Agents
INTRODUCING NODE INTO THE STACK
CMS
RUBY API
MOBILE WEB
DESKTOP WEB
Avoiding Death by Rewrite
Gustavo RezendeValquíria, 2009
MIGRATING USERS PAGE BY PAGE UNTIL NODE WAS IN FRONT
NEWNODE APP
LEGACYRAILS APP HAPROXY
/browse
/artist/:id
/tag/:id
NEWNODE APP
HAPROXY+ LEGACYRAILS APP
NODE-HTTP-PROXY
OUR STACK NOW
RUBY API
NODE TOOLS HOSTING CACHING
NODE SERVER
ASSET CDN
MEET EZEL: ARTSY’S JS APP BOILERPLATE
• Philosophy: Modularity, Flexibility, Isomorphic
• Apps: Express sub-apps mounted
• Components: Modules of UI grouping CSS, templates, and JS together
• Simple re-use, small asset package size, test everything in Node
• Ezeljs.com
PAIN POINTS IN TRANSITION
• Syncing auth
• Tracking memory usage & leaks
• npmjs.org stability
• Integration testing a distributed architecture
Patrick Lichty
A Failure in �e Interwebz, 2013
WINS
Community• npm for server & client
Productivity• 1,000+ tests under 5 mins.• 5 min. deploys, ~5 times a day
Performance• Page load speed cut in half• 40+ Rails servers to 2 Node servers• SEO—Shared rendering server/client
Patrick LichtyA Failure in �e Interwebz, 2013
Loving ParentSuccess Baby, circa. 2007
SAMPLE SETUP.JS
DIRECTORY STRUCTURE