What's New in Chrome 59?

Will Raxworthy speaking at Ember London in June, 2017
919Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Take a look at the new features of Chrome 59 (e.g. Headless Chrome).


Transcript


- So, yeah, this is nothing like machine learning. This is nothing very crazy. This is literally looking at, like, two or three really interesting features from Chrome 59. It's not exciting at all. But it's a lightning talk, so, I can get away with it. So, the first one, which you might have heard of, is Headless Chrome and I'll go through a few examples. This is largely, like, coming at it from an Ember's perspective. Not that beneficial. Because one of the great things about Ember is that we can run the tests in a browser, and then pause the test and access the Ember in Spectre. You don't actually get that with Headless Chrome. Which is unfortunate but I think you get a lot of benefits from actually running Ember in a Chrome browser, and getting all the, kind of, Ember and Spectre stuff that comes with it. But outside of that, it actually has, like, a lot of really interesting things that could come from this. So, one of them is the ability to, kind of, drive Chrome using Node.. So, we were discussing only before with de Richi that you could, potentially, take his JavaScript app, push that to, like, a really big AWS server, and then, using Node, just like spin up Headless Chrome and kind of, like, you know, hammer this AI through its paces to kind of gather more knowledge without having the limitation of just a laptop. But you can also, as I was saying, kind of drive this with Node. So, you can take screenshots. You can create PDFs. So, you know, anything that you would've previously had to use PhantomJS for, you can now move to straight to, kinda, Headless Chrome. Which is quite interesting. I tried running it on CI and it actually went 20 seconds longer. So, it's not much faster... And the second one is CSS and JavaScript Coverage which, when I first heard of it, I was, like, "Okay, that sounds interesting." But when you actually look at it, it's really interesting. And it breaks down, like, what parts of your code base are being used, what CSS is like superfluous to your app, it's like not being used at all. And same with JavaScript. And they also re-did the settings in Material. Just kind of fun. Okay, so, the first bit that I wanted to look at was this coverage. So, you can see here I have the Ember Data Blast app that does the slides. If I go to this coverage area here, nothing's there immediately so I have to hit record but when I refresh, I'll give it a moment. And then stop. It's actually recorded all the files that were loaded in with this application and then, kind of, done an analysis on it to figure out what's being used. So, I can look here and I can go to, for example, like, interesting file. Wow, we can do Vendor but I think we, kind of, knew. So, you can see here where it's green on the left-hand side is all being used but anything that's red isn't actually being used by this application. So, you can pull out that same thing with, like, a CSS file. Or perhaps, like, the actual code base. So, you can see here, like, app version. This isn't being used or Chrome isn't seeing it being used. Hype did change, hasn't yet been used. So, all this red is, like, extra code that we could look at and look at, like, pulling out or making it smaller to reduce the size of our code base. Or possibly optimising in some way. And I think, as well, the CSS.. 'Cause quite often when you're, like, re-factoring, it's easy to forget to remove any CSS that might've been attached to, like, some classes or some dims and spans, et cetera. So, yeah, we can see here that I have no input so it's indicating here that input is not being used. So, this is a way that you could load up your website in Chrome and, kind of, go through and look at areas that you could delete and try to reduce the size of your code base and optimise those things. Then the other bit that we have is the Headless Chrome. So, I took out tests and was running them in Headless Chrome before. Let me see if I can find that. Oh, sorry! So, if you want to run your tests for Ember with Headless Chrome, in your testem.js, the things that you'll want to change. These. So, you'll have to add these three arguments. You don't have to have the remote debugging port but it's interesting to watch. But --headless and also disabled GPU, which they say is just required for now. The other thing you have to do is set up an alias, if you want, to the Chrome application. So, if I go Chrome. So, you can see here, I've just aliased it. I should really add this to a file so I don't have to keep doing it. But you'll need to alias just to that Chrome application. Add these three lines and then if I run out tests, it will build. But what that's going to do is it's going to boot up a headless version of Chrome and it's going to expose, like, a local host port, 9222. Which is the one that I specified in my arguments before and from there I'll be able to look at it as if I was.. Okay, it's not running yet. As if I was actually running Chrome. So, I've essentially gained nothing. Which you'll see once it finishes booting. Okay. So, if I look here these are our tests running so I get access to the console. You can see the tests are running here on the left-hand side. So, yeah. You can see I've actually, kind of, lost functionality in doing this this way with Ember but what I think could be interesting is if you run your tests on a CI is exposing that port from CI and watching the tests run in CI as you're, kind of, building them. That could be quite interesting. I think the fact that you can programme it with Node, you could also, like, run your tests using a Node application and drop screenshots from every test that's being run, and then, you know, potentially compare those or have them uploaded to somewhere so you can see it as your app is progressing. But, yeah, that was just about it. Small talk. Just on some interesting features from Chrome 59. Thanks.