 Hey there, Polycasters. Rob here. So before coming into the studio, we tweeted out a question to see what folks wanted to see in the next episode of Polycast. And a lot of folks wrote in and said they wanted to know how to lazy load Polymer elements to improve the performance of their apps. So that's exactly what we're going to cover today. Now to do that, we're going to start off over here at the Polymer docs. And we're going to go down to the API reference. And some folks might not even realize that we have an API reference, but it's kind of hidden down here in the sidebar for the documentation. You can go click on that, and that's going to take you to this kind of classic Polymer doc layout if you've seen this before on other elements. And this is where you can find all of the properties and methods of the Polymer object itself. So a lot of really cool stuff inside of here. This is also where, for instance, the Polymer Templatizer documentation is. So if you wanted to create your own version of DOM if or DOM repeat, you could use Templatizer to do that. Just a helpful tidbit there. But what we're interested in here is this Polymer base object. Polymer base is sort of the base prototype for all Polymer elements. And it's where we hide interesting methods and properties and stuff like that. The one I'm into is called import href down here. We can hit the in big and button to make it larger. And so what import href is going to do, it's going to give us the ability to dynamically load an HTML import at runtime. It's got a few arguments that it takes. The first argument is we're going to give it an href. So basically just a path to some component or some HTML import that you want to pull in at runtime. And then once callbacks for on success, on error. And lastly, it takes an option which specifies whether or not you want the link tag to have an async attribute on it. So what I'm going to do is I'm going to use import href. And I'm going to build sort of a sample application. This is the app that I have thrown together. It is called Polymeal. It's a social network for foodies. And I guess people that like Stirfry. Because there's a lot of pictures of Stirfry. And you can either go to the sort of the browse section. And you see here that I've got all sorts of yummy photos. Or you could go to the activity feed. And you could see maybe like I'd be posting status updates from all the cool awesome restaurants that I am eating at. Now the main thing to take away from this is that these two sections have very, very different content. This one is a whole bunch of cards with some paper buttons on it. And this activity feed is instead just sort of these little status blurb things. So there's no reason to load all of these card elements if the user is just starting off in the activity feed, right? It would just make more sense to load that at runtime to kind of reduce the bandwidth for our total application. So to do that, we're going to use import href over here in our code editor. So this is my xapp element that I have started off with. And what I'm going to do is I'm going to have an xapp element inside of xapp. I will chuck in a little iron pages here. And inside of iron pages, we'll have sections for the different bits of our app that we were interested in. So I've got a browse section and an activity section. And we've also got the page.js router loaded into xapp as well. So if we go down to the JavaScript definition, we can see that I've got kind of a basic route stubbed out. And what I want to do is, when the route changes to either the browse section or the activity section, I'm going to call polymers import href method, load in my element definition. Once that's loaded in, I will then tell iron pages to switch over to that section. Now, the first thing I want to do, though, since we're starting off just at slash, right now what we're doing is we're actually just loading a shell that looks kind of like this. We're not hitting either the browse or the activity section. So the user's kind of got nothing to look at. So we'll start off by redirecting them page.redirect over to the browse section. So this way we just have kind of like a nice starting point. I'm going to write another handler for browse, so page slash browse. And you'll notice here that I'm using ES6 fat arrow functions. That just makes it a little bit easier to deal with the scoping of this value inside of these handlers. So I'll say page.browls. And what I first want to do is see if the element has already been loaded. Has this page been loaded before? Because if it has, there's no reason to import it again. So we'll call polymers isInstanceMethod. And this is something that I don't even think it's well documented. It might seriously not even exist anywhere in our docs. But I spoke with our check writer. This is a thing. You can use it to sort of check to see if an element is an upgraded Polymer element. So because both our browse element and our activity element have IDs, we can reference them using automatic node finding. And we could say this.$.browls. So if this is already a Polymer element, let's just go ahead and return. No reason to do anything. No importing or anything like that is needed. But we will set the selected value to browse. And then what that's going to do is that's going to tell our iron pages up here to switch to that section. So you can see we're binding its selected attribute to that property. Now if the element has not been loaded, if it hasn't been upgraded yet, now we're going to import its definition. So we'll call polymer.base.import href. And we're going to pass it a path to the HTML import for the browse section that we want to load. So elements slash xbrowls slash xbrowls.html. And then we'll give it a success handler to run. So we're going to say, all right, cool. The element loaded in. Let's now set the selected state to browse. That'll tell iron pages to update. And now we can return. Exit our route here. We should be good to go. If we go back and we look at our application now and we refresh the page, it should redirect to the browse section. And it should start loading in all of those cards. Awesome, right? Now we need to do the same thing for the activity section. So I can just grab this entire route right here and do some dangerous copy and paste work here. And we're just going to go through. And any place where it says browse, we'll just flip it out for activity. Activity. Thank you, spell check. So when we go to slash activity, we're going to check to see if the activity element is upgraded, if it is return, if it's not, import it. Let's go give that a look. So refresh the page and we see our browse section looking good. We go to the activity section and boom, we got our status feed showing up right there. Now there's still a lot of unanswered questions to this. I kind of showed you the quick and dirty version of using import href. But what we didn't talk about was, do we need to vulcanize these things into different bundles? And if so, how do we exclude common dependencies? Or can we just use HTTP2 to maybe server push all the things or multiplex stream all of our dependencies? So there's still a lot of things that remain to be worked out. And what we're going to do is we're going to talk about those in an upcoming episode of Polymer. But today, for what we've done here, if you have any questions, please leave them for me down in the comments. Otherwise, you can always ping me on a social network of your choosing at hashtag ask polymer. As always, thank you so much for watching. And I'll see you next time. Otherwise, you can ping me on a social network at dig2. I'll keep all the fun stuff up here. Top two thirds of the screen.