Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Mark Wunsch

July 31, 2013
Tweet

More Decks by Mark Wunsch

Other Decks in Programming

Transcript

  1. Geologic
    Time
    Scale
    Mark Wunsch
    @markwunsch

    View full-size slide

  2. Agenda
    • Stratigraphy
    • Asynchronous JavaScript + XML
    • Always Be Scrolling
    • Optimizing for Robots
    • Templates
    • Models, Views, Whatever
    • Prognostication

    View full-size slide

  3. Stratigraphy

    View full-size slide

  4. git log --reverse
    commit 0d55d7d
    Author: Michael Bryzek
    Date: Fri Jan 11 17:34:17 2008 -0500
    Initial import from Subversion
    Principle of superposition

    View full-size slide

  5. Principle of original horizontality

    View full-size slide

  6. Principle of original horizontality

    View full-size slide

  7. Principle of original horizontality

    View full-size slide

  8. Principle of original horizontality

    View full-size slide

  9. Principle of lateral continuity

    View full-size slide

  10. Principle of lateral continuity

    View full-size slide

  11. Principle of lateral continuity

    View full-size slide

  12. Principle of lateral continuity

    View full-size slide

  13. XML-RPC
    ಠ_ಠ

    View full-size slide

  14. GET /add-to-cart?sku=07734
    ಠ_ಠ

    View full-size slide

  15. HTTP/1.1 200 OK
    {
    “status”: 500,
    “msg”: “Internal server error”,
    ...
    }
    ಠ_ಠ

    View full-size slide

  16. Maintainability

    View full-size slide

  17. _.template()

    View full-size slide

  18. window.history.pushState()

    View full-size slide

  19. Infinite Scroll

    View full-size slide

  20. ←Previous 1 2 3 ... 10 Next →

    View full-size slide

  21. $(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...

    View full-size slide

  22. $(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

    View full-size slide

  23. Page 1 of 4ᴹNext →

    View full-size slide

  24. Whither single page apps?

    View full-size slide






  25. ${brandName}



    ${brandName}
    brandName="${brandName}" tooltipLocation="$
    {favoriteToolTipLoc}"/>



    View full-size slide






  26. ${brandName}



    ${brandName}
    brandName="${brandName}" tooltipLocation="$
    {favoriteToolTipLoc}"/>



    ಠ_ಠ

    View full-size slide

  27. https://github.com/mwunsch/handlebars.scala
    Sc

    View full-size slide

  28. 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

    View full-size slide

  29. Page 1 of 4ᴹNext →

    View full-size slide

  30. Page 1 of 4ᴹNext →
    GET /products?page=2
    Accept: application/json

    View full-size slide

  31. 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

    View full-size slide

  32. 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

    View full-size slide

  33. 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

    View full-size slide

  34. Flexibility
    vs.
    Maintainability

    View full-size slide

  35. http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/

    View full-size slide

  36. http://wunsch.spreadshirt.com/

    View full-size slide

  37. 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

    View full-size slide