Categories
Online Marketing

From Low Friction to Zero Friction with Web Packaging and Portals (Chrome Dev Summit 2018)

This presentation is a developer preview of two upcoming APs with packaging and portals with these api’s. We believe that the you’ll be able to take that with no friction nature to the next level and the created zero friction user experiences.

I hope you like it. Let’s dive right into it all right, so here’s the slide showing a slide to be more precise. This is one of those old-school projector slides in their day, slides like these were useful way to communicate or held important memories for people to view the slides content. The projector needed to mechanically position it into place so that the light source would shine through it and for those of you who might have readed one of these old-school slide shows.

You probably remember how tedious it was to progress through each slide. This kind of makes me feel you know like how we think about the web today, the same feeling just like progressing through cylinder slides when you browse the web today, you can feel all the navigations today the web is used a lot on the go say in Between meetings in an elevator or maybe you’re, on a poor connection, when I’ve got limited time, focus on my phone before the next distraction comes along spending five seconds or longer staring at a white screen.

Waiting for the content to come in for the page should be interactive. That’s incredibly noticeable. Many of you may have observed. We use some exaggerated long transitions on our own slide. So far in this talk, don’t worry we’re going to put an end to that soon. Those were just one second fades, think of how use of the cycle of reading and then waiting reading and then waiting that we’ve kind of grown used to.

We think it’s time to do better and we have some ideas to help. You create seamless, zero, friction. User experiences and that’s what this talk is all about, so how I decide to see team user experience on the web, it’s not near in chrome, 13, back in 2011, we launched a feature called instant site which provides such a blissful user experience. It did so by prayer enduring the search results it would use, it would most likely click on.

However, the feature only worked in materials for various reasons, in particular for professionalism. It only worked for the search results the user had already visited and for which we had a high confidence of user interest them in 2015. Another external problems had to experience what’s launched. I’r talking about armed Rudi is going to oh Castro. What it took in the were things I had it so Cooper said advancing the state-of-the-art in page.

Loading has always been of intense interest to us at Google and for Google search. We point users to a whole lot of web pages and thinking about the totality of the experience that the user gets, we really wanted to feel as fast and as seamless as possible, even as the user goes off, of search and into the whole great world of Content that they’re looking to explore when we started amp, we were intent on using the full power of the web platform that was available, but where we wanted to get was here, and we felt that what we could achieve on a scalable way on the web.

Kind of just got us up to here, so we gave it a bunch of thought and came up with an architecture for instant loading that could work on today’s web. It’s still what we use today. First, there’s the amp javascript library. It helps to ensure that the experience is fast by default, and this is enforced by a validation step which helps keep the experience fast, even as the site is getting updated. The next layer was thinking about how server response times can vary a lot globally and not every site is situated on great infrastructure.

Also, as we’ve seen earlier, you know, sticking huge images into pages intended for mobile. Viewing is still pretty common, and so, for these reasons we added the second layer of caching, where we can ensure that the content is pushed to the edges of the network for faster delivery, and we can do common-sense optimizations and last truly. The best thing we can do to get load times down to zero milliseconds is to pre render the content use our psychic powers, as we just discussed.

This was tempted in search before with instant search. However, you need to think really carefully about the privacy implications of such a design and we had trouble scaling it. The cache will actually help us complement this pre-rendering very well, and koneko will explain more about that in a moment. So we got all of this stood up, and this is where we ended up. Most of what you’re looking at here is what we call the amp viewer.

That’s the account page you’re visiting it’s responsible for displaying the content serve through the amp cache for speed and privacy reasons. However, you’ll notice, by looking at the address bar that the URL is still saying, google.Com in it to help the user understand the where the content they’re viewing came from, we had to add an extra piece of UX to the top of the content area of the Page, the idea of the instant loading was achieved, but the design constraints that we faced and the workarounds that we had to build for them ended up being put on full display in the product experience, and that wasn’t great.

So we hear a bunch of feedback on this, maybe even from some of you so earlier this year we started down this path to make the URLs for amp pages better and after having an amp in the wild for two years we decided it was time to Take all that we had learned and developed the necessary primitives in the web platform directly, so we could make all the content across the web be able to benefit from this kind of technology.

So this means that, for the cases where you click on a link in search – and it’s just a simple navigation, then we want the publishers URL to be the one that shows up in the browser’s address bar while still having the instant or nearly instant loading experience. So I already talked a lot about hub has been bashing with the goal of highly optimized, the user experience. There was a lot of special handling required because of gap in the web platform.

We are now taking inspiration from past efforts like amp and the instance sites in the trying to eliminate this cap by extending the web platform, and by doing so, we also want to enable this direction user experience it’s across all content on the web. We are working on multiple proposals to achieve this goal, but in this talk all introduced to new primitives with packaging and the porters, so let me start with away packaging, as the name implies.

It’s meant for packaging, a piece of web content with liquid to enable various interesting use cases, but let me start first explain how it can help instant navigations was for amp and non amp content, so stepping back we belong. We wanted to make web content load instantly and reliably here’s why it’s hard when you publish something on the web in the simplest setting, you do have a server in the your content to be a project there.

Then someone brought your content, but the server might be overloaded and your content will load slowly. Change experience not good, so what we did in previous Wow, we would be to fit your content suppose that your content linked from a popular traffic source site when a user visits a site, it can trigger a privilege when things that the user is about to be J’tia content, then, because the content is already in the user to church the navigations happen very fast, our fortunately the prefetch.

