The Geologic Time Scale of Gilt.com's View Layer

My talk from BackboneConf 2013 (http://backboneconf.com/).

The "best practices of architecting, designing, and managing the V in MVC have evolved over the course of time. The act of modernizing a web application reveals the layers of previous approaches lurking just underneath the crust. This talk will dive through the strata of the View layer of Gilt.com. Every day, Gilt builds a dynamic shopping experience for each of our millions of customers and awaits their timed onslaught. How do business strategies, re-architectures, new technologies, and a rabid customer base shape and re-shape the View? We will move across Eras: from Ruby on Rails and early Ajax techniques, to lightweight Java frameworks, to our current day; where asset management pipelines and JavaScript MVC frameworks are de rigueur. We'll discuss concerns like page performance, pagination, and search engine optimization through the lens of our Views present and past.

Transcript

1. Geologic Time Scale Mark Wunsch @markwunsch
2. Deep Time
5. Agenda • Stratigraphy • Asynchronous JavaScript + XML • Always Be Scrolling • Optimizing for Robots • Templates • Models, Views, Whatever • Prognostication
6. Stratigraphy
7. git log --reverse commit 0d55d7d Author: Michael Bryzek <redacted> Date: Fri Jan 11 17:34:17 2008 -0500 Initial import from Subversion Principle of superposition
8. Principle of original horizontality
9. Principle of original horizontality
10. Principle of original horizontality
11. Principle of original horizontality
12. Principle of lateral continuity
13. Principle of lateral continuity
14. Principle of lateral continuity
15. Principle of lateral continuity
16. Ajax
17. XML-RPC ಠ_ಠ
18. GET /add-to-cart?sku=07734 ಠ_ಠ
19. ಠ_ಠ
20. HTTP/1.1 200 OK { “status”: 500, “msg”: “Internal server error”, ... } ಠ_ಠ
21. Maintainability
22. _.template()
23. window.history.pushState()
24. Infinite Scroll
25. ←Previous 1 2 3 ... 10 Next →
26. $(window).on(‘scroll’) or window.setTimeout() or $ (window).on(‘scroll’, _.debounce(function.. and then window.history.pushState() or replaceState() and listen for window.onpopstate but you might want to store something in localStorage and then get HTML from the server but you’ll need innerShiv but that’s deprecated now so just use html5shiv.js or maybe the server returns JSON and you can put it in a Handlebars.js template and appendChild it’s starting to get really slow now and I think there’s a memory leak? Oh look, Paul Irish made something called jquery.infinitescroll.js I wonder if that’s any good...
27. $(window).on(‘scroll’) or window.setTimeout() or $ (window).on(‘scroll’, _.debounce(function.. and then window.history.pushState() or replaceState() and listen for window.onpopstate but you might want to store something in localStorage and then get HTML from the server but you’ll need innerShiv but that’s deprecated now so just use html5shiv.js or maybe the server returns JSON and you can put it in a Handlebars.js template and appendChild it’s starting to get really slow now and I think there’s a memory leak? Oh look, Paul Irish made something called jquery.infinitescroll.js I wonder if that’s any good... ಠ_ಠ http://tumbledry.org/2011/05/12/screw_hashbangs_building
28. Page 1 of 4ᴹNext →
29. Robots
31. Whither single page apps?
32. Templates
33. <hgroup class="look-name"> <c:if test="${!hideBrandName}"> <h2 class="brand-name"> <c:choose> <c:when test="${!empty detailedBrandOpt && detailedBrandOpt.isPresent}"> <a class="primary" href="/brand/$ {detailedBrandOpt.get.urlKey}">${brandName}</a> <gilt:favorite brandId="${brandId}" brandName="$ {brandName}" tooltipLocation="${favoriteToolTipLoc}"/> </c:when> <c:otherwise> <div class="primary">${brandName} <gilt:favorite brandId="${brandId}" brandName="${brandName}" tooltipLocation="$ {favoriteToolTipLoc}"/> </div> </c:otherwise> </c:choose>
34. <hgroup class="look-name"> <c:if test="${!hideBrandName}"> <h2 class="brand-name"> <c:choose> <c:when test="${!empty detailedBrandOpt && detailedBrandOpt.isPresent}"> <a class="primary" href="/brand/$ {detailedBrandOpt.get.urlKey}">${brandName}</a> <gilt:favorite brandId="${brandId}" brandName="$ {brandName}" tooltipLocation="${favoriteToolTipLoc}"/> </c:when> <c:otherwise> <div class="primary">${brandName} <gilt:favorite brandId="${brandId}" brandName="${brandName}" tooltipLocation="$ {favoriteToolTipLoc}"/> </div> </c:otherwise> </c:choose> ಠ_ಠ
36. https://github.com/mwunsch/handlebars.scala Sc
37. Backbone.js
38. Mark Wunsch @markwunsch MVC stands for Model View Computers. 9:21 AM - 22 Mar 13 9 RETWEETS 10 FAVORITES https://twitter.com/markwunsch/status/315090778651258882
39. Page 1 of 4ᴹNext →
40. Page 1 of 4ᴹNext → GET /products?page=2 Accept: application/json
41. But Can Backbone... - Give structure to web apps - Bring sanity to complex client-server calls - Effectively manage page state - Provide rich experiences without sacrificing SEO - Have a footprint small enough for mobile - Make my life just a little bit easier
42. But Can Backbone... ✓Give structure to web apps ✓Bring sanity to complex client-server calls ✓Effectively manage page state ✓Provide rich experiences without sacrificing SEO ✓Have a footprint small enough for mobile ✓Make my life just a little bit easier
43. But Can Backbone... ✓Give structure to web apps ✓Bring sanity to complex client-server calls ✓Effectively manage page state ✓Provide rich experiences without sacrificing SEO ✓Have a footprint small enough for mobile ✓Make my life just a little bit easier with work
44. Flexibility vs. Maintainability
46. The Future
50. http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/
52. http://wunsch.spreadshirt.com/
53. Thanks
54. Appendix • http://hoppip.tumblr.com/post/26651017314/fantasiacosmos • http://flic.kr/p/dYKHj9 • http://commons.wikimedia.org/wiki/File:Poussin,_Nicolas_-_The_Empire_of_Flora_-_1631.jpg • http://commons.wikimedia.org/wiki/File:Profeta_Aggeo_(Moretto).jpg • http://commons.wikimedia.org/wiki/Category:The_Turk • http://commons.wikimedia.org/wiki/File:The_Caxton_Celebration_- _William_Caxton_showing_specimens_of_his_printing_to_King_Edward_IV_and_his_Queen.jp g • http://commons.wikimedia.org/wiki/File:Karl_Brullov_-_The_Last_Day_of_Pompeii_- _Google_Art_Project.jpg • http://commons.wikimedia.org/wiki/File:Eug%C3%A8ne_Ferdinand_Victor_Delacroix_006.jpg • http://2087.tumblr.com/post/56779361048 • http://commons.wikimedia.org/wiki/File:Sortie_de_l%27op%C3%A9ra_en_l %27an_2000-2.png