 The program will begin in five minutes. Please take your seats and silence all personal electronic devices. Thank you. Welcome to another edition of Oh No, This Is Not Another Edition. Hello, Polycasters. Welcome to another edition of the Mianica Show. Sorry, oh my f***ing dessert. Are you all out of the shot? If you've noticed and if you try to use them with some of our custom elements, you'll... The wrapper is going to take these inputs and make them print. Guys, I forgot what this demo did. Do you have tape? Why don't you just tape it to my back? Oh s***. Look at that. I have an argument called birthday. It is in the right format, which is a thing that the server wanted to do. Look at that. I have an argument called birthday. It is in the right format, which is a thing that the server wanted to do. F***. And that's how you can... God damn it. This is never going to work. In the comments below, or you can find me on Twitter, at nodwildorf. Thanks for watching. I forgot everything. God f***. This was hard. So I thought this was going to be a disaster before that happened. Great. Good morning, everyone. Welcome to the second day of this amazing Polymer Summit. I was super nervous about this. Oh my God. That is Matt. Matt does these things to throw you off. Welcome. I am your MC for the day. I've never MC'd before. It's going to be a disaster. Please be nice to me. I have to remind you of things. So all of the videos from yesterday are already on the YouTube channel. So if you've missed everything, you can go and watch them again. I want to remind you of our community guidelines, because we want to make sure everybody's going to have a good time today. Our code of conduct is posted outside, is posted on the website. If you have any feedback, or if you notice anything wrong, or anything that's happening well, you can give us feedback. Any of the speakers, people's faces you've seen on the screen, or any of the staff, they're wearing black shirts or white shirts. I'm running out of breath. So now to tell us about the state of the internet today is Dion. So to introduce the speakers, I've been asking them for Fun Facts. And Dion's Fun Fact, which is a dubious Fun Fact to begin with, was that he was a national chess champion when he was 12. And I was like, sure, sounds great. Only about an hour and a half, he came back later and he was like, I made a mistake. It was in chess. It was Scrabble. So no, I'm concerned. He doesn't remember his like first 15 years of life. So give it up for Dion, everybody. Hi guys. How's everyone doing? How was day one? It was fun. It was fun, right? Great. Thanks a lot. I want to say thanks to Matt for giving me the opportunity. It's great to be back home in London. And I think Matt and the whole Polymer team have just done a fantastic job with the Summit for us and with the new release of Polymer 2 and the like. And I kind of needed it. I kind of needed yesterday and I kind of needed the party because 2016 has been an interesting year. Should we say now and then I get a little bit frustrated. Again, I grew up here. So I have certain frustrations about being here. And then now I live in the U.S. And there's a few frustrations right now in the U.S. So I kind of looking at maybe Canada or Australia. I don't know. I really, I really don't know. Yeah. But then, then I have to go to data and I have to be like, take a breath. It's actually the best time in history to be a human. It's okay. The world is more peaceful. There's less poverty. It's going to be okay. And I have to kind of calm myself down. And I sometimes feel a little bit the same way with technology where I dive in there and feel a little bit frustrated. There's just so much stuff going on. Things are evolving so quickly. And I have to remember that, you know, I may not have to learn every single tool that someone publishes to NPM or GitHub. It may be okay to just focus on actually delivering something, you know, for my users. And then I have to remember again after taking a breath that things are actually pretty amazing for the web right now. You know, I used to work for Walmart where I started a mobile group over there at Walmart Labs, which is also has Aster in the UK. And this was about five years ago where I got to kind of get in there, kick out mobile from the ground up. They had no native apps, no mobile website. And the business just wanted apps, apps, apps, right? This is five years ago. It's a big push. And so we went out there and got things into the app store. But we also built a brand new website that actually worked well on mobile. And I was able to see over time things kind of settle, because whenever something new is happening, everything is kind of up into the right, and a couple of years in, I could kind of see that, okay, look at this, guys, 80% of revenue is still coming through the website. Maybe there's something to this web thing still. And so maybe we should kind of focus a lot of our attention on that. And I feel like we're getting to that across the entire community. We see a lot of the kind of macro picture on what's going on, but then we can actually look at our data and see how things are kind of balancing out. But as well as being an important end-of-the-tap experience, we also need to become really native on mobile. And that, to me, is what the Progressive Web Apps thing has been about, is about actually delivering all of those capabilities. And that's been incredibly excited over the last year. But I kind of feel like this at the moment. I feel like I'm regenerating from desktop apps, mobile, desktop apps web to mobile web. And I feel like as a whole ecosystem, we're still going through this change, and we're not fully there yet. But it's important to know how far we've actually come. You know, when mobile finally took off, it was the Pinch and Zoom web. And it was actually a genius strategy of Steve Jobs and friends to do this, because the web then instantly became the back catalog, right? If he didn't deliver this a mirror at the time, everyone was working on WAP and these other, you know, kind of weird things for mobile, then there wasn't the path to be able to get access to all of this content. But we've been able to go from that and move away. We don't want the web just to be the back catalog. We want it to be at the forefront. And we can now deliver these fantastic experiences like Chop and Polaro, and a lot of the things that the partners have been showing. And this is really kind of a sense of where we've able to get to over the last few years. But we've got a major challenge, and we're an interesting crossroads right now. And I think it's important to realize that there is still an existential threat going on here. And that's about building our mission for our users to deliver this fantastic experience, but to do it on this platform that is very different. On the web, you have the browser and the runtime that's obviously already on the device. And so you have to use that as much as possible, hence use the platform and the things that we've been hearing. But we've also got this whole slew of stuff that has to sit on top of it. We've got all of our frameworks and libraries, all of our app code, and then all of the data and things that we need. How are we going to get that onto the device and in a way that mobile can actually run this thing? And Alex Russo is going to tell us a lot about the actual constraints that are here. And it's really vital to realize the threat that we're in, because we need to deliver that in three seconds or we're dead. And so it's kind of important for us, the framework developers and the browsers to keep evolving this runtime to actually work really well for mobile. How do we solve this? We have to do magic. Computer science tends to be a lot of illusion. As you're interacting on your desktop computer, it looks like the computer's there trying to do some work for you, but we all know that it's really going through a whole slew of tasks in the background, and at the last minute, it said, oh, yeah, repaint that cursor. Just being there ready for the user, we need to work out a way to do that. Monica and Steve talked about this yesterday, about being lazy and doing less. It's important that we really push hard using all of the tricks and smokes and mirrors that we can. Paul Lewis is going to be talking later. He's kind of our master magician, and he'll be here with his sidekick, the safety serma, and so you're about to watch him do live coding and see the different tricks that he's getting up to here, but we need to do two things really importantly. We need to squash everything down and get our frameworks and libraries down to a point where they're optimized for mobile, the same with our own code, the same with the data, etc. But the flip side is we also need to take and be able to take a slice of our information, of our UI, our UX, and be able to quickly deliver just that slice and then be able to lazily load things later. It's really important for us to be able to do this, and we need to do it in a way that actually makes sense for us. So, again, back at Walmart, we did a lot of what's now called isomorphic, JavaScript, server-side rendering, but it became a little bit of a spaghetti mess. If you went into the code, you'd see some little cheeky hacks of like, if I'm on the server, actually do this. If I'm on the client and do this, and it was really painful. So we need to have the ability to do less work and do work later for our devices, but we also need to be able to do that as developers. And for that, we need to have all of the right tools to give us the abstractions where we can kind of, you know, fake this out and let the illusion actually happen. So this is why I'm really excited about being here at the Polymer Summit, because I feel like Polymer's got the right match here. It's a great tool to allow us to actually deliver this experience. And I'm super excited for you to, you know, see what else comes up later on in the day. And now I kind of want to get off stage and allow you to kind of see what's going on in the world of tooling, because I think it's going to really impress you and show you what's going to be possible as you meet that challenge. Thanks so much. Dion also had the task to introduce Justin, but he didn't. So next up are Justin and Fred and Peter to tell you about what's up with tools. And I have one fact about each of them and you have to figure out which one is which. One of them used to be a hippie rock star in a band called celebrity tub hot tub celebrity hot tub. One of them gave themselves a concussion by misusing a bench. And one of them used to do a lot of pottery, which kind of means he's been working with Polymer all of his life. Give it up for the tools team, please. All right. Hello. Good morning, everyone. Thanks, Monica. And thanks to him for getting the day started. And thanks all of you for being here. I hope everyone's really excited for day two. My name is Justin Finiani. I lead the Polymer tools team and I'm really, really excited to tell you this morning what we've been up to recently. So yesterday, you got to hear all about the future of Polymer and web components. You heard about the new web component standards, which are now starting to ship native and browsers like Chrome and Safari. And you heard about Polymer 2.0 and how it builds on these new standards and is even smaller, easier to use and more interoperable with other libraries. And just like the Polymer Core Library, we're also working on some major upgrades for the Polymer tools so that they work with those new standards, Polymer 2.0, and so that they're useful for the entire web components ecosystem. In the next 45 minutes or so, we're going to take a tour of our tools, recover some thoughts about why we build tools, updates on a few of the core tools in our toolbox, and finally a look at how we actually deliver these tools to you so you can use them. Let's start by looking at why we build tools and why we even have a tools team on the Polymer team. The Polymer team hasn't always built a lot of tools. In fact, the core library team is famously averse to tooling. What they and really probably most of us love about the web platform is the immediacy of working on it, that instant edit refresh cycle. So their tools consisted of basically an editor and a browser. And that's pretty much it. Components and apps and tests would load in the browser without any build step required at all. By not adding too many layers of abstraction, the hope is that there's not as much need for a complex tool chain. But you almost always need at least some tools. And because we're using these new platform features like custom elements and HTML imports, many of the existing tools didn't quite work how we wanted. So first, we needed a dev server that could like easily serve up components and their dependencies very easily. And then we needed a bundler that worked with HTML imports. And then we really wanted a test runner that worked with our component first workflow and could load multiple HTML files. And this need for tools went on and on and on until we ended up with this virtual kitchen drawer full of tools. And this is very, very hard for our team to maintain. But much worse than that, we ended up with many, many pages of tools in our documentation. And this is hard for our users. And it's especially hard for users who are new to the polymer and web components world. So at the beginning of this year, we knew that we needed a dedicated tools team and we knew that we needed to go back and re-envision our tools as a cohesive and organized suite that's easy to approach and understand. And this was also a good time to stop and ask a really, really important question. Why? Why is the polymer team building tools in the first place? Well, the tools we had already created didn't come out of nowhere. Like most tools, we built them because they solved real problems. But what kind of problems? Well, web development in general, as we all know, has many, many problems to address. And as we all know, web development has many, many, many tools to address them. But with polymer and web components, we have these new and unique problems to deal with that the existing tools don't address. For one, HTML and CSS are now extensible. Understanding HTML used to be pretty easy. There's a fixed set of tags determined by a committee and tools like text editors and linters could just build in a hard-coded database of elements and their attributes. With custom elements, this all changes. And now HTML is an open-ended set of tags. So how do you know what's valid HTML anymore? Same thing with CSS. CSS used to be global and have a fixed set of properties, but now with Shadow DOM and custom variables, CSS has scopes and an open-ended set of properties. Knowing what's available to use is a lot harder now. There's also many different ways to write an element. Already at the summit, you've seen a few. We have a Polymer 1.0, Polymer 2.0's class syntax, its legacy syntax. We also have vanilla custom elements that don't use any library at all. And we have these other web component libraries like SKHAS, Bosonic, X tags and reactive web components. And I'm sure a lot more than I'm not even aware of. And then with HTML imports, HTML files can now import each other, like libraries and modules and other programming languages. This ability for HTML to form a dependency graph is completely new to web development tools. In existing bundlers and linters and minifiers, they just don't know about this new structure of HTML. And so we can notice something about all of these problems. They're not Polymer-specific. They apply to web components in general. And this brings us to a really, really important principle that we have on the tools team. The Polymer tools are not just tools for the Polymer Core Library. They're tools for web components in general. Our goal is to help all web components, developers and users. I think this is something really, really unique to the web components ecosystem. But because of the inherent interoperability of web components, the success of any one web components user or library is a success for us all. Because together, we grow this entire interoperable ecosystem. So this is one major motivation for tools to solve problems that are unique to web components. But at the same time that we're in the midst of this web component C change, other parts of web development are evolving as rapidly as ever. There are a whole slew of new technologies and expectations that are drastically changing the way we build a web apps and especially mobile web apps. To offer a truly great mobile experience, apps now have to have what was until recently a fairly sophisticated structure supported by a sophisticated tool chain. On the Polymer team, we've been trying to codify these best practices into a pattern that helps you craft an optimal loading experience. And we came with it up with this acronym that you've heard about, Purple, PRPL. And that stands for push, render, pre-cache and lazy load. Purple involves things like using HTTP to push to push exactly the resources needed for a given route, service workers to pre-cache an apps resources and per route bundling when push isn't available. These techniques are critical for engagement and to compete with mobile with native apps. And tools can help make this manageable. The goal of even defining a pattern like Purple is to make it easily repeatable and repeatability is something that tools are really really good at. So this is another motivation we want to take these cutting edge techniques and make them standard practice. We want to make things like optimal loading and offline support the default when starting any new app. So that's why we're building tools. This is what gets us to work in the morning. Let's look at what we actually build. Our tools are organized around a set of core single-purpose libraries like the project initializer, test runner and the build system. These tools each address a problem along the life cycle of a project from getting started all the way through building for production. And then we take these tools and we integrate them all and deliver to them deliver to you them to you in the Polymer CLI and then powering most of these tools is a common analysis engine that allows our tools to really understand your project. Now let's take a look at that engine that powers our tools. A few months ago we embarked on a project to build a new and flexible static analyzer for the web which I'm really happy to talk about for the first time. It's called the polymer analyzer. The analyzer helps other tools understand applications and components in this new extensible world. Applications made up of many different types of files using new elements and written in different libraries. Its job is to dig into this complex graph of resources that make up an app find and extract important features like element definitions and HTML imports and then provide a convenient API for our other tools to operate on this structure. And it does this all with plugins so that the analyzer can be extended without changing its core implementation. The analyzer comes with several parser plugins so it understands HTML JavaScript CSS and even JSON. And in the future we can add support for additional languages like TypeScript. It also understands many different ways of importing files into each other like HTML imports inline and next turn all styles and scripts and soon it will support native JavaScript imports. And it has a large set of plugins to support different ways of writing custom elements like Polymer and vanilla custom elements. So when the analyzer processes a file it parses it with one of its parser plugins here HTML and then it scans the document looking for important features with its set of scanner plugins. For instance we have an HTML import scanner and a DOM module scanner that can find a DOM module and parse the templates in them. And then we have a Polymer element scanner which can find a Polymer element declaration and find important features of it like its properties. Next the analyzer parses and scans any imported and inline documents until it's analyzed everything in your application. So here we have an import that's importing another file and the analyzer finds that. And then finally the analyzer can resolve references between features and really understand what's going on. And here we know that this tag is an instance of a definition in another file. The analyzer extracts a lot of information about elements. It understands its basic API its attributes properties and events. It knows how to style an element. It knows about its prototype chain. It's super class and mix sense. And it knows how to use the element to how to import it and it can get its documentation. And then this information is available to all the other tools that build on the analyzer. As part of the analyzer work we're also adding a new feature to help our tools better understand app shell style The analyzer and its plugins work well because of the declarative nature of HTML and Polymer. The more that your application is declarative the more that we can tell what it's doing without having to run it. But lazy imports today use an imperative API that trips up static analysis. If we take a look at a typical app shell style app we usually have a shell that's loaded before rendering. It then dynamically loads the code needed for a particular route. To actually load a route you almost always see a snippet of code like this. This is a method that takes a page name and then it loads the associated HTML import with a page with import href. But our tools don't understand this imperative code and so you get problems like linter warnings or maybe the bundler might miss some files. Declared of lazy imports allow you to specify the imports you will load right in your markup. Lazy imports are like link tags like HTML they're link tags like HTML imports but they use a different rel attribute and they have a group name. When it's time to actually load an import you do it by group not by URL. And we've provided behavior to help with this. And by using group rather than URL tools like the bundler can change URLs around without breaking your code. And by being in markup tools like the analyzer and the linter can see these lazy imports and know that you're going to import this URL in the future. So you can try out a preview of lazy imports today. The works of Polymer 1.0 We'll be adding Polymer 2.0 support pretty soon and doing the analyzer. Let's talk really quick about linting because it's such an important consumer of analysis information. We're rewriting the Polymer linter right now on top of the new analyzer and this is going to bring some nice improvements to you very soon. The existing lint command in the CLI is already very useful. It checks things like you declared properties that you use in data binding or that the elements you use are actually defined and imported. But the current linter has a hard coded set of rules that only works with Polymer 1. And like I just talked about it does it doesn't work very well with lazy imports. So because the new analyzer it powers the linter it understands all the different types of elements that the analyzer does. Not only that but we're making the linter itself extensible so that new linting rules can be added by users. This is especially important for internal use at Google and for our enterprise customers who often have stricter policies they want to add and enforce. We're also adding rule sets like a polymer 1.0 mode a polymer 2.0 mode and a hybrid mode. Choosing the right rule set will make sure that you're only using the features that are available in the specific versions of Polymer that you're targeting. So the main inside of the analyzer is that web applications are not just HTML and they're not just JavaScript. They're built from many types of files and many ways of importing them. We might have HTML JavaScript CSS images and more. And so we can't rely only on JavaScript that brings them all together. Which is exactly what the analyzer does. And then we can do some pretty awesome things with the results. The new analyzer is key to our goal of supporting many different tools and many different web components library. If you use or write a web components library we encourage you to get in touch with us so we can help you write plugins for the analyzer. And if you write tools or are interested in using the analyzer please get in touch with us so we can help out as well. It's still very early finished but we want to launch with support for as many web components libraries as we can. All right so let's next talk about package management. Yay. All right as you all know we use Bauer to distribute all of our Polymer packages. And Bauer works really well for us actually. But the ecosystem has been coalescing behind NPM. And many of you have asked for package manager. And there's even an infamous issue on our GitHub repo issue 326 published sub projects on NPM and add them to package JSON. If you can see the small text there this issue was open almost exactly three years ago today and it has 202 lively comments on it. Now NPM support it turns out it's much harder than it seems at first and while we haven't solved this issue yet I don't want to get your hopes up we're not going to announce NPM support right now. Yeah, I'm sorry. But we did come up with a plan at least and I want to go over that plan and I want to talk about some really really awesome progress that's been made recently. So the plan looked like this the first thing we want to do is publish raw packages to NPM so not making any changes to them we've generated package JSON files from our Bower.JSON so we just threw them up on NPM and we said if you can figure how to use them let us know. We knew there would be some problems especially because NPM installs things possibly in a nested structure and that's difficult for us. So the next step was to find or build a flat package installer something that might take an NPM installation and flatten out all the packages and then step three we needed to build a Bower plus NPM release tools something that smoothes out some differences between Bower and NPM packages and then actually tries to install and test our packages from both Bower and NPM so that we can make sure that we push working packages to both repositories and finally once we have all that and we know that you know you can trust that when you install something from NPM or Bower it's going to work we're going to publish all of our working packages to NPM. So step one we did a while back and we published things as is to NPM and like we suspected people weren't able to get them working that easily. So we started working on this design for a flat package installer along with everything else we were up to at the time when Facebook got in touch with us and gave us some really really really awesome news and that awesome news was yarn which you might have heard about. So they were working on this new package manager which uses the NPM registry and they asked us what we would need to use it and so we started working with them and gave them requirements and filing issues and we were a little busy to submit code but they were very happy to add the features that we needed and we got yarn to do the one thing we really really needed which is flat installation with proper version conflict resolution. This is huge for us and not only that not only can a user say that they need to install things flat but a package can say that it requires a flat installation and this is what all our packages are going to need to do because they won't work if they're nested. So this finally makes yarn a viable replacement for Bower and it really unlocks our npm support plan. Step 2 there was by far the most difficult thing and the yarn team basically did it for us. So now we can move on this is where we're at now we can build this release tool which is going to change some small differences between Bower and npm and then we're going to be publishing everything to npm although you have to use yarn to install them. Yarn is a really really really big deal for us for npm for the entire front-end development community. We're super excited I think some of the yarn team is here today. We're very excited to continue working with them and make sure that it works great for Polymer. So this is our plan for npm stay tuned we'll have we'll have news on this very soon. All right next let's talk about bundling and code splitting. All right today we're announcing a new version of our vulcanized bundling library and we've named it to simply the Polymer bundler. Bundling your code is extremely important to reduce load times of your application. Before HTTP to serving many small assets files would just cripple your apps loading performance but even with HTTP to bundling can be important to squeeze out every last bit of bandwidth. And sharded bundling or sometimes called code splitting which is creating more than one bundle for your app is increasingly important to make sure that bundling doesn't actually work against you by increasing your load times because you include but sharding can be a bit complicated. There are lots of different ways to break your code into shards and different options are suitable for different applications and different environments. The Polymer CLI support sharding and it makes it really easy to do bundling with a good general sharding strategy and this is powered by vulcanized today but vulcanized itself doesn't do sharding so we had to add this logic on top of vulcanized that called vulcanized over and over again for each bundle. And this was slower than it needs to be and it wasn't very flexible. So now we're taking that bundling logic of vulcanized and the sharding logic of the CLI and we're combining them into the Polymer Bundler. And along the line we're teaching the bundler some new tricks so that it can produce much better shards in many different scenarios. To understand what the bundler does and how it works let's imagine a simple app's shell style app with a shell and three lazy loaded routes. The shell always loads first appropriate entry point. And these entry points all have dependencies some of them shared between entry points. And then usually there's some dependency kind of like Polymer that are shared by just about everything. And so the trick in say a purple app is to only load what's needed in a given route. And this ensures that your route loads as fast as possible. But the challenge when bundling is to not bundle way more than is needed which would accidentally slow we've done with the new bundler is make its strategy for bundling and splitting your app pluggable. And we've made the default strategy configurable with a single parameter that can control the number of shards that you get. The way that we calculate bundles is to build up this table that maps files to the unique set of entry points that use them. And this is already one way that you could bundle your app where each row is a bundle. But this is usually far too many small bundles to be useful. You might end up with a bundle for every possible combination of entry points. So this is where strategies come in. Bundling strategy takes this fine-grain bundle plan and modifies it. One strategy could simply be to merge everything together in one huge bundle and that's what Vulcanize does. And the strategy the CLI currently uses is to bundle everything that's used by more than one entry point into one shared bundle and then bundle everything else into a bundle with one entry point that uses it. This is what it looks like in the CLI. You end up with one shared bundle for the shell the common dependencies and then you end up with a bundle per route. This is usually a pretty good approach but in a really big app it can result in a really big shared bundle which basically defeats the purposes of sharding. So we made this strategy configurable by allowing you to set a threshold and only if a file is used by more entry points than that threshold is it put into the single shared bundle otherwise it's put into a bundle just for its unique set of entry points. So we think this is a way that lets you easily go from one bundle to one shared bundle to many bundles depending on the needs of your application. And then if you have even more custom needs you can write your own bundling strategy. So we're going to be rolling out the new bundle are very soon in an upcoming release of the Polymer CLI and we'll keep you posted through the usual channels. Okay speaking of the CLI it's up next on our tour. The CLI is the gateway to our the most Polymer developers are going to directly experience. We announced the CLI five months ago at Google IO as part of the Polymer app toolbox. And our main goal was to help you build progressive web apps and purple pattern apps. And we wanted to offer a turn key out of the box experience that automatically produced extremely fast loading and rendering apps that took advantage of things like client-side routing lazy loading push pre-caching and worked offline. And the CLI helps you build apps like that by default. We also wanted to use the CLI to solve two very big problems we saw with our existing tools discoverability and ease of use. Because we had built up a set of many many separate tools over time it was difficult for our users to find everything they needed. And it was often hard to use these separate tools together. So the CLI solves this by including everything in one install and by integrating the tools ensuring that they all work together. So to talk about that let me bring up my teammate Fred shot. He's going to talk about the CLI. Hey everyone. I'm going to start by stealing a line from Peter's talk yesterday. Is everyone feeling excited? Let's try that again. Is everyone feeling excited? Yeah. Is anyone feeling overwhelmed? Is anyone feeling a little dread? Well, the CLI is going to help make that all better it makes using all these tools and developing with web components faster and easier. So I'm going to give an overview of its five different commands real quick and we're going to deep dive into one of those to show how the CLI fits with our greater tooling ecosystem. So five commands. The first one is a knit and it brings custom templates right into your project to help you get started. So let's say you have a great idea for a new element. This thing is going to be huge. It's going to get thousands of stars on GitHub. Rob's going to invite you to do a polycast. This thing's going to be awesome. Well, you can get stuck creating your environment, setting up Bauer, setting up npm, setting up your tests or you can just run a knit element and it brings a custom element starter template right into your directory all automatically. We also have a starter application template. Same thing. Really bare bones to help you get started or if you'd like something a little more feature-complete we have Polymer Starter Kit which is a progressive web app already configured to use cool navigation using app drawer and a lot of other goodies. So these are all really cool templates that help you get started quick. It comes with four bundled with a CLI in total. But my absolute favorite part of this command is that you're not just limited to those four. You can actually create your own templates, publish them to npm and share them with the community. And so we're already seeing a ton of community templates pop up for working with internationalization ES6 Google App Engine. All of these are custom templates built by the community and usable by anyone. So we've only really been talking about this for a few months now and already we're seeing templates pop up. So thanks to you guys who've created them I can't wait to see what we do in the next months, years to come. So that's a net. Serve the serve command will create and start a dev server for you automatically so you can see your code in the browser while you work on it. No configuration necessarily it's built for web components and does a lot of good stuff to help you develop quickly. Lint lints your project helps you catch areas fast test helps you test your code by setting up a dev server to automatically run your test in the browser right from the command line and build helps you build a web app for production. And these five commands together represent an entire developer workflow and it helps you get started serve lint and test help you develop your code quickly and build finally helps you get a web application out to production users. So the analogy I like to use for the CLI is that it's like your Swiss Army knife for web components it's simple it's easy to use and it's always available to you in your project. So each of these commands is worthy of its own talk but I'm going to focus on build so I can show how the CLI relates to the rest of our tooling ecosystem. So let's talk about it build takes your project and processes it to make a optimized web ready version of your site ready to deploy so what do I mean well oh yeah this is it making your website it starts with your project and the first thing it does is pass it through the new analyzer that Justin mentioned earlier and this lets us do a ton of cool stuff in the build process for example it can analyze exactly what files and what dependencies you're using and filter out all the other ones that you're not and so this results in builds that are about 96 95 we saw percent smaller than your actual development directory by filtering out all the unnecessary stuff in your components dependencies directory it does a ton of other cool stuff in the build pipeline which you'll see in a second. The next thing we do is optimize your code so we minify your code we can run your JavaScript through Babel we optimize it for production use and older browsers next we bundle your code and so we combine files together based on the analysis that we did earlier so we combine them where we can to reduce the number of requests that your users need to make and then we generate a service worker for you again because of the analyzer we know exactly what files you need to pre-cache on the browser to get an offline experience for your users and that's it so with a CLI you get this full build pipeline from start to finish already configured and ready to use and so we launched this and it was great people were using it they were using it on their projects but we started to get a lot of feature requests and it turns out people like to customize their build process who knew and so we could have kept going and okay add new features and new options for new features but we had to take a step back and remember that we were working on something that was simple and easy to use and we were doing that but we were kind of leaving our advanced use cases more complex apps out in the out in the rain and if we kept adding feature after feature to try and help them as well we wouldn't have a simple Swiss Army knife we'd have something like this and this is probably the best representation of software that's hard to work with I've ever seen and that was until I realized that that's a secret compartment in the handle filled with more tools and now that is the most just amazing photo I've ever seen and so I think we've all worked with something like this right like that some software that was trying to do way too much and just ends up hurting you and so we knew this wasn't what we wanted to build we knew we wanted something easy to use and simple and the CLI was never meant to be the one tool to do everything it was meant to bring together the best parts of our ecosystem in one easy to use way and so we knew that this build logic shouldn't be living in the CLI it should live in its own library that anyone could use so if you wanted to create your own build pipeline you could do it and we could give you the tools to help so I'm going to show you a quick example of what this looks like we only need two things from the Palmer Build Library the first is a Palmer project which is going to power our build stream and the second is add service worker which is a helper function and now let's recreate this entire build prep pipeline using some JavaScript the first thing we need is your application your code and we're going to get that with two different streams from the project sources and dependencies now we split it this way so that you could handle those differently if you'd like you could maybe process your sources in a different way minify your dependencies totally up to you flexibility and power are the names of the game name of the game here so we're going to combine them into one merge stream and then power the rest of the build stream then we're going to optimize them and we're just going to run it through some minification here of different tools for different code one thing really cool split html and rejoin html pull out your inline code into their own files in the build pipeline and that's a that lets these tools see them and minify them before combining them back into inline JavaScript CSS once again next we run it through the bundler which helps bundle them and finally we write your build to disk and then create a service worker the order on those is is flipped but the result is the same you now have a complete build a complete build pipeline written in only a few lines of JavaScript and now you can do anything so now with JavaScript you can hook into one of these places to run something else you can remove things you can add new code add new minifiers you have complete control over what you want to do here and so that's really when we talk about the CLI and the rest of these powerful tools we want to give you one way to bring them all together that's easy to use doesn't take a lot of work to get working but we also want to give everyone the tools to go out and explore and create their own different implementations as they need them so this provides a really nice off ramp from beginner to intermediate usage into the more complex use cases as your project grows and matures so that's just a quick quick overview both of these tools are available on npm the CLI helps you work with web components really easy Palmer build helps you build if you'd like to do something with a little more control and we're really excited to keep developing these I'm now going to hand it back to Justin to talk a little more thank you all right I hope most of you are able to use the CLI it's a very convenient tool give us some feedback we're going to try to do a final release at some point coming up here in the future the CLI is just one way that we expose our core tools to users but your terminal isn't the only place where you work you certainly spend much more time in your text editor than you do at the terminal unless you're one of these VI or emacs users and so there are some really important problems to solve while you're editing code first running crash is a really really bad way to find errors it's much better to see the errors as you make them if you can next APIs and documentation are hard to remember and jumping between your editor and documentation just slows you down and also large code code bases are hard to navigate text search isn't really advanced enough for programming you want something better than that so luckily these are all solvable problems and they're solved in a lot of other programming environments and the declarative nature of HTML and web components gives us the opportunity to deliver a world-class editing experience for web apps so it only makes sense to bring our tools right to where you work in your editor oh I forgot to advance the my slides here's some bullet points so I'm happy to announce today that we're releasing a set of text editor plugins for polymer and I'm not going to tell you about it I'm going to bring on our other teammate Peter who's going to talk more welcome Peter thanks a lot Justin I am really excited to be up here to finally unveil our work that we've been doing on editor plugins providing a fantastic developer experience of the polymer team but it's only just very recently that our tooling infrastructure has caught up to our ambitions so I'll start by talking about linting we released last year Paula Pollyland our first pass at linting it's very powerful gives you a lot of great warnings and great information about problems that they come up as you're writing web components but we learn something else from using it and from getting feedback with people it is too slow mean for linting to be a really productive part of your developer experience it has to be instantaneous anything less and you start to lose faith in it you start to lose trust in it you start to fall out of your flow and you start questioning okay what's the winter doing is it helping me here or most of all it can sometimes start so we've been working with the new analyzer to have incredibly fast incremental updates of of analysis of your code which lets us do much faster linting the analyzer also gives you very precise information about what's going on in your source code so we can give you very precise underlines of problems so let's take a quick look so here is a text editor it's called visual studio code microsoft it's very smart fast smooth and extensible and here it's running our new editor plugin you see we've got a red squiggle underneath that hmail import this is an index that html file and it's it's underlining right at the where the problem is we get an error message also notice how fast it is as I'm typing each single character the moment it's correct squiggle goes away it also understands so the moment that there's a syntax error let is fine foo is fine equals syntax error string everything's fine okay so that's lending lending is nice lending is good what else can we do what about intelligent contextual as you type auto-completion so here we've auto-completed the paper spinner element all the docs extracted right out of the source code and scroll through them can push enter auto-complete the that element paperspenders are really awesome element but it's kind of very simple API let's take a look at another element that also looks very simple but has a surprising and I think underappreciatedly rich and detailed API paper button okay so let's take a moment go through what happened there with every single edit to this file every single key press we are reanalyzing this file and the editor plug-in notices there was a new import added so it tracks down that file parses it analyzes it scans it extracts the metadata for those elements including documentation from JavaScript and HTML comments and it puts that into a cache and that caches available as you're typing to power these these auto-completions so once I added the paper button import I get paper button and paper ripple now also as custom element auto-completions okay so I'll select paper button and I'll move my cursor over here I push control space and I get auto-completion of the properties and attributes on that element and we're able to extract a ton of structured information about these attributes so I know the type I know the docs for each of these attributes I also know where they were defined and if they were defined in another file or as part of a part of another behavior I can see that too so for example toggles comes in as part of polymer to iron button state how many people here knew that you could use paper button as a toggle element like for a checkbox or a radio button I had no idea yeah I see about 10 hands maybe it's a really powerful element and I think it's really under-appreciated because it's kind of hard to track down all the documentation it takes you out of their flow to do it you think a paper buttons a paper button okay but actually what I wanted to do here is just have a simple paper button with a little shadow so to select raised I'll start typing because I want to customize it a little more and I get it narrows down the auto completion as you'd expect I'll select elevation buy it and read the docs I can mouse over and I get a pop-up with the documentation for that attribute okay so it's a number and the number is zero to five bigger is a deeper shadow I'll select one I might tweak it later but what if I wanted to go a step further maybe I wanted to understand how that shadow effect was implemented how that raised material design said it comes in I can move my cursor over the raised attribute and push a single button F12 and jump straight to the definition of that attribute notice that this is in a totally different file this is paper button at HTML and not only that it's not even part of my project my project is indexed HTML this is in my components directory that's not a problem for the analyzer and that's not a problem for the editor service I can see elevation there let's jump to that definition oh right this is a totally different file this is in a behavior right so now I'm in paper button behavior at HTML okay and that's actually in a totally another package paper behaviors paper button behavior at HTML so that was coming in from a behavior mixed into the paper button element and then made available right there in your editor so you might notice that I've been saying custom elements web components not just polymer elements here we mean that as Justin was saying earlier we we built the analyzer as a pluggable extensible system for where you you can you can notice multiple different ways of writing custom elements and declaring them so let's take another look at another example so this is a 100% vanilla custom element declaration the beauty of this is you can copy and paste this code directly into chrome canary or safari technical preview and it just works with zero dependencies this is not a polymer element this is not an element of anything but the web platform I can jump into index.html and I'll import vanilla.js and then immediately I get auto completions for this vanilla custom element we've extracted the documentation and I can auto complete it go over to its attributes I get auto completions of its attributes as well with documentation and type if it's annotated I can mouse over for the pop-up and select it and jump to definition that's right every single feature that I demonstrated today for polymer elements works exactly as well for vanilla custom elements and we do not want to stop there if you're in the audience and you use another custom elements framework or you're the author of one I know there's a couple of you in the audience we really want to work with you come join us on github or in the Slack channel we have a tools channel and I'll be opening up the editor channel just after this talk so we have had one more dilemma while we were implementing this as I started to think about editors I went around to the polymer team and there's about 20 people on the team I started asking them about what editors they use and I discovered a kind of shocking fact there may be 20 people on the team and there are at least six editors in active daily use it's kind of crazy right but it's also really good that means that the editor ecosystem is really competitive and there's lots of really great editors out there with lots of features that are vying for for your user experience but what do we do as plugin authors? well we're taking inspiration from a number of other projects including Rust Go and TypeScript in implementing a standalone editor service this is a simple Node.js binary that well it's a complex Node.js binary that exposes a very simple JSON API and this JSON API is expressed exactly in the terms that every text editor understands file names line numbers column numbers so your editor can say hey my user is on line 15 of index.html third column and they just pushed my jump to definition button what do I do? they don't know the text editor doesn't know about HTML doesn't know about JavaScript doesn't know about any of this stuff just says what do I do where's the definition and the editor service says vanilla.js line 2 column 13 exactly the information that your text editor needs to pop up in a new tab and direct your cursor exactly where that definition is so we've proven this out we've implemented plugins for visual studio code as you've seen sublime text and of course Adam all three of these plugins support instantaneous as-you-type editing a linting and contextual intelligent auto-completion of custom element tags and attributes and we're just getting started we have an alpha release today it's out now the polymer editor service is here it contains full documentation of everything you need to know about the protocol and how to add it to your text environment of choice and we have one step install in Adam and VS Code today APM install Polymer ID for Adam and you can do that EXT install in the VS Code actions pop up so to recap the editor plugins make it way super easy to edit and maintain your custom elements web components application with as-you-type linting as-you-type documentation auto-completion and jump to definition for making it really easy to navigate a large and current code base with that I'll hand it back to Justin thank you very much that was really really awesome I'm super excited for all of you to use the editor service and the plugins we've been testing it on the team and it's the kind of improvement in development workflow that makes you not just more productive but happier because it removes so much frustration in day-to-day development I mean I personally want feedback as soon as I can get it and I want to see my mistakes as soon as I make them and this is exactly what this delivers so we're really really really excited about this we hope you are too and that concludes our tour of tools we have a lot of changes that will make you happier and more productive polymer users and with projects like the extensible analyzer and linter we hope to serve the entire web components ecosystem this is something that's really important to us we think interoperability is a huge strength of web components and we hope to push that forward as much as we can you might be wondering when you can use all this so as you saw some of it is available today the CLI is in beta now the IDE plugins are in preview now and the new linter bundler will be in preview soon available through the CLI and then we're going to be working on MPM and yarn support very very soon alright that does it for us thank you so much for joining us have a great day thank you so much to the tools team without which our lives would be so so much harder we have a little break now we have a code lab on building a polymer and fire-based PWA the tools team will be in the Ask Polymer lab so make sure you go talk to them to find out about all the cool things that they talked about if you're in the livestream and have nothing to do for half an hour what's some polycast figure out why I was cursing so much Rob usually doesn't see you all at 11.30 these entrances are really spoiling me if I ever have to do this again and they don't do a light show before I have to open my mouth it's going to be really tragic next up we have Chris and John from Comcast so I recently found out that Comcast has been using so Comcast is if you don't know what they are they're a big internet provider in America and we've recently found out that in production they've been using Polymer since Polymer 0.3 which is kind of bananas because that way be dragons and I found out that on their first night here they went out to eat beef Wellington at a pub which is actually as you do and they drew the Polymer logo on a dollar bill and they stuck it to the ceiling so if you go to the Grenadier please look up for the Polymer logo give it up for Chris and John please good morning London hello okay I told the people in the front they're like good morning London air thank you I'm Chris Lorenzo I'm John Raviello and now we have to share the beef Wellington story so when I travel I don't really set goals for myself as far as where I'm going to go eat or what I'm going to go see I usually leave that up to my wife but unfortunately due to some poor planning on our part she's currently eight and a half months pregnant and and we're here yeah we're here apparently it's really hard to travel when you're pretty pregnant so she's at home watching right now I love and we set this goal because my wife is a foodie we watch Master Chef together with Gordon Ramsay sure some people might have heard of Gordon Ramsey he's apparently from the UK and every year he makes the contestants make a beef Wellington I'm like wow a beef Wellington so this is a beef Wellington it's kind of like a polymer app it has the app shell and inside you put the meat and it's just delicious so I asked my wife where can we get this beef Wellington and she tells us about Grenadier pub so John and I venture out we go see the changing the guards at Buckingham Palace and we go to Grenadier and we're sitting there and we look up at the ceiling we're like look at all this American currency wait a minute we're Americans I have a dollar bill John's a graphics designer so I pull out the dollar bill the bartender gives us a marker hand the dollar bill to John and we're talking we're like what should we do and I'm wearing my Liberty JS shirt which has a Liberty Bell on it we're from Philly we're from Philadelphia so we're like okay we'll put the Liberty Bell on there which happens to ironically represent you know America's exit from the UK so we decided to put that on there and when we put of course the polymer symbol and so we got up on a bar stool glued it to the ceiling and if you go to the pub it's on the left hand side you can look up and you can get a beef Wellington there or a Bloody Mary they're famous for both of those so yeah so let's talk a little about Comcast that's company work for back in the US we're based out of Philadelphia Comcast is the largest cable TV and internet service provider in the US it's a Fortune 50 company we have over 30 million customers and we own NBC Universal so that includes the whole family of TV shows movies and theme parks so my cousin that works at Harry Potter World at Universal Studios in Orlando Florida works for the same company that I do which is pretty cool and she's a core job than I think and we use polymer of course and we have over 500 components that we've created so we get to work on a variety of different web technologies at Comcast to give you an overview of some of that stuff this here is the my Xfinity website this is where a lot of our customers start their days to get the latest news check the weather check their email and this was built with Ruby on Rails this is the my account website and this allows customers to go in view their bill pay their bill they're having issues they can troubleshoot their equipment they can manage their account stuff like that and this is actually built with Angular so here we have the Xfinity home site this was our first polymer app which we started with 0.3 it has half a million customers and it allows our customers to control their security system change locks or turn turn on off lights change the thermostat we also have the X1 platform and this is Comcast's premier TV experience it's actually one of the best ways to watch television the guide is awesome and we make this guide available on all platforms and if you happen to be using the web one that's also written in polymer and it serves over a million customers a day and so the first question is why polymer? why did we choose polymer? and so the story starts two and a half years ago when our product team asked us to build the Xfinity home and of course this is the final product that didn't look like this when we started but we had this new project and we got to choose whatever framework we wanted so as a lead it was my job to start researching what was available and as everybody knows there are like hundreds of frameworks available but I narrowed it down to Angular and React and I was checking them out and I'm like I've been a web developer for 15 years I didn't really feel too comfortable with these frameworks and so I'm talking to my buddy Phil at work one day and just to give you a little background on Phil he's the guy who lives on the cutting edge he reads all the latest news blogs and he watches all the latest Chrome developer tools and he's like service workers and this is two and a half years ago like as soon as it was available in Chrome Canary he's like we should be using this in production and fetched and promised it and I'm like Phil just calm down we got to wait until our customers actually have this so I'm talking to him and he's like we should use polymer this is my son Theo I taught him to say progressive web apps and it's so cute when he says it he says progressive web apps and he understands like the sounds and he can repeat it back to me but he has no idea what it means and that's kind of how I felt when Phil said we should use polymer but unlike my son I was actually able to use the internet and can Google it and was like okay what's polymer so I started looking through the documentation on polymer and checking it out and I got the team together and it was time for us to make a decision so of course we asked the whiteboard what we should do and we created a pros and cons column for whether we should use polymer and one of the big things that we really liked about it was that it was backed by Google and like I am just overwhelmed impressed by the Google team by the polymer team and how great their engineers are at building stuff the other thing that I really like about polymer is its future oriented right web components spec is going to be built into browsers so eventually all the polyfills go away and we get great speed from that also the documentation on the polymer website is amazing their technical writers are great and probably don't get enough applause which probably applause for them so thank you polymer technical writers that's going to be our best applause of the day that's great and developers always like doing something new but some of the cons at the time was like this wasn't even beta we were looking at 0.3 it wasn't even alpha apparently Taylor was like oh this was experimental and I'm like I didn't get the memo for that and at the time polymer 0.5 and below use shadow DOM and we were trying to write tests for that and Selenium had no idea what shadow DOM was so we were trying to like click on a button that was in the shadow DOM and Selenium was like I don't know where this button is I can't find this button so there was no testing there was no tooling web component tester was not out yet and there was limited browser support it was IE 10 and above but for expanding home we had to use web sockets so we were okay with that and of course we decided to go ahead with polymer and when we first started I was really nervous because we were building a production ready app for half a million customers in an experimental technology and when I first started I was I was really nervous like I was just like I was on the con side too by the way I was like we need to abandon ship we should switch to angular react but as we were developing and we were like discovering getting over the hurdles I really enjoyed polymer and I really enjoyed web components to the point where I'm excited to go around talking about web components and telling all the other web developers out there like you should be using web components they're great and I'm especially excited where the project's going with polymer 2.0 so ultimately we did finish the site you can see here's another page of our devices each one of those pieces that you see on there is a component so we have the XH thermostat we have XH light and it's really great when your UX team comes to you and is like hey can we put that light on the overview page and we're like yeah sure it's just a tag like it's no problem but we started the site with polymer point three we eventually released with the polymer point five six and as we were releasing Polymer's like okay we got a point eight version and we're checking out the point eight version and then they're like okay here's the one point oh and now you got to upgrade and we're like oh great we'll upgrade and I'm telling that Phil like oh this should only take a couple weeks right it's no problem he's like no this is gonna be hard and we spent three months upgrading so I'm really excited about polymer 2.0 and that Google understands the pain of upgrading and I'm excited about hybrid mode and I'm looking forward to a better experience upgrading so let's talk about sharing and if you're playing slide deck bingo there are Legos on this one so keep paying attention to different slide deck bingo items this is picture of my kids sharing Legos and as I've learned sharing does not come instinctively when you're a child you don't want to naturally share your toys and as you learn to share there's some screaming and some crying involved and this is kind of like learning how to share components with polymer but I promise you can get through it without any scream you're crying so it's this potential to reuse components that got people really excited about polymer Comcast because before Palmer was even a term in the vocabulary Comcast we were already looking at how can we make a consistent user experience across all of our devices because again we're building for TVs, tablets, phones, laptops, watches now of course so our UX team put together this presentation on what they called modular design systems where basically a single component could appear different based on the context so here's an example here of the Xfinity Home's arm-to-arm widget in the usual context on the right hand side and on the left you can see the way it could appear behave in a different context so we're no longer designing and developing websites what we're building instead are components that can expose functionality on any website see your camera, record a TV show, pay your bill really anything so when the Xfinity Home team started talking about the potential sharing components with polymer this got everyone really excited UX was excited, product, business I heard executives that weren't technical saying the word polymer in meetings I'm like what is going on here this is really catching on so a little over a year ago I hadn't had a chance to work with Palmer yet and then that day came when my boss comes to me and he says so John the Xfinity Home team they've been building with Palmer a lot I'm talking all about sharing components it's time to actually prove that this is actually a possibility so what I want you to do is take that Xfinity Home arm-to-arm widget and put it on the MyXfinity website for a demo in two weeks whoa, whoa, whoa, whoa and I'm like all right that sounds cool you know I've never used polymer before but I'm excited for the opportunity and so I go ahead and I look at it I'm like okay look at the documentation documentations wouldn't pretty well I go and look at the Xfinity Home code base I'm like okay there is a bunch of components here I figure out which one is the arm-to-arm widget I'm like all right how am I actually going to take this component and put it on the MyXfinity website not exactly sure so I talk to the Xfinity Home developers and the immediate response is like whoa slow down buddy you know you can't just take a component and drop it on another website and I'm like but that's what we sold this on that's how we got the company to use it and then in talk to them it became obvious I mean they as Chris said they started building with 0.3 they upgraded to 0.5 they upgraded to 1.0 so they were learning Palmer as the Palmer team was learning Palmer and they had enough time to focus on making a shareable component they were learning on you know how do I make a ship this app ship this website but that didn't change my demo date I still had two weeks so Chris and I we worked together we looked at the MyXfinity website like okay where we're going to put this thing we looked at it on the right hand side there was a spot so we put on the right there and then in two weeks I was at the demo and I successfully armed my security system at my house from the MyXfinity website and this is a defining moment for Palmer Comcast because this proved that yes we can actually create shareable reusable components and use this across the board at the company and this opened up the door for more projects to actually be using Palmer so right now Chris and I have been working on a number of projects over the past year and we knew when we were starting these projects that we wanted to build shareable reusable components this was a key aspect of what we're going to build so we set out to build these components that were actually going to be shared across websites and now that we've been doing this for a number of months this year actively and actually sharing components we can see what it's like to actually do this and we've come up with a set of best practices for building shareable reusable components the first one is to use cores which if you're not already familiar is cross-origin resource sharing this is what allows you to go ahead and if you're on one domain to make an API call with Ajax or fetch to get data so this allows you to get around the same origin policy by passing some headers to say hey like to make a request here and then if you're on the white list you can get back that data right there and this is a key piece of what we had to do for the Xfinity home arm disarm widget because that was built for Xfinity home so when I dropped it on the my Xfinity website it was expecting a relative path to the API which didn't exist I then hard coded it to go to the Xfinity home website and the browser just said uh-uh not going to happen so we had to add the cores headers there and then we could then get that API to pass through to another website another thing is to separate the data from the UI and what I mean by this is a single component should not be in charge of fetching, processing, and rendering data the UI component should take in the data it expects as attributes and properties and render it any processing should happen outside of it we've actually tried to create data components and that just strictly dealt with fetching, data, and processing it and it kind of worked it had some issues Chris will touch on those in a little bit we've also tried Redux that in early indications seems to be working well so those are other options but the key thing is to separate your data from the UI there we also care a lot about testing so you may be wondering do we practice test driven development or TDD we don't enforce that some developers choose to but what we do enforce is code coverage so we use the Istanbul plugin for Web Component Tester that's pretty much the industry standard for code coverage in JavaScript and you can see here that one of our Polymer projects has nearly 100% test coverage and for our shared components in each one of those reposed we actually require 100% test coverage across the board and this if you don't have 100% test coverage and you try to submit a pull request it'll actually fail the CLI or it's failed the CI for continuous integration so we enforce this and this helps make developers feel more confident about using these shared components because they knew they know that they've been fully tested so again we don't enforce TDD but we do enforce DDD and you're probably wondering what I'm talking about when I say that and actually Ben touched on this yesterday a bit talking about how ING uses Polymer and that is demo driven development and this is one thing that I love about what the Polymer team has done so they've created these amazing library of open source components and in addition to great documentation they have these rich demo pages that show you exactly the code you need to use and how it's going to look when you use that code so we do the exact same thing so here's for example again that my Xfinity sorry, the Xfinity home arm-to-arm widget the two different ways that it could appear and the code required to do it and our teams have agreed that this definitely has helped focus them better on making shareable reasonable components because when you're constantly looking at the demo page it's pretty clear what your goals are and what you need to be building this has other advantages as well for one it kind of forces you to think in Shadow DOM even if you're using Shady DOM and what I mean by that is we've had developers getting started with Polymer and since we're using Shady DOM by default they'll have an element that's contained within a couple other elements and then they'll set styles in the outer element that impacts the inner element and that's technically possible because we're just polyfilling Shadow DOM but if we were to turn on Shadow DOM then that would break and when you're building the different appearances of each component on the demo page and looking at it it really forces you to think okay if this component needs to look a different way I'm going to go ahead and put that on the demo page another thing is so we're again using these on multiple websites if we make an update to a shared component we don't want to have to go in and test that update on every individual website if you have every use case on the demo page it's much easier to just go ahead look at the demo page and if it works there it's going to work well on the website and then if there's a new use case you need to add you just add it to the demo page and then you're good to go so remember DDD is the answer to creating shareable reusable components thanks so I couldn't let John be the only one with an acronym so I came up with SPC and SPC stands for second party components or it could mean shared polymer components it really doesn't matter acronyms are everywhere this one's not important what I mean by it though is we have this thing called the universal header and it appears on top of every one of our sites and it also comes with a universal footer and the product team wants to be able to have this header and footer be shared across all the sites and be easily updatable so that they can change the link and all the sites get it instantly this thing's been around for probably about seven years now and when it originally started it was a script tag that you put on the page which would then load two iframes an iframe for the header an iframe for the footer and everybody's already like, yes, it was an iframe it was pretty disgusting then we started using Ruby on Rails a little bit and we started doing it server side so you could make a server side call and get it included in the page and serve it before before the user needed it and then we started doing these single page apps and we don't want a server anymore so we came up with a new way of doing that and what we're doing is we said, why don't we make this thing a web component? and we're like, yeah, web component sounds good so what we did was we got the Polymer team or the Polaris team to create this universal header as a web component and what you can do is you can actually import a web component from another domain from another team so we have another team building this navigation for us and we import it into our project and now we have an xc header an xc footer tag that we can use just like normal DOM elements we got rid of the iframe because doing the iframe it's really hard to do a responsive site and try to change the size of an iframe and change the height good luck, good luck trying that but with this we can now also talk to the header we can pass that information we can change its styling we can change its zindex a lot easier if we have popups it's just all around much better also when we first started with Polymer we really drank the Kool-Aid and thought like everything should be a component we were so excited we were like we got to make it all a component and so what happens is with a typical Polymer site for instance Xfinity Home your code looks like this where you load the polyfill you load Polymer you load your vulcanized assets and by the way vulcanization wasn't out when we first started I came later every time Polymer team like released a new tool we were like yes it's Christmas around here but you then put in one Polymer component or one component on the page which is your XH app and then inside of XH app is all these additional components and you have authentication you have your API calls that are happening you have a login page you have your overview page and the problem with this is that performance matters we need to get something in front of the users as quickly as possible and for us with the Xfinity Home site we actually have to make an API call which then goes all the way into the user's home makes ZigBee calls for all their devices in their home and then returns the status back up that can take over two seconds we have to remember that the color purple also matters so you can cross that off your bingo card so really the critical path for us was getting API calls happening as quickly as possible and if you look at the developer tools when you have XH app loading the browser has to get the definition for that stamp it into the DOM then it's like oh look at all these other modules I got to get their definitions stamp them into the DOM do all this other work and then it's like oh now I'll start making the API calls so we were making API calls almost a second into the site loading for the user and this was a big problem so as web developers and again I've been developing for the web for 15 years now we have to get back to our roots and we need to remember that web components are just another tool in our toolbox and really like this doesn't do us justice anymore because we have so many tools we really need like a big red truck to carry around all our tools another bingo card use the platform this is the polymer motto right like the platform hasn't changed the browser is still the same browser that we've been using for 15 years yes it's gotten better it's gotten faster it's been progressively enhanced but it's still relatively the same and so we need to remember when we want something to happen sooner in the browser all we have to do is put that piece at the top and so what we did was we pulled out our authentication checking and our API calls and we stopped making them polymer components we just kept them as javascript pure javascript and we're actually checking whether the user is authenticated before we load up the app and we start making the API calls as soon as they come to the site so we can get it because that's our critical path and then while the calls are being made we load the polyfills we load the app and we get started so the user gets a much better experience and we've also checked out this app shell architecture it's always great because we build all these apps and then the polymer team is like here's the recommendation after we built this stuff and we're like cool app shell architecture it's pretty awesome and for those who don't know this is about splitting out your assets and giving a small package to the browser because it's a lot faster to process things that are small but it takes advantage of this notion of unresolved elements and what that means is when the browser sees a web component anything with a hyphen in it it goes great you're a web component wait a minute I don't have your definition yet so I'm just going to keep track of you you're in limbo and as soon as I get your definition I promise to come back and upgrade you and we can take advantage of this just like the app shell architecture is doing so here for instance is how we normally create a definition for XHL and by using IMD yet another acronym import module definition this is based on the AMD specification allows you to find modules and this was written by the polymer team to do modular definition with HTML imports so now what we're doing is we're defining XH app as a module and we're able to push it down to the browser but actually not load the definition yet and by doing that we can then have additional JavaScript like this loader module which can do checking of hey is the user authenticated if they're not authenticated I'm not going to spend the 500 milliseconds to instantiate XH app I'm just going to show them the login page or send them to the login page because that's much faster than having to do all this JavaScript processing so that's it for performance so we've been talking a lot about how to build these polymer components well and effectively let's talk about building the team of engineers that are actually going to build these polymer components and apps for you so the people we've brought on to work on polymer projects at Comcast either externally or internally probably only 20% had any experience of polymer before working on these applications and that really hasn't been an issue and I really feel that's due again to Polymer's mission which is to use the platform so if you have engineers that have a solid understanding of HTML CSS and JavaScript that's all you really need again the documentation of polymer is great you can go and look at the elements I've created take a look at the documentation there the demo pages you can really get a quick understanding of how polymer works Chris and I also have run hands-on training sessions multiple times and basically do is give a bunch of exercises we'll then factor in we'll bring in some of the videos from the polymer summit so I'm excited to see that that library is now doubled in size and we'll also of course use Polycast to bring in those videos as well and that gets the team a nice quick introduction how to use polymer in production and from leading those training sessions and also reviewing developers code we've realized that one of the hardest things for developers to wrap their head around initially are these core parts of web components and that's encapsulation, composition and separation of concerns Polymer was designed with these principles in mind and you should be building your components with these principles in mind as well and obviously I've flagged when this is not being respected it's something like this so we've seen this from a number of developers just getting started they may become from building large-scale web applications and they're used to putting just a lot of code in a file so they start trying to build a component and they put a ton of code in that file like this one here has over 2,000 lines of code this is real code too yeah, Chris and I saw this and we're just like oh no like what have we done Polymer was supposed to make things smaller and easier to work with and we're still having developers write code that's looking like this so we knew we need to refocus the mindsets of our developers a bit so in our training and our code reviews we're basically driving home that a component should do one thing and one thing well if it starts to get too large then just break it up into smaller components and again focus on those demo pages because no one's going to want to maintain this massive demo page of all the different permutations of a component and once your team can internalize those they become a well-oiled machine and you can become a Polymer champion for your organization so just to wrap it up we really love Polymer Polymer has been spreading like wildfire at Comcast because it's really simple to use like it's much easier to learn than some of the other frameworks out there the ability to reuse components too taking the Xfinity Home Arm Disarm module and dropping on another site it like blows products mind when you can do that and it's also much faster than anything else that's going to be out there once web components are native and running on the metal of the Chrome browser or any browser it's so much faster than any framework can do so again that's why we really love Polymer I'm Chris Lorenzo I'm John Raviello and we're from Comcast thank you for your time thank you Polymer team it's so exciting when you see that real companies use things that you make it's like real people look at them it's awesome thank you so much for that talk I was very giddy throughout it next up we have the Vidin team the Vidin team is really exciting because they open source a lot of elements that they build with Polymer which I find really exciting because that's less elements that my team has to write because they get to write awesome elements fun facts about them so Marcus is one of my people we both hate Cilantro Cilantro or Coriander as you call it there's like 10% of people who think that Cilantro tastes like soap and we want to start a movement to stop Cilantro from being a decoration on food because it's disgusting Yoni is oppressively Finnish he does the most Finnish things that I've ever heard he does Finnish folk dancing and also ice hockey and as a Canadian I'm kind of proud that other people are doing ice hockey so please welcome the Vidin team hey everyone hi alright so hi my name is Marcus Helberg I work as a developer advocate at Vidin I've been doing web stuff for the last 10 or so years everything from front end to enterprise Java systems with me I've got Yoni so hi my name is Yoni and I'm a product designer at Vidin and I've also been working on the web for over 10 years now and actually at Vidin also over 10 years already and today we're here to tell you why we think and like Comcast just now showed us why web components and the web platform make so much sense in business or enterprise context great so just to give you a little bit of context of where we're coming from our company Vidin has a 16 year history of helping developers and companies build web applications with a Java based framework that we have now that framework comes with a really big library of components so in a way we've been building web components for about 16 years so you can imagine that we were pretty excited when web component standards starting coming out what that allowed us to do is take everything we've learned over the past 15 years and translate that into a new set of components that we can run directly on the browser by doing that we can have a much larger audience of people who are able to use it and also all the framework users that we already have get access to a much wider library of components so in the talk today we want to really make the case for why we believe that the web platform with all these new features coming out really makes sense for business applications we also want to highlight the things that we have bought and do to help this become reality so how we build high quality components internally how we improve compatibility with other frameworks such as Angular 2 and finally how we make web components customizable so that they fit into your companies look and feel now in this talk we want to focus on business applications I know a lot of the material and a lot of the talks on progressive web applications and web components tend to focus more on web sites and maybe web shops but we want to make sure that people developing business applications also understand that these are technologies that really make a lot of sense when doing these applications what I mean by business application is the types of applications that really help run a business they're in a very critical part of running that business they're more often internal applications and they tend to have very long life spans so even if you start building one today with the latest and greatest technologies five years down the road it's still going to be in production and running something you probably consider legacy technologies and I think business apps get a pretty bad rap they don't need to be slow and ugly in fact these are the applications that a lot of your users spend their entire working day working on so it's really important to be able to deliver a good user experience to these people and that's what we at Bodin have made it our motto to really fight for simplicity we want to make it as simple as possible for developers to build great end user experiences the way we try to accomplish that is by giving the developers the tools and the components that they need to really build these great experiences so if you're checking the bingo card you can do it right now let's take a look at the reasons why we think that businesses should use the platform so first off when we're talking about business applications especially the internal facing ones these are typically built with a very tight budget because they don't directly bring in any revenue to the company so building on the web platform we can really save time and effort by focusing all of our work on building one great application instead of spreading our effort into building two or three different applications on different platforms so that means that there's less for us to build and maintain it also means that we don't need to have separate teams within our company that have the skills that's needed to build all of these different apps for different platforms also it takes care of the distribution problem we don't need to go around updating people's computers and devices we can just have everyone use the latest version and this ability to stay updated is something that I think is really a strong suit for the web platform so if we think about these web business applications that have a long lifespan means that somewhere down the road you'll have a need to update it to stay relevant and to kind of address things that you couldn't think of in the beginning but at the same time the application is in a very critical position in your business so you can't just like toss it all in the garbage and start a new project with the web platform we have the possibility like Taylor mentioned yesterday to incrementally upgrade our app in place so for instance we could take our application add a service worker to it to make it work better in poor or no network conditions we can also find the kind of problem areas in our application and start replacing those with web components so that can allow us to start bringing in this component-based thinking into our existing app without needing to re-architect the entire surrounding application then later on if we do decide to do our entire rewrite of the application we can bring those components along with us so this reusability that web components allows us to do not only across projects with the same framework but across projects that are using different platforms or different frameworks is really something I think is unique to the web and in a business context where you have apps that are written years apart with different technologies that's a really big thing that allows us to bring a consistent user experience through all the different applications now we're not quite there yet there are still a few things that we need to work on to get this level of reusability that we want to achieve one is how do we make web components work great together with all the frameworks out there and two, how do we make web components so easy to customize that we can just drop them in any project and make them look like as if they were built for that project but before I get into that I want to bring Yoni here to tell us a little bit about what it takes to build a high-quality business grade component yeah so what do we actually mean when we say business grade components or enterprise grade components is that like stuff for people in suits in fancy offices or gold-plated buttons or something like that well of course not so for body elements that means components that you need when you build these complex business applications now these components might be more complex feature rich ones or more seemingly simple use case specific components now all of our elements are open source on GitHub and we test them with all the latest polymer versions and we provide support for them to ensure compatibility and functionality and we build the elements as a seamless extension to the polymer element catalog so combining all of these element sets you kind of have most of the components that you need when building a complex application like the expense manager demo application that you're seeing right now so we used our data grid date picker combo box and upload elements together with some paper elements there but apart from the visual feature that the end user sees what else is required from a business grade or high quality component to put it briefly it's quite a lot of work so first off you need to consider both end users and developers alike and starting from end users there's already multiple aspects there that you need to take into consideration first usability can the user accomplish a certain use case with your component and hopefully with ease there's accessibility can the user perform that use case regardless of their own abilities there's performance does your component load initialize and respond to user interaction quickly responsive design again can the user accomplish those use cases regardless of their device screen size or input methods and last robust or complex interaction design does your component handle the user input and interactions as intended in all of its different states now this is especially true for these more complex business oriented components with a large number of different features that need to work nicely in concert no matter what the combination of those features might be like Taylor also mentioned yesterday in yesterday's keynote doing all of this work on the web is very hard so it requires a lot of specific technical knowledge and attention to detail to get things right and I also want to thank the Polymer team for actually providing us tools that make this a lot easier so that covers end users somewhat but there's developers that you need to treat with equal respect for a component to be considered high quality and again for developers there's usability but this time from the point of view of the API so is the API of your component intuitive and flexible so can the developer make the component do what they need to do in their app there's compatibility does your component is it usable together with various text sacks or layout environments where the developer might want to use it and last but not least like Comcast mentioned many times great documentation is really necessary in order for developers to learn how to use your components efficiently now this seems quite a lot already even though it's not really an exhaustive list you need to consider so how do we actually succeed in building these high quality components how do we attain the complexity so I'll give you a brief look at how we do this at Vardin internally it's yeah we basically do the regular agile process with these so regular design development and testing cycles even though it's not a really formal process that we follow there it is on a high level how we do things and it applies to like the whole components as well as to the individual features of those components as we work on them piece by piece so we start with design and that begins by identifying the use cases that we try to cover with the component or with the feature and those use cases usually come from existing projects customers or users directly and as examples when building a date picker you might have just simple use cases like well select the date near today or select your birthday and for us it's not very difficult to come up with these use cases as we're rebuilding some like well established UI patterns but it's still a good idea to check that those patterns are still valid today and accommodate accommodate any new requirements such as small viewport sizes or touch input and it's also a clear place to apply our motto and fight for simplicity now researching existing solutions and reusing the parts that still hold up is a natural next natural next step but we're still not afraid to pursue and experiment with alternative or unconventional designs like with our date picker here so we could have easily gone with this more traditional paged calendar design but we wanted to see if this alternative design of an infinite scrolling calendar list would actually perform better so once you have some designs you usually want to validate your assumption somehow so you might not be sure of your alternatives which one is the best or you might have some technical uncertainties that you want to validate or clear out somehow and for that you build something you test so prototyping is the next step and the type of prototype you build or use depends on the level of complexity of the use case how confident you are in the design or what type of feedback you're looking for to get with the prototype so for example if a design if you want to know if a design is technically feasible you probably want to actually code that in the browser to get a really concrete feel of that or if you're just unsure if something is visually prominent enough for end users you might just go with a static or animated mock-up instead now again as examples for our date picker one early prototype that we did what's this iOS or a version that mimicked the iOS calendar app with this zoom-like interaction and we wanted to see if that's actually feasible to do in a browser so we ended up coding that actually and seeing that work in different devices another one later on was that we wanted to get a more tangible feel of the dual scrolling list that we had as an alternative design so before investing time in prototyping that in code we actually just did a clickable image-based prototype that we did some early usability feedback or user testing with to get more confidence before actually doing something in code and yes like I mentioned testing that's the primary purpose for your prototypes you want to learn something from them and those code-based or clickable image-based prototypes were great for end user testing but for developer and API testing we need or we usually do something different so we have an API design available we have some use case that we try to cover with that API and then we draft some code examples based on those so we use kind of the API already even though it's not implemented yet and then we just show that code example to different developers and get feedback directly on that early on and before we ship a larger set of stable features like 1.0 we do these more formal usability tests both for end users and for developers so we bring in more users and actually give them tasks that we want them to accomplish with our component and then we just observe and take notes during the session and so forth and of course we do the more traditional compatibility testing on top of this so to make sure that our components work with as many framework browser and platform combinations as possible and based on the learnings sometimes we end up changing the designs so with this iOS like zooming design we noticed that well the performance wasn't that great on some devices so we ended up designing something else and with our we learned also with the image placed clickable prototype that users didn't actually have any more trouble selecting dates using the infinite scrolling list and many actually preferred it so we went ahead with that design but we also noticed that we can actually combine the separate calendar and the year and month scrolling list into a single view with this dual scrolling interaction that you see here and that's what we ended up shipping and yeah that's actually one of the last important steps in the cycle so once you have confidence in your designs and your implementations you actually want to ship some features and other fixes after you have the confidence and that's one really important aspect of this is great components that they have a roadmap how those are going to be how the components are going to evolve and how they are going to be maintained so we use semantic versioning for our components and what's the same for all of those versions basically that we're constantly looking for feedback so please try out those versions early and provide us feedback as much as possible because that plays a big part on our maintenance and support efforts so we try to respond to pull requests and issues as quickly as possible and we also have an active chat and forum where you can ask questions from the team directly so don't hesitate in contacting us and in addition to these we also offer commercial support in case you need that now speaking of support one question that we get a lot is how about Angular 2 so I'll let Marcus tell you more about that sure great so yeah as you probably know since web components are built using web standards they work great with a lot of the frameworks and tools out there namely those that work directly with the DOM directly with the web standards now there are some other frameworks that abstract a little bit away from the DOM and bring in own concepts for doing stuff like data binding which means that in some frameworks like in Angular 2 web components don't really work as great as we would hope them to do so in order to help fix this issue we at Bodin have created a universal Angular 2 to Polymer adapter so this handles things like custom CSS and shady DOM operations it ties in with the data binding system and it makes sure that the components work in informs and with the validation that Angular 2 has you can install this on npm and once you've installed it you just import it in your module as Polymer element with the Polymer element imported you will declare it for every Polymer component that you want to use in this case we're using both a VON combo box and a paper input there's no special support needed to build into the Polymer component itself the wrapper will take care of all of that so with those declarations in place we're able to use these Polymer components just the same way as we would any Angular 2 components so here we can see that we bound the value of the combo box to the input and we're able to do a two-way data binding between them next up we're going to talk about something that I think is really exciting something we've been working on for a while and something I know a lot of people in the community have been asking us about what if we can't do material design what if we want to have web components that look like our company so Yoni? yeah so how do you customize the look and feel like Marcus said earlier it's one of the aspects of reusability and compatibility that you want to affect how things look from project to project and one thing we get asked a lot is that yeah web components look like a cool technology but our company design guidelines don't really allow material design so how can we change the look and feel and we're running a survey currently and I've pulled some direct quotes from there and highlight this issue so there's one person saying that well it doesn't provide look less elements you're pretty much stuck with material design and another one saying they would like better decoupling of look and feel from code like paper essentially buys you into material design so it's a real issue for web component users or polymer users so while paper elements are awesome the feature is that it is great just changing fonts and colors is not always enough and you might get this face when you're trying to do something but you might also be thinking that aren't there multiple existing CSS frameworks for theming web applications out there like Bootstrap, Foundations and what have you like why can't we use those well one big thing is that those existing frameworks rely on specific DOM structure and specific CSS classes to apply those styles and as you know that doesn't really play well with Shadow DOM because you need to have complete control of your internals of your components in your whole app and that kind of defeats the purpose of the reusable components so you should be using custom properties and mixes instead another thing that the existing frameworks commonly do is that they require a build step when you try to want to customize some things in the theme so while that might be a okay thing to do on a high level when you're theming or customizing your complete app or multiple components at the same time might be fine but for individual components like they should not rely on any build step to provide their theming capabilities like that also again kind of doesn't make them really portable or reusable in multiple places so we want to get rid of this build step as well and we kind of already can so standard CSS already has most things that we need for theming so just a quick check check list of things that would preprocessors would usually offer so variables check we have custom properties now shipping in multiple browsers natively already mixings that's in the spec coming up and I think it's natively shipping anywhere yet but the shady CSS polyfill or shim does that for us basic math it's something that you sometimes need when doing customizable themes well that's really well supported already with the calc function in CSS so we got that covered and these three things are just the bare essentials basically that we need and it could be also almost all that we need now there might be some limitations with the shady CSS shim but once native support gets better we actually get more benefits with the native inheritance and cascade of CSS and one extra thing that I'm really looking for in the future is color computation which is already in the CSS specs but also not shipping anywhere yet and we don't actually have a good shim for that either but once that comes out it finally closes the gap between CSS preprocessors and standard CSS so we get color computation in the browser and all of this is actually the runtime which opens even more possibilities for theming so you can adjust things runtime now so the future for theming looks bright I would say and we've been researching and prototyping this for a while with our components and we want to bring you or offer you the possibility to really get a nice starting point quickly which you can then start customizing further to get the app that you or get the look for your app that you really need so these are just mockups at this point but an early prototype code but it should give you a feel of what we're after here so similar to paper elements you should be able to customize the high level stuff of your theme using custom properties like the main colors in your theme the overall sizing and spacing of your components and fonts and that kind of stuff now in addition to these you should be able to quite easily adjust other visual aspects as well like rounded corners, border styles, gradient, shadows and stuff like that and this level of customizability is a real key feature for web components like to make sense in a business concept when you can have these reusable components from project to project and you can still make them look consistent within an app and looking for an implementation point of view each component should expose similarly named mixins for different parts in their internals like subparts and for different states of those subparts and at that point the components should basically look quite lookless as the one person said in the survey so they shouldn't provide that much theming capabilities per se like if you compare to a native input so they should be quite bare minimum styling there and then we can start building on top of that like a theming layer and define our for instance here like the global styles for our for our input elements wherever they may be so we want our inputs to look like this and then we can apply those styles at the same time to any of our components that actually use an input element or text input somewhere and the idea is that then we have these multiple starting points different types of themes for you to begin with and might offer different kind of features themselves and then you can take one of those as a starting point and then start fine tuning and customizing and tweaking from there on using the mixins and custom properties that theme offers like to really like adjust that just that border radius on that one button right there so we have all of the elements that you've seen in this presentation available already so go check out the website for more information on those and we're really excited to get you this theming stuff hopefully already this year some some early stuff so stay tuned for that and briefly back to Marcus still all right thank you so I hope you see that we're very excited about all these new advances on the web platform and we really look forward to seeing how we can use them to really make our developers lives easier make it easier for them to provide great end user experiences so we have most of the bottom elements team here today so and we'd really love to talk to you so if you see anyone with a reindeer shirt on come and say hi we would love to talk a final thing I want to mention is that we're running a survey currently on trying to figure out how people are actually using web components and progressive web app technologies in the real world so if you have about 10 minutes to spare on your way home today and really want to help us kind of affect the future of these technologies please go to the link and fill in the survey thank you thanks awesome thanks so much Marcus and Yoni I always feel I'm really late walking on the stage our next speaker is Robin and I'm really excited for his talk partly because I think it's going to be really good partly because it's the only thing standing in the way of me and eating lunch the good news is I've heard rumors that Glenn speaks almost as quickly as me so he probably going to finish early and food for everyone give it up for Robin hi everyone thanks for the introduction Monica just everyone knows that I blitz through this in 13 minutes 91 slides in rehearsal and that's what they said just cool it down so hi my name is Robin Glenn and you can find me on Twitter on aerial legs and I'm going to talk about a journey from components to applications with being where we are and if I say to you that I'm from the Big L you all know where I mean right that's slandilo but I work here in London or the little L as we call it in slandilo and I work for a company called Ukes Netaporte group we're an online luxury retailer we have multiple websites focusing on luxury brands on in commerce this time last year I was sat where you guys are in polymer summit but not here in Amsterdam but we were showing off our first polymer release which is the product details page on Netaporte I wanted to show you this so I could just link you to a talk there so if you're interested there's a previous talk me and a developer and UX designer did about how we took it to production so if you're interested in reading about that you can do it there I want to talk about why web components but I want to take a different stance and not talk about it as a technologist or a developer but I want to talk about it from a design and UX perspective so previously our design team would submit this for a sign off so they would design a page this is an example of a listing page and they would pass it to the company to get sign off so we could go ahead and build it what they found was the comments could be quite subjective people would like okay we like this here but maybe we'll change this H1 and then what you get is well bottlenecks but designing consistencies so what they wanted to do is move towards a design pattern coined by Brad Frost called atomic design we build in small atoms and then a collection of atoms become a molecule a collection of molecules become an organism and they wanted to move towards this pattern so they could eliminate these bottlenecks but also get consistency across their designs so they were looking to get something like this signed off instead so a collection of components and that's what they would get signed off and then when they wanted to build something they would just structure a few of these together so this led us the design and UX team to come up with this concept called atomic components so we wanted to move the front end to align with the new design pattern that the back end was doing so I wanted to go over the principles sorry I want to go over the principles of atomic components so first of all is standardizing the rhetoric so what I mean by that is the front end team the UX the design all the way to the API teams are talking about the same thing in the same way what this helps us do is get better understanding of each other's problems promote collaboration but then instead of thinking in like technology problems we think in customer focus problems the next is granular thinking so we wanted to break everything down to its finite point there's a talk that Apple say which is using the simple stick so you just break everything down into its smallest piece so using those principles I'm going to talk you through an actual component which is called nap product summary and we're going to use these principles to build this component up together so the first part is the nucleus as a designer and a developer you're probably used to this point where you break things down like what's on the page so first of all is product image we've got a badge which identifies what type of product it is designer name product description and price those are just the the primitives of this component that we need to build it so next thing we layer some more stuff on so let's look at states this component will have some states the first is a skeleton state this is the preloaded state before the product data has come back which rendered completely this is how it will look and then you have a loaded state which is the next state on top so next thing is interactions so now we're starting to build interactions into the component so the most basic one is the link so it generates a SEO friendly URL for the href of where this product will take you next is some kind of interaction of hover or tap so it's like a rollover state to show two different product imagery we're going to build on again and we're going to add some behaviors and rules so we've got behavior for if the image is broken for some reason the image hasn't been uploaded we don't want the standard broken image so we style it up a bit we also use responsive images using image source set so that's another behavior and we use schema tags to identify what the product is I'm going to go into that in more detail later so let's add another one so testing is really important for the component to be tested and so we can abstract some of the complexity away from the end testing so we do a couple of different types of tests we do unit tests this is just to make sure that the product is working how we expect it to so does the product behave how we expect it to we run these tests on source labs for multiple browser operations we also do SEO tests SEO tests are to oh sorry could I have a glass of water? sorry SEO tests are just to make sure that the product looks exactly how we think it does for rich media snippets finally is visual testing so what we do is with a level of tolerance we test across different browsers just to make sure that the product looks the same on every single browser sorry about this okay so that's our testing done next is documentation documentation is really important for our consumers and our other clients to adopt this component so self-documenting using the polymer standards it's also got a demo so how do you use this component versioning so we add versioning so different consumers can change the component but then subscribe to the changes when they want sorry next is monitoring sorry next is monitoring does this component need some way of registering how it's performing in the wild and then all of those together make an atom so you can see this onion skin in effect of all the different things that we want to apply to the component building up and you abstract complexity away so using these principles let's build something I am nowhere near brave enough to do this in front of you so in blue Peter style here's one I built earlier and this repo is available and open so if anyone wants to check this out and apply this work that I've done feel free the repo is there my github is the RG so you can get it so we're going to build a simple product component so it's the what the net port a one I showed but we've just removed a few parts okay it's gonna be code heavy here this is how you would use the component there's a product attribute and that has a string of five bit of Jason and that's the data contract for that component everything that it needs is inside there I don't expect you to understand it all but this is how you line up with your back end teams to make sure that you get this data through so here's the template this is how you'd use it you can see there's a bunch of product dot image or different product product attributes are just being passed through from the attribute we previously seen I want to focus on one specifically which is price you can see that we never pass price through let's look about how this works so price is a property but it's a computed property which means it's going to get generated before the component actually gets rendered you can see a simple private method there compute localized price you pass it the product price and the locale let's have a look how that works so here's a simple method as private it's documented at the top this is how you are if you want the self-documenting code if you write like this you'll get it all for free so what does it do it's basically just returning the price but using locale string to put the currency and depending on the country where you put the comma or the full stop so that's all that method is doing let's look about how we might go about testing this and we do two different types of testing the first we'll call it a unit test so we use a web component tester as you've probably heard people talk about today and we also use fixtures to stamp that in the DOM to make sure it's clean every time we run a test and what we're actually testing here is we're calling the private method stubbing some data in there and just making sure it works how expected to so it's like this is a unit test the next type of test however is a component test this is to see does it work inside the component is the component doing what it's expected to look like so you can see here we're doing a simple assertion again using fixture but the assertion is checking the text content inside a selector making sure it's the right value and we're using this element dollar dollar notation and the reason we do that is if you just did a query selector directly when you try and run these tests in shadow DOM it can't pass the shadow boundary so it'll fail so we use that as part of a shorthand for Polymer DOM just to inspect the next is structured data so structured data is a way of identifying what a product is what it looks like so Google can come along and see what it is there's a link there to a product schema so that how you mark up a product and basically the two minimum things you need to do is you need to say hey this is a product and this is the name and then you can pass this to Google structure data testing tool and it will validate it for you like it's done here is that correct so what we need to do first is put on the host attribute that it's a prop a product so this is all this is doing the host attributes inside your Polymer constructor will allow you to do this the next is we're going to mark the name as the name with this item prop which is saying that property name is the name of the product so we want to be able to do this at CI level though right we want to run these tests at automation we don't want to just copy and paste into Google structure data tool so there's a module here that we created that will act as a proxy and do that for you so if you want to automate this testing you can so again it's on my github and if you get that repo you can do it and I'll just explain quickly how it works so this bit of code when you're setting up your tests you grab the entire outer HTML and you're going to pass it into this method that's basically going to proxy a call off to the API returning back some JSON that you can run some assertions on so you just need to get all of your HTML and pass it straight into this module and then you can run some assertions so these assertions are saying are there any errors is it a product? is the product name correct so now we've got automation testing of rich snippets which is awesome so we've built a little component we want to get to applications now so this is a simple listing application again built it's on github it's available for you to check out it's got full automation tests and you can play around with it it's pretty ugly I'm sorry but I just wanted to show you some simple features that you can do so this is the template you can see it's got a few sub-components so we use an INA jacks as a wrap around XHR requests we've got a thing called product list header so that's just the name of the list we've got pagination which is the controls and we've got a list of products so you can see how we've broken apart these sub-components and each one of these sub-components can have their own levels of tests so they can be tested in isolation so you don't have to test everything together just how you expect it to work let's look through some of the things on here so we've got auto on INA jacks and what this will do is it will automatically make the XHR request for you and then if you make a change to the API call it will again automatically make that call so we've got URL again, I just want to look into this because it's going to be important when I build up this structure again the computed style and we're going to pass in products per page and page number the page number here is the key part that we're interested in so just picture this and I'll build it all back up but just so you know so page number here is going to pagination and it's got two curly brackets which means it's got two-way data binding and that's again going to be really important when we build up this application so let's look at some of the components the header one all it's doing is generating the title so I'm not going to go into that but the one below is pagination which I've just tried to highlight for you there so let's look into that component so what's it got? it's got some buttons previous next it's got a description to tell you what page you're on and then on the buttons we've got some on click events and let's look into those so we're going to call pagination next so when we click it we're going to set page number and we're just going to increment it by one so that's all we're doing we're just saying hey when we click that update the page number by one and that's it so what does that do? page numbers got this notify property on so I know that there was a data flow talk yesterday so people might be kind of aware of this now so this notifies just can say hey I've changed alert my parent that I've something's happened so now let's look at the list the list here is a collection of products but it's in a DOM repeat so what we're going to do is we get an array of products back and we're going to iterate through each one of those and pass them into our simple product component so we had that big stringify JSON earlier what we're going to do now is we're just going to pass this reference directly into that and this is called the mediator pattern and I'm going to try and talk it through so it's hard to understand so I'm going to try and build it back up so in pagination you hit next it increments that page number that's alerting the application above so the application is wrapping around these two subcomponents so pagination tells application hey the page numbers changed the page numbers computed URL then automatically updates the API call and I and Ajax on auto goes and makes the call so it's gone and made the call got some more data it's then passed it down to the application and then the applications pass it down to its children so you can see the list would update okay so now we need some more real world stuff so we've had some pagination but our customers want to know our clients want to know hey is anyone using pagination? let's add some tracking so we can do that with behaviors so what we're going to do is we're going to fire this event pagination and pass the page number then in our pagination component we're going to inherit this behavior so we're going to add this behavior called product tracking behavior so when you create a behavior I'm going to show you how you do that here it's just another HTML import and you define it like this so you're saying okay let's create a new behavior add this property and inside there we'll have a listener and the listener is going to listen for pagination and when it gets it it's going to fire track event pagination and here there's just a simple example of how you could use request idle callback to do some beacon in a pagination Paul Lewis has actually got a great article on this it's linked in the github and it's here but it's how you use request idle callback now to track that analytics so using these principles that's all we had these kind of patterns it was how we created our new listing application which is here so this is currently being rolled out and beta to a couple of a few high-end customers to who try out a specific product for us first but if anyone wants to see it come and talk to me after this and I can show you it working so I want to talk about some specific parts of this and we can look at how some of them work and what we build on top of it so this is this is a sample of the application and I know there's a lot of stuff so don't like worry about reading what's there but what I wanted to show you is it's multiple components all broken down in top of this one so we have stuff for errors we have stuff for certain customers and personalization we have things for loading states we have a rotor we have a header all of these sub components build up this application and each one is tested in isolation so you don't need to worry about that complexity it's all abstracted away from you so I want to talk about some of the more exciting bits in this application that I think are quite exciting so the first thing is performance so we try and adhere to the rail guidelines and I want to focus on a couple of things I'm going to leave it run because it's actually quite hard to talk when it's happening and show you and then I'll explain the theory so it's a short gif so this is skeleton CSS this is the load in approach that we took so when there's no product data we want to show something so we get something on the screen as quick as we can but we don't know what it's going to be so we just scaffold out the page and in testing what we did is we put this versus a spinner with artificial latency and showed it to customers and people thought the one with a spinner was actually slower even though it's the same artificial latency so it's just to get sending on screen as quick as we can okay so the next one is pagination I'll leave you watching and try and explain what happens okay so what we do is when we're going forward we need to get product data and load images and we put a spinner only when it takes more than 400 milliseconds based on rails guidelines so and what it's actually doing as well if spinners only then it cares about the images they're in the user's viewport so they don't care if the bottom image hasn't loaded they only care about what they're looking at so this the spinner is based on the promise of the image loading that's inside their viewport and when they go back you can see that like it's instantaneously moving back and so we don't show the spinner or any transition is just to keep it going again this is to adhere to the guidelines of rail next I want to talk about telemetry or is it working if so how well is it working if you've ever looked into the web components polyfill you'll see the fires an event called web components ready when when it's like bootstrapped itself you can actually latch onto that and we do something that's quite clever with it where we add an event listener for web components ready when web components ready happens we'd run this try catch so we look for the component of the listing page and we look for this dot is method and the dot is method if the construct has been upgraded will become available however if it's not available it will fail and throw this error so what we're doing is we're saying has that component been upgraded to a polymer component if it hasn't let's catch that error and then we beacon some data back we say is polymer defined has the html import for that component successfully been imported and then this just allows us to like understand what's happening in the wild is it working if it's not working how do we debug it when you move a lot of stuff to client you lose all of the logging that you would have got on server so you need to compensate for that somehow and this is one of the ways we do it also we do some availability API availability and performance checks so this is like okay did the API fail when we tried to get products so you can see that there's some errors rates there if it did fail what's the status code what was the reason that API failed and then we have some API latency so it's like how long did it take to make that API call and come back and these are great as developers right we can debug and we can look and we can delve deeper into the what's going on with application but they're not great for our business customers our product owners who want to know how well is this performing for our customers so we also have some other metrics so this is customer performance metrics where it's more tailored about how it's working for our customers so the first one is time to remove skeleton so when you saw the skeleton state and when the products come in that's how long it's taken but not since you landed on the page since the first network request came to our site it's rendered painted and then removed that skeleton how long is that taken so we can tell our product owners okay we can say it's within like under three seconds three seconds ish that they will see products from first try and land on that page and then there's time to load paginated products so this is when you go right I've clicked next I'm waiting for the spinner and that's removed and we can have metrics on that is how long it takes them so the summary I went a little bit fast I'm sorry I hope that all made sense and there was a lot in there but I just want to kind of summarize these things invest time into reusable accessible tested granular components and what I'll help you do is promote code reuse your developers will be able to find this code adopt it and not reinvent the wheel every time you create something this also helps for design and experience consistency so your site works and behaves the same each and every time it also allows you to abstract complexity away from your applications so because you've put all of this testing and effort into these small little components your applications don't need to have as much coverage plug-and-play components straight into your application so you can spend more time on customer experience collecting and understanding customer-focused metrics and do the fun stuff you don't want to reinvent the wheel every single time no one wants to write fetch or XHR request multiple times you can use that component and plug it straight in I thought of a really nice way to like summarize this as we're in London as well which is if you look after the pennies the pounds will look after themselves and thanks for listening that's me Robin I thought that was a perfectly reasonable speaking space it's time for lunch yay food be back here or two the speakers will be in the ask Polymer Lounge around 1.30 so that we give them a chance to eat come say hi I still have Polymer store stickers if anybody wants them see you too did it I timed it right I came on stage at the right time welcome back from lunch everybody how's lunch you're awake oh my goodness next up welcome back next up we have Josiah and Josh and I have fun facts here Josiah lives on a mountain and is a blacksmith like he actually makes things out of metal which is amazing I only do that in video games and Josh roasts his own coffee which if you haven't before apparently can do in a popcorn maker and on the side they were in USA Today and make you give you the news so put a hand together for Lynette the first thing you'll notice is that why did they send the completely opposite height people here it was mainly to confuse the cameraman so they have to zoom and zoom and so we're just going to stand next to each other whole time there's good I don't like to call it short I like to call it vertically challenged there's a lot of benefits of being vertically challenged namely that I can just fit in the trouser press at the hotel just everything that's why I'm dressed this way I can just go and true trouser press Americans don't know what the trouser press is but it's a wonderful wonderful item because I hate ironing I'm just I'm a can I'm Josh out I manage the core web development team at USA Today Network and Gannett I'm a principal developer also on the core web team and we're super happy to be in London today and we're going to kind of tell you a story in being in the news we're all about story telling and we're going to tell you all our polymer story today and it's going to be really exciting at first though before we start I just wanted to give another round of applause for all the speakers so far because it's been amazing and great so everyone just absolutely amazing this is one of the most practical conferences that I've been to in a very long time and we've just learned so much and you'll see you'll see we're going to be taking things back to the States and implementing all sorts of things that we've learned here and I hope you will too if you didn't already could tell that we were Americans that that kind of gives it away too yes this is USA Today which is the flagship of Gannett and that I was told I needed to put that on there we wouldn't be cool so that was a quick last slide at it use the platform yay yes yes yes we definitely use that platform and you'll you will see a little bit about Gannett and USA Today national coverage through our like I said flagship paper USA Today but we also have over a hundred local newspaper brands sharing the complete same framework we engage the entire country kind of local bubbling up to national and national spreading out to local which is really really interesting we scale is a big thing here we have over a hundred and ten million users engaging in our digital platform every month we have over 500 digital products at Gannett and we our products reach 43% of the internet population and it's amazing it's also really hard because scale and stuff 1.1 billion page views on articles and news articles per month there's just a little graph showing you we're also own news quest with a parent company of news quest here in the UK as well we own a lot of different things across not just the US but the rest of the world too and Josh is going to talk about what our current platform and what our platform on web components is Josh take it away so currently we we have our own CMS system and that publishes out to couch base and we have like a rest API later in front of that and then all of our products consume that rest API from native with watches and TVs Android iOS and also our web products so we do adaptive delivery between two different code bases for web so we have a desktop code base and a mobile web code base that lets us deliver a very lightweight mobile website and a big heavy SPA for desktop and we have some modularly kind of built into the system but it's very much limited to per kind of experience so articles have a module system the front pages have a module system and the module system is different between mobile and desktop so it's not really as great as the modules we've been hearing about all week and that's kind of what we want to move towards is better modules both of the web front-ends they're built on python Django and then the front-end is backbone jQuery and require so it was very modern when it was built back in 19 in 2012 but yes but this is in 40s that 40s when we all use it Django for the very first time but this is 2016 and this is a very tightly coupled client server SPA so it's not really a great and experience anymore as a sample of like what our mobile experience looks like and so beginning of this year we started moving towards thinking about how we could kind of make this better for development and better for our users so we started looking at implementing a new framework and I started this planning in spring started rebuilding a little bit in May and June the big reasons we want to rebuild get these new progressive web type features and get those out for our users so they have a better user experience and it's also kind of for developers because we all like to play with new things and it's great when they also benefit our business and they benefit the users we also want the ability to support multiple sites and experiences like just I was saying we've got lots of different properties that are local that range in size from smaller newspapers that are just for little tiny communities to bigger ones that support big cities like the Indianapolis Star and a couple other fairly large papers in Detroit, Arizona and so they've got a very different experience between those bigger sites and the smaller sites and there's an even bigger difference between those and the national paper USA Today but right now they all kind of use that exact same web framework so it makes it hard to build something very custom per site they get a little bit but it's not as great as it could be we also need to be able to support multiple distributed dev teams those bigger papers have their own developers and they're building great things for their little local markets but they have to kind of build into this big code base that's getting shared between everybody so when this little module gets built for Detroit it's also in Arizona and it's in often USA Today and other places too we also wanted a faster more agile development process that code base that's been growing since 2012 or the 1800s or the 1800s feels like the 1800s often you know, it gets kind of big and it becomes a little clumsy to develop on it and becomes harder to test it harder to deploy it because the bundle just keeps getting bigger so that's what we were trying to move towards in June we started building the back end of our new framework which is Go which is really cool but we won't get into that whole part of this and then we started building our first project on it and Josiah is going to tell you a little bit more about that so we jumped headlong into Polymer and the first experience that we built out with Polymer ever we said oh maybe we'll do something in small not that big of a deal no we're going to build the whole Olympics experience with Polymer and that's what we did we jumped into the fray and said you know what we're this is going to be our proof of concept is our Olympics data driven experience and this is kind of a summary of the project and then I have some some shots of it as well we just needed to display data driven data from the 2016 Rio Olympics all the kind of data that's coming about the schedule about results as results would come in country specific things metal counts and as metal rewards were coming in and then deep dive into athlete biographies we also because we're a news organization we're writing a lot like about all the interesting things that happened in Rio during the Olympics we're writing a lot of stories generating a lot of content photos and videos and that was also a part of sort of recirculating that through this very data driven experience and once again this is something that needs to be available on the domain names of all of our different properties so not just usda.com that available through indy star through the democratic chronicle dot com and the framework needs to know the context of what site it's in it one of the things we don't do right now is we don't actually have any risk really risked it's not a responsive site you said today or the the rest of the sites were Josh mentioned that we're doing adaptive delivery with device detection so this is our first real big responsive experience with a focus on doing mobile best mobile first and we'll show you what that looks like so here's our schedule page and the thing about data about the Olympics is that there's a lot of it there's a lot of data coming in a lot of different ways a lot of results that are not necessarily you know exactly what the results in the data types that are coming back right you know it's not it's very different especially for the different sports we have our metal look America a lot of metals on that one yeah and and then our athlete bios and this is just a really small chat snapshot of all the various data points and then filtering through and just knowing more about a country knowing more about an athlete and then I just I mentioned mobile and mobile performance is key for us and you can see just sort of that complex data here being being rendered nicely in our mobile experience little bit more about the project here is the fun part you can't move the opening ceremonies so we had 30 days to build out this site and this experience you know we we tested that you know let's add more manpower to a late software project I'm sure that it will you know it'll make it it'll make it fine and so we tested that in this limited real world example with oh yeah newly hired developers you can see where this is going I can tell it's the the hurdle the hurdle jump it's you know but it's a it's a good story it has it has a good ending strong existing web tech skills though based on this new team which is an amazing team it's it's full of right people right out of college actually junior devs right out of college but they had really really strong web skills the overall experience though there was a lot of juniors and it varied everything between juniors to to principle which that plus 30 days plus brand new polymer framework was like oh this is going to be fun so we had a lot of coffee though in order to in order to fuel we actually began roast like Josh was talking earlier where you're roasting your own coffee to fuel how many of you guys turn coffee into code here we see some hands how many of you turn T into code we'll talk later part of this was changing the way not only our development team was thinking about coding thinking about changing from this page driven way of developing to to web components but was also educating the rest of the company the rest of our department into thinking in web components starting out from you know moving everyone from here's a page and here's what's going to page you think about modules to think about componentizing to to make atomic elements for our design it was encouraging standardization we had we at first when we talked about modules we had a lot of modules that basically did the same thing but had slight variations and and what we wanted to do is we said no let's let's make this work everywhere this puzzle piece this Lego block can fit everywhere so let's create let's create better standards and not here's what a page looks here here's what a page looks there for you X and I a it was you know grouping content based on on data source and because there was so much data and all those different components were retrieving their data from different sources and doing different business logic for that data it was really really important that at least for us in our small time frame that we group things by similar data sources otherwise it it the context wouldn't flow right and it made it a little bit harder to develop from our project managers our product managers to even our Q a it was testing and planning these features these individual modules instead of full page testing full page Q a and just even writing tickets about the stories about planning it was all modular based component based and not here's this page and here's that page and then this conference is talking to a lot of developers about thinking web components for our development team a big part a big win for this and how we did a spoiler alert deliver in 30 days the division of labor was really important we could have some people working in this component some people working on that component and that was able to play to a developers individual strengths meaning someone who's very very very front and focus could do a lot of the styling and could could help you know others that weren't with the styling and then we had some more data-driven individuals who are connecting all the you know the complex pieces of data from different places all together so that division of labor played a key role how that look to was there was some interns that that we had for the summer and we were able to throw them on just modules where they didn't need to really know about the Olympics and what was happening or or all the complex data that was going on they could just focus on this little one thing here's a story research that you're building and I can just focus on that and I don't need to all the noise that's going on around me because there was a lot of noise but that focus helped us meet the deadline with that division of labor which was just awesome and we're able to do that not you know beyond the way that we're doing before in the platform that we're doing before but taking advantage of thinking in web components. Josh is going to talk about all the wonderful hurdles that we experienced and and this wonderful project. Yeah so like any big project we faced a lot of hurdles our approach was really to just be as agile and flexible and possible with features and how we were kind of approaching the project because otherwise there was no way we were going to meet the deadline. So the first hurdle we really faced was the schedule as we've said 30 days to build it. So the first thing we had to kind of rethink was how we were going to do a type script integration. So when we started planning out our front and framework we were like oh we really like type script we really want to use this with Polymer. So we had these great ideas for how we were going to try and do it but getting that integrated before we started doing all this development just really wasn't going to get that developer experience where we wanted it. We ended up kind of going with a bit of a hybrid approach where some of our developers were just building plain vanilla Polymer elements and some were doing with type script with the kind of a code behind approach. So we did one file for the JavaScript one file for the Polymer element and then just use the script tag to link over to the JS version of the type script file. And that way we're able to do some coding and type script and get the benefits there. But the downside was you're now coding in two different files so you're jumping back and forth in your editors and it really wasn't a great experience. It also caused us some other problems that I'll touch on later. We also just kind of limited how much packaging and fallbacks we were doing. So it would be great to be able to say we did all this great support for legacy browsers and all these great different approaches to, you know, HB2 and whatnot. But yeah, we didn't get to that. So we just kind of limited. We focused on modern browsers. We focused on supporting the browsers that we knew that the majority of our users were on and just focused on building the best experience we could for our widest audience. We also kind of delayed this system JS and JS PM integration that we had planned. So this was another feature like the type script that we had these great plans for our framework where we're like, Oh, we can do all this great stuff to support third party JS libraries that maybe somebody's going to want to use and we realize, well, we don't need third party JS for anything. We're building an Olympics. So we don't need to build this now. Something we've put in there now in our framework that we're kind of working on. We'll touch on that a bit, but we found we really didn't need any other libraries. We were able to just use Polymer for this. So our next hurdle was performance. We were very new at building Polymer. So we made some of the same mistakes that we've heard from some other companies that they made when they first started. The first one was too many components. We jumped in headfirst and we said we want to build everything as a module. So many components. Here's all. Yes, yes, lots of components components for everybody. And that ended up with a really slow page because we had thousands of components on the page. Kind of hand in hand with that is our components were too complex. So we just made these gigantic components and you saw from the little video. There was a lot of data on that page and there was a lot of variations on it. So there were a lot of dom if statements controlling whether it was showing a matchup or if it was a something like boxing or something like a hundred beater dash where you've got 10 people competing at the same time. You're going to have little differences in how you're displaying that data. So those complex things ended up slowing us down. And we had to kind of go back and watch some polymer videos from last year's summit figure out ways we can improve things. And after you know just spending a couple hours we were able to improve the speed of some components by over 10 times and it was we were able to get things really good and get the performance to a place we're really happy with. But when we first built some of the very first components we were a little nervous just because of how slow it was. But that was because we hadn't thought about performance at all. And so just kind of is saying that you know when you're building stuff you do have to think about it a little bit if you can't just go out and build everything as components and build them crazy complex and expect it to be super fast. But if you do it right they are super fast and they are awesome. The last thing was flash of unstopped content which was as things were loading in we initially weren't doing much to do anything about it. And so the page looked really funky. So we just put some basic styles in that focused on like the navigation the page structure and that helped get the page to look a lot better as the content was coming in. The last hurdle we faced was testing partly because of that schedule we didn't really get to have a testing framework in place. And we kind of pushed off a lot of the testing towards the last minute which meant we ran into some CSS things that we probably should have caught sooner mainly around Flexbox because this was our first time really using Flexbox drastically across all the stuff we were doing. And so we found all these little variations between different browser manufacturers with how they implemented various features of Flexbox. And so we had some really weird looking pages at first and it took a little bit of going back through the CSS and making it standardized across browsers. Also with JavaScript compatibility this is where the TypeScript integration kind of hurt us a little bit because we started using ES6 features that aren't cross-browser everywhere because we were using them in our TypeScript code and then you would switch back over to a plain vanilla Polymer element and you'd start typing let and you'd start using arrow functions because you're so used to doing it but then some other browser would say hey I don't know what let means and now you've got a compiler or a JavaScript error and your component doesn't work. So that's where like switching back and forth between TypeScript and vanilla JavaScript really wasn't a good idea. The final thing was HTTP to delivery. This is also the first time we had done anything with HTTP to and having the whole site on SSL. So we ran into some issues where we thought OK we've heard all these talks about how great HP to is. Let's just throw it on push all of our resources and things will be awesome and fast. Not always the case. There's a lot of times where you don't want to push resources and there's times where it's better to preload them and we hadn't thought all those things through and so when we first launched there was a lot of stuff that actually could have been faster if we weren't pushing it. We found those things out post launch and we were able to fix it now. But that was something where more testing and thinking about you know A B testing for the performance and saying is this feature really going to make us faster or is this actually going to slow us down even though we've heard it's the great thing to do. So now Josiah is going to tell us a little bit how things turned out. So let the games begin. One of the other interesting things with onboarding basically in a new team for that matter into a new framework was the strategy for us and building out a platform on web components was not to use a monolithic JavaScript framework and keeping on anything that was frameworky very very light and slim and really just playing up to to components. You notice you'll notice that in like in that video and another one that I'm going to show in a second that it's not it's not really SPA driven and it's not really it's not actually using kind of the app shell stuff which is very interesting. It's still multi page kind of loading which I'll talk about a little bit more in a second. Thankfully deploying iteratively saved us. We've been moving away from these really really long deployments where it took an hour to hours to really moving more to a continuous integration approach to delivering these web components and these pages that were had web components on them. We're also able to launch with a subset of features because you know they weren't awarding any medals right away on the opening ceremony but we started with the schedule because the schedule was really really important. So we're able to do kind of subset iterative delivery in order to meet our deadline. So we're adding additional modules as the games were going on and as you know the games began so you can see that over here in this quadrant up in my this upper right hand corner that we went from sort of this just recirculation experience to adding our metal module there so we could get you to more data driven page and Olympics data is just part of the difficulty it was it was so tricky and very inflexible of the boxing and some of the fighting sports they award two bronze medals. It's like wait wait to to what what why I thought everything was gold silver bronze two bronze medals and then in swimming apparently you can have three silver medals because that makes sense to a data scientist and it's like so there was lots of challenges there with the data but we're able to overcome them because of doing things iteratively and just you know the team was working with something that was in general easy to onboard and and was not difficult to work with. So back to performance because it was a hurdle how did we do did we win the gold did we win the silver did we win two bronze medals I don't know actually I do so how did power perform against our existing baseline infrastructure of us a day dot com and what we've you know what we've built and what we've been using for for many years now and so with the average page old roughly was equivalent to our current platform you can go on you said you said a day and you can check out what you know what that kind of speed is but keep in mind this is without any time devoted to performance tuning at all because there was no time to do performance tuning we were up 30 days and that was it so that we just by get using polymer and and building this experience out we were able to get roughly where we are with our current platform. So our audience reach this is really really cool we this this and the rest of our Olympics reporting that we did actually raise USA Today Network the entire network up to a number 2 for com scores news and information category across the nation and we just had amazing numbers coming in 116 percent increase from our 2012 summer games and our data driven experience was a core part of that as long as all the all the interesting stories and reporting that went on during the real Olympics. So I want to spend too much time on this because it's the E word elections but they're they're coming whether we like it or not it's happening but guess what we did we did it again and another 30 days we were like this is insane this was pretty insane let's do it again and and we did again but what's different this time based on what we learned before you know we had more thought into module composition how we're making modules not putting down ifs everywhere and you know using done ifs properly things like that optimizing this is our chance to optimize our loading our cashing the preload and push and the ACP to things that we were talking about earlier and then you know from a mobile performance standpoint it was part of our platform is you know maybe you don't need every single module loaded on your mobile experience maybe that's kind of a subtractive experience and you have a lighter page load delivered there and so that that experience which is a it's kind of a sneak preview looks something like this we have a nice map loaded in and we have data from from key races that are going to be you know battleground states this year let's check on let's Google California so let's let's see specific state outlooks race ratings poll averages and I guess we can I mean we could change you know the data to make that they're just elements so you can go in there and tweak it but we make anyone win right that we want it's not going to really change it but I mean you can make it whatever you want and that's a great thing about web components it's really a change and then all of a sudden I'm winning and it's it's it's great which might be better than the other options it's all the time we have for you today that was our 30 day and then really another 30 day March with the power of web components on our side being able to do the impossible with a brand new team who had never worked with web components before which says a lot about both the enterprise readiness of polymer and about that onboarding developer experience thank you so much I think I use the Olympics graph every day to try to find out if Canada was winning any golds they weren't I think in like the most Canadian thing possible Canada had like the most bronzes which is like we tried but we let everybody win because we're so polite I had two announcements to make after lunch and I forgot so I have to do them now the first is we're going to have a we're going to have a panel at the end of today and we would like questions from you from the audience so if you have any questions tweet them at hashtag ask polymer summit that's one and the second is that if you want to fill in the web component survey which we would really appreciate because you want to know who knows about web components it is the link is bit dot Lee slash web dash components dash 2016 maybe web survey 2016 web survey 2016 thank you audience next up we have IG and he has the best fact of today it's my favorite and that is he's born on a leap day which makes him literally four times younger than everybody else in the audience so put your hands together for IG hi everyone my name is the Eiji I'm working at Google from Tokyo office and as Monica said I was born in leap day in general Asian people are said to be look like younger than people other people but I'm actually younger anyway today I'm going to talk about signing and payment without forms so last month I was going to purchase a TV rack I knew what I wanted so I just search for the web for that particular product and I found the most reasonable deal at a small e-commerce website so I decided to purchase that using my mobile phone according to our research 66% of mobile purchases are done through mobile web rather than native apps that's great to hear right so I went to continue to check out form and try to fill out form but in the end I gave it up the reason is that you know the entire experience filling out forms is so painful right typing credit card information address information and a password on tiny tiny software keyboard is such a frustrating experience right so the same research tells that the conversion rates on mobile web is 66% fewer comparing to that on the desktop even for returning users remembering and typing their password is a pain another study shows that 92% of users who visited your website leaves without resetting or recovering their account when they forget their password web forms causing lots of friction and we need to fix that in order to overcome this situation web platform have come up with two new APIs which are payment request API and credential management API so what I'm going to do now is to show you a demo website which we introduced at Google I.O. called Polymer shop and how we integrated payment request API and credential management API play nice together so this is a Polymer shop website it looks nice right so imagine that I'm looking for a sweater or some kind of clothes that won't be up for upcoming winter so let's explore the website by the way these looks all good right and you want it but these are not actual shop and please don't send us email asking when you get the goods delivered we actually had that but anyway let's continue yeah this one this hoodie looks nice so let's purchase this price looks good right 38 85 by now and now you see a dialogue pops up from the bottom and this is actually done by API called payment request API let's have a look at from the top so at the top order summary shows the price of the goods hoodie 38 85 that's correct so let's continue then next one is a shipping address what is surprising is that my address information three of my address information of course these are fake but showed up and what is nice about this is that you know that I am not signed in or signed up to this website yet but these information are already available why because I have entered this kind of information in the past using the same browser so browser nicely remembers my all address information for me so I can use that them here so let's select one and the next one is shipping option so standard shipping or express shipping so I'm not in hurry I can just select standard shipping notice that by selecting one the order summary has added new price standard shipping so the total cost has been changed and now I go to the payment and like my address information my credit card information is already filled here it's quite nice right and lastly contact information so my email address is there looks good okay everything looks good so I can just proceed to payment pay then I give my CVC and confirm and done so imagine that I wasn't explaining all this right it's only a few tabs without typing single letter using a software keyboard it's amazing experience and now we are at the account creation page so the good thing about making a account creation page after making purchase is that users can make purchase using a guest checkout which is much much lower harder for users and then users are motivated to create an account you may provide some reason for that for example you can provide like 10% discount for the next purchase or maybe you can provide like a delivery tracking feature right so why not let's sign up so email address is as you see already filled up it's nice because it was provided by payment request API the email address is already filled so all I have to do is to type my new password here and sign up and done and now if you look at the bottom of the page it's asking me if I want to store my credential information it's nice yeah so save this will make my next visit to this website much much easier so browser assist me to sign in but here's a new thing by using credential management API the things got much much easier by letting me sign in without a single tap to demonstrate that feature I'm going to swap device to a new one so what what is going to happen is that the credential information I have just for to my other device is synchronized across my Google account and it is now it should be now in my other device and hopefully it will work and yeah, let's see to be honest this sometimes fails so fingers crossed okay ready look at the bottom of the page I'm signed in yet imagine that you know you have to sign in by tapping something at least but with this you have no action required to get signed in and just continue your shopping experience this is really nice okay, can you turn back the page slide so sorry this beautiful integration was possible because of a payment request API and credential management API and I'm going to introduce each of APIs now so payment request API so payment request API provides some standard compliant online payment flow usually making payment requires you to fill a long form and submit that to the server but with payment request API you can instead filling out form you can just a few tap to submit the same information if there are no address or critical information already available users can just add them on the fly using the same native UI the address information can be stored and synchronized across devices and available from anywhere for their future shopping experience the best part of payment request API is that once those information is stored to the browser we basically have all the data required to get the payment flow get through the payment flow and without creating an account even for the users who have never visited your website before can make purchase and it's easy payment request API also allows third party payment methods to be part of the ecosystem anyone will be able to provide an app or web app to purchase payment in the future one such effort is under the pay for payment request API which is currently in beta and you can try it out to learn more about payment request API we provide integration guide and demo site and so on so you can just follow the link g.cho payment request API so integrating payment request API into Polymer shop we created component shop payment request nice thing about making it a web component is that the sum of predefined parameters can be set as element attributes element attributes declaratively like currency supported methods and request request pay or email and so on it's declarative requesting payment can be done through a function call because it returns a promise you can just continue with sending the result to payment processors when the promise results and now about the credential management API so credential management API provides a programmatic interface to the browser's password manager in a secure way so you can obtain or store users credential information on behalf of the user as you have seen at the Polymer shop demo you can enable OTS signing by obtaining the credential information then send that over to the server on behalf of the user which is authentication signing using a third-party identity such as Google or Login is quite popular because it allows users to sign in just by one top right and it also good for your security but the problem is that that kind of information is not stored to the browser so you forget which identity provider used to sign into this website right but by using credential management API it can even remember that information or we are a federated Login account you can let invoke identity provider's authentication logic to let the user sign in even if you choose not to use OTS sign in you can still skip the sign in form by using an account chooser without typing a password this feature is also useful for those who have multiple accounts so it's handy Android apps have multiple passwords by associating your Android app and your website you can share the same credential information between them so if a user stored credential information to Android app by signing up he can that the user can come back to the their the same websites associated website to get OTS sign in which is awesome to learn more about credential management API we also provide integration guide and so on so you can just follow g.co slash credential management API and integrating this shop credential management API and entire authentication mechanism was we created by shop account component we put various features into this for example form UI it actually included UI and loading UI notification UI as well as authentication logic federated login logic and credential management API and also managing profile data so it's very complex and the point is that a lot of different part of the app required to access those kind of information or logic so what we've done is to decided to split that into two parts so one is shop account the same name with all the UI related things and the new one is shop account data which handles all the authentication logic related things as well as managing profile data by adding i1 meta behavior to the shop account data we've made it available through throughout the app also by returning a promise things got much simpler by changing functions to reflect results to the to the UI depending on the context so recap PolymerShop I started with a PolymerShop demo and it integrated two APIs which is payment request API and credential management API and how we integrated these APIs into PolymerShop and lastly I forgot to mention that what about the TV rack I was going to purchase and what I've done was after abandoning my purchase on the checkout form I just went home and used open up my laptop and continue my purchase and it's happily sitting in my living room so I'm very happy and yeah I'm hoping I'm really hoping that that they will come soon where I could finish all the entire shopping experience using mobile web thank you thank you IG as somebody who has a tormented relationship with the input element and forms I'm excited there's something better than that next up we have Paul and Serma and I was going to make a funny but there's nothing inherently funny about a bald guy guy in a German Paul plays the saxophone Serma means manslaughter and finish they're going to be lively and life coding for you here so with your hands together for the Paul and Serma show I'm allowed yes I'm loud good am I yes I am how you doing how are you doing not bad at the back how are you doing at the front right I'd love the idea that you can figure out where broadly speaking people are from from the way they cheer I I came out the Tower Hill station this morning and yesterday and it reminded me the last time I was at Tower Hill was to go to the Tower of London with Paul Irish and we went on the tour by the way is not Irish who is shocking and we were there and the yeoman went are you ready for the tour and everybody went way in that British style apart from Paul Irish it went woo and I enjoyed it because the yeoman just went there's an American in the crowd I was like okay but I think he's allowed I think he paid it's fine anyway that's not what we're here for so so we run a show called supercharged on youtube.com slash Chrome developers well done well said hashtag branding and what we normally do is we normally spend some time live coding on a live stream some UI elements and we thought we do it live live idea of doing live coding if you've ever watched the show before we usually have the youtube live chat and I read it and I distract him with a question come up it really does today we're going to use the Polymer Select channel so for you people in the room the people watching the stream at home or at work wherever come into the supercharged channel and ask your questions throughout the live stream here I'm going to be watching the chat and reading it provided I can keep up yeah and I'm going to try to weave in all the questions that you have and get and we'll try to answer them if we know yeah so the idea is I'm going to build a UI element and normally they're quite practical like side knobs and stuff that you know not today it's going to be overblown and ridiculous or as ridiculous as I can bring myself to make it we call it showbiz we do showbiz right you can see what's on my screen so I may as well get started with code yay because we got that question all the time this is VS code yeah there we go snippets are your friend he's a past type or I'm a bad type of polymer summit give me a title right anybody wants to do like account how many typos he does I would be curious to see that don't do that don't do that right rel equals import oh async because it is the problem so much I do web components I'm not going to do polymer she's going to go I'm going to use the platform that's what I'm going to do I'm going to go straight and see I've never heard that before today I know weird isn't it you still platform hashtag branding damn okay href equals and now I'm going to make a here's what I thought let's make something where like imagine a disc and it's got like a value on the front like one two three four whatever and you click it and it flips over in 3d why not and on the back you can choose like one two three four and then it flips back over and show you what what the current value is sounds ridiculous enough good let's do it it's like a tab so I'm going to call it but in 3d I'm going to call it flip switch the HTML so right before in the show we have used custom elements yeah but only v zero so I'm I'm going to be new to the I actually like I plugged mayors I didn't watch any of the talks so I didn't know how how v1 works I don't know how anything so I I will be educated by this and I'll probably ask questions even you know the answers to well right so flip switch J s how's everybody doing in the chat we're actually suddenly we have a search of people coming in which is great awesome right so what I've got is I've got let me see see if I can explain what I'm actually doing I'm going to my first question would be you're in a separate file already which is just like no no doc type no I know right because it's an external import so I've got an HTML import with which I've called a sync because I'm been good about that and I've got my custom elements so my my theory was I'll use all the web component primitives that make sense here so I've got an HTML import which I'm going to use basically I'm going to have a template which I figure going to be stamped in to the shadow Dom of the thing that I'm making and then I have the the JavaScript itself so let's make that why not flip switch dot JS and friends don't let friends write out custom elements by hand they have snippets because I if I was left alone to write things like the constructor I'd forget to call super and that would break everything I don't know why it breaks everything but if you don't the browser will go yeah but if you put in super it's like sure yeah that's fine it's an html element now look for me this is already new because yeah previously you had and the constructor would never be called but inside you would have the created callback correct and now in we to a v one we apparently move to the actual which I like which I like you bumped it to v two there dude is oh whoa whoa don't do that VS code come back right let's do because by the way this is going to be see it doesn't like it it's like yes it's like no so let's make it okay with it yes lint and yes six and now it's I didn't know you were you didn't know it didn't find that's right let's make sure this is actually working console dot log flip switch oh there's my server come on yes that's a start so we actually have it's what did we just do it's figured out that seen now every time I switch I actually have a flip switch in my page and it's called the constructor and now it's spat out flip switch we're going to fasten this if you actually want to make some progress so I should get on with it right so let me make sure that this is actually going to work let's do some styles in here and I'm going to tell the host that I wanted to be background red display block with 200 pixels height don't be marking my with height 200% 200% 200 pixels that seems good units are hard I know now for me alright okay so now here's the thing what we're going to is we're going to try and stamp it into the shadow dom so I need to know because it's in an import I have to know which import it is so dot equals ask the main document current script yeah it'll be current script who's running which is this and then I say who's the owner of that doc there we go I own a document for that and he goes you know this one so now I can say wait so document and only document can be different yeah document is the main document the only document is the the owner of the current script which is the oh so I can now say doc dot query selector like so and I can ask for my FS temple which is going to need the hash on the front because it's an ID and then I can do oh yeah this dot attach shadow sounds so good every time I say it mode open open I'm going to leave it be open so what what is and yeah that's why he means basically I think it's are you allowed to access the shadow route from outside or not if I'm wrong somebody's going to correct it's probably on the chat but I'm sure I'm watching it it means that you can't so only people actually have the reference returned by this can use the shadow route if it's not open sounds about right okay that would make sense there and we're going to append child huh will say temple dot or content because you have to do that on the template dot clone nude deep is true who did you see that it was like all right this code was like deep yes do that right yes I've got a red block it's got to get more show business and we're done yeah and we're done see you later um right in the main page I'm going to let's do some myth busting ready style you know that I pull shut up uh the what do it with 100% I'm just going to basically make this thing take up 100% why not and let's see with height 100% let's see margin zero padding zero yeah and here's the thing when somebody tells you that you you can vertically align and CSS they're lying to because with two lines display flex flex and align items center center even I knew that there we go vertically aligned that and also justify just if I just see told you and now it's actually in the middle it's in the middle everything I love it it's so good flex box so good we I remember back then when you had to do like a zero pixel zero by zero pixel object and then do relative 50% and what's not shout out to spacer gifts spacer gifts those are good times okay I'm glad we have this chat it's feeling quite emotional right so that's in the middle and what I'll do is I will now start adding some stuff now if it's going to do that thing where it's going to see going to flip forward it's something which has got a front and a back so I'm going to make a container for those because I've got a feeling I'm going to need one yes I I'm going to need one because I'm going to put things like perspective on so div class equals front I will say front sizzle does what it says on the tin and we'll need one for the back as well back back back how's the chat doing so I'm assuming this is like the front card side and the back side eventually of the thing that you mentioned will be flipping that's the one that's the one so we'll say we've done something similar before with the 3D card flip yep where we I guess talk more about the shadow than the actual card flip in the end because we had to do it efficiently to get the 60 fps but we had the same so we had like a front and a back and basically one thing was becoming visible and the other one becoming invisible and things are flipping over front so if you don't know that watch that episode they're all on YouTube on demand maybe good to fall asleep with or something yeah the sound of our voices probably not no right so I've positioned them absolutely and told them to be with 100% 100% top left zero and I've decided to break out of the containing element because their parent which is container is statically positioned so we'll have to say position we'll do relative and that'll bring them back in and pretty yeah I know it looks amazing give me time give it time I've got a lot of faith in where we're going right there's still not a hundred percent wow you need to be with 100% that's why so the container needs to be 100% of the think they see now we are in the middle but they look ridiculous so let's fix that and what we'll do is we'll set background oh oh here's an idea let's do color huh yeah oh custom property one a three two this will be a greeny color of course you know that oh by the way just just because that before anybody calls us seriously yeah come on a three is more than two six and one all right well done fine fine by the way just just I I don't know what we're doing today but Paul to be fair we wanted to say that he did rehearse this because we are strictly time box this time and don't have this dream where we can go on as long as we want to and you know so this has been rehearsed by him not by me so I'm thanks for telling them that I didn't just figure out that I was green by myself okay so right we don't need the red anymore because we know that this is working okay so we've got the front and the back and the back is sitting on top of the front which isn't kind of really what we want we actually want a front and a back face right so we want to rotate the back face by 180 degrees so wait what the back like front side and we got a front look we've got a front and a back yeah so the front is facing us but the back is also facing us which is ridiculous that's not real life so you want to the back has the face away right okay cool so we're going to do a transform and 180 degrees like so and now the back is it is it is back but because the way 3D transforms work they show you the back face of the thing by default it's back face visible I mean back face visibility visible so both of these will sell them just yes that's right sorry back back face visib visibility I can't hide today and hidden okay that will make the back is still there but it's now actually hidden away which is ever done any open GL web GL work you will have encountered similar behavior that is calling exactly background so if you had to flip something around sometimes it's visible sometimes it's not depending on how you configure your engine okay so what let's do the bit where actually flips over because that's more fun right so in order to do that what I'm going to do is on the host I'm going to set a perspective value which you always set in pixels perspective 500 pixels and what I'm going to do is I'm going to push the container back 250 pixels and it's going to be kind of become this pivot for us and I'm going to push the front in the back another 250 and so that when they flip forward they're going to be at zero does that make sense I guess yes let's find out let's do translate transform transform we don't have theory corner here we could just use like a good flip or just draw we do actually have a theory corner or what do you call it theory echo theory echo I see that's the German it's a little bit more tell them what tell them what the German it's so good there's going to be a pop quiz later so memorize this it's going to be awkward if you can't say it I can't say it right so I've pushed it back in to in the space or Z space because we're in okay so does the Z go into the monitor or out of the monitor there's a negative Z values go in also the axis goes out I can never memorize it well here we are so it's at the moment it's basically what was it it was like 133 pixels right and the reason is if you want to work out how much something is going to get scaled down or up by it is always the perspective value divided by perspective minus the distance which was minus 250 this is literally in the spec but it's in like in like no liner by the way if you would like to know this is the math you're always looking for it's like so now that's why it's like 133 because that's like 66% of the 200 right so that's why it's that size so what we'll do tell you what we'll do we'll push the front in the back for back like right now which is good could be more are they asking anything like like Rob is almost answering anything but yeah sit they go Bob dad shout out to Bob means you're I don't want to say you're redundant but I'm glad you're here with me and I'm in the chat shout out to Surma yeah my safety Surma you see when I go wrong right I put the you might not seen actually I put in the extra transform but it didn't actually do anything like so it's still at 133 whereas you'd expected to have gone another 250 pixels back with that's not going to happen the reason it's not going to happen is this the flips which has a perspective value of 500 the container is pushed back by 250 pixels but then we push something else another 250 pixels but the containers in the way between the the item with perspective on it so it goes lol no what we have to do is we actually have to ask the container to preserve the parents perspective and pass it down to the children which we can do by doing trans form style preserve 3D and now it will get smaller okay so that now it's basically said okay I'll take the parents perspective pass it to the children so now that's all good isn't it how are we doing for time we're doing all right we're doing easy yep okay let's so we were doing the thing where the container what will do is we'll flip it flipped so one theme in the questions is right now like is it going to work in Firefox is it going to work in Safari with polyfills yeah with polyfills it probably would work right now we're just this is as always we always say this in our show every time this is not production ready code no we're just we're doing this on stage this is probably going to be horrible so just don't just copy it and paste it out but this is about to the technique and it's going to work in Chrome right away because we're developing Chrome and you probably can add some polyfills to make it work everywhere else this stuff if you didn't use the HTML imports if you didn't use the like shadowed arm and all that you could make this completely work as far back as whichever browsers were the last to get 3D transforms so I think I don't know it's it's it's it's if you want to cry try to make this work and I attend it's your your homework right so basically what I've got is a good container and when the container gets a class of flipped it's going to rotate x 180 degrees because it's in the pivot so we should see our cards basically go over now what we have to do is go back here and we're going to have to ask for the container this dot container equals the route dot query select her and what was it called it was called container that's why I can't people are asking you to zoom in a bit zoom it like this bit why not yeah okay fine also on the website maybe hang on although maybe not this dot well oh so here we go our event listeners our event listeners so I like I like to do this I like to have the the poll trick I know I just know I I'm not going to do that today I'm just going to do this I'm just fine but I'm basically document our event listener when you click I'm going to basically do it this way just so we can check that everything's working like so and so I need a function called flip so you're also giving the element an actual api I am giving the elements an api and I can just say this so nice of you container dot class list dot toggle flipped right which is going to do nothing oh no it is it's I I'm an idiot you don't have the dot in there you only have in clear select there you go right zoom that in a little bit for now now it's now the back is upside down which looks ridiculous so and it's not animating which is also ridiculous so let's fix both of those transition on transform and we'll do not point eight seconds and I do honestly think this is one of the nicer easy now curves not point six not not point three one oh that's a new one though I know I don't normally use that do I usually have zero zero now you see that since that's broken in it that's really broken let's fix that as well do you know why I know I don't I do because I've seen this bug before the front then I override the back with its transform rotate the rotate why so I need to put that in there so that remains so we have a question hang on hang on there you go see how that's woo the only downside is that's actually upside down because I suppose if I did that with my hand my hand and upside down it is physically correct in that sense yes so let's rotate it in Zed like rotate it with like that through and then like that just like that so 180 degrees and yeah look at that showbiz right what's the question you added event listeners in is in in on connected or if in something like that yeah so I'd normally have so if you if you remove the element from the dome and move to somewhere it's and edit it you would have multiple event listeners right I would normally in a disconnected callback I would clean up remove event listeners for time production ready code well oh yeah I'll put that in front right where were we right so the thing is when you when you click on this that's kind of okay but let's let's actually add some buttons because we I did say we're going to have some buttons which will do in here so we'll have a button speaking of now that you have basically had experience with both both v zero and v one yeah of custom elements and maybe even shadowed on preferences differences doesn't really matter no I rose by any other name I think it's still awesome I really like the fact that it now uses the construction sort of created callback I like that you and I really I mean this is just attached and detached callback by another name an attribute change callback is still attribute change callback so for me mostly this hasn't really changed this one caught me out that you have to if you're going to change an attribute you have to declare as a static which I guess is a performance optimization is like these are the only ones I care about and it's called custom elements define and not register element don't register on it was before but mostly you know it's just syntactic changes it seems like all right I'm really quite fine right so we had buttons on the front right yeah it's got really attractive looking one and one two three four okay let's style up the front button let's do that it's oh dear right front front button right with see how much I can do here 100% height 100% or let's say repetitive I know right border radius 50% because we're going to want that outline non because I'm going to do a hover state and let's in self I'm going to do font size 60 pixels Oh background border none don't want any of that yeah okay color make a white color there we go right let's do there we go someone is suggesting using mix in for the sizes which I guess would make sense but they're you know vanilla that you know what yeah absolutely yet anyway is in production totally use some tooling here wouldn't you like I'm sass focus but the everything we're using you can see on screen more or less only thing you can see is the python web server and that's about it so here's what I'm doing using a box shadow which is going to be in set in set with like zero on the x y zero on the blur these x y and blur all zero and then a 10 pixel spread which will bring it in 10 pixels she's kind of cool and then we'll do a naught not not not point for there you go why not and then we get that right that's fine now on the back ship it ship it's done would you stop it trying to save time here I know but they're expecting I was with a content back back we'll do the back buttons Oh I get to do something I quite enjoy on this I think 25% because there's four of them so make them smaller make that a little bit smaller someone suggested that we should use a transition box shadow and does that a no no no no no no no bad no no if you don't know yeah that is what the card flip episode was mostly out you don't animate box shadow you don't do that never do it because it will trigger paint on every frame of the animation and so far you've seen me stick to transforms and you'll see me stick to transforms and opacity for that reason they are the always the only only properties that today will animate in an accelerated version which basically means that we create layers for them on the GPU and then we can move them around with the transform or we can fade them in and out and that's really really really fast tends to be faster than all browsers painting on every frame it's a gamble you might get away with it if you got a mobile you mostly will not you might know you probably won't and I think you can with a lot of slight it was a bit of slight hand depends on the the thing you can get away without usually transformed opacity nothing else is differently I'd probably use a before or an after and I'd probably do that box shadow on it and then I just faded in and out or I'd scale it or something there's ways to do it which don't involve paint mostly right where was I I was doing the background for this wasn't I var we're going to do like an inverse color thing going on so on that side it's like that and then whoo one two three other inch oof let's make that smaller four okay now they look ridiculous where they are don't they so let's put them in a nicer place or position absolute top 50% this is one of my favorite little things as well is you've got them they're all they are actually in the middle but it's the top left corner that's in the middle and sometimes you're like yeah but I'd like to just middle middle would be good you can just do a translate transform translate minus 50% my house the the fun fact here is that in this case your translation works on users for the percentages the the dimensions of the elements are being used and not the parent so handy so handy so good right so now let's see we got backbones but let's position them in a little more right nth of type one I'm just going to assume we've only ever got four boxes because you know it's it's prototype code so so one two three three and four right so button button one button one here we are is going to be staying minus 50 and we'll bump it up by another 100% there we are two is going to go out to the sides are you going to like like a ring around yeah like one one two three four like like like a game pad thing yeah what we're going to use the game pad API no shut up let's find out if that works this I mean normally you just sounds about right let's find out one two three four yeah okay cool so we've got buttons but I think because these are they've got to transform here as their default and then they've got to transform here we could take advantage of the fact that their parent gets flipped and so we could just do a nice little animation for them here by doing this and then let's do I've got already got it don't repeat yourself poor grab that let's make the button animate so now you probably didn't see that that's slow down slow it down animations great feature of deaf tools by the way slow it down slow oh you can see it yes yeah there's little spread it let's you could put a delay or something or like a curve or transition delay I know some stuff you do no loads of stuff 0.1 0.15 let's delay the animation and we'll do it you know you know I think that a bit of delay that there we go so you see how they spread out the end and then yep yeah that's good right let's do it so they actually change the value now when you actually click on one of those buttons let's actually have it update the the value on the front so we can do that with oh let's think about this let's do a set or to get a set value I know I've gone fancy I know right so good this dot value who equals value fair enough except that you've got to make that an underscore poll get value return this dot value and what we can do is we can say this dot front you dot query select this is bad but I should really be caching this instead of asking for every time dot equal and then again value and we need to know what front is because we don't currently have it equals this dot root dot query select front front front they are same for the back yeah because we're probably right so we're going to need the back so just saving the references to these two elements we know we're going to need it yeah right so what happens is we basically got the front it's fine and so what we need to do is we need to say this dot front when you click anywhere on the front because the button takes the whole thing we'll just flip the thing yeah this but we'll delegate to the back in case we do sometime decide that we want more than one button and we'll say when you click and I give me ideas I know right what we'll do is well there's a there's going to be a problem with this we'll do flip but we'll do this dot value equals whatever the target was text content I'll do it so we basically I'll you could at least use something alright so if we click on the for there you go search setting the value but the promise if we click on the back working as intended awkward good news is there are the most ridiculously named properties on an event there's the current target and the target if you don't know that's because events bubble it's just I don't care it's target current target are you the current target know I'm the target how's that different don't know ask the current target if the event target is the same as the event dot current target which basically means and I think that you clicked on the target is the current target which is the thing that was actually so have the event basically saying have you if you have not bubbled no yeah yeah yeah if you click on the back itself rather than a button yeah yeah then we're just going to return right so this is like if this is is the back right so hopefully that will work so it doesn't do that but now it does do that that's that problem solve right so that's all working I had an idea let's make it a little more showbiz whether we had a question by the way Orison no are we doing DOM operations in the constructor right now because that is apparently not recommended other than attaching the shadow are we doing query selector which sure how many works right I'm going to walk into some Matt is not going to be out hi Matt yeah come on do the thing at Palm Smith okay Matt I'm going to undermine everything you say sorry about that um okay so let's see right where were we oh yes we're going to add a ripple a ripple ripple everybody likes a ripple ripple how very material of you I know div class equals ripple now let's add that in in case you didn't know by the way uh all of our episodes the the code that comes out of those is on good up this will also be on good up on it's and the Google Chrome org on good up called U I element samples if I'm not mistaken we probably have a link on screen hopefully there's dashes U I dash element true you uh you'll find it we'll also have it in the description and the video on demand later on so go there if you want to play around with it yourself in IE 10 or whatever let's see about yeah uh absolute left 50% top 50% this sounds really familiar doesn't it transform translate trans halte trans 50% minus 50% this is going to position the ripple were you didn't see that it's it's fine I expected that because I know the border radius now we've got a ripple and that looks I know just bear with me so it's actually it's actually quite nice aesthetic I have to say right don't get distracted Paul uh ripple expanded right because we want to expand and uh and contract so scale down to zero I'm going to scale it down to zero and then I'm going to scale it up to one when we call this class now it's going to go like yeah but we will want to transition untransform so let's make sure we've got that in place because otherwise it'll just pop like that the official sound of popping uh because ripples it's got quite a long way to go so I kind of like it when it just gets on with it so make it a touch faster than the actual flipping over animation so we've actually got to tell the you know we've got to toggle that class well it's good because we've kind of got that stuff already in place uh ripple ripple it's actually interesting question we haven't seen a single world change in your code so far why is that give it a moment I'm sure of the class list dot toggle also actually have proven that it doesn't paint right but that will I will paint let me show you that it will paint let's choose let's choose a different color where a green is like DevTools uses green to indicate painting so that's kind of not yet whoops let's do Rebecca purple see I didn't even have to say people were asking for this color in the chat what a lovely color hey anyway there you go right so now we do you'll put a green flash on the screen like that see because you're hovering the border has to be added and therefore paint is happening it needs to be painted like literally now during the animation because it's an animation on transforms Chrome goes ah got this I'm going to give it its own layer which is a bit like in an art package right when you make your own kind of layer and you do some painting and a but at the end of the animation it goes cool don't need that layer anymore bye bye and it has to repaint that bit so you'll see that it goes and then at the end you see that green box around the the ripple okay we don't want it's basically if the flat of all the layers back down to one single image so to speak on the GP so what we can do is we can say to Chrome and it also works in Safari and Firefox we can say listen ah that ripple like if you're seeing the ripple it should have its own layer so we just do will change which is the way to do this you can use the and there translate Z zero before in the histories of ever yeah everybody uses will change okay apparently okay okay but if you hadn't and you've seen translate Z zero or translate Z zero that's exactly what it's doing visually and no up but it was a heck force of fire back then back in the day and then it was every other browser pretty much since was like oh you're putting a 3D transform that means it should have its own compositor layer I should do that now but will change is the kind of the standardized version and so at the end of this see how we don't see that paint anymore and if we actually show layer borders Chrome will show us anything that it thinks has got its own layer with that actually visible you can see that and that's really good for us here so this one will have it because of the fact that it's got the perspective on it so it knows there's a 3D transform here but the ripple gets one because of the fact that we've told it it needs one what there there is a list of properties that I don't remember yeah I might link to it in the chat there's like a list of transfer a list of CSS properties that force an element to its own layer and from there and you can do accelerated animations okay I've set the size of the ripple to one pixel which seems inadvisable because you won't ever see it however the thing is it wants to be the size of the screen right we want it to kind of take over do like a full takeover which means it's like do we we do okay so we need an a resize handler to kind of figure out okay how big does this ripple need to be like the radius of this ripple so I set it to one pixel because you know I know I'm going to have to figure this out in JavaScript so what I'll do is I'm going to make an an on resize resize like so and we'll do window dot add event listener resize this dot on do you know what that's going to that's going to fail but I'll show you why that's going to fail in a little bit right const middle X now I'm going to make the assumption that this is always in the middle of the screen if we have time there might be a more generalized version that I can show you middle of the screen is the window dot inner width times by 0.5 and the the y value is the inner height also times by 0.5 something you could use here if we were really bleeding edge we could be using the new resize observer well it's it's that is a thing I coincidentally just wrote an article about it I'm posting a chat right now hashtag personal brand go read it maybe okay it's basically an observer that only notifies you when a resize happens and not only on the window but you can do it on elements so it's basically the event for elements and it's amazing I encourage you said but right now it's only in canary behind the flag so that's a little bit keen for me today yeah so we need the Pythagarian distance don't we we need the the we don't math now we are from there from the middle up to the corner whichever corner is nearest was because it's in the middle it's always the you know pick one and so the radius will be the square root of mid x times by mid x mid x plus mid y times mid y and then we can say this dot ripple dot style dot width equals template tree radius times to pixels put a space in pool there's a good lot height also the same thing that didn't work great hate it when this doesn't work okay fine why didn't you work Oh it's because I didn't actually call it awkward right this dot on resize we'll do it we'll just do it here for now yay and also when I resize it it breaks and the reason it breaks is if we were to do console dot log this who ah and we say was wondering so the first one yeah the first one says oh yeah this refers to the flip switch but because of the second one is window dot at event listen I resize it goes this is the window which is no use to me so we are in the age of years 2015 but even then sometimes a bind is still necessary no I'm so going to bind this oh look at this I'm going to like this Paul Lewis way or the normal way let me explain why I'm doing this that looks horrible this is basically a vision every episode yeah I'm proud of it not proud of it it's just necessary it's going to be in the pop course let's not fine right the reason I do it like this is because I want two things I want to be able to refer to it by name because if I do my tidy up which I promise when I do push this to get hope it will have the disconnect call back stuff filled out I might even move that to the can this stuff here anyway but the thing is I want to be able to refer to it by name so I want to be able to say this dot on resize with my out event listener and my remove event listener that's one the second thing is whenever I call that function I want this to be always referring to the instance I do not want it to refer to the window or anything else so what I do is I take a copy from the prototype because it's a class that's exactly where this currently lives on the prototype and I'm going to take a copy I'm going to bind it to this and then I'm going to shove it as an actual property on the instance itself so as you're overriding it basically yeah so that that then always means that no matter what it will always refer to the flip switch there is actually in years 2017 I think there's a proposal for a double colon operator cause there is that would be this colon colon on resize which would achieve the same effect but it's not there yet sadly it's jittering because I'm plugged into a monitor this by the way it runs great when you're yeah I know okay last thing I feel like we should have shadows the audience does not seem to care they don't care I'm doing shadows okay well done I like you I like you very much okay let's do a shadow shout out to shadows shadow to shadows shadow right we did like a two pixel one and then yeah stick with me shadow two pixels okay it's going to be with this sounds really familiar height hundred percent background this is going to be a black shadow to begin with and let's see position absolute top zero left zero border radius 50 percent and what a great shadow I know right looks amazing it's actually like a record I know then that's not the only thing I do I do a great Billy as well if you'd like I don't mind I could do though I if you ask a question I might respond in my best Billy don't mind whatever anyway going back to this which was not code Paul code focus now the thing is that you remember the container got pushed back 250 pixels and the the front and back got pushed back another 250 pixels and they were half size which we can confirm is 500 pixels minus I'm sorry over 500 minus and then the distance they moved which is another 500 which is 0.5 so they are half scaled at the moment double negatives are too much I know but it's true it's half size so we could put the shadow inside the container as well but then when that flips over the shadow is going to go a little bit wonky so let's not bother with that what we'll do instead is we'll cheat and we'll do a transform and we'll scale it now it's hidden but it is there right it's there but let's translate it down a little bit translate why two pixels yep just a couple so it's peeking out of the bottom there it is but here's what we can do as well we can also you can make it look blurry by adding a box shadow but if you get it wrong let me see box shadow not not now it's half size so my two pixel blurry shadow it's gonna have to be four pixels and we'll make that black as well now yeah no man oh you can't see that you can't see that change the color again I need to I need to blur it that's why so I'm an idiot they are ah right let me get rid of this there we go oh it was one many numbers okay okay right yeah so interesting question why not filter blur we have run into this problem before I think yes filter blur why wouldn't you use that because it's a post-processing effect which means that when you when the frame gets shipped to the GPU the GPU goes ah do I need to blur this yes I do and if the animation is if it's changed at all if the pixels have changed at all it will go oh I need to blur this and that will happen on every frame and blurring on every frame is incredibly expensive so it's like a post-processing effect that you don't want to be running on every frame it's actually very good if you have you know some static content that you don't and the deceptive thing is actually that like paint flashing will not show up no and the tabs rendering but outside of it and the post-processing pipeline so it's really deceptive that you think you have done well into the performance and actually your frames get really slow okay back to the shadow if you can see there there is there is a shadow but you can see that it's I've got the hard edge of the circle and then the shadow kicks in if you add a bit of a spread onto this it kind of see how it's now like a blurry shadow you could zoom in with control and mouse wheel right and I don't think I can no I don't because I don't think about the things which thing with the thing again very articulate let's put that back where it was right looking good okay what we'll do is we'll add a another class to this where it goes like flipped here and we'll we will you know how the those the disc let me just zoom out a little bit more the disc goes from like there and it's like big and it's like 200 by 200 again well since this was 200 by 200 when it wasn't scaled we can just get rid of that downscaling so now be like like the right size so now it goes back because if you don't define it goes back to scale one implicitly and that means it will zoom I will get bigger exactly let's transition on transform again so that it moves nicely so let's do that and we will have to add that into the JavaScript won't we to make sure that it actually gets told what to do so shadow two pixels shadow how's everybody doing on the chat I've been forwarding a few questions we have 115 people by now in the chat which is nice can we get to 200 I don't know neither if only there were like 200 people in the room with us we have enough people actually in the room which is scary enough they're watching you type there you go okay so that looks kind of rubbish because the the animation is I don't the thing is it should flip over as well right to show it again rotate X well I'm gonna let me just put that in there we go slow it down yeah I think it's doing a double flip isn't it nah no it's not it's not now it's obviously a lot darker than we need a shadow to be so let's fix that by dropping the opacity to zero opacity from 0.3 0.2 0.3 magic numbers you're good at them I am right now the thing I know about shadows I was about to say don't think I'd like lighter when you they do and they also get blurrier now I don't wanna change box shadow like I said but I know that we could fake it to while you make it that for monica yeah yeah meanica I'm calling her now because she was mean to me yesterday because you ruined her day yeah well she ruined my day yesterday by calling me mean so meanica there you go hashtag revenge okay let's add another shadow which will be exactly the same as the two pixel shadow but we'll make it blurrier error error and so be exactly the same as the two pixel shadow but we will say that its box shadow again we'll have to double the numbers because it's going to be half-sized 24 pixels I'm going to give it a spread of 16 pixels and when it's flipped over it's actually gonna be the same deal isn't it it is it's going to be the same deal it's going to do the same transformation except I think what we want is we want the opacity to be zero here and then when it's flipped we want it so we want it we're going to get a cross fade here all being well I'm going to make it 0.2 we actually have to animate not just the transform though wait there should this be shadow four or two people because you have shadow no I'm stupid you okay yeah I feel good I was no I'm going I was my own rubber duck just now sometimes saying it out loud you realize that you're wrong hey it's a great feature that's why some developers have an actual rubber duck on the desk and if you have a problem you have to introduce yourself to the rubber duck and explain your problem and they will be most like they figure out what the problem is he's my rubber duck because that's all I'm good for you're not just good you you so okay so now we don't actually seeing what I wanted to see see say that something wrong you did well I'm easily confused the yeah yeah I've got to set the opacity to zero as that there I think yeah so the other one is not showing up and the reason is not showing up because in the JavaScript we've not told it to show up so we need to grab hold of the 12-pixel shadow like so how are we doing for time we have another one oh we're doing fine yeah we're good we're fine I mean I'm not sure we want to go with this eventually but this is like pretty decent I guess doesn't like that class list of no where are you so oh I haven't helps if you put it in the dump all there you go huh can't do anything that with something that doesn't exist look at that slow down slow it down we'll totally get away with it that's the thing like if you slow it down you'd be like it could be better but at 100% speed you can't even and if nobody's expecting it with the first time you show somebody and they're like they're like what have you made and you're like nobody expecting they're like do it again you're like no no I don't at that point that was I don't do my tricks a second time at that point they will just be clicking the buttons because it is actually so much fun it is quite a lot of fun okay wow okay tell you what we'll do a couple of things let's make it so it's a customizable color hey let's do color equals red red which means go on we've got a question the question was why don't we determine the state of the shadow and the shadows by the already existing classes and elements instead of introducing new JavaScript I think it's possible but right now we don't want to juggle all of this in our heads or in your head specifically true there are two reasons why one is that I didn't want to expose the class that it was open and expanded and whatever else flipped over on the actual element itself I see ideally so I had to make sure that it was going to be done here at this level and now you could make a containing element I suppose for all of those and then use a single class I mean sure I guess that would work PRs welcome exactly yeah we have got enough PRs on the repo actually I didn't expect on our prototype elements to get PRs but people have people do that it's great so you are very welcome to join us on the repo I linked it in the chat good work you not you good you I know thank you you did great right so we can set a color attribute and we will or attribute as some people pronounce it I've always been an attribute even attribute or an attribute attribute attribute but then again I'm not even a native speaker so what do I know you know plenty so what we'll do is we'll say this dot color equals this dot get attribute color and that means we're going to have to have a setter and a getter so we'll do set color color why not and let's see this dot color equals color now I'm actually up to date up to date we can use color wasn't there a movement but it had every custom attribute had to be data's dash something is this now fine I don't know if you know let me know in the chat I can know that you seem good but color actually exists so it should be fine to use right I think font color is actually like font tag with color actually exists this is going I think this is going to be fine as long as it going to work yeah the problem is I put red in here but I could be like I could put whatever I want in there and you know what we should actually totally handle that situation if we're going to do that so yeah I was thinking about this and I was like teach me Paul you know who's like really good about colors that you give to the browser the browser is really good at it so I was like why don't we do like a div and then I can be like div dot style dot color equals color and then if the div dot style dot color is empty because they didn't like it we could do like console dot one and be like color not a color a real color do first well done passive aggressive warnings this is what we call British console well done you any other great suggestions should probably delete now if the style calls empty or just doesn't like it otherwise this dot and then we can do this dot style set property who said property and then we could do that color that I did before and then we can do color I didn't know what's that property so all being well who didn't like it I did it warn me oh wait it was like I left it is here not it not real color well done Paul good all right let's it came right back to bite you really did I like that oh you go it's red oh it's red there we go that worked out just fine for us and if we don't have anything at all it's going to hold it's going to say null is not a real color which again it's a bit over the top so we can do is just say if there's not a color should put it if there's not a color just just call it a that's fine so already fault color is going to be the one that is actually in the style right now yeah it's the Rebecca purple and then if you set it now I suppose what we could do as well is if you change the attribute we could just say if the attribute color is a switch case now you know future proof it I say we now we're just we'll return we isn't it what color equals new value now that will do absolutely nothing and the reason is I haven't told it to listen for that so if I do dollar zero dot set attribute color red it's going to you think that would do something but because you mentioned earlier I did the attribute change callback does rely on this observed attributes so if we do to last yeah and we do that damn we're done that's worked right how we're doing for time we got five minutes so then I can make the work with multiple ones who I know right I was about to ask about the no yeah because we're doing the good old flipping thing there's things there in the dawn but on the screen about the accessibility yeah now I think if you're going to do something as overblown and ridiculous as this in production you would want to watch first of all Rob Dodson's inert polyfill Ali casts episode which is brilliant get hold of the inert polyfill and make sure that as the animation finishes with like a transition end you'd set whichever side is not visible to inert which basically tells the browser you shouldn't be able to tab into this it shouldn't show up for screen readers not because as of right now you could tap to the four buttons on the back even though they're even though we can't see them you can still get to them which is bad so expect by the time this goes to get hope expect me to have added the inert polyfill but I hope just post with that video in the chat I wonder why what a hero see look at that color equals one EA three two six that's a that's green don't know if I mentioned that there you go now the thing is the moment you remember back back when I said that we were going to assume that the the ripple was good yeah so that's not working anymore now and also while I'm here it's quite annoying exactly feel like I want to click on the the ripple to get rid of it so let's just I didn't notice how quickly just added another one because custom elements that's so good so good so good right let's do that and we'll do if you click on the ripple so now if I do that see now there are two problems one is that when you click on the green one the purple one still visible which is bad and secondly that ripple isn't big enough so we'll fix both of them and we'll fix them in turn and what I'll do just to make my life a bit easier right now I'm going to do the flip switch and I'm going to add a model class and I'm going to put a z index of it of one and then what I'll do is in the JavaScript I will say when you do a flip we'll say this dot class list dot the add model fingers are getting tired I know right all the fast typing there we go so that will then zap it over the top of that but it's pretty that was up over the top of that but the bad news is they've both got the model class on which means that we're back to where we were so now all we need to do is in the add event listener what we can do is we can say this dot container add event listener who had event listener and we'll say on the transition end transition very underrated event in my opinion it's really good we will say if this dot container dot class list dot contains which is also incredibly handy flipped so if this is the one that's actually at the end of it so there are two transition ends one when it flips forward one when it flips backwards the one where it flips forward this class is going to be that's going to be true that if statement so we can just return other than that we want to say this dot class list don't remove model because it's gone it's the one that's when it's gone back okay so we should see all being well yes good yes no longer broken that's good that's one out of two well that was that wasn't broken it wasn't just visually I'm pleasing that's broken okay right let's do the other one very quickly one minute to go the thing about this on resize is is that it assumes that we're in the middle of the screen which we aren't so first things first the problem is we also call it here in the constructor which is a bad place to be calling it because by this point it's not actually being added to the screen so we if we call that if we call the on resize and we're trying to figure out where it is actually on screen it's not going to work out too well for us what we want to do is we want to do it in the connected callback when it's added to the DOM in this case we'll request an animation frame which basically says waiter frame until this thing is definitely being added to the screen to the DOM all the styles and everything's figured out everything's up and running and then call the resize so that's one thing we're definitely going to want to do now in the resize itself well mid x and mid y are no longer the middle of the screen so we'll do const position equals this dot get bound in client rekt which is one of my favorite ever api's it's been around forever and it basically tells you where this thing is on screen it's with its height it's left it's top it's right it's bottom it's a brilliant but be careful it does force it can do if you've got pending styles if you've made a change to your classes or your styles and then you call it the browser has to go hang on a minute I'm just going to apply all those styles and then I'm going to run the layout and then I'll tell you where everything is on screen so be careful with it in this case do all your reads get all the dimensions then do all the dumb changes class changes bet your reads bet your rights exactly and in this case I know there's going to be layout post a resize anyway so I can afford to do this certainly here so do position dot left plus position dot or width yeah that's all right that'll take us in the middle of the box and the same is also true for the top and the height now the good news is that will sort of work for this one look at that but it won't work for this one because it's nearer the top left corner than it is the top right corner and so we actually want to account for it which way everyone's the max do you see what I mean we have to kind of go you're going for the the left corner or the whichever one you're nearer is the wrong one go for the other one so we can do is we can say let's have two new variables because why not rx equals math dot max mid x or window dot inner width minus max one of them mid x there we go same goes from for y why here we are there we are height minus mid y and then x are wise that all makes sense hopefully maybe you do the math there you go one two looks good they both work they're customizable we've done some showbiz we're all out of time thank you so much for hanging out with us get out of here hey my stage it's meanica make your site faster make your site faster it isn't fast enough well that was absurdly excellent we have a break now there is a code lab on building custom overlays by valdrin if you are interested in that and we'll be back at 415 see you soon last talk of the day they gave me a fancy mic now our next speaker doesn't really need an introduction he gave us service workers he gave us PWAs he was in glee club as a child and they were called the ambassadors please give it up for alex russell so that last thing about the glee club is completely true that was called the ambassadors it was in carmel indiana if you've seen the tv show glee it's basically that the joke was that it was 30 suburban brats and a perfectionist and it was completely correct so normally when I get up to give a talk sometime this year I kind of put this slide on stage and I'm really surprised not to be giving a progressive web app talk today so francis barerman and I named progressive web apps last year and sort of taken off since then and we've been working on a bunch of technology behind that and then starting about 2010 I guess four or five years ago I worked with alex comroskey and dmitry glaskov and we started the project that created web components it was a we had a bunch of new features the javascript the language too and so I spent a bunch of years working on the platform kind of from a lot of different angles with a lot of folks who are actually here today it's kind of great to see everyone out but since 2012 I've basically been working on other stuff I haven't really been involved in day-to-day web component development and so this won't be that talk I won't be talking about progressive web apps I won't be talking about web components I won't be talking about ES6 I won't be talking about any of this stuff basically that I've been working on for the last couple of years and yes you should probably make a progressive web app you should probably use the purple pattern you should probably adopt the Polymer app toolbox but what I want to talk to you about today is why the purple pattern is so critical to mobile and I know that mobile isn't everything yet it's about to be everything mobile is basically about to be all of computing and if you go to emerging markets it is basically all of computing the next billion users who come online will probably only have phones they'll have devices like these actually they won't be devices anything like these these are seven hundred dollar phones this is an iPhone 6S this is a Pixel XL these are seven hundred seven hundred fifty dollar phones basically nobody has those and what people do have though are phones like this is a bag I carry with me everywhere we'll talk about this in a second they'll have they'll have phones like these this is a hundred dollar phone from last year's Android one lineup in India it's dual core we'll talk more about that phone in a second and so because people are running the software that we make on devices like these what we're finding out is that we're not succeeding on mobile we basically aren't so I've been having to say things like this to the JavaScript community and it hasn't made me any friends in JavaScript land and in fact I'm a little bit surprised that Matt and company invited me to give this talk at all because I have been making the polymers very sad too Scott Steve Monica Frankie and the rest of the team will tell you that this is basically the PG version of a bunch of conversations that we had where I would walk up with say one of these over to their desks and be like why is this slow and I would do that sort of continuously once every couple of weeks I guess and and then eventually we had a bunch of really uncomfortable meetings where they would show me an awesome new thing and then I would pull out a phone and I would plug it in and I would say this is really slow why is this so slow and at some point I think it was Steve who you who you heard from yesterday talk about being lazy and I would say things like you need to be more asynchronous you need to like stop doing so much work up front like you need to like split these bundles up and he would say stop telling us what to do just just stop tell me what I need to hit and so put a finger in the wind and came up with a you need to be interactive in about three seconds on a simulated 3G connection on a call it a $200 device and this next time that I visit that same application I need to be able to interact with that application in less than a second okay so they went away the stages of grief happened nobody was very happy about it and eventually what they came back with was the purple pattern and we'll talk about why that's so important and this is pretty desperate stuff coming from me like I am not the sort of person who generally would be saying that you need to stop loading a lot of JavaScript I've spent years of my life trying to make it so that you have more power when you have JavaScript inside of the browser spent years working instead of tc 39 I persistently advocated for extensibility so that the bits of the browser process the threads that you haven't had access to like the network thread bits of the UI thread the compositor painting layout obviously the parser with web components that that you would have access to those and you'd be able to plug into those with script yourself and in a past life I even help make JavaScript frameworks with Scott and Steve so to get to this point takes a lot it takes a lot for me to say you need to stop putting so much script in your apps you have to have really failed pretty badly to get me to be sending this message so how do we get here well I'd say that we've pretty persistently failed users on mobile devices and I think if we put the rail model back in our heads we can sort of understand what that means obviously we talked about the rail model a bunch over the last couple of days but we want to respond to user input in less than a hundred milliseconds we want to animate everything in that sixteen millisecond budget to hit sixty frames a second but that means that we probably have to do our work on the main thread in less than eight milliseconds per frame because we have to wait for the browser to do the rest of its work and we need to make sure that we're chunking up our idle work into that we can remain responsive and get input process so we can respond in under a hundred milliseconds and when we load when we start to take an action inside the our application we want to get back to that interactive state in about a second so this is long term user research been validated in lots of ways a thousand milliseconds is a really hard limit to hit getting to a second interactive in a second when you load a document it's really really really really hard thing on a fast network connection on a desktop mobile is so much harder than you think it is so how fast could we get like if we probably can't get something loaded in a second what's realistic well I think three seconds on a 3G connection is realistic for something that you can interact with and this is sort of buttressed by some data that the double-click folks went out and researched and they came back and they said there's real money on the table this really caught my eye 53% of visits are abandoned if a mobile site takes more than three seconds to load and in the same report they said the average mobile page takes 19 seconds to load collectively as a community we are not succeeding on mobile we are not succeeding on mobile okay let's just let's just accept that we can be sad about it and then we can figure out what to do about it but we have to accept that we are not succeeding on mobile and so I think it's worth asking why we're not succeeding we're smart thoughtful intelligent people who are trying to build good interfaces for users we don't want to do bad things we don't want to make slow UI we want to make something fast and beautiful we want we want to really actually deliver great user experiences no one's trying to fail so that means that it's can't just be that web developers are evil and hate users I don't think that's true I don't think anybody hates their users maybe if you're doing what's support but you know my first hypothesis though is that we have failed at mobile because we have allowed ourselves to only run our apps on desktop so you open up dev tools you see that inspector mode you see the responsive design thing it emulates the the viewport of some mobile device and you do your development there you're like oh yeah this works great on a phone okay who has used chrome inspect hey I like you all right who's using web page test okay cool cool this is a good crowd I like I like this but I think that most developers aren't doing that because a lot of the traces that I see are people who obviously haven't tried this stuff out and so I am a one trick pony the reason that this bag is in my backpack at all times and it includes all of these phones is so that when I go to a partner meeting which happens a lot these days I can sit down plug in a phone to chrome inspect and show it to them on a real device on a $200 device because that $200 device is ground truth so to give you an example of what I'm talking about this was the I.O. website from 2015 this was a super cutting-edge progressive web app it did push notifications we had we barely I think we had just launched push notifications for the web in the release that was cut and sent to users the week before I.O. I mean this was like this was bleeding edge stuff it had a service worker and on desktop this thing there's a nice intro animation the whole bit gets loaded Dom content loaded in 700 milliseconds pretty good get the unload at about a second and a half at which point that nice animation kicks in we get smooth frames through most that animation and the whole time spent for all of that work to get the application booted and get that sort of nice fade in animation is about 600 milliseconds in JavaScript so this is this is this is a a nice feeling app which gets me to interactive at four seconds on a Nexus 5x using Chrome Inspect and it looks completely different that big chunk of JavaScript there that balloons to two and a half seconds of straight line script of L that is just a slug of JavaScript at which point you can't do anything with this thing it gets unloaded at five and a half seconds roughly the script overall and we aren't interactive till very late but at the same time for having done all that work we still get janky frames slow janky frames this is this is not okay right we have to accept that this is not okay and I think we're enabled because we are one of the few software ecosystems where we're running the same binary on the desktop as we are on a mobile device nobody runs a win 32 app on your iPhone right nobody takes a Java jar with the swing or a w t or s w t app and runs it on their Android device that doesn't happen everybody else switched their tools when they switched form factor we didn't do that so we've been stuck in this world where we sort of think that we have to build everything or can build everything for this desktop world and that it's okay so traces from a mobile devices are really harsh masters and most the teams that we've worked with over the past year start looking at their thing on mobile and they wind up like I said they do the stages of grief mobile is really really really hard and there's roughly three three major areas that make this so much worse than it looks the CPUs the storage and the networks so let's talk about because I think we don't really I think most of us sort of have an intellectual understanding of why mobile phones are different to desktop class machines but I don't think we really have thought hard about I say all the time pretty much in every meeting that the truth is in the trace the truth the ground truth for your users is something that you can go and you can copy take snapshot of and send it to someone else in your team and have them look at it and so if you're not taking traces and you're not inspecting your traces you're not really going to understand what's going on the real world but you can get traces from web page tests you can get them from dev tools so this is my desk these are almost all of these devices wind up traveling everywhere with me including that 15-inch MacBook pro and almost every phone on that desk aside from the pixel XL on the right is about 300 dollars or less and that matters because these are the phones that most people have I don't mean most wealthy people I don't mean most of your customers potentially I mean most of your next set of customers probably have phones that are not a 700 dollar iPhone or a 700 dollar pixel they probably don't so what makes these things so different well that 15-inch MacBook pro has four symmetric multi-processing cores they're got very deep pipelines they can go from 2.8 gigahertz they can actually scale much further than that in that process in that process node it's got 16 gigs of RAM but it cost 27 hundred dollars the pixel XL has four cores same number of course obviously the MacBook pro with the i7 has hyper threading but that's sort of neither here nor there it's got two of these cores which can go to 2.1 gigahertz and two of them which can clock up to 1.6 gigahertz which sounds a little bit weird right it's not sort of the thing you would have bought if you were putting together a gaming rig you wouldn't like pick different speeds right it's got four gigabytes of RAM so it's pretty good it cost 750 bucks it's a real computer but you know it's limited the Nexus 5 X has two more cores in that some of them even scale higher than the pixel excels cores it's got less memory but it's only 300 bucks and that moto 4g the 200 dollar device is the most endowed in terms of number of cores so why is JavaScript 10 times slower on that moto 4g then it is on my 27 hundred dollar MacBook pro what the heck is going on these things like core count doesn't doesn't predict anything right it's really hard to understand what's going on here it's not the number of pixels that you push right the Mac MacBook pro has a very high density screen the pixel has a very high density screen too right 400 dots per inch on the moto 4g right they're all pushing these things they've all got GPUs they've all got flash based storage I think it bears repeating that if you think the 500 dollar 500 pound iPhone that you may be carrying with you is a stand in for a real device you're not looking at ground truth because the top of that line and the bottom of that line between the pixel XL and the iPhone class performance and the moto 4g is a different world entirely worldwide phones are getting slower more people can afford phones now and when they buy their first phone they're not buying an iPhone they're not buying a pixel they're buying a hundred dollar 150 dollar 200 dollar phone maybe maybe with financial incentives and the average network is getting slower most people are coming online on 3g connections and many of those 3g connections feel like 2g connections thanks to carriers let's not talk about carriers it'll all make us even sadder so this is the this is some code this is a benchmark that the WebKit team put together it's called motion mark on my 15-inch Macbook pro was between Safari and and a local build of Chrome sometimes we're faster sometimes we're a lot faster sometimes we're a little bit slower and it's a graphic story and a benchmark but the main thread is always busy this is basically apples to apples on OS 10 we can take the same version of Chrome run it on the Nexus 5x and as you can see that the desktop version is 25 times faster right it's not 25 times cheaper it's a $300 device but this is dramatic this is a huge difference so I changed just one thing and reran this benchmark a couple of times and got a significantly faster result I think you're going to be really interested to know what this one thing is across a bunch of different runs I got this thing to be 15 percent faster overall so what did I do what did I do differently in the same hardware and the same version of Chrome right in the same benchmark is it magic did I decide did I figures could be but probably not instead magic isn't really a thing right magic doesn't exist instead of science what I did is I put this thing on a nice pack my colleague Victor sort of figured it this out that this was the issue when he was trying to Victor and his team we're trying to figure out why we're getting these wildly varying results out of this benchmark on mobile devices and so they put the phone in a fridge and then ran it again and got a significantly faster result what you're seeing here is thermal desktop style computer looks something like this there's going to be a heat sink a big chunk of copper or aluminum sitting on top of a chip which has a metal top on it and between those two is going to be a bit of paste the same thing is true if you open up a MacBook pro there's going to be a fan that's evacuating heat out from a heat sink which probably looks like a thing with a lot of fins on it and sometimes you see like these weird pipe things these copper pipes connected these aluminum heat away from the chip as fast as we possibly can copper moves heat away aluminum is heat away very aggressively fans move that heat out of the area and then we can continue to dissipate power without burning out the circuits in the chip the result is that a desktop class chip like the one in my MacBook pro rated for about 45 watts of total power dissipation it can scale up to about 60 watts of power dissipation that's a lot of power this is what 60 watts looks like if you were to hold this in your hand I think you would get very uncomfortable very quickly maybe you're not as dumb as I am but I've tried this so you probably are going to be dissipating 60 watts in your hand in your phone right that you that's going to be very uncomfortable we're talking about heat transfer here right like if the back of your phone felt like a light bulb you probably wouldn't use it for very long so this is a major reason why mobile devices don't have desktop class performance for the same process node and the same architecture with the same number of transistors the cpu that turns more power into heat is the cpu that does more math right so we probably need to figure out a way to do a lot less math to turn a lot less power into heat if we're going to keep our hands from burning on a day-to-day basis so this is the inside of an x is 5x this is one that that gave up the blue smoke a couple of weeks ago I took it apart and this was my daily driver phone for about a year what you can't see here is that that little round circle is where the vibrator goes that blue that sorry that square cutout next to it is where the camera assembly goes that's one of the hottest components in a phone below that is the power supply and on the other side of that power supply on the on the same PCB on the other side of it is the system on a chip which is the cpu gpu baseband processor all that stuff the memory and the radio all in one assembly so let's flip it over take a look at it um on top of that cpu there that's interesting there's also you'll know I had to take that little like a aluminum assembly off that you saw on the other side but it's not connected there's nothing to connect it that's not actually a heat sink in the normal sense and in fact the cpu module you don't see it here it says Samsung on the top but it is a qualcom chip the cpu module is sitting underneath that Samsung chip because that Samsung chip is the RAM so think about that for just a second to get heat out of the cpu back out to the outside world it has to go through one layer of ceramics and then another layer of chip and then another layer of ceramics to air not assisted by anything else to draw it out no fan there's no fan anywhere in this in probably in any phone you own thank goodness right um and this thing backs onto plastic two layers of plastic two layers of plastic that plastic is a terrible thermal conductor the thermal conductivity of plastic is about a thousand times lower than aluminum right so in order to prevent us from burning up our hands we actually have to make sure that we don't run this thing to actually draw that much power I can't do that much math all this reminds me of a paper I read a couple of years back if you have a couple of spare moments I recommend it highly um it wasn't perhaps intended to be a prophecy about mobile devices but it is it tells us why so many of the transistors that are now in those eight cores that I'm carrying around on that Moto 4G are dark most of the time why they're not lit up why they're not actually doing useful work for me and that the reason is thermals and power in fact the reason that everything is slow is this I can hold 2700 milliamp hours in the Nexus 5X battery or 10 think about that in terms of power in a light bulb you get a couple of minutes of light bulb powered out of it if you could actually draw that much current at once which you probably can't it would blow up the battery insert exploding phones joke here um so this is why everything's slow because this is the primary limiting constraint on a mobile device this thing has to power the Bluetooth radio the NFC radio the cell radio Wi-Fi radio chips and screen and you want it to last all day on something that can't power a light bulb for more than a couple of minutes so everybody has an incentive to make sure that you actually aren't clocking those CPUs very high that they aren't running very fast that you're not drawing that much power and it's much more complicated than this these days what you're seeing is something called big little architecture inside of these phones what that means is that there's a couple of big cores and they um have deeper pipelines they have more transistors on them they have more cash not as much cash is say the iPhone the iPhone has I think something like cash one megabyte of L2 cash it's pretty beefy device my MacBook Pro for instance has six megabytes of L3 cash I think the part that's in the Moto 4G might have a megabyte of L2 and L3 cash total right so spending power and spending transistors on power power on transistors is a big deal and you don't want to do very much of it so these days we're aggressively moving computation out to these little cores smaller power lower frequency cores which can do a lot less math but they're much more power efficient because the amount of power you burn at frequencies is nonlinear if you scale up the frequency in a modern semiconductor if as that frequency scales up you burn more and more more power per gigahertz over time and so schedulers do a bunch of things to try to make sure that this all works out they try to aggressively move work around they've got a lot of different strategies for this your desktop is going to use symmetric multi-processing your phone is going to use something that's very if it's very clever it'll have multiple ways of thinking about each of those individual chips powering them up and down and moving work between them we're finally getting to energy aware scheduling there's something called touch boost as well touch boost is sort of like you put your finger down and then the phone spins all the CPUs up as fast as it can the big ones in order to give you the ability to do things like animate stuff very very quickly and then as soon as it thinks it can it spins it all right back down now the web page looks like waiting on the network to do some stuff and then a couple of seconds later you get the body of stuff you have to start processing you might have scaled the CPUs back down by the time you get that big bundle of stuff back right when you launch an app we spend a lot of time or OS has spent a lot of time trying to make sure that that app launches quickly so they are primed to give you a lot of juice at the moment that you decide to launch a new activity or launch a new application the web doesn't work that way our schedulers actually work against the web's basic workload or at least the way we've built them to until today and benchmarking is really a thing you'll see benchmarks floating around about like oh this mobile processor is almost as fast as a desktop processor maybe but you can't keep it spun up for very long it's not going to be for very long you're going to get thermally throttle that envelope is going to close over you and then you will have to scale it right back down again else you're going to be holding a light bulb in your hand right so but it's worse than that because storage isn't actually even that good either when you look at the read performance on my Macbook pro again I get about two gigabytes a second at you know maximum theoretical transfer across the storage my Nexus 5X even though it has a nice flash storage component can only get 400 megabytes a second across that bus what's going on well in ssds parallelism is king it we don't have to like wait for the platter to spin around again after we move the head to go get a read so our latency is persistently low which is awesome but our throughput is based on the amount of chips that we can put in parallel and then distribute reads to because they're all going to have a particular size for each of the packets if you will that they're storing so you can get a lot more read throughput if you can actually have a fast bus and then parallelize a lot but on that Nexus 5X mother chips you can't parallelize so you have MLC or TLC which is to say cells on top of cells in like three-dimensional chips now are very popular for storage technologies because they allow you to pack more transistors in they allow you to run them at effectively lower power but that penalizes you in terms of parallelism which means that unlike your ssd where you can spread a lot of chips you don't have that ability and so everything feels much much much slower especially with content the controllers aren't as good you don't have as much free memory to throw the controllers you don't have as much power the file systems are now optimized to some degree for this stuff but even when they get full they still feel slow basically we think about a mobile storage devices that it's probably about the same speed as spinning metal from about 2010 that should make you sad okay then browser networking they will also make you sad the tldr is a mobile networks hate you they hate your guts they really don't like TCP they don't like what the way you use them especially if you're in 3G they have wild variants underneath your high-level protocol stack which your high-level protocol stack is not tuned to understand you know the Reno congestion control algorithms the stuff that's built into the our current modern TCP assumptions doesn't work well with the physical layer that we're assuming so we see wild variants in packet loss on mobile networks in ways that simulated networks don't really explain as Ilya said a 4G user 4G user isn't a 4G user most of the time they're probably going to start from a lower power state and radio resource control means that you may be spending seconds just getting that first packet across the wire if you come from that low power network state this is really only reasonable to be sad about this the tools and techniques that we've brought over from the desktop area don't serve us in this environment to make really great apps we need to do things fundamentally differently we need to match the expectations of the OS and of the underlying networks and of the underlying hardware capabilities we need to load less script we need to load it better we need to make sure that we are doing work on demand and that we are able to meet the CPU when it's spun up so Paul in a couple of graphs earlier the summer today we wind up with these big JavaScript bundles and then frequently they they wind up feeling very slow if you render block with them or you put a loading bar like Gmail does and you feel like you've got a bunch of waste of time at the front when it finally evaluates you get a very fast application now I've heard a lot of application authors and framework authors tell me that this is okay because people then have these instant applications but maybe your interaction depth isn't very large and you're probably going to bail on that site that double-click data is kind of compelling you're probably going to bail if it takes longer than a couple of seconds to get there so we're seeing framework authors do something that they think is very clever they're saying I'm going to server side render this I'm going to do universal JavaScript I'm going to start running this JavaScript on the server spit you some HTML and then I'll load that giant pile of JavaScript well that sort of sleight of hand only works if you actually get that JavaScript loaded quickly enough but you don't so instead you get a UI where you tap the glass and then nothing happens because the main threads locked now maybe we can scroll for you because browsers are magical and I do threaded scrolling these days but if you tap on it and it doesn't work I submit to you as a web developer your thing is broken it's broken it doesn't work so this doesn't work but we really want to something that looks like this we want to be able to load and run things at basically the time that we want to interact with them we don't want to pay too much up front we want quick interactivity for all the we're not currently using this is why purple is so darned important because it actually does what native app frameworks do they delay view loading to the view transition moment so this is the shop app which I'm sure you've seen a dozen times in the last couple of days on a desktop class machine interactive 400 milliseconds we've seen this story before that's pretty good 200 milliseconds of JavaScript miss so what it's going to be 10 times slower on a mobile phone but here we're this thing is interactive in less than three and a half seconds this thing is amazing and it's 1.3 seconds of JavaScript overall except if you look at that right hand side all those little slices are chunked that means that I was interactive at the end of that first big yellow slug I was interactive so much faster because of HTML imports and the way they do small chunking they allow the browser and the platform to schedule work in such a way that you can remain interactive much earlier people send tend to think that when we added service workers we were trying to solve offline and we were but the thing that I most excited about them for is getting to reliable performance the purple pattern and the polymer app toolbox give you the ability to always respond for a navigation out of the local cash you never have to wait for that radio resource control to spin of the radio maybe over a couple of seconds to go do DNS and then TCP and then TLS and then HTTP hand shaking to finally get the local cash and boom the variance goes down and it can also be faster this is why service workers matter low variance high-performance reliable UI and you can see this this is data from this years I web app the light green is that first load experience you can see it's a long tail networks suck they hate you that dark green that spike there that's with a service worker it moves all of that work to the front of the pack that is reliable performance that's where we have to be in order to be able to be able to build compelling native competition mobile apps on the web so how do you fight back please implement purple or as much as you can monica yesterday had ripple get as far as you can please only load things that you need for the current route install a service worker to prefetch things for your subsequent routes break up your work to the best of your ability push if you can and then go by 150 quid phone please if you can if you can afford it please go by a medium price unlocked Android device and then use chrome inspect to see how it works use lighthouse a lighthouse will tell you whether or not your thing is a PWA and it's going to have an increasingly good set of performance inspection tools webpagesus.org is your friend you can take traces from it use chrome telemetry inside of your continuous integration if you have continuous integration I hope you have continuous okay so a lot of people haven't seen how to use chrome inspect so let's go take a quick look very quickly I know I'm over time but just very quickly this is the UI I plug in a phone that has been unlocked for USB debugging and now I get a view of this if I go to the network tab I can throttle what whatever connection it's on regular 3G is a good a good starting place and then if I go back to the timeline I should be able to hit control R shift open Apple R to do a hard refresh I'm going to select also capturing the paint stuff and then it'll start recording it'll start running this thing there is some recording overhead but remember that that emulated mobile network is actually better than a real mobile network because it doesn't have the same variants and so now I've got a trace and I can inspect it I can start to look at where things actually started to show up you've seen Paul and Sam navigate DevTools you can go back to the videos and see learn about all of the things that are causing this to be faster slow but the most important part about this is I can now right-click and I save this and I can send it to my teammates and I can share it with Drive or Dropbox and we can start to understand our performance over time okay we can then go back into the chrome inspector and we can load it back up any Chrome DevTools can load a trace that I've saved this way I saved this one on the desktop so let's go there great and then slow me from yesterday loads it back up and there we are on any computer with DevTools I can see how this thing performed on a real device this is pretty awesome okay so there's also Chrome tracing but for Chrome Inspector but for tracing now tracing is the DevTools equivalent but it's a power tool it is the thing the browser engineers use to diagnose the performance of things when I use Chrome inspect question mark tracing it gives that little trace button there now I can record this is a UI that's again a power tool but it'll let you see every process and every thread of every process that the browser is running including all of your tabs and everything else that's happening inside the browser and it instruments it now Chrome is a multi-processed browser the render process and the browser process are different they talk to each other over IPC this is the way that if you start working with a browser engineer we're going to ask you to go instrument or take a trace for your application and then we'll dig in using this it works almost exactly the same way I've started to refresh the shop app here I'll stop my trace when I'm finally done loading it I can explore it it feels very much like a video game WASD get you around you select stuff it shows you what's happening takes a while to open but again the important part is that you can save your traces and you can load them back up and this is everything this is everything it'll show you the CPU usage this is the resources that I'm starting to pull in this case out of the service worker and this is what's happening inside of the renderer process we can go select an area and see what was taking so long here and this will actually trace through HTML parsing V8 execution and an ever richer set of V8 instrumentation lighthouse is amazing please use it it's a Chrome extension you can use it at the CLI Paul showed it yesterday please go install it and thank you so much for making fast websites that are reliably performant awesome alright how you all doing good good alright we're at the tail end that was like a super interesting talk I actually hadn't seen that talk for the event that was like the how many of y'all saw the Martian yeah that was like the we're gonna science the shit out of this moment for cell phones that was like super cool alright we're gonna do a panel now um I I knew Monica mentioned earlier we're asking somebody to tweet questions at a hashtag ask Polymer Summit so please do that if you have questions we've also got microphones set up there and there I'm gonna invite my panelists on stage please welcome Justin a software engineer on the Polymer team got Wendy a product manager on the Polymer team sailor product manager on the Polymer team Monica software engineer on the Polymer team Steve Orville software engineer on the product team and Matt McNalti director of Chrome please give them a hand oh man there's some some good Twitter questions in here um alright so uh and remember if you have questions please just like come up and you know line up at the microphone or something like that uh we will start with uh Twitter question though this is from we've got a few of these that are all kind of related which is basically you know Alex just gave a good talk on the importance of HTML imports and a lot of folks are wondering um you know you've got it seems like there's disagreement across different browsers about HTML imports and we also have this question of you know HTML imports or ES6 modules like where are these things going um so yeah like could could could y'all maybe address perhaps these two issues like like where where are imports headed and also you know how do we kind of reconcile that with with modules what's the dive in on that yes I can I can start I mentioned this a little bit off the top yesterday but yeah like Rob said all the web component specs are well along their way already being implemented browsers except it's on hold is what many of the other browsers saying it is implemented in Chrome um but it's on hold on many of the other browsers and really that's just because we're waiting for the ES6 modules to land in browsers and to be implemented and it's actually kind of a a funny story the way this happened as ES6 modules are landed all the browsers figured okay you know this specs are pretty far along they'll be here any minute and then we can kind of wait on how we decide to actually implement HTML imports maybe take advantage of the same loader that ES6 modules use so we'll wait for ES6 modules to land turns out like these specs tend to sometimes do take a little bit longer to actually settle into place with the ES6 modules and so as the ES6 module discussion was happening um at least in conversations that we've been having across browser vendors the there's been more attention focused now back on HTML imports particularly as a performance primitive primitive because with the ES6 modules you're blocking on JavaScript with HTML imports you get to take advantage like like great built-in platform browser optimizations to do background parsing of HTML to queue up the all the requests in an efficient way and so actually we've been seeing that HTML imports could be a performance primitive one thing we're really optimistic about is as ES6 modules are starting to kind of come together there is a great opportunity to really marry HTML import mechanism at least loading HTML with HTML that idea with ES6 modules particulate potentially that would interoperate perfectly with ES6 modules so we've seen some experiments in the space and we're really excited about it so roughly I think it's fair to say that everyone is generally on board with the idea of the need for a primitive to load HTML with HTML the question is just how does it interface with the six modules and we've got some pretty good ideas around that cool all right it looks like we have an audience question now really quick for for all audience questions I'm going to ask one favor of you which is to please be considerate of the people who might want to ask a question also so please know like I have a multi-part question part one A of seven style questions having said that okay sir yes you there my name is Dylan I work for Best Buy Canada we're currently considering Polymer we were wondering if you had any advice for transitioning your large applications in the past into modular components I'm just going to repeat the question really quick so do you all have any advice for transitioning your you know large existing application over to using something like polymer I'll I'll take that one we've seen customers do this before where they have inside Google we have like I don't know at least a dozen different frameworks that people use and when they start using polymer sometimes they work from the leaves up and they'll say like oh I want to use the awesome material design components because they need to be you know material design compliant and they keep working up from the leaves using buttons and inputs and stuff and then they're like oh then I have this thing that uses a button and input now make it polymer and eventually they just they don't stop and they go all the way to the top so I think you know when you get interop between whatever framework you have and and web components that's a good way to go I think the bottom up and not stopping idea also kind of applies to a lot of products that we've been shipping recently as the polymer team so particularly things like the polymer app toolbox and the shop demo we've got a few exciting demos that are similar to the shop app on their way and the idea is it's a really great place to start the Palmer CLI can download as a template it builds right out of the box you've got a progressive web app in one command which is great for prototyping and for you know having something up quickly within a day within two days three days to you know show an executive and really convince them that this is a great experience we can actually achieve and similarly we're seeing some people start there and then just kind of continue with that template until it becomes the full application so similar idea starting with what we've got as a starter template and then expanding from there and with things like the purple pattern really their scalability becomes kind of by default because purple is so there's so much emphasis on lazy loading as you add pages to the application there's no impact on that first load if you're if you're constructing application with the purple pattern with these templates that are built that way by default so I encourage you also to kind of start in a prototype phase maybe with a new bottom-up app and then see how far you can get right I this is a fun question I would like to make the panel score him a little bit when will polymer 2.0 be released as production ready I can take that one so first off there's we had this plan it was well thought out for the last 12 minutes to bring the 360 view VR camera thing on stage we're going to give it its own spot and we're going to call it Blinky and we're going to throw all the hard questions to it last minute it didn't work out so we came up here I think the plan is you know roughly around January to have that come out with the elements everything you know will come out when it's ready but you know we had a stretch goal to try and get it done for the summit that was sort of known tongue-in-cheek I didn't want to tell Steve until kind of late until they've really started getting stressed out but yeah the idea would be the next couple of months the holidays add look at least another month to that so that's the plan all right one more thing to add is that so I mean just we are in preview mode now and I mean I think we were in Palmer one we got to a phase of Palmer ones development where it became hard to change things because of the need to not break people and you know based on your feedback on the preview we're sort of in a nice period where we're still trying to maintain back with compatibility with Palmer one but we have a little bit more wiggle room now so I mean I encourage you to please play with Palmer two and give us feedback because it'll help us make it the best we can so if Steve was like a little bit more devious he would have realized that he could say something right now on camera about when it comes out that's much less ambitious April 2017 how many a computer near you absolutely as soon as possible you could be a manager okay so I got another question this is one we get a lot I would say this is like this is like 60% of all questions are this question what about using Polymer with insert framework here okay react angular whatever what about using Polymer with other other frameworks Rob do you want to take that one? I'm good I think we have to throw that one to Blinky oh wait yes well yeah yeah I listened to Taylor's keynote yesterday and what he told me was you don't have to throw out your your framework that's right because Polymer is based on standards it will work with your framework that's right yes thank you and yeah and maybe he can add more yes so yeah we do get this question a lot of it all the time this is you know one of the big promises of web components by having this web standard way to build a component frameworks don't necessarily have to bring along a totally custom model to be able to get things like CSS encapsulation like DOM encapsulation so with Polymer 2 particularly where all the all the things we've been doing to make it more interoperable to to strip away all of the Polymer specific idiomatic things that you had to knew that broke through that that layer so that a Polymer 2 element is truly a custom element it's going to be a lot lot easier to interface Polymer 2 elements with existing frameworks on the framework side as well more and more frameworks have been evolving and shifting slightly to better support web components and custom elements and I think we'll continue to see that in the near future from some of the big frameworks and also already there are existing kind of couplers that make it really easy to use framework X with Polymer element or framework X with web component the bottom team was up here they mentioned their Angular adapter highly encourage you to check that out that makes it pretty seamless to work with Polymer elements inside of an Angular application so a lot of solutions that already exist Polymer is making it easier for an opportunity to happen frameworks are making it easier I think this will be the continued arc of web components towards kind of seamless interoperability so we're on our way there okay good and reminder again we have these microphones if you do want to get up and ask questions don't be shy I know the question we have is you know we heard from another we had partners here we heard from a number of those partners that they ran into situations where they had too many components you know so is having you know a my app element still a viable approach when is the right time to create a component so that's a bit of a few questions all jammed together there but sure well yes sure I can handle that I guess so I think this is a hard question to answer because as with many things there's not really one size fits all I think it's perfectly fine to have one element that defines your application you know if you're using the purple pattern and develop you know delivering a small bundle that's going to run down the bundle for that is going to download and render quickly the resources so that's pretty straightforward I think in my talk I emphasize that you know focusing on you know very specific you know high frequency elements that you want to make as fast as you possibly can you know having reasonable goals for those and being careful in those elements and actually got some feedback which was that the thing I was saying do less and be lazy sound actually sounded really hard and so one thing I can say about that is that because we're using web components the good news is that the hard work that anyone does is something that all of us can leverage so I mean that seems potentially good to me so as long as someone figures out how to make a thing fast we can all benefit from it and then I think you know there's a lot of really specific questions that go with the kind of have to be answered in the context of your application but from a performance perspective I think you know just keeping in mind that the sort of the cost of the element should match the task that you're trying to have it do so you know where you need to make a lot of things make them as cheap as you can so one thing you can think about it is that creating a custom element isn't free you've got like a tiny little bit of cost with every custom element that you have so if you're going to just make a custom element to write but wrap a span that's not really worth it you can just put a class on that span especially if you're going to repeat that span a lot on the page but if it's like a little bit of like a sizable amount of Dom that it's hard to style and copy pasting it in different places in your app is kind of really annoying that's a good place to put a custom element in there. Luckily we never said like everything is an element or anything like that so we didn't encourage the wrong yeah. Yeah we never made a dumb. All right we have a question back here sir. This isn't exactly a polymer question but it's future centric and it relates to our stuff that we do what's with WebAssembly when does that arrive in the real world and what goodies do we can we expect from that maybe perhaps related to web components and polymer. I'm scanning the room for V8 people. There's one right behind you Adam. I don't think we really know up here. WebAssembly doesn't impact web components that much. I mean I don't think it really has direct access to the DOM right now so if you're writing a game. Yeah but you found is he found his person is hunting him down. They're in the back corner standing up. So I'm gonna move on. So this is a good question because I see a lot of people they ping me and they're like I want to make a thing like paper input. I don't do that as I've been doing a lot of accessibility work lately I've realized input gives you a lot in terms of accessibility and things like that. So the question though is how do you leverage semantics when you're writing a component. So for instance if you are trying to write something like input you and there are reasons to perhaps you know wrap some of these components. So how do I leverage existing semantics inside of a custom element that I'm creating and I think that might be a good question for Monica. What do you mean exactly by leveraging existing semantics if you were to redo something like paper input how might you go about doing that paper input in particular is enormous. It's like a hydra with 17 heads so it should be 17 sub elements instead. What paper input dies because it wraps an input in its shadow DOM it has to. Channel all of the properties that you could set on an input and sort of expose them to the paper input itself. So we have a behavior for that which basically defines every single property that input has as a property the paper input can have which isn't great but. If that's the thing that you want to do I you can do that the reason why I'm saying paper which shouldn't be like it is is because it should be something like paper text input and paper number input and it could only have like three or four of these existing properties that he needs to pass down to the input. I don't know if that's answering your question sounds yeah we also try to this is sort of tangential but we try to mimic in our custom elements with the platform chooses to do so paper checkbox has a lot of the semantics that input type equals checkbox has for example it doesn't look like input type equals checkbox it has a completely like it's called paper checkbox but it has the same sort of it has a checked attribute it has a fairly quirky value where it's on or empty because that's what the input type equal checkbox element does and ideally we'd like it that you could replace wherever you're using input type equal checkbox with a paper checkbox and have the same semantics without you being freaked out about that. Yeah and that's honestly I think that's one of the things a lot of developers overlook is semantics and especially how they relate to accessibility this is about it a lot of people are like well you know I don't even know if I have any users that need this is about a billion people worldwide that have some form of disability and so if you are creating a widget that already has an existing analog in the platform you really need to make sure that you are adding back in all of those semantics and the proper accessibility and keyboard support and stuff like that if you're not going to be using that existing platform element which is why for instance I often tell people just use button okay like button actually it seems so simple it does a lot for you and there's a lot of stuff you probably don't want to add in that you're going to have to do if you if you need to turn that into a custom element you totally can do it and my friend Eric Bidleman has has done a talk at the PWA Dev Summit on exactly how to do that which is a great talk you should all go check out but remember the platform is trying to help you here and give you a lot of stuff so when we say use the platform it also means just you know leveraging vanilla html where you can add one more thing yes sorry just real quick so I just want to come back quickly to the loss of is in v1 custom elements I just want to get back to that because this is one way you could in the v0 custom elements leverage existing you know semantics here and and doing it yourself with including all the accessibility of yourself is hard so I mean we on the team basically really like this idea of is and it's still in the spec and it's probably going to be implemented implemented in Chrome and we're arguing for it it may evolve one kind of one of these things this is why we're not really recommend using it going forward for now is because the support may evolve I think there's general agreement my sense is there's general general agreement this is incredibly valuable to be able to leverage these capabilities but the exact way that it happens is tricky and there's some nasty things about is like the you know we actually engage then directly with the old legacy built-in elements like input and like input uses a shadow root and you know therefore you can't add your own there's a lot of tricky stuff there so I mean this is a little bit of a there's still I think a little bit of a growing pain here that hopefully it will evolve relatively quickly well fight for the people to get is back during so we have two questions but I'm gonna hold you for just a second because this question is one that we get asked this is probably the second most popular question I really want you all on stage to answer this how does SEO work with custom elements and shadow DOM content be seen by a search engine you actually answered one of the audience questions nice yes so we do get this question a lot the short answer is SEO with polymer web components is absolutely different than any other front-end JavaScript based framework that you work with period right now no web crawler that I know of actually natively support shadow DOM so it's not even a question of actual shadow roots you need for a web crawler to see your page you need to include the polyfill anyway so it's right now it's it's irrelevant and now that web components are in the spec I highly highly expect that anyone who might build a web crawler for search would very likely probably look inside the shadow roots as it's part of the HTML spec and something that's going to be used cross browser well I think that the most important thing to acknowledge here is that like crawlers run JavaScript like I don't know if everybody knows that but you know the crawler will render your page internally as it goes yeah blog post on the Google webmasters blog I don't have it like you know the URL top of mind but it's from maybe about a year ago where the team said yes that the Google crawler at least does run JavaScript for a brief while against your page yeah you can dig up that webmasters blog posts it's in there which would give you time to you know bootstrap some components yeah and so for for obvious reasons I can't go into too much detail as to how these web crawlers work or indexers work but I do highly highly recommend if you're skeptical about how your site is getting indexed I highly recommend checking out the fetch as Google tool which is part of the webmaster tools set and what you can do is go in give it a URL of your page and actually see how Google's crawler sees your page so recommend you do that you can see make sure that it shows up the way you'd expect another nice little tip is the site colon query is a very valuable query to use so if you're skeptical that you know polymer based you know my app apps get picked up by the crawler I encourage you to do to go Google search right now a site colon shop the problem project org if you view the source of shop you'll just see one tag and that's it that's the entire DOM but if you site colon query you'll see that everything gets picked up by the crawler so I highly encourage using that that fetch and render as Google tool in webmaster tools okay you have patiently been standing so you go next hi I'm Sam I'm from brain lab and my question is about supporting old browsers in particular like Explorer is it still in plan or we support I 11 and edge we still support 10 a bit so Monica made that noise you know audibly Steve Steve made a much worse noise in his head we want to end support for 10 we do not list I attend I supported on the polymer website if you had checked it recently so yes so technically I love it up is supported we always used to support I 10 till Microsoft end of life I and no longer supposed to attend across most Microsoft platforms and so we decided well if Microsoft can do that it's probably a good time for us to do but and the reason that being is I attend the support because of some flakiness and some features it adds a lot of complexity to the poly fields so that's why we're like on the fence here is that for most cases everything should work fine you might see a touch of flakiness which can be fixed if you drill way down if that's worth it for your set of users that are happened to still be on it and so that's that's the please do not open issues on polymer elements if they don't work on it and thank you thank you all right over here question hi coming right like from PJ software and I have a question about because polymer to leverage a lot of ES6 syntax and and you have your tooling about in my project for example we are using a lot of Babel and everything so we would want to make more custom builds so and but I saw yesterday that you were using the getter set of syntax and using pro adding the service worker by magic so if I prepare the output from Babel transpilot it would be still be able to add this service worker and it will be work on polymer tool yes I mean that there's a couple ways that we want to integrate compilation into the workflow one is that the polymer build library the reason why it's broken out the way it is is to let you plug in things like you know go babel or something in that pipeline in the appropriate place it turns out that the type of compilation that Babel does to output ES5 generally preserves the ability for the analyzer to recognize that there's an element there there's some cases where that isn't true like if you're using TypeScript with decorators that would output something that's very difficult for the analyzer to recognize so our general approach is that like if if you want to run analysis on your program you want to do that before you've compiled it to make sure that it's looking at your original source we're adding a compile flag to the CLI to kind of give you like a default good compilation via Babel and we're going to add the ability for that to pick up the Babel RC file out of your project and take out what take what settings you need there but in general it should play nice you know in the service worker the way we determine what needs to be in your service worker is by crawling the HTML import dependency graph that's not changed by Babel so there shouldn't be any problems there okay thanks all right I have a question for our product managers windy and Taylor what can non-google developers do to get better support and feedback for issues and PRs for Palmer and Palmer Elements basically a filing issue how come it's not fixed you can email me personally it's Taylor Savage thanks Matt well first of all we appreciate when you guys do submit feedback so thank you to everyone who does that already it's a big reason why we're open source we love getting that feedback and PRs from other people I mean a lot of our channels on slack like we have tools channels and those are smaller generally so if it's tools related Justin red Peter they're in there we've got some other channels up there usually we're on general pretty frequently so if you got a question and you might want to stick that in there you can get information contact us on Twitter there's a bunch of ways if you find like it's a pretty regular thing feel free to bug us and we'll get back to you we'll try to yeah the the best way by far to get quick response on a bug is make it a really really good bug meaning detailed repro if you can get to it you know example of of even a jaspin that shows us well what the bug actually failing those help us triage because we know that there's not going to be a ton of overhead just digging down to a root cause and it helps us also just kind of get a feel for how serious you are about getting this bug fixed in a sense how much it's impacting your project if it's worth actually putting that together so obviously we get a ton of bugs on the problem project across our polymer library are 100 plus elements are dozens of tools I really do wish that we had infinity engineers to fix all the bugs all the time and we are you know fortunately backed by Google which allows us to have awesome resources but when it comes down to it we are still a small team of just people and we have hundreds of repositories that have issues on them it's really really hard to manage yeah yeah so we do our best we really do appreciate issues that come in we're always looking for better ways to better processes to triage and and get bugs fixed we especially appreciate the really detailed bugs those help us a ton and if you're nervous about sending us PR as we really really like peers so even if you're like not super confident in your fix you can be like I've got an idea for this it's probably not great but we'll work with you to improve your PR because that's much easier on us rather than starting from scratch so you know this is recorded right we're gonna be able to use that I mean longer term is also you know I think we've been doing a lot of things as a team you know having our own element catalog and things that have sort of gotten in the way of the ecosystem that might otherwise solve some of these things so I think you're going to see us very very soon I mean step one was just the beta web components or getting out of the way a little bit more and allowing the community to thrive and start to respond to things a little bit better to yeah so guys Taylor Savage at gmail.com right here I hope there isn't a dog actually his you probably just gave away his personal email we know Paul Irish is right here right how am I Thomas that's a remark for a CEO first maybe the best advice would be use schema.org for the time being not the question but remind us and with regard to SEO so maybe schema.org is the answer for the time being right but my real question is about inputs and shadow dom within forms because when you have fields inside shadow roots forms doesn't work I mean a job validation validation breaks so maybe does it really work will it work or maybe I'll just have to put everything in light down yeah so that the question again is native form element I want to put custom elements inside of it that does not work WTF me right Rob anyone who knows about this yeah I don't know so this is a seven-part has no good so first of all I actually just did a polycat the out the outtakes that you saw this morning were for me trying to record to polycast about exactly that using custom elements and forms and the punchline for now is you can either copy the value that you want to hit an input so because that's the form only cares about the input tag at the moment and that's baked in the parser it's kind of really hard to change so either you copy your value to an input or you put that input in the light on if it's in the shadow Dom you have to somehow copy the value to the input if you want to use a native form we are trying very hard to work and change the spec in this but the problem isn't that it's not a spec changing problem as much as it's literally bark back bark barked baked in the parser so the parcel will see a form and then only look for input tags and changing that isn't exactly straightforward blink engineers have a panic attack when you tell them about changing the parser we're trying I am desperately trying to add spec to this to make inputs to make to make you be able to get input functionality and again the is equals attribute helps a lot with this because you could you could be able to extend the input tag and make your custom element basically fake that input tag which would make it work with forms right we have like one minute left so we're going to go kind of lightning round here I do want to try and get to some more of these audience questions but this one question is pretty important how long will polymer 1.0 be maintained now that polymer 2.0 is a thing yeah we all think about that as long as it needs to be remember it's Taylor Savage Taylor this is recorded right and I think I think we've hopefully made it pretty clear throughout the conference how much we care about upgrades and upgrade paths and upgrade cycles and making it as easy as possible to upgrade we feel that pain on the polymer team we feel it within Google we see it throughout the ecosystem so we've really taken that seriously with polymer 2 and all the tooling around it and hybrid mode and all the documentation that's coming so we hope that the upgrade from polymer 1 to polymer 2 is fairly straightforward it's certainly not and I know many people mentioned about being around from the 0.5 to 1.0 upgrade which was one of the moments where we really learn this lesson hard so should be fairly straightforward to upgrade I encourage everyone to try to as soon as possible that said we expect you know polymer 1.0 to it's it's a huge dependency inside of Google itself so we're certainly on the hook for supporting it for at least many months years to come I have one one tiny addendum to that will the V1 web component API is be supported in polymer 1.0 that's that's not currently planned but you know based on feedback we'll see yeah yeah so that's kind of more gets to when would the threshold for V0 usage get low enough in Chrome because Chrome has shipped it other browsers have not shipped V0 which is what 1.0 is based on so it's really a question of it still baked in Chrome right now V1 is also supported in Chrome side by side so you can use V0 and V1 on the same page in terms of web components totally fine so really that won't matter unless V0 usage gets to such a low point that Chrome can take it out support for it entirely which would be you know fairly well into the future yes I mean and just a technical note I mean one thing just to be clear the V0 and the V1 specs are not hugely different but they're different enough that frankly having both in play on the same page is just not something that makes sense to really contend with so kind of having Polymer 1 have that sort of mindset of having to deal with both V0 and V1 it's just it's just a world of pain we don't want to try and might this might also be a good reason to look into hybrid elements and Polymer 2.0 if you sort of need that transition path okay we are over time but I would like to take one last audience question because you've been standing very patiently so sorry everybody else if you if you tweet at ask Polymer Summit I will go back and try and answer all of those on the Twitter's Rob you know this is recorded right? That's fine. Rob Dodson and everything. From the mouth. Yes you. Hello I'm Maxim from Best Buy Canada and we've talked a lot about performance optimization and I would like to know is the purple pattern meant to replace completely server side any server side rendered templated. I want to talk about server side rendering. Well I think server side rendering is a really interesting question like we need to look at how it actually relates to you know pushing less for your initial render but I was actually talking to some engineers who work on another framework framework X and we're talking about server side rendering and I have this analogy with that where server side rendering is kind of like data compression right a component is like you know a compression you know using a component is like using a compressed format of like your component definition and it should be cheaper to use a component than to expand that component everywhere out where you use it right and so server side rendering is kind of like decompressing your data sending the uncompressed data over the wire and then recompressing it once it gets to the browser and this should be bad right and so it should be faster to send you know your decompression which is your component definitions and that and get it all down there and this engineer said yeah you know once we split up our application so that we're only sending what was needed for the first route it was faster than server side rendering I think our challenge with web components is that we don't have an existing server side rendering solution that we can compare against but it certainly seems likely to me that with the purple pattern and if you're rendering as soon as you possibly can with the minimal resources for that route that it's going to beat server side rendering and it's also going to give you a less complicated you know setup and server so we need to measure it to be sure but that's my hunch thank you for that question all right that is all of our time please give a round of applause to our lovely panels and now leave the stage I'm going to turn it over to Matt McNulty all right so this is going to be like one more minute so first of all I just want to thank you guys all of you because you've been a tremendous audience you're in your seats at exactly the right time only two people forgot their badges we won't call them out specifically and you know there's almost no drop off from day one to day two and that's super super important to us because we do this for you right this is a tremendous amount of work there's as you can see there's a lot of people involved in this there's a lot of planning that goes on we've been doing rehearsals for ungodly amounts of time I've heard all of this like six times before but you know it's all worth it because you guys are here and you're enjoying it and you're really having a good time I keep saying guys I should not do that so there's two people I want to call out specifically just to show you how what a great audience you are I won't call them out by name because we don't actually have it but two people were flying in from Iceland today or yesterday and through a variety of sort of planes trains and automobiles only got here about two hours ago so we actually started up registration again and got them their badges printed out and got them here so big round of applause for them wherever you are so thank you very very much this has been awesome it's just great to have people here and finally get this out there for everyone to see we have sort of two things we still need you to do so there is a survey already in your inbox this really helps us improve and figure out what we want to need to cover next year what we need to do better what we've done really really well it's very very important please do your best to take take care of that the other thing is just you know use polymer talk about it share the talks that you saw today build something put it in components go on Slack talk about it go on Hacker News and deal with that which you know I can't ask you to do that really that's that's too much to ask of anyone except Justin occasionally they all laughed but anyway thank you so so much watch the survey I'm sure I'm forgetting something but thank you very much we'll be here for a little bit and see ya