The website can learn about the user, the interest, even if they don’t visit the website. One way to fix this would be folder before our site to other cache. Here, then, the referral site could bootstrap your page load in the privacy-preserving manner, because it could let the browser private, your content from this. This fix the privacy concern in the content loss instantly. So is this the holy grail? No, not yet.

As already explained, this design ends up in free display in the product. The browser’s address bar shows the URL observable for our site, instead of viewers, because this is where the browser thinks the content is coming from. This is converging to the users. The issue is that the report from doesn’t provide a proper way to let others would stop your page lot, but what if we are in the critical resources, could be shared with popular traffic sources and were loaded on your behalf.

This satellite traffic source to boost appear petals in the winter user, navigates it’s just a regular page load from your service, only much faster. So how can we achieve this? The browser needs a way to verify the tourism resources that are served by a fast cast. This can be done by adding a proof of origin on these resources, which is exactly what we packet in provides. So, let’s see actual standard proposals with packaging.

It’s not the name of a single proposal, but an umbrella concept for multiple spec proposals. The most important one is design exchange, it’s basically a format that represents a single HTTP exchange or a pair with HTTP request/response, very simple, except it’s digitally signed, so that the browser can verify the original resource. There’s another proposal building on top of signed exchange called bounded exchange.

This is a bundle of exchanges, therefore, can represent multiple resources in one package like a whole webpage. We think that the bundles exchanged will enable other interesting use cases while we started to design exchange. Since that’s the key building block and after a year block we’re pleased enough that we’re starting an oompa experiment of the feature on chrome 71, which is in beta now, you can play locally with it by enabling a flag or conjoined experiment to interpret on your site.

Please visit bittley’s /, try fxg to find out how we’d love to get your feedback on this. That will help us improve this feature more quickly. So, in order to create and publish signed exchanges for your resources, you need to first acquire a certificate that can sign exchanges and the hosted at a public. You are. Such a certificate can be created at digital today, once you do that you can generate signed exchanges for your resources by using an Opus, a stirrer.

This process is very manual, but I’ll talk, we’ll talk about each options later in this talk, so the origin trial process is needed for sites that are going to link to signed exchange content. That could be your own site, but it also includes platforms like Google com. So we’ve gone ahead and enrolled Google comm in the signed exchange origin trial and we now like to show you a demo of using signed exchanges for delivering amp content from Google search to walk you through it.

Please join me in welcoming to the stage tsumo from 1-800 flowers and Rustom from CloudFlare. Hey thanks really Amber’s provided a prominent pathway for user discovery of results and brands, teaser close a gap between discovery and speed to engage in thanks to an active developer community and thanks for rollout of new web components where packaging for the deepens experience of providing native Ui, while staring the benefits from the am cash today, we’re excited demo an example of where packaging life are.

You ready check it out. Let’s search Christmas greens, oh yeah, so notice in this search result there’s a amp badge, so it’s prominently featured so you know it instantly. This is an amped search unit. I click on it or tap on it and instantly as Rudy is mentioning. You see that there’s no Google in the you and the URL hat, which is pretty key over here, because now you instantly feel that you’re natively on the website versus being on a separate cache importanly enough.

You also see that there’s no there’s no view ahead of so adds further to the prominence that you are actually on on this in this case, when you have flowers, calm. Furthermore, having attribution so seamless, I just adds to a much more confident realization for a lot of brands that now there will be absolutely wonderful, an attribution going from the SERP to the native site and a big shout out really to the to the amp team and To the gue, mobile consultants, team who’d really been pushing the boundaries of UI UX enhancement and really making sure that the web is taking all the strides possible to go to the next level.

Ristin your go through how this works sure thanks to mom. Yes, so let’s look under the covers and talk about how you would actually deploy something to support sign exchange. So at the top here in green, we have the request flow from your origin through a front-end proxy to your users device on the bottom. You have the request flow into the amp cache and in between you have an amp packager. This prepares the documents for the cache and signs them to support signed exchange.

Now at CloudFlare we sat down and thought about how to use our global programmable network to make this all simpler, and this is what we ended up with. We took all the logic necessary to support, signed exchange and built it into a CloudFlare worker. This sits at our edge and supports both the cryptographic operations, the packaging operations and the logic necessary to arbitrate between the user and am cash request flows, so you might be asking what’s a worker and simply put it v8 running on the edge.

This allows you to write JavaScript targeting the serviceworkers API, deploy it to our edge and have it running instantly in 155. Locations supporting signed exchange and this packaging experience is a great example of what workers is capable of. So, in addition to we’re releasing the code that supports this demo so that you can all build your own workers to try signed exchange, we also plan on building a full, fledged CloudFlare feature to support it at launch.

Go back to Rudy, Thank You, sumo and roast them. So if you’re publishing am content, we’d like to invite you to try out a Developer Preview of signed exchange, amp content in search using the instructions at the link up on the slide, GGO slash web package preview, you can learn more about creating packages and building an Endo and flow, like you just saw for your own amp countenance factory, so we’ve seen the benefits of sign exchange spring to AM publishers, but it’s important not to forget that this will also benefit all pages on the web too.

