Santa Tracker Developer Diary #3: Build & Scenes

Key Takeaways

hey everyone it's Sam here so you might have watched a few episodes so far and learned a little bit about the different paths of Santa Tracker and how it works but what I wanted to do today is talk about how you actually build it yourself and how you can you know quite literally check out the source code and run your own version so to start with let's have a look at our command line we've already checked out Santa tracker you know we've gone to get hopping caught the repo and let's look at what we do now start by checking it out you can have a look we've got some content here it's got a bunch of stuff so what you can start with this is by basically running yarn install and so yarns a package manager you can fetch that with homebrew or some equivalent on your machine and it will then go and do a bunch of stuff in our case you can see here it's pretty fast because I've actually checked it out before and so it'll go and fetch all its dependencies and things like that what it's actually doing is it's internally calling Bower which is a package management talks a little bit older it's still needed for polymer - I know polymer 3 is upgrading to NPM and that repository but for now we still need to have Bower install to check out all the code we then run our build tool which is using the gulp build system so that a fault task that we have in gulp will build 10 a tracker it will actually let us serve that folder so if I just run serve here and hit enter and then load it up and load this URL we'll see that take a few seconds to load and Santa tracker will load up with all its fun exciting stuff going on this version will be a little bit slower than the production version for a bunch of reasons which I'll kind of cover in a few seconds so because we're developers and you know we've got access to Santa's Village whenever we like you can actually go and click on these scenes to see what's going on so we can you know cut Santa's beard and things like that one thing to think about is that these scenes will lo dynamically so if we load the dev tools thusly we'll see our lovely responsive design and if we go to network here and set the speed to say fast 3G we can see the loading happen so we actually loaded the Santa selfie scene so that'll load really fast well let's go to a scene we haven't loaded yet so this might be the gift slingshot and I love this scene which I call boatload that's that's an actual ID because it's actually pretty small it's not too complicated yet it does most of the things that a regular Santa scene will do and we've got you know every house in the village these is what we call a scene so let's click on that now what you can notice is that we're actually it was a red bar at the top here and that slowly moves across the screen has all the resources that are on the right here are loaded into the page and this is a pretty small scene so it loads pretty fast even on a slow connection we can also play this game so how do we get to these scenes if we go to the code and look at Santa app dot HTML this is a polymer element and we've had another episode in polymer so I won't cover this extensively in the middle here is what we call the lazy pages element and this element is entirely designed to load these pages at runtime so interestingly enough these scenes aren't on the page when you load Santa tracker these are essentially unknown HTML elements that your browser doesn't know how to render what lazy pages does is that when the route changes to that URL when we want to load the boat load scene for instance it then goes and finds okay here's the boat load scene it goes cool the path is this HTML path including a language field it then loads that into the page and when that's loaded we can then show that scene because all the resources to do with that element are now on the page so if you notice we've got it open as well so a couple of things to note here so firstly is that we bring in the JavaScript for the scene so when you first build and check out that rack up your build might still be running because we actually compile every scenes JavaScript with closure compiler the reason we do this is actually because a lot of the scenes are quite old they typically predate the majority of scenes predate polymer and there's a few scenes which are very modern and there are built a little bit differently most of our games are written fairly generically they don't really care about polymer and actually there's kind of a nice strength of polymer in that we kind of wrap up the HTML and JavaScript in a very neat way just within this one file so this scene is made of a bunch of things it's got a template which includes the kind of inbuilt style we care about it also has a bunch of divs and elements like trees and elves and stuff like this is the the cute things you see around this the the slingshot thing a bit down a bit further below we've got a very interesting message here this is a i18n message in production we actually remove this div completely we swap it out for or the message that's appropriate for your language but in dev it lives here so we can quickly slash line switch languages you actually see it as we go to the site and we go to console and type document.documentelement dot lang equals let's say German and a few seconds later we see all the language stuff changes and the way we do that is within that element but in production we've actually got rid of that element completely if you're curious about how we do that you actually load up the gulp scripts the replace script here and so we have a look around what we do is actually load each page into memory which is this mutate function here and we do regular query selectors we say so for everything with a message ID or everything with a of this tag name okay this actually is the wrong oh I see because each method has that message ID so we catch it here first well actually replace the content of that message ID for that language so that's kind of cool that's part of our build processes as well and so finally let's talk a little bit about gulp so I mentioned earlier that we use gulp to build stuff we can also use gulp to serve things so if we type gulp serve here or actually see it'll do the same thing we'll do this default compile step which yet again is happening pretty fast for me and they'll actually run a web server so this is the kind of the best way to run it and test and track yourself and this serve command as well we'll also do auto reloading so if I change something let's say I change this boat load scene to have some text just somewhere hello then what you'll see is this page will automatically reload and actually what you want even on that scene but if we load it up you can sort of see that text now appearing there oh there we go very subtly in the corner there's a hello so hopefully you've learned a little bit about the way you can build and test Santa tracker even on your own machine so Santa tracker is a big complicated single page application it really has one entry point and then it loads these individual scenes as we need them which is super interesting in itself if you want to learn a little bit more about that and also build instructions of how to run and built a no trucker there's some links below the article I'm linking to is an article I wrote last year which talks about how Santa tracker was made into a progressive web app and while of course that's a little bit of a different topic it actually covers a little bit of about and this is important because as a PWA we care about offline and caching and so one thing we do that's interesting is that we only catch scenes users have been to before and that matches the way we load scenes only these users need them rather than loading the whole site at once so thanks for watching and I'll see you next time thanks for watching you can subscribe to the google chrome developer channel down here we'll check out some other great videos along here