1.
An Exploration of Frameworks
and Why We Built Our Own

2.
Who Are We
Andrew Rota
@andrewrota
Matt DeGennaro
@thedeeg

3.
Wayfair
Wayfair.com is an online destination for all things
home
Selection of more than seven million home items from
7,000 suppliers
Ecommerce company since 2002
Several large websites running a shared
codebase
PHP backend for customer­facing pages
2,000,000+ lines of code for custom e­commerce
platform
2,000+ JavaScript modules

4.
Why were we looking for a new solution?
Large legacy codebase of mostly jQuery
Debugging code was hard, if not impossible in
some sections
Unnecessary DOM selection / manipulation on
page load
Interactive pages could become janky without
careful coding

5.
How to get performance to next level?
Sharing mustache templates between client and
server
Server uses a C++ extension in PHP for massive
throughput
Moving to Backbone gave us better architecture,
but not better performance
Wanted to evaluate industry performance
advancements

6.
Our key metrics
Performance
The driving force
Ease of use
Stability
Modularity
Stack Cohesion

7.
Where did we begin?

8.
Where did we begin?

9.
Ember
Performance X
Ease of Use X
Stability ✓
Modularity ?
Stack Cohesion ?

10.
Backbone
Performance X
Ease of Use ?
Stability ✓
Modularity ✓
Stack Cohesion ✓

11.
React
Performance ✓
Ease of Use ✓
Stability ?
Modularity ✓
Stack Cohesion X

12.
React
Performance ✓
Ease of Use ✓
Stability ?
Modularity ✓
Stack Cohesion X
?

13.
Not fast?!

14.
Not fast?!
­ ,
Funny story about server rendering: it
wasn't actually designed that way
“
Sebastian Markbåge React.js Conf

15.
Not fast?!
@swannodette server side rendering w react is pretty slow. Makes it
a tough sell when server rendering a primary concern
Nick Dreckshage @nickdreckshage
@nickdreckshage sure but people have lived w/
mediocre server side rendering in many scenarios
because caching often works OK
3:27 PM ‐ 13 Feb 2015
David Nolen
@swannodette
Follow
13 Feb

16.
What we liked about React
Declarative vs Imperative
Fast by default
Virtual DOM enables this functionality

17.
Why is Virtual DOM better than DOM?
document.createElement('div'new VirtualNode('div');
onautocomplete: null
onautocompleteerror: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
tagName: "DIV"
properties: {}
children: []
count: 0

18.
Diffing
{
"tagName": "INPUT",
"properties": {
"id": "toggle‐all",
"className": "js‐toggle‐all"
"type": "checkbox"
},
"children": [],
"count": 0
}
{
"tagName": "INPUT",
"properties": {
"id": "toggle‐all",
"className": "js‐toggle‐al
"type": "checkbox",
"checked": true
},
"children": [],
"count": 0
}

19.
Patching
{
"0": { // Index of the element to patch
"type": 4, // type of patch operation, in this case
"patch": { // Properties to update, in this case, up
"checked": true
}
}
}

20.
What do we do now?

21.
Good artists copy, great
artists steal.
­Steve Jobs
­Pablo Picasso
­William Faulkner
­Igor Stravinsky
­Lionel Trilling
­T.S. Eliot
­W. H. Davenport
Adams
“

22.
What we liked
Mustache ­ Stack Cohesion and server­side
performance
Backbone ­ Stack Cohesion, Modularity, Stability
Virtual DOM ­ Client­side performance and Ease
of Use

23.
What we did
Took a look at single­use libraries
Used to compile Mustache templates
into Virtual DOM
Used the library from
Used to bind events and handle data
layer
Wrote an integration library to pull it all together
Ractive
Virtual DOM Mercury
Backbone

24.
Takeaways
Be honest with yourself
Real world is messy
Leave preconceived notions at the door
Use what's out there
Successful conversions use existing
infrastructure

25.
Thanks!