Now I want to show an additional example of regular cross with navigation on the flow networks. The content will load slowly. On the other hand, the right side shows how it can be done with a prefix with repackaging. You can see that the user is navigate to a page on a different site instantly the profits down from the cash of the referral site so therefore down the privacy-preserving manner so efficient how to use web packaging to realize the privacy-preserving instant navigations by you know.

We’re still doing navigations right, so it still feels like we are progressing through pages at disjoint experience, not a nice seamless experience and we’ll be wondering how you could improve this even further and let me introduce our latest proposal portals. So, let’s see what we mean by navigation versus transition, maybe it’s not too surprising again. This shows a regular navigation. This blood, slowly depending on activity in the breaks years of law and right side, showed an example of what transient, as you can see, when the user taps on a article, a nice indigenous animation, triggered creating a sense of continuity.

The navigation just happened without being felt. The navigation, the so subtle that it worth taking a closer look at the can be seen from the address bar. The user starts their journey from a pigeon feeder to Krista to me and when the animations are finished, the user ends another website. You start horrid ojp. So it’s a cross, I transition combining portals in the Zion exchange. It enables these types of user experience while preserving the user’s privacy.

You might not be interesting yet, but Porter the not limited to cross website navigations. Let’s take a look at how it can improve the user experience of a single website built with multiple page architecture. I’d like to thank her Tina young with ample web comics, our partners in Japan, whom we worked with to create this early exploration for their reading. Manga. On the go website called upon any language on, so let’s see the user experience without porters.

When you reach the end of a chapter, you see an interest shop which, as you can see it takes time to load the next chapter. That’s because the website the using multiple page structure and it needs to load a new page for each chapter. Now, let’s see how that could look like with portals at the end of a chapter, we can produce the next chapter and make the transition seamless pretty cool right. The beauty of this is that you can achieve this smooth user experience without having to be Arctic to your website into single page app, which is, as you know, a non-trivial amount of work.

So what are portals portals are like iframes? You can create one at an image element of a page using a portal tag. At this point it looks pretty much the same as an eye and then navigate to an element by calling an octave atypia when that API is called. The element is detached from the page and becomes the new top-level page. You can also add an animation to smooth out the transition. So what are the differences between porters and iframes? The biggest difference is that portals can be navigated into another interesting differences.

That portals are always created at stop reverberating context where they can still be embedded in a page like iframes. Let’s recap: the benefits portals enable seamless page transitions like what you get with single page apps, but without having to reactive to your site and even across different side origins. So you can just build your website using multiple pages and we can connect them with POTUS.

So here’s the example code snippet of reporters. You can create a portal as an HTML element in the engine, append it to the page to help it emit. Then, when the user touch the embedded portal, you can show a nice animation and the cause activate API to make the actual transition. That’s it exciting, isn’t it and you probably won’t know the current status. We have an explainer on the github digit BT fresh waters, spec to learn more chrome.

Implementation is in progress. We are aiming one origin for next year in the eagerly awaiting me, a feedback that will help us to define this proposal. So that’s basically all from us about low friction desire, friction, but I have one more topic: bounded exchanged, so remember that we hinted that bundle exchanged earlier. They allow multiple resources to be bonded in one package and you might be wondering if about the current status of development so well.

The chrome team has touched the building a prototype to explore the possibilities. We think this could enable interesting use cases, scenarios like offline PW illustration and much more here. Isn’t it I’m Bob a newsreader pdaboy? This is based on toy them. Read up built by one of our or some dabrander Fox in the now runs on a custom chrome. Build to use bounded exchanges G up, allows the user to read news articles reliable way by little bit serviceworker download and saved articles as bandits if the news page provides them so that the user can later with the saved articles from multiple sites, even while offering not That start with us to show ads coming from the original news sites in the site’s keep maintaining the control over them.

Here’s another example, as you may know, loading a large number resources costly in the burning of them in one big javascript file using bandwidth like epic. It’s a very popular technique. We did an experiment to see if bonded exchanges can be used here which could allow the browser to process in the cache individual resources in the browser, in the bundle without executing the javascript, and one of the results looked like this.

While still preliminary it looks promising, we think so we think there’s some potential and don’t want to know what you think all right. So let’s go back to the main topic and wrap up the stock. So we talked about two new proposals for zero friction user experiences. First, web packaging enables privacy-preserving instant navigations and second portals enables seamless transitions between pages or sites combined together to enable zero friction.

Page changes transitions on top of any web pages even across origins, and here’s a look at the roadmap prize to ship style exchanges on stable by the middle of 2019 and also to start an origin trial for porters sometime around then as well. So for Google search really excited about both signed exchanges and portals as a path to building more zero friction user experiences across the whole web. Following the footsteps of the demo you just saw earlier in am we’d like to launch support for amp signed exchanges next year.

We’re also actively working on how Nonnie pages can adopt these same technologies for highly optimized user experiences. We believe that the bench I just have a highly optimized content on the web regardez foods I eat sample, not with all the standard work we are doing today and we think engaging various partners as well as other browser vendors, because we want to refine what we Have and I want to make sure that it will help them and the developers like you achieve highly optimized user experiences.

For instance, such teams at Bing Yahoo, Japan Biden, Google content publishers in the web developers at 1-800, flowers ha Tina, young magenta, web comics, CD ends and certificate authorities such as digit in the crowd flair, as well as folks working on the decentralized web at the protocol. We hugely rely on your feedback and are eagerly awaiting to hear what you think here are the important links that we referenced and that you can check out to learn more and share your opinion and give us input.

