Polymer Power Tools (The Polymer Summit 2015)

Key Takeaways

[Music] hello so I'm going to talk about polymer tools for helping you stay productive tools for everything from building apps and elements through to tools that can help make sure that your projects are lean when you're shipping them down the line I'm also going to talk about a few new tools that we've been working on that we think you're going to find a little bit useful now before I talk about any tools I'm going to tell you a little bit of a story so I was in Japan a few weeks ago and it's a place that's really big on automation automation being this idea that you should take repetitive tasks and try to get like a system or a tool to help you avoid having to do that work yourself now one example of where they're really good when it comes to automation is the idea of parking bikes now if you're from Amsterdam or you know you you live here you're probably aware that every single I'm pretty sure this is accurate data every single person in Amsterdam owns three million bikes that's seems accurate now in Japan they've actually taken that idea of trying to park a bike and they've taken it to a whole other level so this is the ecycle it's a system that will take your bike it'll have like a robotic arm pull it down into the ground and then find you a parking spot for your bike if this is the first time you're seeing this you're probably wondering what sort of Matrix sorcery is this it's amazing kind of want that but that's kind of cool right now the reason that I I care so much about automation is that I I very much believe in this phrase I believe that if you want to be fast you have to give up on the things that are keeping you slow now this applies equally to reasons for automation it applies equally to Performance as well so if you want to be FAS if to give up the things that are keeping you slow now you can't automate absolutely everything if we did we'd probably be out of a job now in Japan they actually make a really good balance they strike a good balance between how much automation they apply on how much manual craft MIP is still in place um one example of this I I remember I was I was staying at a hotel and every time that I would get lunch um someone would make me like a little paper cranes this is like something manual someone's gone and made now paper cranes are sort of really elegant they're like these really well-crafted things they're really pretty and I thought that I would go and try making one of these myself you know I I know javascripts really this can't be too difficult and it's it just it didn't quite no one no one is more horrified than the paper crane itself and I'm not really allowed back in Japan anymore but if you've been working with web components and polymer for a while um You probably have asked yourself some point where are the tools for this declarative shift the JavaScript ecosystem has got a huge amount of tools available for every task you might want to achieve when it comes to Hast to Mel there are still a few areas that we find you know are a little bit rough things like you know maybe I want to lint my HTML and all the assets inside of there maybe I want to run additional processes against the files that are making up that import and the good news is that tooling for HTML and tooling for imports and web components are getting a lot better today I'm going to walk through a new polymer toolbox a tool boox of things that we've been maturing there's some new Tools in there stuff like linting that we teased in the keynote um and some things that I'm really excited about things like the the new polymer SE DN that we're working on now before we dive into that some quick tooling requirements it's very important to cover this so the polymer team um primarily use two package managers the first is bower which is a frontend package manager it serves us pretty well at the moment and the other is npm now if you've never heard of npm it's basically Tinder for node modules you never quite know what quality of thing you're going to get in there but yeah JavaScript so let's dive in now the first thing we're going to look at is how we write reusable elements we use we put together this package called seed element for this and Seed element is kind of neat because we actually use a very similar structure when we're building out things like the paper elements and the iron elements seed element comes with boilerplate right out of the box for you for helping you like create your own element now one of the first things it gives you is structure so it gives you the same structure that we use out of the box it includes things like a demo directory a test directory and some of these other files like CED element and index.html and your bower.json file let's dive into those now you might be thinking if you haven't played around with CMO before that your index is where your demo lives but this isn't actually the case the index file is actually where a component called iron component page lives this is powered by another tool called hydrolysis what this gives you is basically the ability to scrape your element and pick up API documentation I know what every single person in this room is thinking API docs oh my God that's amazing now the API docs that we give you once they've rendered they look a little bit like this so you get a summary of all the properties that are inside your page you get access to being able to toggle back and forth your private and public um API you get a summary of all of your methods and the different events that you're firing off it's it's kind of neat and inspires you to do a little bit more of sort of documentation driven development if we look at the index for the demo itself this is basically where you go and you show the world what you've created some people like go all out they style this thing it looks really really neat um but this is you can you can go as basic or as you know far out as you want this is just where you demo the thing that you've built and then we've got seed element itself now seed element is where you have the logic for your element out of the box for seed element we actually give you a lot of comments the whole way through the file so it's very clear where you know where property should exist where where your template logic should go where style should go and uh this is basically the the single place where you put things like your Styles your template and lower down is where you put your JavaScript I thought it would be interesting if we were to try doing something with seed element now I'm a really big fan of emoji so I thought it'd be kind of neat if we put together an emoji text element something that you could just throw some text at and it'll pick you know the relevant Emoji for it this is backed by a little library that Monica wrote so here for example I've got you know I've got saying text equals tier and it's showing up a tier and if I switch it over to tier clap um it'll pick out the right Emoji for us what we can do for seed element here is we can actually move all of our Logic for the Emoji text element into into seed element spoiler plate we can replace the JavaScript lower down replace all the properties replace what's inside the template add some of our own documentation and it slowly starts to you know St starts to to look kind of neat we've got our render documentation customized for this element and before we you know before we forget we've also got a bow install we've got to install the dependencies necessary for seed element things like properly picking up polymer and the iron component page element that we're using and then we get on to another tool called poly serve now poly serve just makes it really really convenient for you to serve up your elements you don't have to wonder you don't have to really worry about using a bower configuration file no B RC file or anything like that it'll just take care of all of that for you so you go and you get poly serve and you just you know install it globally CD into your seed element and you can go and serve off your elements just it just sort of works now a quick Pro tip if you don't like the default port number and I know some people get like they really like you know customizing the port numbers um you can just use a-p option to customize the port for poly serf what this gives you is a page that looks like this so this is the customized version of our iron component page with my elements documentation when you're sharing elements with other people this is generally the first page that they will see in the very top Corner they can go and they can then toggle demo of your element so here's the demo for the Emoji text element that I've been working on and as you can see I'm typing in some text here and you'll you're noticing that the Emoji text is automatically translating so I'm saying hey people that sit on planes that don't read listen to or watch anything you look like serial killers which is probably accurate now let's say that you then wanted to go and deploy your element to somewhere like GitHub Pages we have a workflow for that I'm not going to dive into too much detail here because we've got a guide on the site that covers this but the basic idea is if you go and grab this particular repo so the polymer tools repo it's got a script in there called gp. sh you can use gp. sh to just publish elements that you're working on straight to get a pages and it literally just takes a minute or two it's super convenient I use it every day it's kind of neat now how many people here suffer from element guilt so you've written an element using polymer 0.5 and you haven't ported it over to 1.0 just yet so lots of people have got element guil polyup helps with this quite a lot we saw a preview of it a little bit earlier and this just helps you automate moving your elements from 0.5 to 1.0 so I actually had my emoji text element written in 0.5 and um I wanted to Port it over but I didn't necessarily want to do all of that stuff myself so I went and I installed um poly up so it's a global install and then I can run it against that element and that just magically takes of my stuff to 1.0 now some of the stuff that polyup takes care of for you are things like HTML Transformations so converting the 0.5 idms like polymer element name to Dom module things like the template ifs to template Dom ifs and things like your template repeats the template is Dom repeats with a proper syntax now in our case um once I actually ported this over most of it worked I didn't really have to do a lot of work to tweak it like one or two small things but but not a lot here's an example of some of the places where it fixed things up it just made sure that the syntax was exactly what I expected it to be for 1.0 now quick Pro tip if you have an uh an entire app written in polymer 0.5 and you want to try using polyup on it you can actually recursively upgrade so this quick one liner will allow you to go and find all the different HTML files that are currently inside your directory and just run poly up against them and overwrite any of the files there um I've used this on an app or tune it just gives you really quick Baseline that you can iterate on I think that's a nice little win uh polyup has also got an online tool available so if you've got you know something that I ran into last night was I wanted to Port an element for use in an app that was still written 0.5 by somebody else um I just dumped it into the polyup online tool and this is just a really neat quick online thing don't have to install anything just dump your code into here copy paste and it'll actually just Lo let you see what the the transformed code looks like next let's talk about unit testing so there was a recent survey done in the frontend community um where they found out and this is this is sort of shocking to everyone that almost nobody writes unit tests it's just a wonder I didn't I didn't really expect that to be the case um but on the polymer team we we care about unit testing and we do think that people should write unit tests so we created web component tester for this now web component tester is is uh pretty convenient it um basically gives you uh a tool that works on top of mocha which is a really great unit testing framework for writing a tests and chai which has got some great assertion helpers you install this globally the same way that you install the other tools and you just run web component tester against your tests and it'll just go and run them now in seed element we actually include some boilerplate tests for you out of the box this is an example of HTML Suite so you can write tests in h in separate like HTML documents so here I'm just loading up so I'm using wct's namespace and I'm loading up a test called basic test um when you start off you're not going to have any test written and when you load up your page nothing's really going to happen you might get a message in the console that looks a little bit like this saying you know that you evaluated your tests in a millisecond because they do not yet exist here's another example of what a JavaScript Suite looks like so I'm testing out my emoji text element and I'm going to just like focus on on this little section because I'm a little bit proud of this this is the first opportunity I've had my career to include Emoji in unit tests just I feel good so I'm able to run my tests here and as you can see you can run um web component tests in the browser you can also run them um in the command line but here we're just getting a summary inside the browser but also inside the console and we can dive in um if we happen to find that there are issues with any of our tests when you run web component tester or the command line um you basically get something that looks a little bit like this it'll go and fire off like all the different browsers that it's trying to run your test against it'll pipe the output from those browsers back into the command line and then it'll close them um I thought it useful to just you know remind folks there are a few Pro tips here that can help if you want to run web component tester with just a single browser you can do that just use the dash L option if you want to keep browsers alive after your tests have run so for example if you wanted to continue debugging an issue you're finding in one browser but not another in your tests you can just use the- P option and if you only want to test files that you specify directly you can also do that too next let's talk about adding elements to an app we're going to do this using polymer starter kit so we announced polymer starter kit a few months ago Google IO and um Rob talked a little bit about it earlier but it basically includes a few different things right out of the box it includes first class support for components endtoend tooling offline first support responsive app layout and a few other nice bits and pieces now this morning Taylor told you that the total number of downloads of polymer starter kit was something around 65,000 um I checked this last night and I found out that the total number was 66,000 and I checked it right before this talk and it's now at 67,000 so I'm assuming you guys are finding this useful at least I hope so you guys have been building some really neat things with hmer starter kit you've been building everything from like sites that help Empower kids to ride safely using the neon animation elements you've building 3D model viewers this this is my favorite example so far you're building this really badass looking character um you've been building things like this using webg and polymer you've been building devfest sites you've been building like meal helper sites using ripples all over the place it's been kind of neat to see this like the progression of apps being built now one thing I thought was missing was an emoji quiz app found my niche in the market in case anyone wants to invest but we're going to be building this today so the first thing we're going to need for an emoji quiz app is an emoji quiz card something that allows us to throw a question at the card render it to to the screen using the correct emoji and then we want to have people um be able to enter in text representing what they think that particular you know movie your emoji actually represents and we want to run some validation rules against it paper input is really powerful and it's a great utility for helping us achieve this so we use paper input and paper button on this particular element next we have an emoji quiz questions element this is just a small piece of the logic but the basic idea is that I'm going to be doing a a quiz using emoji and movies and I'm just going to feed it a list of different movies in and it's going to iterate over that whole list and output all of the cards to the screen finally we're going to need Emoji Quiz categories so something that allows you to select what category you want on screen and um we've also got sort of emoji quiz questions being used here so that I can actually just make sure that we're showing you the right list of things this app is going to use neon animated Pages because I just love transitions now if you're a frontend developer or someone that's been developing on the web for a while you're probably aware there are quite a few different build tools and task owners available today everything from grunt to broccoli to npm script on the polymer team we're really big fans of Gulp and we'll be using it for a bunch of the tools today um I know that some people still consider make is a as a good tool to use um unfortunately make is the only modern build tool that doesn't have its own logo and I thought long and hard about this and thought that the the adequate logo for make was the Platypus so we're going to just go and npm install and B install all of the things that we need um this is a single one liner for anyone that's experienced with these tools if you're not we actually walk through like all these individual steps for you in the docs but um if you're familiar with npm or you you aren't just yet but you you might be in the future um something that you're probably also familiar with is the idea of npm installing all of the intern n i we're trying we're working with we're working with the mpm team we're trying to see if we can you know fix this stuff but you know might sometimes it'll take a few minutes think of it as you know a good time to go learn a new hobby or bake a cake or something but in a few minutes it's done it it it doesn't take that long takes like three or four minutes but it's worth it um so once we've installed all of our dependencies we just go and we do a gulp serve and what we end up with is this application so this is my emoji quiz app and what I'm going to do is I'm just going to go and select an option here so I'm going to select the movies option um tap on that and here's our first question so this movie is Ant-Man so just going to go and enter that in it looks like I was right next one is Princess Diaries still looking good this is bloody needle and rink I don't know what this is is and I fail but this app is kind of working you know it's kind of working it's could be a real thing now um I did want to mention one thing uh so Monica G gave a really great talk earlier we we've talked about custom properties and uh I think probably everyone in this room knows that CSS is just the best thing ever it's truly truly amazing do you want to know something funny this actually renders correctly on this screen but it doesn't up there this just goes to show you how broken CSS really is CSS is awesome but custom properties make it a whole lot better and if you're building an app using polymer starter kit I do recommend checking out material pallet.com it's a site that has a number of different options for selecting um a primary color and an accent color and what you can actually do now is there's a polymer option in the very bottom of the screen that will generate you a theme file an app Theme file using custom properties and you can just go and drag that into your polymer Starter Kit app and it'll rethe your whole thing your your entire app It'll like rethe your toolbars your paper drawer panel your buttons and it's you know it's pretty low friction um I tend to use this whenever I'm building out demos and I I find it really useful next let's talk about productionizing our apps so I believe that a build process is kind of important if you're building anything other than a prototype today it's sort of a promise to your users that you're going to make sure whatever you're shipping down the line is as small as possible you know respect their bandwidth and respect their data plans now the build process in polymer starter kit looks a little bit like this we've got tools for quality and testing for minification um we've got things like browser sync for cross device editing and reload but I'm not really going to talk about this too much I'm going to focus on the colmer Tooling in our workflow that um I think it's useful for you to just be aware of and there's some new Tools in here that that are good to to preview so the first tool is vulcanize now vulcanize is really useful for concatenating all of your HTML Imports into a single file for production you might be wondering why there's a picture of Spock in the very corner of the screen um I thought that you know we should just say screw it to Vulcan tradition it's okay for Spock to smile so Spock is smiling enjoy now vulcanize is useful for reducing an app and its dependence into a single file we install it globally using npm similar to the other tools and then we can just run vulcanize against our emoji app um and convert it into a build file so all of those dependencies end up in the exact same file it's kind of neat it's also able to do things like inline or external assets into into a single page now you might want slightly more control over over what's happening with vulcanized uh we've got a number of options we've got things like being able to uh specify whether or not your scripts get inlined inside the page you can also specify whether you want your stylesheets your polymerized stylesheets to be in line too you've got an option for that as well now if you were happen to be working with content security policy and you know you're you're concerned about things like um you know xss and so on um Christoper is are great tools to be aware of because it can help make your HTML files CSP compliant so one of the things it can do is just like split your inline scripts from your files for CSP um here we globally install it um we can then run crisper we have a source option that allows you to just take um a current index at HTML file you can specify then where your build. HTML and build.js files you're going to end up and if you happen to be using vulcanize um crisper actually works pretty well with that too so here we're taking advantage of piping at the command line it's just that like Thin Line um we're taking advantage of piping at the command line to uh take the output from vulcanize where we've passed in the inline script option and we're just going to throw that over the fence to crisper which is then going to go and split those out into two separate files for CSP now another new tool that we've recently been working on is called polyb build I know that we've talked about a bunch of different tools already so far and you might find it hard to keep track of them polyu basically tries to combine the Best in Class of things like vulcanize crisper and another little little known tool we wrote called polyclean which helps us keep your HTML clean by removing whites space and stuff um and it it's sort of the the Megazord of the uh the polymer World um I don't know how many people here grew up around Power Rangers um I did and the one thing the Power Rangers taught me was that if you've got if you've got an adversary or you've got anyone that um you don't sort of get along with if you stand in front of them looking aggressively for as long as you can eventually they will explode thankfully poly Bild doesn't quite do this it works um so one of the things polyu helps us avoid is is this Insanity so rather than piping like all of our different tools together like vulcanize with all of the options polyclean after that crisper after that probably needing to drink some beer after that you can just run this just install polyu globally and run it against your fire good news is that we're already using poy build um in polymer starter kit today uh it's replaced the some of the current vulcanized Pipeline and it works really well with gulp so the polymer starter gulp fil is already using polyu and we found that it works really well so far so we hope you you know you try out polyu polyb build has also got a maximum Crush option I was in the engineering meeting when they actually decided to call this option maximum Crush so it's a decent option basically it helps you decide you know whether or not um your output JavaScript should be minified or just have whites space removed and um there's a there's a good reason why I thought that a a a wrestler image in the corner would be sort of good here um wrestling is a sport that I don't totally understand because you basically have people that don't wear any pants fighting over a belt so it's it's just doesn't quite make sense to me let's get on to some work in progress tools um the first of these is called polyl and we actually just open sourced this less than an hour ago go last minute um so poly lint basically helps you by helping linting your your file your elements um and your Imports uh this helps you stay true to the patterns and semantics that the polymer team think make really high quality elements but also makes you just make sure you're just like catching errors that you think um will probably not render your your elements correctly so you can go and npm install poly link globally and run it against your files and it does a few things that I think are kind of neat so let's say that you ran it against a file and the output that it gave you was the expression um square brackets myars balance the attribute class should be using dollar equals instead of equals now just doing this thing at the very top was a little bit more of a polymer of 0.5 idiom rather than a 1.01 and what you should be doing is using the dollar sign at the very end instead so do dollar equals and it just helps you to make sure that you're actually following the right semantics when you're trying to to bind to to different variables here's another example so let's say that it says property marar was not found in properties for the specific element What's Happening Here is I've tried to use data binding on a particular variable called myar when it doesn't exist at all um what you should be doing is just making sure that anything you're trying to bind in there has got a valid um a valid reference inside of the properties object at the very bottom and you're setting up your your types and values correctly one more example um this one is is kind of key is kind of cool because it says you know computed binding um using property not a function which is not in fact a function for element um that we're using and if you take a look at the very top which you'll see is we're trying to compute we got a function that we're referencing called not a function it's a computed function we passing in some variables but um not a function has for whatever reason been defined as a number instead of a function at the very bottom uh what you should be doing is making sure that those are valid functions that you can actually pass variables to actually get valid output from and there are a lots of other use cases where poly Lin just makes sure that you're writing code that makes sense so I think poly is kind of cool I hope you'll try it out and please file bugs another thing that um I'm really excited about is polygit now something that I love doing is working on prototypes um I particularly like using jsbin for this and one of the challenges I've had before is being able to load in imports from multiple destinations lots of different servers into the same place and have them still apply the rules of duping without any issue I don't really want to have to worry about that I don't have to worry about like cross domain issues and polygit is sort of a stateless CDN that's compatible with d duping and it solves some of these problems and one of the first things that lets us do is let's say that we're inside you know a new a new bin on JS bin or or one of the other services that are a little bit like it we can actually reference elements on polyg get.org so it has a directory path called components we can reference an element Name by the polymer team and then the uh name of the import so in this top example we're loading up polymer and the paper toolbar I don't really like the idea of writing these really like long paths for everything so we can take advantage of the HML base tag it's just simplify this a little bit so at the very top inside of our head we'll include a base Huff that points to polyg get.org components and then I can just reference polymer very very conveniently let's take a look at a slightly more advanced set of examples Auto organization selection so the polymer team work across a few different organizations we've got the polymer or we've got you know polymer elements Google web components web components and polygit is actually smart enough to allow you to load in lots of different paths and it'll just resolve this stuff behind the scenes for you so I can easily include paper button on my page as well as Google signin it'll just take care of the resolutions for me if you're wondering whether you can do even more complex things here are some of the ideas that we're exploring at the moment ideas like being able to specify what version number of a particular component you want to load in what branch and org you want to load those in from and whether you want to specify a completely different org like I might have an org of my own components of my own version of Po even and I want to be able to to try testing this out most of these examples actually work today and you can try them out on polyg get.org so we hope you'll try out poly get.org it's uh it's very new it's still sort of in an experimental phase so use your prototypes don't quite use it for production just yet but we hope you'll try it out and give us feedback on what you think and then we've got some bonus tools things that I just thought were super neat so the first is an extension called polymer ready if you're into polymer I have a feeling one or two of you might be um you might be interested in like just surfing the web and seeing what you know pages are using polymer and how they're using them they might be using different elements that you're yourself are using on that note I'm also happy to share with you that Chrome is now using polymer for a number of our pages so here is the brand new downloads page in Chrome you can see that it's using polymer 1.0 it's using some paper header panel they're using paper material lots of their own custom elements this is the new polymer powered PDF viewer in Chrome we dive into here we'll see they've got lots of their own custom elements but they're also using things like paper toolbar and some other elements in there too and this is a preview of the new upcoming material design settings page it's not quite ready just yet but it's also powered using polymer and things like our paper drawer panel and paper toolbar so polymer is being used all over chrome today and and I just think that's super neat another thing that I use in my daily workflow is Rob dodson's um Sublime and atom Snippets package and what this basically allows you to do is let's say that you know you wanted to start prototyping an element you can just type in like pH it'll scaffold you out like a what you need for a demo page uh let's say we wanted to create a new uh a new element called Awesome form I can type in hii and it'll expand that into a HTML import for me I can then include a reference to polymer um I can use another hi to refer to something like iron form and if I wanted to go and write a new element now I can just type in PE T and it'll scaffold that out for me this is what my my sort of daily workflow looks like um I go inside my element I want to start using something it's also got autoc completions for most of the iron elements and the paper elements so I don't even need to necessarily go back and forth between the docks and the doc demos to to get started this is kind of a really neat package available for Sublime and atom something else that was uh released just a day or two ago is a tool called poly search it's a Chrome extension but basically what this lets you you do is look up the paper elements and the iron elements super easily just type in like a prefix like paper it'll list all the possibilities and then it'll just help you dive right up to the elements page so that's poly search one thing I wanted to suggest folks do is build an experiment if you find that there are particular workflows or particular tools that you'd like to use with polymer and you don't see that they're necessarily officially supported just yet please play around with them show us you know show us the things that you're building um last night uh I was actually quite interested in how well polymer might work with something like browser IFI and so I started building a gravitar element that would just like show a photo on a page I found that there was a node module called gravitar that basically did most of the logic that I needed for my element so I went and I grabbed this node module and I wanted to create basically this a gravitar photo element where I could give it an email address and a size it would just render the right photo on my page so you know needing a user's um Avatar is a pretty common use case for apps today now this is what this looks like we have our gravitar photo. HTML element we have a script that references an external version of our script so we've got gravitar photo that's going to be the source we've got a um file that's going to be browserify using the require statements so browsery helps us use those requir statements then I just have a g file that's going to help build out that code for me so please go experiment if there are workflows you find work really well with polymer please share them with us now on to the Future we're currently working on two kind of exciting new tools that we think are going to find useful the first is the polymer Dev tools extension this is a new Dev tools extension it's sort of still still very much working progress but it's going to help you with performance and both Eric bidelman and Paul Irish are gonna gonna teas some more stuff about that in their talks we're also working on a brand new version of the polymer designer this is an electron based sort of desktop app can also run it in the browser that lets you go and you know work on your polymer elements we think that you're going to find this stuff neat and we highly encourage you to also you know send us your ideas uh PRS are also very very welcome um and last but not least there's a brand new version of polymer starter kit available today this includes everything from recipes for working on es6 using Babel to web performance recipes to recipes for getting polymer certicate working with chrome de editor it has a brand new build process workflow using things like polyu and plenty of bug fixes I'm particularly excited about the es6 support using Babel because um I just really really love es6 and slashes 2015 whatever your preference is for it um and uh our our Support also includes things like just making sure that you're using jscs to to properly like style check your code so I've talked quite a lot about all of our tools um one last thing i' I'd like to ask you to do possibly is give a big hand for all of our tool makers the people that make our lives a little bit easier on the polymer [Applause] team so that's that's it for me thank you very much [Applause] [Music]