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

Key Takeaways

[Music] i'm here with uh stephen barber who's an engineer on chronology so good evening everyone i am dantas kalisco 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 two main reasons for why you should develop on chrome os the first is that chrome waste is an unprecedented convergence of technology stacks it brings together web applications because it's a noise that has a browser as this ui but you can also run android apps and with full google play support you can install android browsers that you can test your web apps on and starting with chrome 69 you can install linux and you can run your familiar development tool workflow there and this is a sneak preview of what's coming into the talk you can see here a terminal an id a couple browsers and of course pwa 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 voice 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 chromebase and small form factor pcs this is the chromebox which was debuted 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 chromebox commercial it powers digital signage or qs displays and this summer we saw the first tab that powered by chrome os this is the acer chrome tab 10 and of course google has our own lineage of devices this is the pixelbook the flagship device which is at 75 percent off for you guys yeah and our latest offering the pixel slate which was announced last month so in one slide what are your chrome os because of a large and increasing market share you probably heard that uh we have a very extensive presence in the edu space chromebooks are very popular there then if you optimize for chrome os you'll actually target a variety of these convertible form factors devices that have or have not got a keyboard or a mouse or a stylus or a touch screen 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 and 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 convertible to desktop and browsers on android and linux and there are quite a few of them edge and samsung internet work on the pixel slate the others should be able to be installed on google pixel as well and this is edge and uc browser and firefox running on the same chrome os machine then you can install some 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 aka nomweb and you can also install docker which i've heard many of you are interested during the forum this is unofficial support for it but there is a thread on reddit if you search for docker now working in the crostini subreddit you'll find this thread try to run risk but it does work so how does it work how does chrome os manage to stick to its principles which are speed simplicity and security how can it run all these different web apps and android apps from play and linux apps like while staying fast simple and secure this boils down to the containers architecture which i'll let steve tell you more about thanks dan 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 app 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 expand 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 launcher 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 how does it actually feel what's it like and the answer should be like most of their linux systems so christine's 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 localhost 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 and user space and better file sharing in 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 steve 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 crossini support is still in development but most things work as expected you can run editors ids databases like or mysql local servers and pretty much anything can install with apt to set up prostini 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 let's build a desktop web app for pixelbooks right a bit about how these apps are usually built a lot of development of desktop dev apps is done with electronic 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 head full node app framework and provides on applications with chrome rendering capabilities so with carlo 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 your process pipe and then exposes a high level api for you to rendering chrome from your node script but if you don't need all these low-level os features you can do something even simpler which is to build a progressive web app and this is what spotify has done you can see here that i'm going to open open the spotify.com in a tab and click that install up button and once i accept the install prompt the tab becomes a pwa without a 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 launched 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 since chrome 67 which is asian by now and or linux on windows starting with chrome 70 the current versions table and on mac with chrome 72 or if you want to give it a sneak peek check the enable desktop pwas flag this is thanks to service worker support which has been implemented by all major browsers and they are also working on advanced features such as payment request firefox is working on that age has pushed notifications and out of home screen now and safari is also working on authentication apis so okay we've talked a lot let's try and do a demo and see if anything blows up so i've set up crostini already because that will take two minutes which i don't want to waste we're going to install node which i have already vs code npm and then we'll check out squoosh you might have seen it in one of the earlier talks it's an imagery compression app we'll open that in vs code to check out the code run the web server and the most interesting part is we're going to open squash from an android browser on the very same device and if things work we're also going to do some remote debugging so these are the instructions to install node i've already run them because it takes a bit and i've switched to the demo station i'm going to run the npm install npm build does take a while then npm start to start the web server for the skush app and you see that it tells you it runs at port 8080 it bounced to all local addresses so let's run chromium for linux this runs in the linux container and once squash has started which seems to be the case let's go to localhost and their skoosh i'm not sure why said failed but it certainly works you can open images or not this is a live demo after all uh the point here is that you have access to localhost from the linux container and now let's try running chrome dev from play and i'm 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 known issue steve is working on it need to get doesn't mean to put on responsive we need to get the ip address of uh 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 hey quick as it updated okay well i hope it didn't break anything uh call on whoa [Applause] so this is kush running in chrome and now 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 adb 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 um 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 let's open the squoosh one i'm gonna 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 gif 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 does that make sense this is what i wanted to show and let's get back to the slides so these are the instructions for installing node there's nothing special here you follow what node publishes on their github then you check out squoosh using git again your usual development workflow and oh something else maybe steve wants to show this um we can run a vs code to check out the code so uh until we switch to the demo this screenshot shows what we actually are going to do but great we're going to do it live now so steve is going to double tap that after he copies it to the linux container and in the linux container if you double tap a deb 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 that installation prompt will say find visual code in the launcher and this is not network dependent so we should be as fast as it was when we rehearsed though 58 is not terribly fast okay 91. cool so show us some code save all right wait one second or two seconds there it is head to search and here we go vs code yeah i have a manifest that's why it's a progressive app has a start url okay so let's switch back to the slides for some best practices for uh 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 trivial which is why i posted a medium post this morning with the complete instructions it's about 17 steps you need to follow so check out bit slash bit dot li cros remote dash debug or take a picture of this slide okay i see the phones down so next how to actually optimize pw is for chrome os which is not really a topic it's more of a non-topic you shouldn't detect that you're running on chrome os you should use lighthouse as you use for any npwa so if you only have five minutes to spend on optimizing your app check out lighthouse the audio team 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 unlike on older versions of chrome on mobile your users will not be prompted automatically at the bottom to install the app you need to catch the before install prompt and then save that prompt and call the prompt method and this is the code to do that so you add an event listener for before install prompt then you prevent default for all the browsers 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 called the prompt method from that saved 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 sniffing but do 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 or you might not some lower end devices don't have a touch screen there might be a track pad or it 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 good to add support for them there might be a mouse so a support for that if it makes sense it might also be a stylus useful for drawing apps also make sure to build responsive and take advantage of all the screen really state this is an example of an app that supports a large or white display rather and displays a number of days in the weather forecast but also if it's resized to a font size screen it shows less information and it can even support a rolled up state if the user just wants to glance at the weather continuously but for a media player that would be a 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 forms and we have some guidance at g dot co slash amazing web forms it's an amazing url and if you want to handle touch in an optimized fashion check out g dot co slash web touch there are also pointer events and these are a unifying model for all sorts of 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 um you have a pointer enter pointer down pointer up cancel out leave and so on more at the g dot co slash pointer events and this is an example of a 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 uh what's going to happen in the future we are working on improving the desktop pwa support one improvement is uh keyboard shortcuts another one is badging for the launch icon so you don't have to notify the user for everything you can display a number of notifications just like for uh android ios apps and then also link capturing which should make twitter very happy they have a great dall way but when you click on a link it's not captured yet so in the future we hope to enable this such that when you click on a link that your app can 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 highly interactive apps they use opengl es for rendering for rastering 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 uh the linux rendering subsystem and the scanned out directory 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 other highly 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 true and also um it needs to be opaque so you pass alpha 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 convergence 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 dev group in the google group and also the reddit the subreddit crostini if you find issues please check if they've been reported.crb.com otherwise file them using the shift alt i and add the crosstini tag and we are dan and steve and thank you [Music]