You can also come to the ask chrome area in the next break and we’ll be there to answer your questions. We’re really excited about the future of the web, and I didn’t like the kinds of experiences that we showed today and we’ll appreciate your help and joining us to move these technologies forward. Thank you. You


 

Categories
Online Marketing

Chrome OS: Ready for Web Development (Chrome Dev Summit 2018)

Everyone I am Dan Tuscola school, I’m a developer advocate at Google and tonight we’d like to talk to you about why Chrome OS is an awesome choice as a web developer platform, and there are too many reasons for why you should develop on Chrome OS. The first is that Chrome OS is an unprecedented convergence of technology stacks.

It brings together web applications because it’s no less. That has a browser as its UI, but you can also run Android apps and with full Google Play support. You can install and reprocess that you can test your web apps on and starting with chrome 69. You can install Linux and you can run your familiar. Development will workflow there, and this is a sneak preview of. What’s coming into the talk, you can see here a terminal, an IDE, a couple browsers and, of course pwe.

So the second reason why you should develop on Chrome OS on target Chrome OS is that it powers a very wide variety of devices. You might have seen. Chrome, most laptops or Chromebooks from a variety of manufacturers, and also you might have seen some convertibles again from various manufacturers and also all in ones like the LG chrome base and small form-factor pcs. This is the chrome box, which was diluted by Samsung 2012 and then HP, asus and other manufacturers followed suit, and this is the mini form factor PC.

It weighs three ounces, you plug it into the HDMI port of a display, and it turns that one into a computer. You can attach a mouse or a keyboard via USB or bluetooth, and then there are mega displays. This is the chrome box, commercial, it powers, digital signage or qsr displays, and this summer we saw the first tablet powered by Chrome OS. This is the Acer chrome top ten and, of course, Google has our own language of devices.

This is the pixel book, the flagship device which is at 75 % off for you guys, yeah and our latest, offering the pixel slate, which was announced last month. So in one slide, what are you from os because of a large and increasing market share? You probably heard that we have a very extensive presence in the edu space. Condos are very popular there. Then, if you optimize for promise you’ll actually target a variety of these convertible form factors, devices that have or have not, that a keyboard or a mouse or a stylus or internal touchscreen.

So this could also future proof you from devices that haven’t been invented. Yet, though, after I put this slide together, Samsung actually released a foldable screen phone that becomes a tablet, so the future is here already so again in one slide, the reason is diversity. You can develop apps on Linux and test them on a variety of Android. Linux. Browsers so Chrome OS brings together your own development workflow.

The one you’re familiar with your own development tools, a variety of form factors from mobile to tablet, to convert the boat, to desktop and browsers on Android on Linux, and there are quite a few of them edge and Samsung. The internet work on the pixel slate. The others should be able to be installed on Google picture as well, and this is edge and you see browser and Firefox running going on the same Chrome, OS machine.

Then you can install so desktop browser, so you can test in full, desktop Firefox. You can install the Linux version of it. This is Firefox, and this is Epiphany okay, gnome web, and you can also install docker, which I’ve heard many of you are interested during the forum. This is I’m official support for it, but there is a thread on reddit if you search for on docker now working in the crostinis subreddit you’ll find this thread, try out your own risk, but it does work.

So how does it work? How does Chrome OS managed to stick to his principles, which are speed, simplicity and security? How can it run all these different web, apps and Android us from play, and Linux apps like GIMP, while staying fast, simple and secure? This boils down to the containers architecture, which shall let Steve tell you more about next n. So when we were bringing Linux apps to Chrome OS, it was really important that we maintain all of the things that make Chrome, OS, Chrome OS.

So simplicity was first, it shouldn’t feel like you’re running a separate OS, but instead have the Linux terminal and GUI apps seamlessly blend in with chrome and Android apps, and we’ve managed to do this while keeping things fast. So Android and Linux support. Don’t do any emulation by using lightweight containers and hardware virtualization support your code will run natively and, of course, security is always on the mind for Chrome OS, so crostini uses both virtualization and containers to provide security and depth so to expend a bit on security.

We’re starting from a secure foundation and we’re working our way up with features from there so right now, Linux is pretty isolated from the rest of Chrome OS, but we’re working on the ability to share files and folders with it and soon we’ll be adding support for Google Drive as well so you’ll be able to keep all of your dot files projects and other important work safe in the cloud. So let’s take a look under the hood real, quick.

The first time you launch a Linux app after logging in we’ll start up a lightweight, VM and container, so this VM is actually providing the outer security boundary and gives you a real Linux kernel and it’s actually a minim minimal version of Chrome OS. That was designed specifically to run containers, and the container inside is where you do all of your work. This container is very tightly integrated with the rest of Chrome OS, so things like launch icons and graphical apps work, just like any other Chrome, OS or Android app, and the most important thing, of course, is that you get a terminal.

So how does it actually feel? What’s it like, an answer should be like most of their Linux systems, so crostinis based right now on Debian stable, because a lot of developers are familiar with apt package management and Debian based systems and for now we’re starting out targeting web developers because Chrome OS is A web-based OS and we think it’s appropriate – that you should be able to develop web apps on a web-based OS.

