akes 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 rende