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


 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.