GFM2019-Web-In which we make loading disappear with portal and friends-Kenji Baheux
So. My name is Kenji I'm a prog manager on Chrome I work on making Singh loads fast and so, this talk is sitting, between. Like. To lunch it, was supposed to be a talk that fits in 30 minutes but I did it once whereas Yusuke at yes and we run over time so we. Moved a couple of things and then I was told that I actually have 40 minutes so. Against. Like anyone's good advice I put a few more things in it and so I no longer know how long this is going to take but. Hopefully, you choose this track and you're going to be unlearned before the other track we, say that goes so. This talks about new, api's that are coming, they might be behind the flag they might be an origin travel or it, might be an urgent one soon, so, look, at this and theme of like what is coming next, and those. APRs, are designed to create experience, that are seamless, vailable. An instant. All. Right on the web we spend a lot of time waiting for things to load, and. Especially, true, if you compare to the kind of user experience you have on native apps when you browse content on native apps it tend to be more kind of like instant, seamless you can't see that things are loading but, on the web it's it's, like very different right you can feel that oh this is different like something is wrong and there, are many reasons for that. And. The fact is a ninja it's actually, worse on. Average like, there, is 70% of the time being spent watching, at the blank page that you saw in Jack's talk and so. That's not very useful right and so. The main reason why this is happening I think is the way we tend to load websites, so. Let's take a look on the web if you click on the link this, is going to D be the typical, user experience that you will get to see the. Browser, is going to fetch the resource. For this like the successive, navigation, and while, it's doing that it's going to show this blank page right then, you wait and you are left wondering is this going to work is this going to fail like, today you've seen how bad the Wi-Fi can be right like, I was trying to make a final like changed my slides and didn't work and, and. So this, is very frustrating, and. Then eventually it's going to start to render.
But Most of them this is not the end of it because, they are elements, that are coming, on the page late and they are going to push to things that are already rendered and so if you were to trying to use a page typically, you, will hit the wrong thing right and so. That makes for a very frustrating user experience. So. Can't we do better what, if for instance we had the ability to do experience like what's on the screen an, experience, where there is no wait time an, experience, where there is no transitional. State you, can see that everything, is proceeding smoothly you, really feel like this, is an app right it's not a bunch of pages. Okay. So let's take a look at the implementation options you have today at your disposal, you. Could start by saying okay I'm done. With the web I just want to go like native apps right and sure, you could do that in deliver a top-notch user experience, but, the problem with that approach is that it's. Kind of like building an experience that only a subset, of users need. Or won't, I mean. Installing, an app is a, lot to ask for most of your users right, whether. It's about like, the. Time it takes to get to the store and wait for their like 30 megabyte of native, app to load that's. Why not going to work for everyone and also, it's. More commitment, because in term of storage, it's, more than just like a website and you, also have to agree to my, permissions, out of the gate and so, that's not going to work for everyone. So. One you could still like, consider building a native app for your mostly your own users if you, really want to reach new users you. Have to get a you. Need a presence on the web right and so, on the web you have essentially two options the, first one is a multiple, page up or NPA, and the, other one is a single page up s.p.a let's. Take a look at SPF, first. I'm. Not getting my speaker, notes so this is all like, by heard of Riya is going to work so with, an SPI essentially, it, kind of looks like building, a high-rise and reason. I say that is because you have to rebuild a ton of features that are provided, by the browser, things. Like history right. You have to management to manage your own State or scroll. Restoration. If the user goes back you. Have to restore the credit scoring position, yourself all of that is provided, roser except.
If You do NS PA all of that is gone right. The. Other thing that this does is, that it. Is. Creating, a lot of dependencies, between all different pieces of the app because everything, is monolithic, right and so in the user. Developer. Productivity it's. Not a great story. Like. For instance if I want to change something I'm trying, to impact other teams because everyone, is using the same codebase. Right. And. Then the other thing is when. This app grows, and, as PA just like falls apart like the code begins, to become like too complex you have to learn too much stuff and so, your solution in that case is to split it into, different, into. Different SPS, and so you're back to square one because as, soon as you navigate between different SPS. You, have the per user expand that you saw just at the beginning of the talk. Okay. Let's look at what MTA has to offer, so. Personally. I think going in PA is kind of like building a Tom because. Everything, gets its own house which. Maximize, their productivity because they don't have to reinvent what. The browser provide, right, and they, can also more, freely tweak their product, they, can make change to their product without having to worry about what's, going to happen for all the pages. Okay. But, in peers are not without downsides, right. Overall. An MPA does result, in higher, friction user experience, because. Everything. Is a navigation, right if you want to call from, that house to that other house you have to take the cow maybe. If you don't have a care you have to you to call herbal it's, like a navigation, right it's not going to be great user experience. And. Personally. I feel like the best kind of experience, that we should aim for is one that is looked like this like a seamless experience where if, you tap on something it reacts right out of the way you, have the sense that the, app is there to to. Help you get things down right. This is an example that exists on Android it's, using, an API called share element, transition and here, idea is that you reuse an element, like. In this case this particular contact, to. Transition, to your user to, the next variation like providing more details and all of that and so this is how you make seamless experience, and so. Would. It be nice if we were able to achieve the same kind of experience, on the web especially, with an MPI, the. Good news is that. It's. Still early days but, with. With. The app of the broader community we, think we've found a way to deliver this kind of user experience all the way it's. An early API that we call poor loans and we. Gave a teaser during, last year's CES and we also showed off our vision, for how, we want to take this further at. I/o this year. And. So. We've, heard a lot of feedback from partners, and they are super excited about this API and, the good news is that the team made a lot of progress and so, we are very close to announce, an origin trial for the same origin use case and so, I'm going to watch you through the. Whole portal API. Okay. Before I explain the API lets me briefly, explain the key concept behind porns so, Pollard is all about enabling better navigation, on the web and. The early days all the navigation, we're down three simple, links right the, prime with simple links is that they are not generally appealing. And. The. Friction of navigating, to a page is always going to get in the way right it's not a great user experience. Then. Snippets. Came around right like, you see, that a lot of like search page and all of that it's, still a link it's like more appealing because it does have like a nice visually, provides more details, but, overall this is not a much better user experience, like. First of all the information could be out of date and it's. Still going to be a high friction of like a navigation, right. Then. After that what we hung and so, the friction of navigation, is still there right it doesn't really change the, user expenses itself.
Okay. And. This. Is where polls. It's. Kind of like an iframe, except. That you can navigate into, it it. Might be hard to imagine but maybe this is like a better visual for it think, of it of like it's, like a frame that you can open and, cross over. All. Right I think that's enough matter for for now let's take a look at what this actually looks like in practice. So. For, Poland for same-origin, use case is soon going to be available as another intro so you will be able to play with it in a couple of mounts, awfully and just. Like any other HTML, event you can use it directly with, the polo tag or you can also like, use JavaScript, to insert a poll in your document and, I'm going to show you how like how you can use this and what you can create with it, so. Let's say you have a page like, food at HTML or brew like. Super nice with blue background, clearly. This was designed by a cat right I'm not the designer. But. That's going to be enough force to you to explain the basics of poems, and. Then you have another page. Probably. Designed by the same cat ba, dot HTML. Pretty similar to Foom but, with different color and and, so on so we'll use these two page to show what you can do is pour on. First. Before. You do anything you should check that the, Polo API, is supported, because, by. Now like, given this presentation you should know that the Internet, is powered by cats and you don't want to mess up with cats from so, you don't want to create a new user expense that only works in like, a specific, browser you want to be nice and affair user expense that works everywhere and so. You, can check if polos is available. By checking this polo element, in the window object so, do that first you understand whether or not you can use it and if you can't just. Rely on the current user expense that you have today. Next. Let's. Create a portal element, by calling, this API. Document, or create element. And. Then we can set the document that we want to use for the portal in its case the bar dot HTML, the yellow page. You. Can also add some style, to it and, then, finally you can append, it to the, main. Page in this case food, at HTML, and so, there you go you have bow. Dot HTML, embedded in the main page. You. Can also check in dev tool that this is actually, another, a document, that is being embedded it's. Not just like a visual like a converse, whatever it's the, actual document is there. Yeah. You, can study Emmet as you want like in this case I just made a preview, of it like, it's a smaller version of the document I'm using position:fixed.
And So. And so none, of that is super exciting, I mean like you can embed document within document that's, kind of like not new and this, is where polos, actually shine with this API that's specific, to portal, you, can do very fancy things so, this API does call activate, in, essentially. It's, a function, that lets you navigate into, the page, that was already rendered right, and this. Is how you can create instant, navigation, let's. See how that works so what. I'm going to do is here I'm, going to add a click event listener, so, that when do user touch the, bar dot HTML, element I can call the activity function. Okay. And, when I do that, you. Can see that the top level window navigation, happen and you magically, navigate, into bar dot HTML, instantly, right. Without. Any white, loading screen whatsoever, this is an MPA right with, an SP you could do that very easily but we don't in here you can't do that today it's not possible, and. If. You pay very close attention you, can see that the URL is actually, changing right those are two, different pages right and this, is super important because you don't have to reinvent all of that navigation. And like state, management. So. As you can see Paul, already makes loading disappear, you, don't need to wait for, the page to render anymore because. It's already rendered in the poem isn't. That great I can, can I get a round of applause like this is amazing now. All. Right woohoo so we did make loading disappear, and maybe I could just end my talk right there and we can lunch but. I mean like. The, target experience that we wanted is quite, different right if you look at this this. Is going way, too fast it's, kind of confusing it's. Kind of like one of those movies that like super, hard to follow because they would cut to be like a different scene and you lost the plot like, it's not easy to understand what is going on especially if you are looking at it and you are not doing the interaction, right. And. What I want is something more like this where there is a sense of like there is a transition, happening, like, I understand, that the app is reacting, to what I'm doing and, so like. Is is, that it like just like the Polo is done it is that just like the accurate function the, good news is that, polo. Has nothing to do with animation, right, and I, think it's actually a good thing because I, don't think an API should be in a business of defining, widget, user experience, like. Today like cows lui. Are fancy but maybe in, two years from now this will be like all, news and people will have find on different ways to do things and so, I think it's actually better that will let you design to kind of like transition, and API transition. That makes sense for your product and your users so, let's. See if we can improve our demo. So. We can start by embedding the poll on just like we did to, show a preview of the page, and. Then instead of like activating, right away what, if we were for instance you bring. Back the scale to 100%, right you will have this like zoom in effect and so, it's more intuitive oh like oh yes, I touch this thing this is there we come into a new page and. So. By, the way like just notice that here. Dimension. Is still going on I'm still, on food HTML. I need, to call the activate, method in order to truly navigate, to the page that we want to go to. All. Right so as I mentioned, like polos has nothing, to do with animation, and and. So you can always animate, the poll on 2003 transition, smooth you, could use like existing, ApS that we have today it could be keyframes. It could be CSS, animation, it, could be driven by JavaScript, like. Pick whatever you prefer in this particular case I'm going to use CSS transition. So, you can see that when the user clicks instead of like coding activate. Right away I'm going, to do a fancy animation, and, so. In this particular case what I'm doing I'm sorry, is. Essentially. I'm slightly, translating. The page and bringing. Back the scale to 100%. Where's, a transformation. That lasts for 400 years again so, not too slow not too fast just to give you a sense that this, is the page becoming the full view again. Okay. When, the CSS, transition, ends, you, will get a transition, and event, and so, that's very useful because you could, for instance show, a very simple, simple, version of the page while it's in the preview and, when it gets activated then, you can go crazy and load all the rest right you can like use JavaScript and like make it as easy as you want and so, that's where you would do it and, then eventually, yes.
You. Can call the portal activate method. So. That you transition, user to this new page and. So. This is how like an instant navigation, can be done with polo, despite. Being an MVA. Ok. This looks much better right but. What if I don't want to force my users to navigate away. Ok, you might be wondering like what's the point of that right I swear. This is going to be useful so bear with me. So. Beside activate, portal, has, another, powerful API call. Add up predecessor, as. You can tell from the name after being activated, you. Can use this API to, retain, the page that activated. You right this, is the predecessor page it's the page you would go back to if you, were to press the back navigation, button right, let's. See how you can use this in our demo, so. First of all you can listen to polar activate event and. So. This is where you would check whether bar, dot HTML, got activated, and the. Interesting, things here is that it. Come this, this event come with of other predecessor, function right and so you can use that to, retain the page that activated, you and you. Can also append. It into, the document itself and so, what I've done here, is I build. Something that looks like this right there is BA. Adopting. Through activating. Frou-frou, adept in teeny bow bow. Activating. And then it's on and so on so on right so you can create this like interesting, loop of things right. Make. Sure it's kind of like pointless like, it's kind of like funny like this cat right but, there are more interesting, ways to put that in practice, so let's look at an example that partner. Office bill force so. This example is, an operation from Yahoo in US they. Are using a depressor to smooth out to user experience of reading, breaking, news so. Like. As the name imply when, a breaking news happen. You're, probably doing something, else and so if there was a link at the top you. Might be wondering what to do like with, my email or something right and so you might want you might not want to click on that link because today you're going to be navigated, away and you will lose your context that's not great user experience but, with Polo's you can design an experience that retain. The context. The user worst just like behind it and. Let user quickly, go back to whatever they were doing after, they don't waiting the news so, this is like a more practical, use of this API. All. Right and, then that need. Okay. I can sense that fever like trying to like starting, to getting it right and so. I really, wish that after, this talk you go play with it it's available behind, the flag you can already build interesting demos with it but, before you do, I. Want. To make sure that you you are aware that there, are things to you care about when you use it right. So. First of all as I mentioned polo does not come with any animation, and so, it means that it's up to you to, do great, animation, it's.
Up To you to make sure that you maintain a 60, frames per second, that you make sure that, the. Animation is going to work well on low-end devices maybe you want to do something different and so. Like. Typical typical advice would be some things like sticking. To the transition and opacity. Properties. Do tend to be hardware. Accelerated, right, they are things like that they need to be aware of. You can also use will change make sure that Bazar knows ahead of time what, you are going to animate and then. Finally, if you are doing the the JavaScript, like, approach you should use requestanimationframe, right. That's the right way to do animation with. JavaScript, so. Just, basics nothing specific to polo but still good to remember that this is a thing. Right. Next activity. So. In time for the origin trial we only make sure that we get this right so. This. Is going to be like, Paul is going to have X ability features built into it but because it come with typically. Transition, animation, you, want to make sure that you carry out to the needs of people we don't want like too fancy. Crazy animation, and so for that you will use the, media tree called prefer, reduce motion in. That case what I've done is I made, the transitional, eyes in your face right it's like a, weaker. One. And. Last but not least like. This is a very powerful element, but don't do ever don't overdo, it don't, like put like Polo's for everything, on your page right, it's. Not going to work and so you could use for instance intersection. Observer, to. Limit the amount of ponent you have on the page at once right only have one for the element that is in the view if it's, all of you just get rid of it that kind. Of stuff right. Yeah. The other thing you should do also like you should try to get a sense of whether user, is going to click on that link and you can design UX that makes it more likely so. Like, if you don't know if the user is going to click on it maybe it's not a good idea to put a polar behind it because it's going to behave young device. All. Right if there is any any reason to take from this overview a polar is that polar is very simple, by design it's. Not meant to get in your way of them, in terms of creativity. And. To give you some ideas to explore I have a few e exponents and partners. Demo to show off so let's take, a look. So. This one is the one we showed last year at CES Singh, is still a great one it's. Essentially. When you know for sure where, these are is going to go next in this, particular case this is a manga viewer and we, work with hottie node to build this demo and you can see that the render. Next chapter in a polo at the end of the current chapter right, and. It is, an MPA and so, you can see this is like a very like, seamless way of getting user to go, to the next chapter no loading time whatsoever this, is very fancy. All. Right another, explanation for far fetch which is an, online an, online luxury, fashion retail, platform based in the UK so, the their goal was to use polo to smooth the transition, on. Their campaign landing page and they are also using other processor, to quickly get you back to where you started so, this. Is a very fancy user experience, as well. All. Right second new exponent this one is designed to smooth out navigations, between. A list of items so typically an e-commerce website where, you have like tons of like, ball items, the user might want to check, what's. Happening here is that off the, screen there is a polo that, that, is rendering a skeleton, UI for. Providing the details page of the product right and then. When, user clicks on an item we. Reuse, this image so. That you can provide something visually, appealing right over the gate and, then you tell the polo hey, go, fetch details, for this item and so this is how you would fill up this like like. For instance project ends information, price and so on. So. This was just a demo but this is actually being put into you in practice by our, partners, so this one is done by fu Japan Pei Pei more team you. Can see that they are using the same pattern except, that they have a different light transition, zoom. In zoom a very. Fancy transition, happening, here and. This. Is an MPA right but it really looks like an SPF. Let's. Try to squeeze more and more you expand on so, this one is about providing, a more intuitive way of browsing, consuming. Content and, my, colleague use K who. I did to talk with at CES call, this speed, browsing. Like. The one we are showing on the slide as you user reach the end of the article you can pre render the next one and, the. User can like drag, it over the current, navigation, to. Complete an aviation right so it's a new, way of like, consuming, content it's very infancy and so like tapping or lying and waiting you. Can just do like a very like. Seamless transition between different products. This. Is kind of like similar to that so, eBay is also, exploring polls and what, they are doing is, instead, of having you go to a search page and like tons of like product they, have this like very fancy carousel.
UX, And. If, you want to check more details you can click, on it and then it would call the activate method for the poll on and so you navigate to the page that has all the details of that product. One. More this. One is done by Yahoo Japan News and they. Actually build a whole new experience over on ponens, so that's also something you can do you can have your legacy product with the current navigation and you can, build a whole new experience with polo so, in this case this is like a stack of highly, visual, cards. That user can swipe through and if. You swipe to the left, you. Can deep dive into the article right and all. Of those things are pages, it's, an MPA and yet, there is no absolutely no loading, to be seen on the screen so a very fancy user experience, and. The best part is that you can actually go to this link here turn. On a flag on Chrome Canary and see. It for yourself now. And if you go view source you can probably like find out how they actually did it so. That's pretty neat. All. Right there is a lot more example, I could show but we'd, be probably running over time even if I have 40 minutes so, I would like to you to thank all our partners, for their feedback we got so far all amazing demo that they built so, thanks, to them. All. Right so have you seen Paul or Willie like allows you to be a little very compelling, user experience, but. Is it really, enough like, should I just end my talk right there. The. Answer is that what. It's true that like. Paul. Yeah. Polar, can help, you build, like wedge user experience, there is no guarantee that users are going to find it right especially, if most. Of the users already have like built preference, in terms of how they when you use their device it, takes a lot of efforts to discover new things and try new things so. What. Do what can you do in that case essentially, two things the, first one is that you should try to lower the amount of effort it takes for someone to try something new and the. Second one is is lower. The amount of effort it actually takes for trying to something new but, ideally, to zero right you shouldn't make it very like low friction for, people to trying something new and so. I'm going to show you a bunch of like product that we have going on to help on that front. First. Let's start with a way to make the first allegation instant. Like, for instance what, if by the time you, got on the bus or the train for your commute you already had like readily, available content. On your device will. Not be amazing especially, here like the network can be flaky, sometime it's slow, that's. Pretty interesting right I see some smile, in the audience or maybe I probably, hit a common pain point and, so. There is an API that we call predict Bhagwan Singh that is designed, to enable that sort of use case. So. With. That not only the experience would be instant, but it will also be available because. It's on the device right if you don't even have a connection it's already on the device so you can just enjoy your content without having to worry about it and. Some. Of you men won't have okay well why. Loading, things and events is important. And a couple of reasons for that the first one is that the, fastball, by connection is not always guaranteed, even markets, like friends, or the, US or Japan you. Can see that 4G is not always 4G, right.
There Are still a lot of people on squeegee, or maybe they actually have 4G, but it's slow so. This. Is not like something, that is. By, going to happen anytime soon and in. India you can see that less than half of the, 4G, connection. Is actually 4G, it's small candles Fiji. And. There are a few reasons for that I, think, it's pretty interesting to, you to see how like the price, of data coming, down drove. Usage, and you. Can see that if you're like me and you wake up at 4 a.m. then. You are you're going to have a great time right the speed is amazing but, after that it just goes down and down and down, so like, 12 the day the speed you will get is going, to get worse and so. This is showing 4G, for a, ninja, in a couple of like big cities right. The. Other thing is like, beside reaching things in advance because the network is not always available you. Can think of it as an, opportunity to engage the, users either. It's, like to provide fallback, content if the fallback they want doesn't load and, there. Are a few more things I want to talk about later. All. Right so parity, balancing, let's see how this can be used so, this example is, an exploration done by gonna buy, times internet I'm. Sure you all know what Ghana is and. This. Is very fascinating, right because PBS. Is a clear, like, API that. Makes sense for product, like Ghana because, you don't want to buffer while. You are listening to music if the connection goes, down right so, you, can prefetch, ahead of time new content, or like the content that you know the user is going to listen to do in the day and provide. A great. User experience, this way. Another. Example, from Japan, this. Time also by, Athena. For, them they want to use product but one thing to proactively, prefetch, the new magazine or the new edition of a magazine or manga, because. Those can be very large like it's 100 Meg's at time and. The. Thing to know about Japan is that less. Oh well sorry. More. Than 50%, of the user only has free gigabyte, of data per month after. That they get total, - 2 G speed right. Think about it I don't, know about you but on my phone. If I check the whole data usage including, Wi-Fi I have. 70, gigabyte, of data per, month right. So, just relying on mobile, data is not going to cut it and so, you can use PBS to shift like, fetching, all of that heavy data when, user is at home on Wi-Fi. So, that when they get on their commute the, experience is going to be amazing right and too. Until the end of the month. All. Right let's take a look at the API so, with. PBS you will be able to register a sync event for your. Serviceworker, you can specify your own tag name just like background, sync and in. This case I'm registering, an event called sync amazing, cuts you can put whatever name you want so you can have multiple of them there. Is also a mini interval, option so this will be the mean interval, between the different sync right if you don't want to update more than every day this, is how you would do it and. Once. The event is registered, the browser will really fire a project, sign sync even to the serviceworker and this. Is where you could run your own logic to fetch the content and put it in the cache storage. Or. Maybe it's updating. Application, settings appreciate, application, code as well so, you can you can do whatever you want there it doesn't have to be about content it can be anything. All. Right and this. The way it works is that chrome is not going to fire the product sync event for everything, because that would not scale it's, going to look at how engage your users or, with. Your app right and it will decide. The frequency, at which this event is going to fire up airs on that the. Other thing that we do today and it's, open to feedback this. API, is only, available for install. PWA at this moment. All. Right. Okay. So when, website can proactively like. Make new content will give you available, ahead of time it results. In instant, available, and great user experience, what's, not to like about this. Well, we promise that if you do all of that work but no one notice it's, kind of pointless and actually wasteful right but. To me it feels like a discovery, opportunity, so.
We Understand, that creating, all of those great user experience, is hard and so. We've been thinking of ways to try to reward, that my fault, in, particular we think we can help you find, your users or we engage with your existing users, in. This particular case what. You are looking at right there our. Exploration. Of UX. That we have in chrome so this is the new tab page and. You can see that we. Are going to tell. You that you have content available even if you are offline so, we are going to start with offline but you can imagine that as. More content is available on the device we want to make that available for any, situation doesn't matter if it's offline or not and so, if you go there you would see there is a new UX that is going to coming soon explore. Offline, with content, as available, on the device and so. The way it works is that you, will need to tell us what's available right we can't just guess and so, there is an API called, content, indexing, API that. Is designed to help to, make that a thing. So. Again, to. Use this API you need to have a serviceworker and, at, least a subset, of your pages, need to work offline and so. What you can do here. Yeah. So you can add URL by. Using, this registration, dot index dot add you. Can add URL. Element. That are available on the device, so. First of all you will need a unique, ID so that you you can design you, can specify, which, part of the content is available then. You have to specify what is the URL to launch this piece of content so that when the user tap on the tile it gets directed, to the right page. This. Also has to work offline obviously. Then. You can put some additional data like what is the title where is the description. Icons. Images, and. Also, some category, is that like a music, video, is, it like a page, and. So on and so on. Alright. And. Obviously in addition to adding you can also like, list, what's available and, delete. Everything, or like specific entries so, you can manage what's available on the device so that what we show the user is current and up-to-date. Ok. So having, collection, of content ready to go is quite convenient right especially in markets like here where the condition is not always great but.
I Think we can take this and not further so what if for instance we could. Have a self-contained, piece of content or even an app that. You could share with your friend or dispute in different, ways instead. Of like just link right if I give you a link and your. Connection is bad it's, not going to be useful right but if I were able to share with you an, app or piece of content you could make that you, could use that right away right and so. We've. Been working on something that, is going to help you and so for self content piece of content, like app to exists there, needs to be a way for you to package all the resources it needs right, in a convenient format that you can dispute. So. With. The help of the committee we've been working on this thing that we, prolong that we've been calling a bundle, HTTP, exchange, it's. Not very like marketing, like saving in terms of like naming and so. We decided to rename it in web, bundle which. Hopefully is easier to understand what this is about. So. As the name implies it is designed for the web and allows you to bundle resources, so like phones JavaScript, HTML. Images, you can package all that up in one file, and you can serve serve, that over HTTP. Peer-to-peer. On. A USB storage, it's. Just a file right it's, kind of like a zip for, the web if you if you think so. All. Right so we have a bunch of things available today we have a command line interface that. You can install, to generate package, the. Best way to try, it is to just grab a half eye from dev tools and use, that as the input to that tool it's. Going to produce a web bound on that you can use today, on cannery if you enable that fly. We. Are also exploring, a JavaScript implementation, of web bundle and. We just reading the very first draft of an NPM module for that called wpn. Ok. We are still in me not like brushing of the library so if you have feedback on like is it easy to use or there anything missing, please. Don't hesitate. All. Right as I said load efficient format enables interesting, use case in this example I, can share proc start right, we've talked about it it, available, in a webinar format in this case I can share it with a friend through like a fight transfer app maybe, share it or other options even. If I'm not playing like, it doesn't really matter I can I can share with you and you will get it for sure. The. Other thing that exciting. Is that because everything is on the device the, loading experience is going to be much faster by, design right so, let's, do a very like simple, comprising, on the left you have web. Bundle, and regular, web on the right so. Boom there. You go I'm launching the one below it's already done the. Web on this is on 3G it's ticking its time it's not done yet and then, finally it's done right so like, clearly, this, is amazing, it just works. It's extremely well, alright. So on this clear victory of like upcoming, innovation, I want, to wrap up this talk and like let's you go to the lunch and so, today we've talked about four api's the. First one polos, is designed. To enable instant, and seamless deviation, it's, going to be available soon, in an Origin trial for, the same origin use case and hopefully next year we can talk about cross version use case. We've. Seen tremendous support, from web developers, and your. Interests, like building news exploration, like 10 years did it get did we get it right that's going to be very useful for us to reach back to all, the browser vendors to make the case that this is useful, and that it's going to deliver great, user experience on the web so.
Please Play with it. Predict. Background sync so this one is to make content. Readily available on, the device it's. Already, available as. An origin trial. We've. Seen as you've seen like we we have a couple of demos already we've seen you transform we're developers, and. Again, like we need your feedback to help us engage with also prevent both of vendors to make the case for it. Content. Indexing, this is to make it clear that there is interesting, things available on the device to our users, this. Is going to be available soon in a Rajendra know hopefully chrome 80 this. Is very like brand new so. We want to hear from you did we get the API right you have any concerns about it and so, on and so on and, then finally, weapon, Don so this is very bleeding, eh this is not yet available as, an origin travel but. This is a convenient, distribution, format for, content and apps opening. New ways this virtual like up and content it could be sharing, between friends, maybe you can incentivize that. It. Could be discovering, your app at like an, off-site event you. Scan a QR code and boom you get it so. We, are looking for love use case a lot of feedback because this is a lot of work this. Is not an easy API, so, please play with it tell us how you feel about the use case what, sort of like things, we should add to it. So. We've seen a lot of interest from developers. Around specific use case but I think there is a lot more we could do with it, the. Sun news is that there is some concerns, but not for the use case I talked about today it's, a different set of use case if you only learn more come talk to me but, for the set of use cases and talked about today it's it's not that bad. Edge, on the other hand is like totally on board I understand, what this is what why this is great for the web do you have and so, hopefully we can convince your browser vendors that this, should be a thing as well. Alright, and with that I'm done I, actually fit the whole talk in 40 minutes so. If you want to learn more go to this link there is like links to all explainers. And zone article, more, details, and. Also come talk to me after, the break at. The office hours and so on thank. You.
2019-12-04 15:45