So to do this, we provide some nice integration features like right now, we’ll do port forwarding. It doesn’t seem like you’re running a container. You get local hosts to connect to and that’s treated as a secure origin, just like it should be. But if you do want to treat your container like a separate system, you can and we provide a penguin Linux test. Dns alias and we do want to support more developer workflows than just the web, so we will be adding USB GPU audio support file systems in userspace and better file sharing and upcoming releases, and now dan will talk a bit more about using Chromebooks for web development And show us what crostini looks like in action.

Thank You Steen. So we know how it works. We know why it’s awesome. Let’s see how to actually use it for developing web apps. The goal is to let developers do everything they need locally and the crostini support is still in development, but most things work as expected. You can run editors, IDs databases like Mongo or my sequel, local servers and pretty much anything can install with apt to set up crostini search for Linux in settings and then you’ll see this dialog.

Once you tap install in about a minute or two depending on your network, speed you’ll have Linux installed on your Chromebook, and this is a terminal. So we have a terminal whoo-hoo, let’s build the desktop web app for it. So books write a bit about how these apps are usually built. A lot of development of desktop device is done with electron or node WebKit, but the problem with that is electron means chromium plus nodes.

So you ship a rendering stack along with your app, and that might be useful if you have needs for low-level access, but consider Carlo, which is a Google project that is essentially a headful node app framework and provides applications with chrome, rendering capabilities. So with Karl, you don’t have to ship chromium or any rendering engine with your app. It uses a locally detected instance of Chrome and it connects to a process pipe and then expose the high-level API for you to render in chrome from your node script.

But if you don’t need all this low level or as features, you can do something even simpler, which is to build a progressive by that, and this is what Spotify has done. You can see here that I’m going to open open the Spotify I’ll, come in a tab and click that install a button, and once I accept the install prompt, the tab becomes pwe without URL bar and it has its own buttons like close, and you can find It in the shelf, you can launch it from there and once you launch it, there is no more install app button because it’s an installed progressive web app and it’s also accessible from the shelf.

So this system level integration features are provided by Chrome and they are available on chrome, OS things from 67, which is Asian by now and Dorgan on some windows, starting with Chrome, 70, the current version stable and on Mac with chrome 72 or, if you wan na, Give it a sneak peek check the Enable desktop it always flag. This is thanks to Service Worker support, which has implemented by all major browsers, and they are also working on a stance features such as payment request.

Firefox is working on that age. Has both notifications and out of home screen now and Safari is also working on authentication api’s, so, ok, we’ve talked a lot, let’s try and do a demo and see if anything blows up, so I’ve set up Christine already, because that will take two minutes which I Don’t wan na waste we’re going to install node and you have already vs code NPM and then we’ll check out Skoosh.

You might have seen it in one of the earlier talks. It’s an imagery compression app will open that in vs code to check out the code run. The webserver and the most interesting part is we’re going to open Skoosh from an android browser on the very same device and if things work also going to do some remote debugging. So these are the instructions to install node. Now what would a random? Because it takes a bit and I’ve switched to the demo station, I’m going to run NPM install NPM build, does take a while, then npm start to start the web server for the Skoosh app, and you see that it tells you it runs at port 8080 heat Bound to all local addresses, so let’s run chromium for linux.

This runs in the reno’s container and once squash has started, which seems to be the case. Let’s go to a local host 8080 and there Skoosh an. Why is it failed, but it certainly works. You can open images or not. This is a live demo after all, the point here is that you have access to localhost from the Dinos container and now, let’s try running chrome, dev from play and then choosing chrome dev here to be able to distinguish.

The icons looks like we need to update it. Hopefully the update won’t break anything, so I’m going to launch it before it gets a chance to update now. Localhost’ here will not work and that’s a non-issue steve is working on it. We need to get even mean to put you on the spot if we need to get the IP address of the Android container, which is this one. There is this command IP address show. So I’m going to just copy that and paste it in chrome dev, which I thought I launched somewhere a quick.

Has it updated? Okay? Well, I hope you didn’t break anything. So this is who’s running in chrome and all let’s try something even more dangerous. Let’s try to remote the bucket with chromium on the same machine. I know it’s called remote debugging, but it’s on the same machine, because these are different containers. So to do that, we need to put a device in developer mode and then enable it to be debugging.

Here which I’ve done and then we need to run this command, that fixed IP is actually documented on our Android setup page, it’s the IP of the our container and we set up an ADB bridge to it. So now, if things are on my side, you’ll be able to go to chrome, inspect and see a number of remote targets here, and we actually see two of them. So it’s open the squash one, I’m not click inspect, and this appears to work surprisingly well for a demo, so I’m going to resize the window and try something really spectacular, I’m going to scroll.

So this is live, not an animated gifs. This is actually remote debugging and, whatever I’m doing here, whether this app works or not, you can actually remote debug it with chromium on Linux. Debugging an Android browser running your progressive web app doesn’t make sense. This is what I wanted to show and let’s get back to the slides. So these are the instructions for installing note, there’s nothing special here.

You follow what no publishes on their github. Then you check out who’s using it again. Your visual development, workflow and Oh something else, maybe Steve, has to show this. We can run vs code to check out the code so until we switch to the demo disk Rancher shows what we actually are going to do, but great. Why not do it live now? So still is going to double tap that after he copies it to the Linux container and in the Linux container.

If you double tap a Dib file, you are prompted to install it as a Linux. App so Chrome OS supports that out of the box and once the installation completes you should be able to see visual code in the launcher and even a cancellation, prompt will say, fine, visual coding, the launcher, and this is not network dependent. So we should be as fast as it was when we rehearsed, though 58 percent is not terribly fast.

