 Hey there, Polycasters. Rob here. Welcome back to the show. So today on Polycast, we're going to be looking at the Polymer app toolbox and the recently released Polymer CLI. To get started, over in my terminal, I'm going to run npm install-g, Polymer-CLI. I've already gotten this installed, so I'm just going to go ahead and keep churning along. The next thing I'm going to do is I'm going to do makedirmy-app, so create a new directory to hold my application, cd into that new directory. And then I can run Polymer init. And it's going to ask me, what kind of thing do I want to init? Because it can scaffold out all sorts of interesting things for me. So it could scaffold out an element. It could scaffold out a blank project. It could scaffold out a demo app, like shop. In this case, what I'm going to be doing is using this app drawer template. So this very last option here, I'll go ahead and select that. And that's going to go and stamp out a few files for me. And it's also going to run bower and go out and install a bunch of components to use in my application. So under the hood, this is installing app route and application. It's installing app layout elements and a bunch of other goodies that we can use to make sure we have a really nice performant app. So that's done. The next thing that I can do with the CLI is I can actually use its built-in server to preview the app. So I'll run Polymer serve dash dash open. And this is going to actually boot up my browser and can see, here's that app template running inside of Chrome. I'll zoom in a little bit so it's a bit easier to see. You can see that as I'm clicking on these different items over in the sidebar, if you check our URL here, you can see that that is updating as well as we go from view 1, view 2, to view 3. So we know that app route is working. And we've basically got a single-page web app that's just ready for us to start adding content to. So the next thing I want to do is just create my own element. Over in my application, I'm going to boot up my text editor. And in my source directory, this is where all of my elements live. So you can see I've got one here called my app and then a few others called my view 1, 2, 3, things like that. So I'm just going to go ahead and create a new file called my-newview.html. And I've already gone ahead and copied a little markup that I can just chuck in there. So I'm going to, from my Bower Components directory, I'm going to import Polymer. I'm going to use the DOM module element to create a new element called my new view. Its template is very simple. We've just got a single style inside of here to make sure that it lays out in a block fashion. And then I've also got an h1 in there so we can verify that some text is working. We've got something rendering on screen. Lastly, I've got this little block down here at the bottom, which is just going to register my element name and say that it's called my new view. OK, good to go. Now I'm going to switch over to my index file and make sure that I can add my new view to my list of different pages that we can switch between. So I'm going to scroll down here, and you'll notice that there's a whole bunch of stuff kind of up in the head of the document. There's a bunch of script tags inside of here. And you might be wondering, what is all of that JavaScript doing? So let me walk through that really quickly. To start off with, we've got this bit here that says window.polymer. So these are settings, kind of like global settings, that we're setting for Polymer so that when the app boots up, it knows how it should behave. This first one, lazy register. What that does is that tells Polymer, if there's a tag and you've already got an attribute or something defined on it, but you have not loaded the definition for that element yet, when that definition does load, it should look to see what those values are on those attributes and then serialize them to the properties inside of the element. The other setting here is called DOM, which is set to shadow. And what that means is if we're on a browser that supports native shadow DOM, let's go ahead and just use native shadow DOM. If we're on a browser which does not support shadow DOM, we're going to use the shady DOM shim that comes with Polymer. Below that, we're actually going to do a little feature detect. So we're going to see if the browser supports web components. If it does not, this line right down here is going to lazy load in the web components polyfills in the form of web components light.js. And then lastly, we've got this little chunk, which is going to check to see if ServiceWorker is supported. And if it is, it's going to go ahead and try and register ServiceWorker for us. And when you look over here in our files, you'll see that there's a ServiceWorker.js, which was stamped out by the Polymer CLI. So this is kind of cool, because our template is going to go ahead and try and make sure that it can work offline. And in fact, when we run Polymer CLI's build step, it'll generate all the code that we need for our ServiceWorker to actually start caching all of our different views, which is pretty great. Now further down here, we're going to import the MyApp element. There's some basic critical styles right here. And then we've just got the MyApp tag right there, which is kicking off the rest of our app. Inside of MyApp, this is where I'm going to actually put that new view that I've created. And this is kind of a typical layout, sort of like an app shell, if you will. And we can see that we've got our app route inside of here. And if you watch the previous two episodes, you're familiar with using app route to do routing in your app. And further down, we've got a little iron selector. This is where our sidebar menu is created. And then a little further below that, we've got iron pages. This is the element that's handling swapping all of our different views when either the URL changes or someone clicks on an item in our sidebar. So this is where I'm going to add that MyNewView that I've created right here in iron pages. So I'm just going to go duplicate this view three, and I'll update some of the parts here to say MyNewView. I'm going to go up to the menu here, duplicate this. Right where it says view three, I'm going to say MyNewView. So we'll say both of these are NewView, and we'll call this NewView. And now you might be wondering, I didn't import MyNewView, so how is this application going to actually get the definition in there to render that element for the user? And this is where we've got a pretty cool feature that's built into this template. And it's part of Polymer's new purple pattern, which they talked about a little bit at I.O., and we'll link to that talk at the end of this video. And basically the whole idea around purple is, whenever possible, you want to lazy load your element definitions. So that way you're only registering stuff the moment that the user would be viewing it on screen, and that's sort of needlessly eating up bandwidth or consuming CPU cycles, registering elements that maybe the user is not looking at yet. So if we scroll down to the bottom of this elements definition, you'll see that there's this page changed function right here, and this is linked up to our app router. And what happens is every time the route updates, it checks to see what the page value is, and then it's gonna call import href, and it's gonna say, all right, well, let's just pull in anything, based on the page value, let's pull in any element that matches that page name with the prefix of my. So we've got my view one, my view two, and because I just created a new one called my new view, when someone goes to a page called slash new view, this is gonna run, it's gonna fetch that definition, that element's gonna upgrade it in place, and only then will we swap over to the new view. So I think we're actually ready to see this in action. We can go back to our terminal, verify that our server is still running, so far so good. Now let's go back to Chrome, refresh the page, and we see that we've now got this new menu item for new view, and clicking on that, I can see that H1 showing up. So I know that my content is working, my element was lazy loaded, and stamped out to the page. Now the last thing I wanna do is take this application and actually deploy it to a service like Firebase, so I can share it with the world. And Firebase is a really, really amazing service which does real time database syncing as well as static hosting and a bunch of other really cool features. For our use cases, we're just gonna use the basic static hosting. So I've actually gone ahead, gone to the Firebase console and created this brand new project called Poly App. If you are new to Firebase, you'll need to go to their website and create an account at firebase.com, and then click on little console button and that way you can start adding new applications. So I've got this little app called Poly App, and in my terminal, I can use Firebase's command line tools to actually deploy my application. So I'm gonna run firebase login, if I have not logged in yet, because I have already gone ahead and logged in, I can just run firebase init. I should point out, actually, if you haven't installed these tools yet, you can do so with npm install-g, firebase tools, so that'll actually give you access to their command line. And I'm gonna run firebase init, and it's gonna ask me some questions about my project. It'll ask me, do we want to use the database or do we want to use static hosting? I'm gonna hit space bar to say, I don't need the database, I just need static hosting. It's gonna ask me which directory I want to deploy, and though we haven't built our project yet, I actually, I'm just gonna go ahead and say that I wanna deploy a directory called build slash bundled, and we'll come back to that in just a sec. It's gonna ask, do we wanna rewrite all of our URLs to alwaysserveindex.html, which we do because we're building a single page web app. So we'll say, yep. And then it's gonna ask us, which project do we want to associate this with? And we're gonna associate it with that poly app project that I created. This is gonna create two files for our application, firebase.json and .firebase.rc, both of which have some configuration data for our app. The last thing we need to do is we actually need to build our application for production. And before I do that, I'm gonna switch back to my text editor and find this file here called polymer.json. Now the way that this is gonna work is the polymer build tool is gonna try and sort of separate our app into the shell and then all of the different fragments, anything that is lazy loaded. So all those views that I mentioned before, my view one, my view two, those are all lazy loaded at runtime, as is the new view that I created. So what I wanna do here is where it says shell, leave it set to my app.html. And where it says fragments, I'm going to add a new fragment for that new page that I created. So I'll say source slash my new view.html and save that. And what happens here is when we run the polymer build step, Vulcanize is gonna go and it's gonna try and create little bundles for each one of these pages, making sure that it's not loading duplicate elements, which is really nice. It's gonna cut down on our bandwidth usage and prevent possible weird errors when we try and like double register elements or stuff like that, right? So it's just gonna go ahead and solve that for us, which is pretty cool. So with our fragments in place, we can now go to our terminal and run polymer build. And this is gonna generate two versions of our project, a unbundled version, which does not use Vulcanize or anything like that. That is for servers that support HTTP to server push and can actually just sort of stream down the individual element definitions. For servers which don't support HTTP to server push, we can have a bundled version and that's gonna use Vulcanize to actually look at all of our different fragments and turn those into little Vulcanize bundles of concatenated elements. And that's actually the one that we're gonna deploy. So we already went ahead and we told Firebase to deploy the build slash bundle directory, which means the last thing I need to do is just run Firebase deploy. Now that those directories have been generated, it's gonna go ahead and push all that content up to Firebase. So we can wait for the progress indicator to finish. And lastly, we can run Firebase open. And this is gonna ask what we wanna open and we'll go down to where it says hosting deployed site. And there we go. We've got our application running on Firebase. We can click on my new view and verify that everything looks as expected. And really in just a few short minutes, we've gone from having no app whatsoever to scaffolding something out using the CLI to setting it up on Firebase and deploying it to the world. Now there's a lot more that I want to cover around app toolbox and CLI. So we're just getting started. If you have questions though, please leave them for me down in the comments or you can 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.