 Hey everyone, it's Sam here and I'm Chris so Chris is from the polymer team and on today's Santa tracker developer diary We're gonna talk a little bit about how Santa tracker uses polymer to be more productive. So what's polymer? So polymer is a library that helps you take advantage of some of the latest browser features such as web components cool And so we've been using Santa for quite a few years now. We use it in a bunch of different ways So in a broad sense the whole site is basically in one custom element one polymer element called Santa app But actually that then contains things like Santa chrome, which is really our UI around the edge of the page You see the kind of toolbar and things like that We've also got some elements that you never actually see so the Santa tracker router handles the changes in the URL up here So whenever we click on a scene like this boatload scene This router is actually listening to the URL and then binding that route back to the Santa app So it can change the scene being loaded. That's really cool. So you made those custom elements? Yeah, and that's even though there's no visual representation I think it's really interesting right and then we actually lazy load that scene which is really cool very cool So when we're loading and running polymer, how do we test it? How we see how fast it loads? Well, I always like to use the built-in profiler and Chrome dev tools cool So in order to do that Usually what I do first is I go to the application tab. Yeah, I clear on my site data. Great. That's good because You know, we have a lot of caching and a lot of you know offline ready stuff So we want to clear all those resources so it feels like you're loading it for the first time Yep, and then you go over to your performance tab and you click this button start profiling and reload page Sounds good. So the profile takes a few seconds And then when it's done you get a lot of nice things So at the top here I actually have a timeline that shows the painting of the page as it's loading in Yep underneath that I can see all of my network resources So I can get a sense of when they finish loading in relative to all the JavaScript We're scrolling the mouse wheel here to zoom in and out to you know deep dive or not, right One of the things I've added that's a little special is I've used the standard user timing API And I've instrumented all of the custom elements on the app So here you can see the Santa app element was created and it took about 250 milliseconds. Yeah, that's the whole site I guess that's the entire sites execution lifecycle And then underneath that I can see things like oh iron icon Why does the icon take 26 milliseconds to load? I don't know, but that's probably something we should look into yeah interesting You can see all of the children elements inside of Santa app are represented here in this flame chart So I can get a sense of which ones are most expensive So you would see this normally anyway But if you look in the description below you'll see some resources that Chris has written to help you actually just label the elements Properly normally you just see the functions themselves and not know which element. It's actually being called on. Yep So that's really great. So this year one thing we're going to do is actually upgrade polymer So we're on I think version 1.7 right now We used to be on 0.5 back in the day and now we're upgrading to 1.10 and the goal of 1.10 is then to flip to 2.0 It's a lot of versions floating around. What does this mean? Why are we doing this? Yeah, so the upgrade from 1.10 to 2.0 is going to Get you in a place where you can start building custom elements using standard ES6 classes Right, you know the polymer as any open-source project is evolving over time And now we're trying to put our users in a place where they can easily start taking advantage of some of the latest JavaScript features in the web platform Right, so previously you wrote a polymer function and gave it an object and actually now You write a regular class name that you inherit from a polymer element, right? Yeah, which is much more idiomatic these days and it's very important to Migrate up to 2.0 because it puts you on the trajectory to later versions of polymer We have polymer 3.0 in preview now and that's going to enable you to use things like JavaScript Modules and also get on to the npm package manager for distributing your And by the time you're watching this we may already be there So check it out and have a look at polymer and see how we're using it in Santa Tracker. So That's pretty much all we have to talk about today Thanks for watching remember you can always go check out the source code for Santa Tracker and have a look at yourself and build this on your own time And yeah, thank you so much for being here as a guest star. Yeah See you You can subscribe to the Google Chrome developer channel down here or check out some other great videos along here