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. 3.
  2. 4.
  3. 5.

    Agenda • Stratigraphy • Asynchronous JavaScript + XML • Always

    Be Scrolling • Optimizing for Robots • Templates • Models, Views, Whatever • Prognostication
  4. 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
  5. 16.
  6. 19.
  7. 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...
  8. 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
  9. 29.
  10. 30.
  11. 32.
  12. 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>
  13. 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> ಠ_ಠ
  14. 35.
  15. 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
  16. 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
  17. 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
  18. 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
  19. 45.
  20. 47.
  21. 48.
  22. 49.
  23. 51.
  24. 53.
  25. 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