 I don't know if you see those shoes are amazing great. I'm Mark Wunch. I'm from Gilt. My Twitter is at Mark Wunch so send me a toot. Geologic time scale. So the geologic time scale is this system of measurement that relates strict tritigraphy which is like the study of rock layers to time. Yeah disclaimer I am not a geologist. I am not an earth scientist of any kind. I've learned everything about this particular subject on Wikipedia so I'm now somewhat of an expert. This is a metaphor that I'll be using and that metaphor will be stretched to its limits. But like anybody who writes JavaScript professionally I am not without a lot of hubris so let's be careful. I really love this concept of deep time. So the earth is over four and a half billion years old. That expanse of time is so impressive and impossible to comprehend and modern web development is about what ten years old maybe. But we suffer I think as an industry of real short-sightedness and so this is the second backbone conference and I'm very excited to be here and honored to be here but really we're just discussing this really small sliver of technology just like this one tiny layer and in the tiny moment in time and at this conference you're going to hear a lot about implementations and you've heard a lot about certain processes and patterns to follow and you'll hear more about that tomorrow. But what I would like to do now is invite us all to take a big step back and take a really top down view of web technologies and what what brought us to this place today. I work at Guilt. Guilt if you don't know is an e-commerce company. We sell shoes and stuff. We do flash sales. So what that means starting at noon Eastern time usually we sell a limited amount of inventory for luxury goods fashion at a steep discount for us a small period of time and I'm going to use Guilt as a case study because I work there but in my time there we've also tried a lot of different approaches to building web applications. So we have our website which is you know I guess a traditional e-commerce experience or a traditional e-commerce technology stack. We have some experiments this is Guilt live which is live.guilt.com which uses real-time web sockets to update what people are buying so you can see what people are buying right at that minute right at that second I should say and finally our mobile web application which is like a single-page app and all of these use backbones and backbone that singular in various capacities. So Guilt is at scale and what you would say is at organizational scale so there's about 60 engineers contributing to this experience and what I hope to answer today is what influenced us at Guilt to turn to specific technologies one of them being back home. So today I'm going to talk about stratigraphy so studying the layers of the Guilt tech stack. I'm going to talk about this technology it's called asynchronous JavaScript and XML maybe you guys have heard of that one. So we're going to talk about that in the context of a particularly tough problem which is the problem of pagination. I'm going to talk about robots and code that we write for robots. I'm going to talk about templates and how we use templates to keep the balance between robots and humans in check. I'll discuss a very serious and important architecture very serious business called models views and whatever and finally I'll close by attempting to predict the future as I said before hubris. Stratigraphy so I'm going to start by talking about the strata of our web application and in a business like Guilt these layers of technology form sort of one on top of the other and by examining a cross-section of that system we can infer a lot about the past several years of modern web development. What's interesting about stratigraphy is that it's bounded by a set of laws or principles so the first one is the principle of superposition and this one it is simple what's at the bottom is older than the things that are at the top pretty simple and you can see what's at the bottom of your web application you just do a git log reverse and in this case it actually doesn't help very much import from subversion so so I guess this is like pre Cambrian era or something this is in 2008 but I guess that's old enough to call legacy now the principle of original horizontality this states that layers will tend to deposit horizontally so guilt like many businesses started as a Ruby on Rails application yeah and with Rails back then you got this thing called prototype I want to take some time to give lots of respect to prototype.js yeah in many ways so ahead of its time and it's so impressive and it doesn't get the love and it doesn't do you get the love it deserved back then because like most people jQuery was becoming preferable and so we went through this painful process and I don't know how many of you went through this process of replacing prototype with jQuery it was painful and what we've created here is what they call in geology and unconformity so the layers are no longer continuous which brings us to the principle of lateral continuity the technology layers continue to build up and we continue to modify and chip away at certain areas and update others and you get to something like that so this was our system about two two and a half years ago and you can see that things are no longer deposited horizontally so the principle of lateral continuity states that at some point these layers were continuous but something happened some technical erosion so the deposit of this technical sediment continues until we reach where we are today and you can see there's backbone in there and I don't know there's some coffee scripts in there sure I don't know what MPM is doing there but okay and if you cut the top layer you're standing on the top soil it looks like a modern web stack but as you observe cross sections from different angles you see a peak at something older more hidden something that's been buried so in order to get a truly comprehensive understanding of the full front-end guilt technology stack this is just the front-end by the way you need to hold all of this in your head and that's daunting so you might call this technical debt that's a nice term for it but part of scaling a business at a technical organization is confronting the legacy of these layers hidden beneath the surface so I want you to keep this layer cake in mind as I continue and as we talk about scope and applications growing often what we mean is we're adding layers to the system and sometimes we induce technical erosion so think about maintainability keyword maintainability now here's a good question why do we need all of these technologies why why didn't one work for us what is so hard about the web that we introduce layer after layer of technology and complexity it's Ajax the Ajax is the fundamental piece of the modern web experience where would we be without asynchronous communication between the client and the server probably not here at this conference but for something that's so core and so basic we really only recently begin to grasp the best way to do Ajax communication I think that Ajax helps a lot to do with the strata we saw earlier and each one of those technology layers has an opinion about how to manage this client-server communication so I made a point earlier to draw your attention to the original usage of the term Ajax there used to be that you used Ajax to do these naive remote procedure calls with XML anybody remember those days show of hands yeah it wasn't great but it worked your HTTP calls that look and still look kind of like this so get and we have a URL called add to cart get add to cart this is not idempotent this is not restful it's not ideal but it works and worked does anybody remember RJS yeah this is kind of crazy so you make an Ajax request and you get back a dynamically generated JavaScript snippet and you still see this a bunch if it's not RJS it's not great but it worked here's something you still see from time to time and we still see it get all of these examples are not like we think of these things as a ancient history but the recent so the server tells you this was successful but the content of the response tells you it wasn't it's not ideal but it works and so all of this comes back to maintainability and I'm going to touch on this point a few more times all of these Ajax approaches though maybe on appealing are still Ajax what makes us uneasy about those approaches is that we say they are unmaintainable we question their maintainability and dealing with a large system means that you come across previous approaches we're maintaining it feels like a burden and that's why you keep adding new layers so let's continue so we did it we're successful we got a restful API that brings back a JSON response and now what do we do with that so it used to be you know when it was Ajax with an X with XML you would you would just take that markup and dependent to the DOM and worked okay now we have these client-side templating languages so when we're using JSON you could either concatenate a bunch of strings together or you apply that JSON object to a template and I just want to point out which is more complex so on one hand you take a bunch of DOM markup you get from the server and do inner HTML or something like that on the other you do some non-trivial parsing of a templating file and a templating language and then apply a JSON document to that and then apply that to the DOM and I like client-side templating I think it's awesome right there's no no argument there but it's just we've introduced complexity and if we want to pick a templating language that's a new layer we have to think about so I just want to pose that question rhetorically is that a win and every piece