Okay, 91 cool so show us some clothes. If I only wait one second for two seconds there it is had to search – and here we go yes, code yeah. I have a manifest: that’s why it’s a progress. App has a start: URL, ok! So let’s switch back to the slides for some best practices for on. Oh, No, let’s actually look at this once more. It’s really cool right. How you can draw those in sync yeah! I had to brag about that, so the way to set this up is not reveal, which is why I posted a medium post this morning with complete instructions.

It’s about 17 steps. You need to follow so check out bit: / b, dot li /, CR, OS remote debug, or take a picture of this line. Okay, I see the phones down next, how to actually optimize PW is for Chrome OS, which is not really a topic. It’s more of an on topic. You shouldn’t detect that running on Chrome OS. You should use lighthouse as used for any in PW. If you only have five minutes to spend on optimizing, your app check out lighthouse the auditing tool that will give you a checklist of what to do and make sure that your app installs.

This is one bit that might be different on Chrome OS. I, like on all the versions of Chrome on mobile, your users will not be prompted automatically at the bottom to install the app you need to catch it before install prompt and then save that front and call the prompt method. And this is the code to do that. So you add an event listener for before install front, then you prevent default for all the browser’s.

Save the prompt in this deferred variable and then show your install button. So here we just set a display to block and then, in the click listener for that install button, you hide it call the prompt method from that save variable, and then you check the user choice, property and particularly the outcome field, to see if the user has Accepted your installation, okay, so, as I said earlier, the answer to this question is no.

You have your app installed on Chrome OS, but you should not do browser sniff it, but doing instead feature detection and the reason is there is a wide variety of input devices and form factors that Chrome OS can run on. So you might have a touch screen hole. You might not some lower end devices, don’t have a touch screen, there might be a trackpad or you might be the Acer tab. 10 tablet that I mentioned earlier.

There might be a keyboard, so if your app can use keyboard shortcuts, it’s go to a support for them. There might be a mouse. So I support for that. If it makes sense, then also be a stylus useful for drawing apps also make sure to build, responsive and take advantage of all the screen real estate. This is an example of an app that supports a large or wide display rather and displays a number of days in the weather forecast, but also, if it’s resized to a phone size screen, it shows less information and you can even support a rolled up state.

If the user just wants to glance at the weather of continuously, but for a media player out to be more useful example, you can have previous and next controls, and this is an example from Starbucks. They found that building responsive pays off, because users would actually order. On the desktop and use their mobile device to pick up their order so build responsive. It also pays off to optimize your forms because nobody likes to fill in the forms, and we have some guidance that G dot cos.

/ amazing web forms and some amazing URL and if you want to handle, touch in an optimized fashion, check out G Delco slash web touch. There are also pointer events, and these are a unifying model for also two pointer. Input touch trackpad, Mouse stylus, and you have a lot of events that are supported in Chrome, Firefox, Opera, ie edge and Samsung such as pointer move. You simply add a listener for it or sorry.

You have a pointer, enter pointer down, pointer up, cancel out, leave and so on. More at G dot go slash, pointer events, and this is an example of code that distinguishes between the pointing device you can check if there is mouse or touch or pen or something that has not yet been supported by the browser. Okay. So, what’s going to happen in the future, we are working on improving a desktop PW support.

One improvement is keyboard shortcuts. Another one is badging for the lunch icon, so you don’t have notified the user for everything we can display a number of notifications just like for Android iOS, apps and then also link capturing, which should make Twitter very happy. They have a great little way, but when you click on a link is not captured yet so in the future. We hope to enable this such that, when you click on a link that I wrapped in handle your app will actually open and handle that link, and for that you need to define the scope parameter in the manifest and the scope parameter is used to determine when Your user has left your web app and needs to be bounced in a tab.

We are also working on low latency canvas contexts which are introduced in chrome 71 beta, and these are very useful for how interactive apps they use OpenGL ES for rendering for a string and how it works is that your pixels get written to the front buffer directly. So this bypasses several steps of the rendering process and chrome writes there in that piece of memory that is used by the Linux, rendering subsystem and is scanned out the screen.

So this low latency context run the risk of tearing, but if you don’t interact with the Dom, such as in a game or rather have interactive app, it’s useful to use it. This is an example of how to set up a low, latency canvas context. You pass the latency parameter through and also on. It needs to be opaque, so you pass alpha and false, and this is the last slide. I had no idea what to put on it, but I figured that I should add that Chromebooks are these Convergys machines that run Linux, Android and Google Play natively without emulation, so they run very fast.

You should totally take advantage of the 75 % off discount and please do explore Chromebooks and give us feedback. We love feedback. We have the chromium, OS death group in the Google Group and also the reddit, the subreddit crostini. If you find issues, please check it. They’re very reported at CR Balcom, otherwise file them using the shift out. I and add the crostini tag and we are done and Steve and thank you


 

Categories
Online Marketing

Web development on Chrome OS (Chrome Dev Summit 2019)

Today, I’m going to talk about web development on Chromebooks. Here is a quote from you. A skilled web developer. Chromebooks are awesome and, if you don’t remember saying this recently, I hope that after reading this article, it will become a daily thing. Chromebooks are known for being lightweight fast, secure web browsing machines.

