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

�ank you

@craigspaeth@zamianggithub.com/artsy

SAMPLE SETUP.JS

DIRECTORY STRUCTURE