Pro Yearly is on sale from $80 to $50! »

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

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.

63e2f6b0de6ae817af2e185b82aa05c2?s=128

Mark Wunsch

July 31, 2013
Tweet

Transcript

  1. Geologic Time Scale Mark Wunsch @markwunsch

  2. Deep Time

  3. None
  4. None
  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

  30. None
  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> ಠ_ಠ
  35. None
  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

  45. None
  46. The Future

  47. None
  48. None
  49. None
  50. http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/

  51. None
  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