They are so much more. The device portfolio has grown to include tablets, detachable z’, all-in-one, mini desktops and, of course, laptops and convertibles. Many of these are capable development devices. So what can you run on them? Well, ideas like visual studio code, Atom, webstorm tools like node, react, docker and get, and you can test your web apps with multiple browsers, including real mobile browsers as well.

You can check how your mobile app interacts with your web server all right on the same device. Okay, let’s get started and get your Chrome OS device ready for development. We are going to set up a Linux environment and then install the tools you need to start open, Chrome settings and search or scroll down to Linux. Click turn on this will download and setup a Linux environment when it’s complete, you’ll see a terminal prompt pro tip.

If you will be doing a lot of development, pin the terminal by right-clicking and choosing pin now we have a Linux environment. Let’s install some tools head over to the visual studio code website and download the Linux dot de Bie package, double click and choose install once it’s installed. You can find vs code in your app launcher. If you’re going to be using this IDE a lot, you can pin it like, we did with the terminal.

Any application with a dot de Bie package can be installed in a similar way. Let’s install atom, the process is exactly the same: download install and launch not every app has a dot de Bie package, but you can install any of your favorite tools that support Debian Linux, for example, to install sublime text, follow the Linux instructions on the website to Setup, the apt, repo and install the editor using the command-line when we install node in a few seconds, we’ll take a closer look at command-line installation and the same thing goes for apps like webstorm.

Just go to the website, follow the Linux download and install instructions. I won’t do a web storm right now. Let’s get right on to the server side of things, oh and by the way, at the end of this article, I will direct you to a page by the Chrome, OS Deverell team, with installation instructions for all the apps and more discussed in this article. Now, beyond what I mentioned today in this article, if your favorite tool is supported in Linux, it should run on Chromebooks.

For example, I, like G edit for text, editing FileZilla as an FTP, client and Inkscape for vector, graphics, editing. Today, web development usually takes more than a text editor an IDE or an FTP client. Let’s get to some other tools, so we can make some really nice web apps nodejs requires GnuPG to open up your terminal and install it with apt that command is sudo apt, install GnuPG 2. If you’re new to apt, you can probably guess that by replacing GnuPG 2 with whatever package name you want, it will install that package now.

Finding the right package name can sometimes be the tricky part note, as we continue with this article and other terminal commands. I won’t read every line out loud, but, as mentioned, I will provide a link at the end that has them all now that the dependency is installed. Let’s get nodejs run this curl command, followed by another apt, install command for node. That’s it. No js’ is ready to go, don’t believe me! Well, let’s try it out with procs use git to clone the procs repo an NPM to install, build and serve the proxy web app navigate to localhost 8080 in your web browser and check it out pretty cool.

So much minesweeping to be done. Let’s try react using NPM, you can install, create react. App, then use create react app to create a skeleton project. Here I call it hello. World react navigate into the directory where it was created and call NPM start now, navigate to localhost 3000 in your browser and check it out. If you prefer angular install that too, the steps are almost the same again. We use NPM to install at angular slash CLI, create an angular app using ng new.

My angular project change directories into the project folder using CD for change directory. My angular project now ng serve browse to localhost 4200 and check it out here. You’ll notice that I have procs a react, app and an angular app all running on different ports, all on the same Chromebook. I think this is pretty handy. What’s more, this is all local. So as long as your tools are already installed, you could do all of your development offline say like on a plane.

What about docker, no problem again we’re going to follow the normal Linux installation steps. First, we double check that all the dependencies are installed. We add the docker repository to apt and then we update the apt package list. Since we just added a new repository. We use sudo apt update to do this, then install docker test it out by running hello world. This is done with sudo docker run hello world.

You should get a nice mess showing that everything is working. Let’s do something a little bit more advanced by running an Ubuntu Linux container and docker sudo docker run it Ubuntu bash and there you go. Your output is going to look something like this in the Ubuntu container. I’ve taken a look at the OS version with cat, slash et Cie / OS version, and you can see it’s really Ubuntu now, once an app is ready to deploy, it should be tested because Chromebooks have web Android and Linux.

You can test across multiple browsers on multiple platforms: alright, on the same device, let’s install a whole pile of browsers to prove this point using the terminal in apt. You install Firefox for Linux note in debian the package name is Firefox ESR. Then, let’s also install the chromium browser for Linux feeling brave. Let’s install the brave browser for Linux. I won’t walk through all of these lines right now, but again they are just the standard installation instructions for Debian Linux.

We install the GPG key. We install the repo and finally brave now if for browsers, aren’t enough, let’s add a few more head over to the Google Play, Store and install some Android browsers. Let’s go with Firefox for Android opera for Android and Chrome Beta for Android. We now have seven browsers installed, which can give us a reasonable first attempt at test coverage. We have the Chrome, OS Chrome browser three Android browsers, that is Firefox Chrome, Beta and opera, three Linux browsers Firefox for Linux, brave and chromium, and here you can see that our procs web app is running on all seven one.

Last thing to mention in case you have a mobile app that interacts with your web service. You can do Android, TBWA and flutter development on Chrome OS devices, which means you can build and package your mobile app on your Chromebook test it right on the device. You were coding on, like any other Android app build your web component, start your web server and then test everything on multiple browsers and see how it interacts right on the device.

