 Everybody wave and say hello get a picture of this be happy. All right, that will be on Twitter All right, thanks everybody my name is Chris Walker, and I buy happenstance built an Xbox app over the summer There's my Twitter handle so you can follow me there and pick up that picture of yourselves in the audience a Little bit of context. I like to hike backpack and climb mountains It's I climb mountains mostly big ones in the winter time. It's kind of a self-masochistic kind of thing I live in a little town called Saratoga Springs in upstate New York Google Maps doesn't do a very good representation about exactly where that is but It's not New York City. I work for a company called Mad Glory Interactive, which is also in Saratoga and Believe it or not there's actually a handful of really innovative little software companies in our town that we're pretty proud of and we're We're glad to be a part of that community there We're a consulting engineering and creative agency. We spend about 80% of our time playing games or Building games No, we do we do everything except actually work on the games we work on online scoring systems community development sites and A couple of really big games were privileged to be a part of We also do a little bit of work for Some Fortune 500 type companies and we get to do some really cool stuff with them, too So basically we get to build cool things without assuming any of the risk of owning any of these products So it's a great position to be in We try to be technology agnostic With some success we do use backbone a lot and It seems to be our go-to framework. We also maintain the backbone fetch cash plug-in So if you have any tomatoes left, and you're not happy with fetch cash, you can throw them now And if you're not happy with fetch cash go to the github page Put in an issue if you haven't checked it out check it out You you very high likelihood you find a use for it in the future Anyway this summer we got invited to build an Xbox one application And a lot of people don't know and a lot of people do know And perhaps you let it escape your mind that Microsoft came up with this idea called Metro Which is you could use HTML5 and JavaScript to build applications on a phone on a laptop computer and on an Xbox and it's It's not worked out that great Nonetheless, this is the best way to get an application onto an Xbox So we did play around a little bit with some windows applications Just to kind of get our feet wet and do some experimentation. We had to do a lot of R&D Like Henrik was talking about earlier today. We did that on both the windows and Xbox In the end we made the decision to go back to backbone Despite the fact that there is a lot a lot of infrastructure that Microsoft has put together for building applications on these platforms Um We made that decision as it turned out to be a good one However, nonetheless, we still got beat up One of my co-workers is saying it feels like every time we release this app to Microsoft It feels like we just got beat up in gym class You know it should be you know, it should be like popping corks and champagne being happy, but it's Microsoft so So anyway, I think despite the fact this is a gaming console We all don't use them and we certainly all don't develop software on them We learned a lot and so I think I hope everyone will get a lot out of this talk So this is what the app looks like It is what we call a matchmaking app, which is basically what you think it's a dating app for game players So you get to find people online who are interested in similar things to you and play games You can see the the target market for this app is going to be I don't know 18 to 30 year old males So that seems to be what people like Gatorade and Monster want to sell products to So anyway, the the we don't know what the revenue will be for this particular app yet But the client came to us. It looked really exciting and and we took it on So just to give you kind of an idea how it works I'll do a quick Demo, I don't actually have an Xbox, but I do have a recording So here we go So it's called overdog by the way What I need to do is just get quick time smaller Pull it up to that screen Big thanks for saying something that would have been really embarrassing if I just sat here and told you what it was And had nothing to look at So the idea here is the player would go in they would pick various topics that would be interested in That's their profile Screen right there and this person is kind of browsing around looking at the current topics They have pins to their profile And then you have this other selection of featured topics and things like that things that you can be interested in And then we use a server side algorithm to kind of figure out What kind of people you'd like to play against You use a menu there to to pin topics to your profile and then you see the backbone view Will update itself One thing to keep in mind is all this is happening like this is backbone This is backbone on a gaming console Each topic has a detail page Usually involves a nice background image like that and then from that detail page You can also like and unlike a topic. We'll let that go for just about two more seconds And then I think we get the idea So there's a lot of CSS animations going on here JavaScript animations as well as when we can't use CSS Cool, so that's it talk. No, I'm sure you want to know more than than just watching some pretty things on the screen So this is basically how the whole thing comes together We need to interface with something called Xbox live. That's how Microsoft manages the user profiles So pretty much any time a user steps in front of their Xbox they can and should be signed in And Microsoft wants their apps that are on that console to use that user profile So there's basically a single sign-on experience and that that's a requirement Like you cannot release an app into the Xbox environment without using that So we need to interface very heavily with Xbox live It is a restful service However, it's a huge huge pain to use with HTTP But Microsoft has lovingly bound that up into some C++ bindings which then get exposed to JavaScript Which work as advertised 50% of the time So so we have to interface with Xbox live We also need to get content on there, so there's kind of this mishmash of content management tools we could possibly use None of them really fit the bill, but I'll talk about that in a minute And then we needed to build like our own our own services So that service decides like what kind of players could possibly want to play with each other Like what topics should be being served to a particular console and every time someone opens a topic It shows like all the related topics. So if you're interested in this topic, you obviously must be really interested in these other topics We all know how that works. Thanks to Amazon Xbox live Yeah, this slide is blank because there's not much I can tell you about it because Microsoft doesn't want us to other than it's really hard to use and You don't ever want to have to interface with that The the service that we built So this is just kind of give you a little background information on why back backbone kind of fits here And as I tell you about it, I think you kind of put the pieces together and figure it out So we have all these topics and then we have to relate them to users We decided to do that with a node service built with action hero We actually have two servers one is the server that serves player profiles and then matches players up And then we have a socket IO server Which is also runs on node and we have socket IO running on the Xbox as well by the way which is kind of interesting We did a couple experiments and it worked. We were not so we're using sockets when players actually match up with each other We're using sockets to send a notification from one household to another household and being hey This person wants to play with you. Are they interested? Okay, you can be friends and you can play now You can play later or maybe you want to get into a party together and chat about it That's all done with socket IO The really really hard piece was figuring out how we're gonna do content management We couldn't find any CMS there was really gonna do what we wanted to do like we have all these topics in all this artwork We need to get into onto the console. It's all kind of structured You know, it's all structured data and how we're gonna do that. So we ended up building something Kind of jokingly called it calamari But the name stuck and it's since become a product the way it works is that we have a User interface which incidentally is built with backbone and marionette It's a rails application and it allows a designer to kind of put data into the system jumped ahead too far So it allows someone who is not who is not a programmer really to put to put artwork and content into the system it stores it into a Rails application and then just simply serves JSON back to the client, right? And so that's where like backbone makes complete in total sense. So we're taking all the structured data We're making models and collections out of it and then the actual artwork That you see displayed on the Xbox is being served off of a CDN We're also doing some lazy loading Which you'll see in a little while and it was really cool to see how that's being done to map out water pipes So yeah more more good stuff All right, so There's the animation See you see how our content management system works So now we're ready to go We've got all this awesome architecture. We've designed perfect. What could possibly go wrong? We're gonna build this amazingly piece of equipment However, there's a couple more things we got to add into the mix There's this thing called winjs Some of you may have heard of it So it's it's basically the library that you're supposed to use to build Xbox apps and windows phone apps and windows 8 apps It has actually some really cool stuff in it We have to use We have to use it because we don't have a choice basically We would have had to re-implement all those nice little tiled widgets and things like that We would have to re-implement all those as like web components, for example, which would have been a really fun experiment But we just didn't have the time So all that stuff comes out of the box with winjs. So that's what we ended up using They also have some other things we needed to use They have promises And we love promises. Don't get me wrong, but their promises are broken Badly broken. The problem is is that lovely Xbox live API returns broken promises Which of course don't work with any of the promises that work, right? Doesn't work with jQuery deferred. It doesn't work with Yeah, name your like spec conforming promise library that you like and it doesn't work with it So basically if we're gonna use promises, they got to spread to throughout the whole app And we have no choice but to use the ones that winjs provides for us So that was fun So we we chose to use backbone For a number of reasons despite the fact that we still had to use winjs We're all familiar with backbone. So it's kind of a common language where winjs is very arcane And it was gonna be a long ramp up time just to get used to that There's more support like if you Google for things on winjs, you're probably not gonna find much of anything You Google for questions on backbone and stack overflow and everything else. We all know that story And then lastly the way that winjs encourages you to structure your applications didn't really make a whole lot of sense And the example applications that Microsoft gave to us were really really monolithic and horribly organized They were thinking no way back to MVC We did take some things from winjs as I mentioned. So the widgets the we use probably 90% of them Promises again too bad It's good that they have them, but they don't work The routing and page controls we had to use those again because we didn't have a choice To re-implement the way that they do that would have taken Forever, but basically it works the same basic same concept as backbone But it's they kind of like swap They take your entire DOM and they rip it out from underneath you and they like swap in a whole another DOM And like both of them are on the screen at the same time while it's animating between the two and it really Messes everything up, but nonetheless That's the way it goes But they do have a really nice application Initialization process to give you an application object very similar to what we would get with marionette From backbone the usual suspects we use the models and collections of use we use jQuery We use underscore and we also use marionette Bit some parts of marionette that global application object, which has a really nice event bus system on it We use that and we lay we use the layouts and regions to manage the view state control So when a view gets destroyed you got to clean it up because you don't want zombies hanging around and all that kind of stuff Mariana really helps out a lot with that So now we're ready now we're ready to go Right um But again We crash into this thing. It looks beautiful It's really cool to play with but it's arcane. No one knows anything about this thing No one in Microsoft knows how this thing works. I swear Nobody can help you nobody nobody can help you can't you can't google about this because of the NDA things You talk to people at Microsoft and they pass you around to their engineering department So instead of building this we end up building something a little more like that It works You know what but in the end Arcane platforms require a lot of guesswork and they require a lot of hacks and When you're innovating it's not pretty, but you got to find things to get the job done and No matter how much we hate it Ugly code doesn't really matter None of the problems that we had to solve resulted from an unsightly or un Unrecognizable code base we had a lot of weird stuff going on in here However something that we always try to remind ourselves is that customers buy products They don't see the code. They don't know how it works and they really don't care They really don't care that you have three different libraries on here. Nothing works the way that you're used to it working They have a nice product in their hands that they can use That said let's get into some code All right, so when Jay asked what I didn't mention they have this really nice namespacing thing So you can create a global namespace and manage that These are objects created the way objects should be created according to Douglas Crawford Where it just kind of creates these? Like namespace objects that can't really be mutated, which is really great We have some global variables that we've closed over top of and basically it allows us to do that line at the bottom We get to we get to have those globals exposed and they're immutable So, you know your buddy sitting next to you who's also programming on the same thing can't screw them up And vice versa more vice versa probably And then we use the marionette application object And so we throw another global into the space Basically, we do this inside of another closure And we create that that application object again. We use this mainly for the event bus Which is super super handy So make sure you look up the links from James talk yesterday in the the marionette talk And take a look at the marionette event bus even if you're not going to use marionette the event bus can be super helpful So we return a global application, which we just call our backbone app And the BA thing is just shorthand so we can use that in the debugging console because typing out backbone app the whole time Isn't cool. Oh, yeah, the console doesn't have tab complete. That's why So be a Second and more importantly we need some base classes The reason we want to do this right away is that when you get later on into your project You find a lot of cases at least we do anyway where You want to you want to change all of all of your class instances all at once You're like, man, if we had just inherited from one object We'd be able to do this in one place and now we have to like change 50 different files to do this So right in the very beginning we start creating these base classes these ones are for entities So even though we have no code to go in there We have models and collections We're not really extending anything Except all of our other collections and models are going to extend from these base classes We do the same thing Those are views so we do the same thing with you so those are those are the Four yes, those are the four view types that marionette is now going to reduce down to two from what I understand So that'll be fantastic But to get around some of those DOM issues that I mentioned before you get into some really ugly hacks so Basically all of our regions have to inherit from this thing That get element method Does something very different in actual marionette than what we needed it to do on the Xbox? And I won't get into the details there But just have a look at that last line of code Which is so effectively we're doing this We're using an attribute selector to find an element with an ID How wrong is that? But believe it or not when the when the Xbox swaps in those two DOMs those two elements with the same ID will exist on that page for a brief period of time and When you select by ID you'll get the first one when you what you really want is the second one And we can't change that ID that ID is identified by the system as being like the container For the page and we needed to use that for our marionette regions So yeah, so I spent a whole day selecting an element by its ID and getting two of them A whole day So here's where we use our base classes so in other modules Another model a typical module exists of a model a collection And then at least one view if if you're probably more and Then those those components inherit from those base classes that we've already created And that's where that comes into play since we've inherited from our own and not from marionette or backbone then we can make Global changes to all of our classes without having to mess around with backbone or marionette code And that's obviously what you want to be doing Also, don't be afraid to create custom objects. We have a lot of these we have what we call data service layer, which I'll get into later but Not every object needs to be a model collection view or controller Marionette has this really nice object. You can create you can create other classes from you can inherit from it's called marionette object interestingly enough But it gives you it gives you events and it gives you event cleanup and a couple of the really useful things So when we would build these service classes, we would inherit from marionette object This particular one is instantiates the socket IO service And then yeah, we like promises Despite the fact this particular implementation is broken It did it still makes a lot of sense from our point of view The first step in that is to return a promise from backbone Ajax As you'll see later, we don't use backbone Ajax as you typically would so in other words Model dot sync or collection dot sync doesn't call backbone Ajax We actually call it from our data service layer. It's just a wrapper around the HTTP mechanism on the Xbox Which does implement X HR so Instead of returning a jQuery deferred here we return a winjs promise because the jQuery deferred Doesn't work with the winjs promises So we need to convert it and in return one of those which really isn't that difficult that wasn't bad a good thing to do So now getting into our data service layer So here's the concept we have this data service layer and That knows where to get data it knows how to cache it and Also knows a good place for implement implementing mocks mock mock data for testing and also where to stash offline data So that's where all that logic is. I think it's kind of similar to what Tim was talking about yesterday with his backbone session object It's just like we need one place where all this interaction kind of happens We need to we need to interact with that CMS service. We need to interact with our own Matchmaking service and we need to interact with Xbox live and all of them work very very differently So we kind of need to need this data service layer which gets all this data pulls it in as JSON or JavaScript objects or whatever And then instantiates the collections or models from there So once these collections are out, they just kind of float around freely and they're not they're not mapped to any RESTful API they're not mapped to an endpoint period They're just collections floating around in space and the user interface can call for them Can call the data service for them whenever it wants and then the data service once it has it in memory it can update it Need be based on any kind of like caching or updating logic that might be in there So to give you an idea what this kind of looks like in code There's the matches data service and you'll see up at top. We have What what this is going to return is a collection of possible matches for a user so if I'm a player and I'm online and I want to play Call of Duty The system calls out to our API and finds a list of matches for people who also want to play Call of Duty and people who Might be interested in playing with me And it returns that as a JSON object However, we're not allowed to store any Xbox profile information on our servers So once we get this onto the client we then need to call back out to Xbox live and get like their gamer pick their gamer score and all that information and then mash it all together and Update the backbone collection as we go, right? So that's where this lazy loading stuff comes in and that's where using promises is really nice So we return a promise from this from this API when that promise resolves it resolves to a backbone collection And that's those backbone collections floating around freely in space and the UI can use that We'll see a UI component a little bit later and and why that's important But basically this gives us caching. So since we wrapped around those two those two underscore Variables at the top which are initial initialized to the null Since we store our collection and our promise there we can come back and get those out of memory any time So anyone who needs to call this API in the future is going to get data immediately And when the app is initializing they're going to get it a Little bit more slowly, but since we're returning a promise it really doesn't matter All right, so here's what it looks like to activate a UI component When you use promises and we call this activation method at the top we get a lot of then All right, we get String together a bunch of methods and basically build the UI now again We as you're looking down to this what looks quite now that I'm looking at kind of messy code, but Yeah, like I said not elegant, but It kind of makes sense as you're going down through it You you build the UI and it doesn't matter if the collection has already been loaded Whether it's been there all along Right, so if we if we look at one of those topic detail pages and then we come back We want to have our matches ready to go and because we have a promise they are we just go promise dot then and then instantiate this component again right from the beginning and we know it came from cash Or the data service knows that it came from cash, but this component really doesn't care Doesn't care if it came from the cash or what and if we update any of these models We don't sync them back the data service does the data service detects the update It syncs them back up it knows what to do it knows whether the weather to call Xbox live It knows whether to call our service. It knows whether to call the CMS So on and so forth and Then lastly or almost lastly When you're doing events We have The the event API makes it really easy to decouple an application Like that that event bus that I've been talking about the one that marionette has That is like decoupling is really great we've heard that several times already today and I think anyone wouldn't say that's a good idea However, you can go too far with it Especially with an event-based system and that when you're looking through the code and reading through the code and you have You have a you're a sizable application and you're like where did where did this thing hear about this thing? And how does it call back to this thing and like what method did it call because it's not a method? It just fired an event right so we find it a lot easier to put all those in one place And that's what this is this file is actually much much longer than what I have on this slide But it's a lot easier to go like okay So if I need to know where to call for this particular thing like I know what file to go to To look through it and find like where the API is And if I need to look at the implementation, that's there, too I should never have to do that, but if you do it's there So I guess the lesson really is The customers do buy products and not code and sometimes when we innovate it can be messy and My wife always says when she's baking and I come home in the kitchen of the disaster She's like I know I know it looks awful, but it gets better But I think that's what happens with when people build anything particularly with software and We should be happy in the end product and make make make our code as maintainable as possible And no matter what we'll get there So even if it starts out messy There is a lot more things we like to do There's we'd like to move the Ajax Request into a background thread One interesting thing about this gaming console is that we discovered that if you make an Ajax request while there's an animation happening And the animations are long. They're like six or seven hundred milliseconds if you make an Ajax request during that time The animation freezes up This is a gaming console. This thing is supposed to do graphics But yeah, so that that was kind of annoying so we're gonna move our Ajax request into a background thread we'd like to do a lot more with a lazy loading and The talk we saw earlier today from Dan Was really inspiring for that so thanks Dan there. We're gonna keep on working on that We would also like to cash more information on the local disc The Xbox has a pretty good API for doing that So we'd like to take advantage of that but it's opening a whole can of worms and But it's gonna it's gonna be fun And we're looking forward to it That's it. Thank you very much