Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Exploration of Frameworks – and Why We Built Our Own

1,723 views

Published on

Insights drawn from our recent process of evaluating the latest JS frameworks, why we rejected them all to build our own, and why you might consider doing the same.

Co-Presented with Matt DeGennaro on Thursday, March 26, 2015 at BostonJS (http://www.meetup.com/boston_JS/events/221038649/).

Published in: Software
  • Login to see the comments

An Exploration of Frameworks – and Why We Built Our Own

  1. 1. An Exploration of Frameworks and Why We Built Our Own
  2. 2. Who Are We Andrew Rota @andrewrota   Matt DeGennaro @thedeeg
  3. 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. 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. 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. 6. Our key metrics Performance The driving force Ease of use Stability Modularity Stack Cohesion
  7. 7. Where did we begin?                                
  8. 8. Where did we begin?                                
  9. 9. Ember Performance X Ease of Use X Stability ✓ Modularity ? Stack Cohesion ?
  10. 10. Backbone Performance X Ease of Use ? Stability ✓ Modularity ✓ Stack Cohesion ✓
  11. 11. React Performance ✓ Ease of Use ✓ Stability ? Modularity ✓ Stack Cohesion X
  12. 12. React Performance ✓ Ease of Use ✓ Stability ? Modularity ✓ Stack Cohesion X ?
  13. 13. Not fast?!
  14. 14. Not fast?! ­  ,  Funny  story  about  server  rendering:  it wasn't actually designed that way “ Sebastian Markbåge React.js Conf
  15. 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. 16. What we liked about React Declarative vs Imperative Fast by default Virtual DOM enables this functionality
  17. 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. 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. 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. 20. What do we do now?
  21. 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. 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. 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. 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. 25. Thanks!

×