Android studio is as easy to install as visual studio code or atom head over to the Android studio site and download the dot de Bie file. Then you can code. Your app like you’d expect an Android studio with one cool difference: you’ll notice that you can push directly to the Chromebook you’re working on pretty cool full instructions on how to set this up can be found on the link. At the end of this article on the android page, so with your chromebook, you can build web apps with the tools you are used to develop and test right on device with tools like nodejs docker and angular tests across multiple browsers, including mobile, browsers and even test Mobile app and web interaction right on device, and all of this could even happen offline like on a long flight.

So now, don’t you agree. Chromebooks are awesome, as promised. Here is a link to a guide to get your Linux environment customized. Just the way you like. It’s cross dot, page dot, link slash web dev. Thank you can’t wait to see what you build.


 

Categories
Online Marketing

What’s new in Material Design for the web (Chrome Dev Summit 2019)

The first update is the material theme builder tool on glitch. The tool itself is a self-contained application that showcases each of the material components with prompts to update the base theme shown. It helps teams to leverage the three subsystems of theming within material typography shape and color.

The tool uses SAS variables to show users how to adjust an interface style and make their own brands shine by changing just a few lines of code within a theme file. For example, color can be adjusted via a series of variables, such as primary secondary background and surface colors. These compared with on colors, which represent the text color on top of a variable background, shape, customization, can be made for three component size classes, small, medium and large components.

Small components include buttons and input, medium components include modal’s and dialogs, and large components include menus and drawers, there’s a great shape tool on material diode to help you visualize. These changes on our components before applying them to your codebase and finally, we can adjust typography through the generalized MVC typography variable or through SAS maps that allow you to customize individual typographic levels, such as having a separate, wait and fought family for primary headlines, rather than The body copy in the end, your theme could look something like this.

This is just one example that comes from Google developer days in China. We’ve made thousands of themes around the world so far so head over ticklish. To add your own, we’re also working on a set of guidelines for adapting dark themes, using material components, for example, and a dark theme. Google materials, color palette reduces intensity to mitigate visual vibration or strong color contrast against a darker background.

Instead of solely adding drop shadows to illustrate elevation and depth and a dark theme, a lighter overlay is applied check out the material Daioh guidelines for more design guidance on how to transition your designs to a dark theme, considering contrast, depth, desaturation and limiting colors for accessibility To help with this transition, MDC web has released a set of typography theme variables that respond to background shades for text styles.

You can now also use the theme variables in three different ways. The most supported and robust technique is, with our SAS styling API, using variables and mix-ins to override styles. You can also create CSS classes, with the variable names to style them by and finally, for modern, browsers, CSS custom properties can be used for the theme styling. We’re still working on full support for custom properties.

At this time we provide so many options, because theming should not be limiting. You can extend the theme builder to make your own theme as unique as your product leverage our code and build on top of our material components to quickly and easily get started building product on the web. The next new feature and material is data tables. You asked we listened our designers consider these three principles when it comes to data tables.

The first is that data must be organized in a meaningful way. Data tables should also be allowed for user interaction, and, finally, those interactions should be as logical as a structure of the data table itself. Data tables come with some basic default functionality such as row selection, but you can also hook them up to other components such as these filter chips, check out the links provided below for a deep dive into how you can actually implement data tables in your web projects And combine material components for orchestrated actions.

We also have a new density subsystem option in material material design, uses low-density space by defaults with large tap targets and margins, but offers high density space when it improves the user experience. We brought density into our system for the following reasons: the first is for scan ability, scan ability is improved for data heavy applications with a higher density interface. The second is that dense UIs may actually help users focus by reducing space between Asians and, finally, more content is available to the user on a single screen in more high-density applications, whether or not to increase your us density can be determined by how users interact with A component components with high density, enable users to process and take action against large amounts of information in a more manageable way.

Lists tables and long forms are components that benefit from increased density, but density shouldn’t be used for every component. For example, don’t apply, density to components that involve focused tasks or alert. The user of changes such as snack bars or dialogues, applying high density to alerts reduces their ability to command attention. A series of new styling classes on the web allows for us to access density in three ways: the default component size a comfortable size which provides a higher density display, while respecting minimum touch, target size and compact, which may be used for pages.

With a lot of information but may be inappropriate for user actions, materials at i/o got an update as well. We now provide a cross-platform view of all of our component offerings on a dedicated components page. This page allows for quick access to components and an overview of cross platform. Availability should make it easier to navigate our product and implement it, for your needs, check out material, do slash components to browse them all yourself and finally, we’re kicking off a new initiative.

This year to focus on supporting material across web frameworks, why we know that most of you are developing web apps using a framework and the open source community has stepped up immensely, both in components for some of the most adopted web frameworks out there. We want to celebrate this work and help bring the material design vision to life along with our open source community. So many of you have already built your own wrapper libraries using MVC, webs components, foundations and adapters and we’re working more closely with the rest of the open source community as well.

We’ve updated material to i/o to link to three of the most popular open source component. Libraries they’ve already uncovered bugs in the material design guidelines and asked great questions, helping us to make material even better and we’re helping them to follow the spec and the material guidelines more closely as well. We look forward to continuing the conversation and working to bring the material design vision to every platform and framework, making it easier for everyone to use material design on the web.

There’s so much to explore and play with from theming to density, to data tables to new website features and our open source community. It’s an exciting time to be building of material, so check out material, dot, IO and the links below where you can find all the resources that I mentioned today can’t wait to see what you build material I’ll, see you on the web. You