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
   

   View Slide

2. Deep Time
   

   View Slide

3. View Slide

4. View Slide

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

   View Slide

6. Stratigraphy
   

   View Slide

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

8. Principle of original horizontality
   

   View Slide

9. Principle of original horizontality
   

   View Slide

10. Principle of original horizontality
    

    View Slide

11. Principle of original horizontality
    

    View Slide

12. Principle of lateral continuity
    

    View Slide

13. Principle of lateral continuity
    

    View Slide

14. Principle of lateral continuity
    

    View Slide

15. Principle of lateral continuity
    

    View Slide

16. Ajax
    

    View Slide

17. XML-RPC
    ಠ_ಠ
    

    View Slide

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

    View Slide

19. ಠ_ಠ
    

    View Slide

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

    View Slide

21. Maintainability
    

    View Slide

22. _.template()
    

    View Slide

23. window.history.pushState()
    

    View Slide

24. Infinite Scroll
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

28. Page 1 of 4ᴹNext →
    

    View Slide

29. Robots
    

    View Slide

30. View Slide

31. Whither single page apps?
    

    View Slide

32. Templates
    

    View Slide

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

    View Slide

34. 
    
    
    
    
    ${brandName}
    
    
    
    ${brandName}
    brandName="${brandName}" tooltipLocation="$
    {favoriteToolTipLoc}"/>
    
    
    
    ಠ_ಠ
    

    View Slide

35. View Slide

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

    View Slide

37. Backbone.js
    

    View Slide

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
    

    View Slide

39. Page 1 of 4ᴹNext →
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

44. Flexibility
    vs.
    Maintainability
    

    View Slide

45. View Slide

46. The Future
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

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

    View Slide

51. View Slide

52. http://wunsch.spreadshirt.com/
    

    View Slide

53. Thanks
    

    View Slide

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
    

    View Slide