Ben Galbraith is the product director for the Web Platform at Google. His past roles have included heading Product and Design for Walmart Global eCommerce as well as leadership roles at HP / Palm, Mozilla, MediaOcean, and several startups. Ben has been writing code since he was six and starting businesses since he was ten; he's written books, given hundreds of presentations world-wide, produced several technical conferences, and sold three companies. He lives in Palo Alto with his wife and eight children.View the profile
About the talk
From desktop to mobile, the web is in the midst of a resurgence. It's getting easier to build fast and immersive experiences that reach everyone on the web and the tools for web developers are continually becoming more powerful and diverse. This talk will highlight some of the recent transformations of the modern web, show how developers and companies are taking advantage to build best-in-class experiences that are making real business impact, and give a sneak peak into the exciting new advances coming to the platform in the near future.
00:56 Service worker
06:10 Web media
11:10 Speedometer 2
18:21 Chrome DevTools
23:16 Polymer 3.0
Good afternoon, everyone and welcome to the web State of the Union. I'm Ben Galbraith the product lead on the Chrome team and at Mountain engineering lead for the Am project in this talk. We're going to share with you Google some respect on the state of the web. I'm going to file a work cited about I will talk through the exciting late. They just left the Harbour tools libraries and Frameworks are working on to make you more productive. We've got a lot to cover the session. So let's start let's go the web has special meaning for us a Google because our core mission to organize the world's
information. I make University accessible to Pennsylvan open a closed system like the web is healthy and thriving And the web evolved dramatically over the past few years gaining significant new apis and capabilities. Probably the most important API in the last 10 years into the bank beginning of the weapon about teachers that use a request in the browser renders, but the service workers change that and choose the brand new top-level extraction that goes beyond what a page can do receding events. I push it occasions Hazel day does accreditation even
after the patients on a wave letting you take control of networking we can make robust offline by pages. Search workout has been a good amount of bras for a while. But now they're basically everywhere with a patrolling House of Ford in Safari on iOS and I cried this March and super hot off the press Microsoft last week every single standard. So we've been using the term Progressive web app to help explain all these new improvements and the gradual roll out of service worker illustrates the
importance of the progressive bit here because Peter be ways that are written progress to take advantage of browser features as they become available can seamlessly upgrade with no need to redeploy. So PW Azar now everywhere. I don't want to share a few examples. Let's start with OVO a global bike sharing company, which I use come to the Bay Area soon. Another one. Is that right and dirt bike and your camera to scan the bikes QR code to unlock it all directly in the browser.
And that's it. You can start riding the bike. I love this example because it shows the power of the webs low-friction model you skip all the steps of finding an app in the store and installing it. So Mother's Day is coming up next week. I guess it makes 100 flowers a timely mention there a global gift and flower delivery service and after they ship their new pwa 50% more of their customers bought things on their site. It's also take a look at editorial. Globo are the largest Media company in Brazil after they upgraded their site. They saw a 50% increase in time.
That users are spending on their site Starbucks is another great example. And because the sidewalks law desktops user. Can I order hat from their desk and somewhat to their surprise Starbucks, but it's actually something. So these are just a few examples but it turns out across all sites that advertise with Google. We've seen it upgrading to a pwa delivers an average 20% boost to the website conversion rate. That's 20% more people who wind up transacting on the site as a result. So this pwa movement we've been talking about
isn't just lip-service all of these new modern web capabilities deliver a material a better user experience and it shows up in the bottom line of the businesses that we've all built on the web talk about Google storage Nixa post load faster and more lively all-in-all reduces jobs to download by usable whopping 50% and that introducing directions delay for not having their jails around by 6% at the scale of storage. Has a huge win for his experience thesaurus for
being able to whole category of new features. If you don't have to notify you when you're back online and searched all is ready. Let's go from our original service to one of our newest bulletin and it's another great example of the low friction of the web because their use case is all about helping people catch your time sensitive local news events, right as they unfold so you can get right into the side of the action without any install friction. And because the web is cross-platform the bulletin team has a super-efficient development story cuz they can get to Desktop Android
iOS and more with a single Progressive product and codebase. Another interesting case study counselor on apps to design for low-cost device organic fraction. Some of the web's fastest growing markets like India at the home screen of the features optimized for low Network usage. So that's better for reaching to have unreliable networks and a more important because less money to use when your connections meter. A song about media. It's a really important use case on the web. In fact, it represents 15% of all times been screwn Chrome on Android and 20% on Chrome
for desktop and over thirty thousand years a video or watch Daily in Chrome worldwide. I think it's actually just maybe my kids alone. I'm not sure maybe a bunch of media specific work has been happening on the platform and a bunch of New Media features like the media session API that gives you an equation with lock screen controls on the device and the media sharing video is an example of a developer who just recently in a specially for longer media-types. There's the media capabilities API that exposes Rich that's about your device. So you can make intelligent choices about which stream to
use theirs picture-in-picture support which were showing here this works across desktop and mobile devices and there's a new presentation API that allows you to explicitly control what you show on secondary displays and let's talk about offline support for a minute. It's a major use case for many parts of the world with limited access to Reliable high-bandwidth connections into the large Indian media property. Boot as well as globo are enabling the new web offline media apis into their sights and there's a new next-generation open royalty-free Kodak coming call 81
we've developed in partnership with over 30 major media and tech companies and it provides 30% better compression over the earlier vp9 codec for this kind of a big impact and it's shipping and chrome later this year. Okay, so we've been focused on mobile but now I want to talk about just out for a minute because it's an audience that remains in the billions and productivity web apps like she's sweet continue to grow and we saw the Starbucks even mobile. Focused experiences are finding big traction when they come over to desktop SilverStar need to take mobile license over to the desktop
platform and one of the things we're doing is adding support for add to homescreen the desktop Chrome so that once you install a pwa on the desktop icon and its own top-level window, so finally you can use old tab or command tap if you like nice to get to those windows, and because this window was powered by the full Chrome browser. You also get access to Chrome browser affordances like autofill, so these new desktop and the trip to everyone in June and will follow up with Windows and Mac later this year.
What's the big Spotify fan? So I'm excited about this next bit. They're shipping support for desktop pwa features and you can experience it now on Chrome OS because the web gives music fans a fast and convenient way to get rid of the Spotify and listen to their favorite songs and their dust up TWA is a rich client that allows for playback of music and podcast and it has been Spotify connect support for remotely play music that you look through speakers or other devices or through Spotify apps and you can get right into it and it's an experience or app
updates to manage Enough original laptop. And now it's an awesome death of you to be a with sore throat with based off my note. Disney. Features that have to be a truth table window like pants that you can all talk to them and be treated like any other apps running on your operating system after the boundaries between websites and apps on desktop as well. So what we're talking about the desktop web. There's another example I want to share. AutoCAD, so
big one with the weather today. So just get back to AutoCAD. They launch the new web app in March that was able to take their thirty-five-year-old codebase. That's literally older than the weather itself is better to be honest with you, but they are able to bring it to the web and AutoCat is now universally accessible on all devices instantly. So if you're away from your workstation, you can make edits your cat drawings regardless of the device operating system and their engineering team now has a shared cplusplus codebase. So as they make changes their easily
didn't work at 5 to change for the problem was settled Rosen to rebuild. He's never really has but there is light at the end of the tunnel in your own Project Pat. If you don't like you probably kind of feel bad about it, the web has never had anything like that because I thought of me to text will wrap standard. So finally a thing you minimize Crossroads incompatibilities and restore helping with that compatibility as you can see in the chart number at West Beach is only one browser. It's going down over time at the same number the number features on all major engine constantly going up.
Recite the things are going on the right track. Okay to the tools libraries and Frameworks that we're working on here Google to make web development more productive. Let's get started with the tool that we ship to every Chrome user worldwide Chrome Zone devtools millions of developer use this every single day and it keeps getting better and better please welcome Paul Irish is here to give us a taste of what's new this year. I've been all right. 2018. The world is a synchronous and when we're at the bugging that we can't
necessarily step through code line by line. Like we have timers and Promises never to activity to contend with the Chrome Dev tools have transformed to adapt to this new a second this world as well. So we sure what it was like a year ago. We have this little function that time out with console log within it and we'll just take a look at what happened to Chrome from a year ago. And I want to step into the console into the set timer to pause in the console log, but but I hit Stephen Two Step past it it's not really what you want. But we have the same code we
step in and we jumped over the invocation in a set time out. And again now we're pause right on that log method point. So this is what we got. Let me hit that timer right set timeout bugging this should match our expectations of being in the world, but you can expect the same kind of debunking upgrades when you work with web platform features, like promises post message web workers and more. speaking of features what platform evolves quickly how to evolve we as developers have to feel comfortable with a new apis any object and how are code interact and the console has always been kind of
our home base for Malaysian. So excited to share with you a brand new double feature that revolutionized how we interact with the console. We call it eager and elevation and that's way to explain it is with a demo so I got this little cold right here. We have a regular expression when you finish off everything watch this. I didn't hit enter yet, but I'm already getting the results of this evaluation. The cool thing is going to update this as we type. So when I go over here was even
work if I change this to use any more like parens around the know. Okay. Well, the regular expression is a little brittle all admit it. Alright. Okay by the watch all three of them. Let's just like all three and we'll just replace it with a d and yeah, okay looks like we're still pulling out the same stuff that I've been good. All right. I wanted to pull the area code out of this phone number right here. So, you know, what why we have these multiple cursors. Let's just go ahead and add
some capture groups to the regular expression. All right on Boom-Boom capture capture capture. So area code is one. Alright, sweet. We've explored in a p I made an improvement and got the result that we were looking for pretty awesome. Soap really not that it was just a taste of valuation enables you to work with all sorts of many sorts of jobs with language features down apis your own jobs with code in the really powerful thing about it is that you can guarantee there will be no side effects in the way that we
unable. This is that we introduce a new mode in V8 where we attempt to evaluate sin jobs gift know that it's about to call the side effect that will change the outside State we just bail Speaking of V8. We've been working hard to bring the steam doubles experience from the back end from the front end to the back end by making it a great tool for nodejs. So grab yourself a recent build a node and you can use the same features that Alexa on the server that you do normally on the client. So we have covered a lot of ground in this if you'd like to see more check out the devil's
talk where we'll be diving deeper into all of it. Thank you guys very much. Thanks Paul. So you didn't notice on the slide fall session starts bright and early tomorrow, but it's really worth the effort to get an early start charge you to attend. Okay motorcycle, another feature of DuckTales called Lighthouse. This gives you clear guidance on how your website can be improved in categories such as performance accessibility capabilities and more and people are actually using this so far this year over 500,000 developers have
used it to analyze over 2 million pages. So we're working hard to make Lighthouse better and this year. We're launching a new version 3.0 with refined DUI and a higher quality insights and were announcing a new Lighthouse API to bring these insights into your workflow and do an able integration with other tools and platforms. Insights, but in the real world, there are a host of variables that can influence how your site actually performance like a variable Network conditions or the different devices that people using and so late last year. We launched the Chrome user experience report to help
with this it contains real world performance data showing how Chrome users are experiencing over 4 million Global domains. You can analyze this data set yourself using the free big furry tool or we've also integrated into our page speed inside stool, which is the easiest way to use some of this data to see your performance and you can also compare yourself to your competitors, which can be very motivated. Okay. So we also introduced the Puppeteer open source project last year. This is a node js library for controlling the Headless version of Chrome giving you program attic access to
his rendering engine and this project is on fire with over three million installed and it's used by over 600 in pan projects. You never know these things most important of all it has 30000 GitHub Stars a bunch of interesting use cases to integrate Chrome into your developer workflow. We're also releasing a new version of our work box Library. This makes common service worker cenarios significantly easier with that you can transform code like this, which is about creating a cash for CSS file into list. I think this may be the most
under a library from Google if you're thinking about making a service worker, I'd really recommend to start with workbook the grout eez, rolling your own. Okay, so if done poorly sign up and sign in can be a big Fortune point for users so our new one tap sign up an auto sign in library currently in Early Access can drive really big. There's no identity provider to remember and there's no password to create and so when users return to your site, they can sign back in really easily.
It works by drafting off of the existing sign in that. The user has on the device with a Google property like Gmail and it's based on the credential manager web standard. There few examples. I want to share hear of where the benefits come in first. Redfin are real estate company here in the US side 80% increase in sign-ups after implementing the one tab library in Trivago. One of the world's leading Hotel search engines offered in 55 countries saw a 2X increase in user sign in after using the the library. So is another area where some
optimization can go a long way and we just recently made Google pay available on the web payments from users who have cards saved their Google account and it works seamlessly across platforms in global regions anywhere that you have user is signed into Google and platforms like Shopify now that you integrate with Google pay with a single click. I don't think it's worth a big fan of this is a set of apis that let you build your own reusable encapsulated components using
Primitives that are baked into the web platform itself. And it's only been in the past few months now have needed support in major browsers and their polyfills to reach all of them. So they give you a really interesting way to create nice reusable chunks of code that you can pass around and you can create them with just about every major framework. We created a website called custom elements everywhere with up-to-date compatibility information on many of the modern Frame Works in pre-act you and many others are entirely compatible with the Cortez and our own angular team just released angular
elements of first-class way to use web components within an existing angular app. And speaking of what components we created the polymer project to help you build web components. Will it help your own team achiever use or to create custom elements brother developers and this week over team is releasing the next major version 3.0 which add support for ES modules and npm. So it now works seamlessly with your favorite tools and Frameworks and the Palmer team is also dealing a few Cutting Edge new products here in Ohio that are focused on creating fast loading and tightly optimized webapps.
One of these is lit HTML. It's a small three killed that uses the latest es6 features that enables a web app to perform fast efficient updates to the Dom which gives you a really Snappy user interface and using this Library. You can create really compact weapon that work directly alongside your existing what components or other framework elements. It's a great example of Liberty in the modern web platform to make your development easier and your apps more efficient. I think it's fair to say that you just went through a lot of stuff which actually kind of brings me
to the next topic talking to developers one message comes over and over again. It's like all these awesome new features that I owe talk about them and frankly, it's a bit overwhelming and kind of less than what to do and I will say this may not be right for tomorrow. Should I should I should I steep on topics but not everyone is like that not every company can necessarily afford to always be up to date for the absolute latest three buildings and best practices and you should start out with the project might eventually context is important for forming Serene Stables
as your webpages. I think we need to recognize for the web to be truly open inclusive spring be so long as well. Allow them to be like Brit experiences a short summary. What size with rain music rain in capsule in best practices and provide automatic guidance or 6s have enables a vast range of Publishers to deploy breakthroughs experience and crevel steel. Take a look at that scale really quick currently know there's that was 6056000000 domains and most importantly they continue to look under one second measure from Google search at the median this translates into business success overstock.com.
So it's 36% increase in revenue and there and Pages Indian Marketplace shopclues for 29% increase in conversion and Chinese by tencent use for 2x entries in Highland side in a 40% decrease in pulse rate. Talking about Anthony Commerce. Maybe my favorite examples AliExpress. They went all in on app that uses for their homepage for the service worker 2 and 1/2 Seasons road race results out traffic conversion rate at another important thing as well. I said earlier. We're really focusing on the evening a bigger stuff. Papa shows the great great experience on the web ham stories is such a project
because content consumption on mobile is changing by supposed to rain storytelling formats of becoming more protect with popular everyday, but this development happens almost exclusively in Native apps. The rap is literally the best platform to build these and it certainly has all the kids abilities such content with the technical investment that he would have to make to implement them is off prohibited. And so they're drawn to these Walled Garden and to end with m stories when how much does a captions emerging send a friend of Storytelling of able to pop ears on their own website
with minimal technical investment Rich storytelling on the mobile web animations can tell which direction and other design for mobile. They were great on desktop as well. Obviously I'm stores in a pretty radical shift or trying to progressively in half but plain old web page you requested work and everything. That's the class features and components that can be added to a document with minimal effort. Listen to stuff like Parallax scrolling. I think like video. Well our
goal to summarize to get these behaviors attitudes many web pages as possible to make sure there's a rep continues to make user expectations. All right, as long as exciting stuff coming to an end, but it didn't want to touch on a different angle. We realize that amp is for everyone being opinionated and actually, so let me taste and see which is not the right tool for the job and also means that some people have different opinion. That's the yard. I don't want to use that what you're talking about.
Let's take a look at the core features that and brought to the web experience. Realities experience in Sonora movie call Seamless navigation. I think the first one kind of explain them self we talked about the last ones. He was navigation later this presentation when unable to say middle name to date for all pages on the internet that Implement a new set of Standards. Where's the playlist Genesis version of BMX brands? At The Mention earlier amp load ingredient in one second with a chrome user experience before there's no public dataset the show us a fast
or slow time isn't everything works but isn't actually interactive because of blocks. The main threat does not provided reduce Express in combination with spectrum of the experience when they visit of hitch. Another feature am proud to be white for privacy preserving including you when I explain really quick with that means to achieve before I think so, but it's because now the owner of pages free fast would be able to for example study cookie later sent you a
space of that never actually ended up going to the page and then we were going to bring the same privacy friends feature is to The Wider web that is where in the merchandise and are called what packaging comes to you, but keeping the Integrity guarantees of hdts as a bunch of applications. Then finally I lost the same privacy preserving instant loading for all content on the web has very specific benefit because those like nobody like the going away from packaging you couldn't be more excited. All right. I talked about how this is
still brand new but we actually implemented in Chrome. You can try the height of the flag today. My team is Field open source, tools great the packages the Prototype and then finally companies. Next Market at Pinterest our focus is to help people around the world discover and do they think they love we wanted to create a seamless experience on the mobile web that puts the right content in front of our users enabling them to take full advantage of discovering content in browsing Pinterest
without the friction of sloth X or having to redirect to the app. This is why we're really excited to Showcase. How are using a b w a n y packaging today in the product for the simple search and switch to the devil. So I have a five-year-old at home. She loves to make things and so I'm looking for some spring craft ideas for her. So here you will see that when I click on the on the app page it lost really fast. And even even though we are on the same page you notice that the URL says Pinterest.com. This is possible by the web packaging
technology that enables us to publish times something that can be served directly from the Google cash for the privacy of our users us all their actions are now contains within the Pinterest.com origin. And now you see this when I click on that I was very seamlessly transitions into the Pinterest pwar from here. I can take more rejection like save this to my board But more importantly also once once I'm on the pill an hour, then I cannot Pinterest to the home screen and from
their show all the toys that that I have collected for my daughter so we can do it together. So adventurous we're committed to making world-class experience for our users. We were the first platform scale that enables and we've been able to shave over 70% of all times for our users over billions of pages in for millions of users. This is how I can help people around the world find inspiration. Thank you. Thank you for the awesome Dental just summarize of what continent does not depend on a particular technology like after work
building finalize. It is not ready to ship. Would you expect significant changes to our vendors and Community, but meanwhile with building houses later this year. Summarizing an Publishers merchants and advertise across the globe are seeing amazing success using m-pesa Foundation of their feet of a website if you already have one super easily and how to use Experian for benefits I can send out in the reliable using Sprint the Wide Web. It's great to see what's happening with him and throughout this talk. We've
highlighted examples where the web connects users right to content without any installation steps. We see this rich and model of web links as being akin to a superpower of the platform as molten mentioned. What a packaging is a really exciting emerging standard for a bunch of reasons and I'm really glad to amps able to use it to resolve URL issues. But I think there's a bigger opportunity here for web packaging to help the web lean into this super power and to go from Fast load times 2 no load times. What's the weather for the entire platform? Not just amp.
So what would this kind of truly instant friction-free experience actually look like we'd like to show you a prototype. You should download the Google image team is exploring so maginus or something and you can like one of the results right and you go to the webpage for the image came from to you today after like you might do that instead. We think that's was this your answer that would be a significant number of people actually move on to next page, but you would be amazing for publish the web content and a great music as well, which is
one example of aside to rethink our navigation on the web with work. It's really make you laugh the most seamless and frictionless experience on mobile. Okay, we are running out of time. So we should wrap up with the takeaways for the talk the web presents a fantastic compelling business opportunity for all of us. So use our insights tools like white house to understand where your site is falling short where you have opportunity to get better and upgrade your site using the latest web platform features. He's afraid which continent, experience and got
consistently high quality results and use their other libraries in Frameworks, like workbox polymer in angular 4 more General use cases, and I'll go make the future, but speaking of the future please join us, this November at the Chrome Dev Summit in San Francisco. We're going to gather as a community to talk more about the path forward for the web. You can sign up at the SeaWorld for more information, and we hope to see you there finally. Thank you for attending to talk today. We hope you enjoyed it. Thank you.
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.