119 JSJ Chrome Apps with Joe Marini
The panelists talk about Chrome apps with Google's Joe Marini.
Special Guests:
Joe Marini
Show Notes
The panelists talk about Chrome apps with Google's Joe Marini.
Special Guest: Joe Marini.
Transcript
AARON:
AJ’s here.
CHUCK:
Yeah.
AARON:
Nice.
AJ:
Was I not supposed to be?
AARON:
No, I just was counting up how many people were going to be here in my head and I forgot.
AJ:
[sings] Don’t you forget about me.
AARON:
Oh my gosh.
CHUCK:
[Laughs]
[This episode is sponsored by Frontend Masters. They have a terrific lineup of live courses you can attend either online or in person. They also have a terrific backlog of courses you can watch including JavaScript the Good Parts, Build Web Applications with Node.js, AngularJS In-Depth, and Advanced JavaScript. You can go check them out at FrontEndMasters.com.]
[This episode is sponsored by Codeship.io. Don’t you wish you could simply deploy your code every time your tests pass? Wouldn’t it be nice if it were tied into a nice continuous integration system? That’s Codeship. They run your code. If all your tests pass, they deploy your code automatically. For fuss-free continuous delivery, check them out at Codeship.io, continuous delivery made simple.]
[This episode is sponsored by WatchMeCode. Have you been looking for regular high-quality video screencasts on building JavaScript done by someone who really understands JavaScript? Derick Bailey’s videos cover many of the topics we talk about on JavaScript Jabber and are up on the latest tools and tricks you need to write great JavaScript. He also covers language fundamentals, so there’s plenty for everybody. Looking over the catalogue, I got really excited and I can’t wait to watch them all. Go check them out at JavaScriptJabber.com/WatchMeCode.]
[This episode is sponsored by Component One, makers of Wijmo. If you need stunning UI elements or awesome graphs and charts, then go to Wijmo.com and check them out.]
CHUCK:
Hey everybody and welcome to episode 119 of the JavaScript Jabber Show. This week on our panel, we have Aaron Frost.
AARON:
Hello.
CHUCK:
AJ O’Neal.
AJ:
Yo, yo, yo, coming at you live from Provo, just for a little longer.
CHUCK:
Charles Max Wood from DevChat.TV. That’s me. And we have a special guest this week, Joe Marini.
M:
Hey everyone. Thanks for having me.
CHUCK:
Thanks for coming, especially on such short notice.
M:
Yeah, not a problem at all. Glad to be here.
CHUCK:
We brought you on today to talk about Chrome apps. I’m a little curious, do Chrome apps and Chrome plugins work the same way?
M:
Do Chrome apps and Chrome plugins work in the same way? I guess there are some similarities in that they both use Chrome as their underlying platform. So, you write them the same way. They’re written using JavaScript and HTML and CSS. Chrome plugins however have a different, they’re focused a little bit differently. They’re focused on actually modifying the way the browser itself works. So, you can do things like hook into how things download and modify contents of pages and so one. Whereas Chrome apps are intended to be just independent of the browser itself. They just use the runtime as their underlying engine. But it’s just like any other app would use .NET or Java as a runtime. Does that make sense?
CHUCK:
Yup.
M:
Okay.
AARON:
And also, I’m going to add, and this is me being nitpicky, they’re called Chrome extensions. But yeah.
M:
Yes, you’re right. Chrome extensions, yes.
AARON:
So, that was for Chuck.
M:
[Chuckles]
CHUCK:
Yeah, well there’s a lot of terminology around this stuff.
AARON:
Yeah. So, I have a few extensions and a few apps. And I like the way that Joe said it. The extensions are just to modify your experience in the browser whereas the Chrome apps are an app that runs in a completely different window. It doesn’t have a tab. It doesn’t have an omni bar where you type in search. It’s its own app that’s running in Chrome. It looks like a native app, but the Chrome runtime is its runtime. And it’s sandboxed the same way that a webpage is sandboxed.
M:
Yeah.
AARON:
And so, it’s safer to install than a native app that has user level security and stuff. So, those are the differences between Chrome apps and extensions. But yeah.
M:
Yeah, exactly.
AJ:
So, with the Chrome app, you get the granular security like you would on an Android app where it says, “Do you want to do this? Do you want to do that? Do you want to do this? Do you want to do that?” and you can say, “Yay. Nay.”
M:
So, Chrome apps are distributed through the Chrome Web Store the same way that Android apps are distributed through Play. And so, the mechanism is more or less the same. In your Chrome app manifest, you specify what permissions you want the app to be able to have. And when the user goes to install it, they’re presented with a very similar dialog saying, “Here’s what the app can do. Here are the sites the app can communicate with,” that kind of thing. And then the user can make the decision whether they want to install it or not.
AARON:
One thing I found out is that Chrome apps auto-update, which is sweet, unless you change those securities. So, if you install and all you need is their email address and then all of a sudden you’re like, “I would like to talk to the serial port,” it doesn’t auto-update anymore until they approve.
M:
Yes, right.
AARON:
Approve those further securities... and that’s identical with Android as well, right?
M:
Yeah.
AARON:
Apps auto-update unless you change your manifest.
M:
Right, unless you change permissions, exactly right. And it’s important. There are some permissions that Chrome apps can request that are not considered necessarily high risk and I don’t have those off the top of my head right in front of me. But there’s a few small ones where a Chrome app can, I think extensions might have the same thing, where you can say, “I got to do something that’s low risk,” and that’s not considered a necessary boundary. But the nice thing about Chrome apps is you can do things like request optional permissions. So for example, if your app doesn’t depend on doing a certain high risk thing, you can make that permission optional. And then at runtime, you can present the user with an additional piece of UI that says, “Oh, and I also want to be able to write to everything on the hard drive.” And the user can say no, but then your app can still run, which is nice.
AARON:
That is cool.
M:
Yeah. So, are we assuming that people know what Chrome apps are? Should I give a little brief overview of the history of Chrome apps?
AARON:
Please.
M:
And why we started them? Oh yeah, sure.
AARON:
Yeah, please.
M:
Yeah, sure. So, right around I would say the end of 2011, 2012, we started looking at the possibility of using Chrome as a standalone runtime for apps. And we used to have these things called legacy packaged apps in Chrome. You can think of those as version 1 of what Chrome apps became. And they didn’t have their own windows. They didn’t have a lot of things that modern Chrome apps today have. And the reason we built them was because extensions only got you so far as a developer. We want to be able to develop apps that ran offline. And a few years ago, doing offline apps was hard and it wasn’t always predictable in a way that made sense for all developers.
So, we started looking at how can we make an experience for developers where they can build applications that run across multiple OS’s in a predictable way that work offline by default and give developers ways to do things that web apps didn’t at the time have, and in many cases still don’t. For example, using Bluetooth or the USB port or writing to files or using the network. Lots of things that developers would like to be able to do but can’t. And so, right around the end of 2011 we started saying, “Well, maybe we can just package Chrome apps in their own runtime.” And this was right around the time when Chromebooks started getting more and more popular. And we needed a runtime that gave developers a way for them to build native apps on Chromebooks.
And this is the way that Google builds its own apps on Chromebooks. There is no super-secret runtime that only we get to use. No, the way that we build them is the way that everybody else builds them. And so, we first launched these I think in, I think we had our first Code Labs in the beginning of 2012. And the response was pretty good. We got a bunch of developers excited about it. And I think we shipped the runtime officially in September of that year. And it’s been pretty great. And so far, the response has been pretty good. The Chrome Web Store has thousands of these things now. There’s more being added every day. And so far, we’re pretty pleased with the success that they’ve had.
CHUCK:
So, you said that they run, or that you write them with JavaScript, correct?
M:
Yeah, right.
CHUCK:
So, one of the ones that I’ve used is actually a remote desktop one.
M:
Sure, yes.
CHUCK:
Can you actually do that in JavaScript?
M:
Yeah, no. So, there’s a technology that Google has built into Chrome called Native Client. And it’s a way of securely running native C and C++ code inside a browser. And up until Chrome, I think 35 or 34, I don’t remember exactly which version, Native Client only worked in Chrome apps. We’ve since expanded it to work in the Chrome browser itself using something called Portable Native Client. It’s a way of taking native C++ code and running it in a sandboxed environment just the same way that you would run JavaScript. So, it’s like akin to building a Netscape plugin using Empathy.
AARON:
So, you guys just barely made that change then, because Chrome’s only on 36.
M:
Yeah. So, well Native Client’s been around for a long time itself, back in Chrome apps. And I think it existed for, let’s see, ever since Chrome apps started. But the Pinnacle, the Portable Native Client has only been around for a few versions now.
AARON:
Gotcha.
M:
Yeah. But you’re right. I suppose it might be possible to write it in JavaScript these days, because we do have APIs now for doing things like using WebRTC to grab the media stream of the screen and so on. But I don’t know if it’s fully possible to do a desktop sharing client. I haven’t tried it. But there are ways to do things like get media streams. But the one you’re referring to, there are Chrome apps that do this. And I believe they use the C++ Native Client approach.
CHUCK:
Is that something, I didn’t quite catch, if it was available for everybody?
M:
Yeah, anyone.
AARON:
Yeah.
M:
There’s actually a game on Chrome Web Store called Cracking Sands Racing that uses this for performance. Most developers use it for performance reasons. C++ code is just going to run faster. But well, although these days that’s getting less and less true. But in many cases, the C++ algorithms are going to run faster. But a lot of developers also use it because they just happen to have a lot of C++ code. If you’re a games developer, chances are you’ve got some C code lying around that does certain things, and they don’t want to rewrite that in JavaScript.
AARON:
So, I think the first time I heard about Pinnacle was at I/O a few years ago. And it was interesting to me because I was like, “Wait a minute. You just killed one of the things we love about the browser, which is the security.” But then I studied the compile process. They take your C and C++ code and they put it through a special compile process that disallows jump and disallows any sort of thing that would allow you to break outside of the Chrome sandbox.
M:
Yeah.
AARON:
So, you still, even though you’re using native code that’s super-fast, you’re not breaking the Chrome sandbox. It’s actually running inside the Chrome sandbox, which I thought was interesting. And people don’t have native access to your computer like they would if you install a native app.
M:
Right, right, exactly. It’s all sandboxed the way that other apps are sandboxed.
AARON:
So, how long have you been on the Chrome apps team?
M:
Since I got here. I’ve been at Google for about three years. And when I first joined, I’ve been on the Chrome team since I joined. And the Chrome apps effort started shortly after I joined. So, I joined here in November of 2011. So, right around then was when the very first early efforts of Chrome apps first got going. So, I worked closely with the engineering team to bring external developers in and get them excited about the platform and help them out with their technical issues. So, I’ve been here since the beginning for it.
E:
I hear it’s really easy to get a job at Google. Is that right?
M:
Oh, all you got to do is send us an email.
AARON:
They just let anyone in anymore.
M:
Oh yeah, no. Oh yeah. No, it’s a myth. Yeah, come on. It’s [inaudible], come on in.
AARON:
That’s funny. [Laughter]
CHUCK:
So, what kinds of things do you see people doing with Chrome apps? Are there specific types of apps that seem to really lend themselves better to this?
M:
Yeah, so it’s interesting. When we first started going and talking about Chrome apps to people, the way that I would explain the concept was I would break it down into buckets. I would say, because developers sometimes ask me, “Why would I want to do this?” and I had to have a good answer. And the way that I explain it to developers was, think of it as different tiers of user engagement. So, web apps are great because you can do lots of things cross-browser and they’re becoming more and more capable all the time. But your web app is only alive and engaging with the user when it’s up and running in a tab. When the tab’s not running and your site is not in the browser, the user’s just simple not interacting with your app.
And the next step up from there is a browser extension, the Chrome extension. The nice thing about Chrome extensions is that even when your app is not loaded into a browser tab, you still have the ability to interact with the user. Your extension can see content coming and going. So for example, if you’re a shopping application, if you have an online shopping comparison app, you can see that people are looking at products on a certain website and say, “Hey. This is some price comparisons. Here’s what it costs over on this website.” So, even though your web app is not running, you’re still engaging with the user. The problem is when the browser’s not running, that extension’s not running. So then, that engagement stops at that boundary.
But Chrome apps have the ability to be constantly engaged with the user. So, even when the app itself is not running, when you register your Chrome app, when you build your Chrome app and you register for certain system events, the Chrome runtime realizes that. And so, when the system starts up, Chrome starts up. The Chrome runtime starts up. So, the Chrome runtime is always there, listening in the background. And so, you can do things like send a Google cloud message to your app and your app will actually wake up and run. And you can do things like engage with the user at that point. So, for developers who want to build apps that have that higher engagement model where even if my app isn’t running I can still interact with the user on certain important events, Chrome apps provide that ability.
And some apps just simple lend themselves well to being outside the browser. So for example, you take a common application like a spreadsheet. Why do you have an omni bar in a spreadsheet? What does the back button mean when you’re in a spreadsheet? It doesn’t really mean anything, right? It’s just that UI in the browser. What does the bookmarks bar mean when you’re in a spreadsheet? So, you’ve got all these browser UI that has no real relation so your app. And so, you want to get that all out of the way.
So, certain apps that have a high level of user interaction where as a user I’m in that app for hours at a time, whether it’s a spreadsheet or a word processing app, or an IDE, or other kinds of apps that you just want to focus on your user experience, it makes more sense to just have an app experience where you’re not competing with the browser for the user’s attention. So, that’s how I explain it to developers.
AARON:
I like that you can tell them to start when the user logs in. So, it can run separate of the browser. And you get a real native install feeling as a user experience, not as a developer, but as a user experience. So, I love what you can do. There’s one of the [inaudible] is writing a Chrome app, what is it called? It’s ChromeMyAdmin, because he’s using it, a Chrome app, to be his MySQL admin. And it’s cool that he can connect into, does it use ODBC connections? How is he doing that?
M:
It’s up to him, probably. There are all kinds of low level network connections that you can do. If you want, you can just open raw sockets from within a Chrome app. So, there could be any one of a number of ways that he’s accomplishing that. One of the nice things about Chrome apps is also we give you a control which is essentially the Chrome browser. So, you can have the Chrome browser, not the extension, just the rendering surface not the extension runtime and so one. But you can actually embed a fully functional Chrome HTML5 rendering surface inside your app. So, it gets a little inception like where you can embed Chrome within Chrome and build. In fact, one of our sample apps is building a browser using the web control. So, there are all kinds of things. [Laughter]
M:
Yeah, it’s neat. But there are all kinds of things that you can do inside a Chrome app. I’m just actually surprised every now and then. I look on the Chrome Web Store and I’m like, “Oh, that’s an app now. Oh, that’s an app now.” It seems to be getting used for some interesting scenarios.
AARON:
Yeah. Can I interject? This is going to be totally self-serving.
M:
Sure.
AARON:
A few years ago, I gave a talk at Fluent where my friend Dave and I, we build a Chrome app. And we wanted to just show off how cool Chrome and Node and Angular were, and all three being our platform of choice. And we built an app that uses Chrome’s speech recognition API. It listened to our voices. Anytime we said the words, ‘um’, ‘so’, ‘like’, or ‘uh’, it would send a signal to the serial port. And then we had a device attached to our USB that when it would receive an S at a certain baud rate, it would shock us. [Laughter]
AARON:
And so, it was like a therapy app to stop saying ‘um’, ‘so’, ‘like’, or ‘uh’ when we were speaking. And we actually got Nick Zakas up on stage to shock me and we got Igor from the Angular team up and he actually got shocked. [Chuckles]
AARON:
It was just a stupid example of look how the cool stuff you can do with a Chrome app, with the web technology that we all love. So yeah, I’m a huge fan of Chrome apps.
M:
It’s great to know that our technology is being used in such creative fashion.
AARON:
Yeah. [Laughter]
AARON:
I know that’s why you go to work every day, bro.
M:
Yeah, I know. This is fantastic. I can go back to the Chrome team now and say our work here is done.
AARON:
Yeah. How can you make shocking people easier?
M:
[Chuckles]
AJ:
So, it didn’t work on Aaron, though.
AARON:
No, um. [Laughter]
CHUCK:
I know. He’s not yelling when you were, um, talking, um. Yeah.
AARON:
No. [Laughter]
AARON:
No, you should check it out. I’ll put it in the show notes. It was a fun talk.
M:
Okay. I will definitely take a look at that. That’s great. I’m sure the team would get a big kick out of that as well.
AARON:
Yeah. Actually, Paul, there’s a video of Paul Irish getting shocked.
M:
Really? Okay, alright.
AARON:
I’ll put that in the show notes, too.
M:
Kind of funny how he neglected to mention that when he came back from the show, but…
CHUCK:
[Laughs]
M:
I don’t know. I think I may have to, I don’t know, I may have to tweet about that or something. I don’t know. We’ll see.
AARON:
No, it was cool.
CHUCK:
So, I am wondering. Can you write apps in CoffeeScript or Dart or some of the other transpiled languages?
M:
Yeah, actually you can. So, if you’re going to do it in CoffeeScript, clearly you have to compile it to JavaScript first. The work on Dart is ongoing. We actually are working towards getting native Dart support for Chrome apps. I don’t know when that’s going to happen. But every time I talk to the Dart team they’re like, “Yup. We’re going to do it.” You can do it in Dart today. Again, you got to do the compiling thing. In fact, I don’t know if your guys saw, we recently shipped an IDE called the Chrome Dev Editor. And that’s actually built in Dart. So, it is possible. I think currently, all the language bindings have to be in JavaScript. I don’t think they’ve pushed the endpoints through the IDL to JavaScript just yet, I mean to Dart just yet.
AARON:
So, [inaudible] Dart JS?
M:
I believe that, yeah I haven’t actually looked at their build process, but I believe that’s what they’re doing, because I don’t think that we’ve shipped the Dart VM in the native Chromium browser just yet. [Inaudible] that’s happening, that the work is being done. I just don’t know what the timeline is. But it’ll be a great day when you can do that, when you can build native apps using Dart. That’s a day I’m very much looking forward to.
CHUCK:
So, one thing that’s interesting, we were talking to Dave Thomas on the Ruby Rogues podcast and he mentioned that the browser is dead and that we’re just perpetuating it with our current web development practices and things. I’m curious if you feel like this is a step toward that, where we move beyond the traditional browser and into an arena where it’s more about the app and less about the platform.
M:
Well, first I fully disagree that the browser is dead. I don’t think the browser is anywhere close to being dead. But I do think, so one of the things I want to make clear is that just because Google is developing Chrome apps doesn’t mean that we think that the browser is going to go away. One of the reasons we’re developing Chrome apps, and every time we do something like put an API into Chrome apps, we do it with the eye that one day hopefully the stuff that we’re doing is going to be standardized. Today, we don’t have native USB access in the browser. And until such day that W3C or WHATWG gets around to standardizing that, that would be great, but we don’t have that right now. But that doesn’t mean the need is there. So, I wouldn’t say that it’s necessarily a step away from the browser.
To me, it’s more about expanding the opportunity pool for what developers can do. There are lots of things that web developers can’t do today without writing native apps. And there’s really no reason why they shouldn’t be able to address certain scenarios. And the way I see Chrome apps is that it’s not an either/or thing. And I think that there are sometimes people with ulterior motives who want to portray things that way. But I don’t agree that the browser is dead or that the web is dead or that the web is dying or anything like that.
I think that Chrome apps is a step towards telling web developers, “Hey, using your interesting skills, you can now address scenarios that you couldn’t before without writing native code.” And hopefully what we’re doing will be standardized. In fact, we’ve already had initial talks with Mozilla about this stuff. There’s no reason, for example, why our manifest files need to be different between Chrome apps and the apps, the stuff that they’re doing over there. So hopefully, that will lead somewhere towards standardization. But I don’t really see this as a step away from the browser. I just think it’s a way of expanding what can be done.
AJ:
So, here’s a question since you’ve brought in Mozilla, and I’ve been playing with the Firefox OS recently and I love it. Is there a clear path for having Chrome apps get into the Android store in the future so that you can have that seamless experience on mobile? Because that’s the nice thing about the Firefox apps, is that they run on the Firefox phone just as well as the browser situation.
M:
Yeah, so when you say clear path, it’s something we’ve talked about. Right now the way that you would do that is to build a Cordova app, which you know is essentially PhoneGap. We’ve been working with the PhoneGap folks over at Adobe and we actually have a team of people up in Waterloo that are building Chrome apps plugins to the Cordova framework. I think we’re actually…
AJ:
So, that sounds like that would be pretty simple.
M:
For the moment, that’s the way it works. If you want to build a Chrome app that runs on native then currently the way that you do that is through Cordova. Obviously, there are challenges there. We only have control over Android. We don’t have control over iOS or Windows Phone or anything like that. So, that would be up to those guys if they wanted to standardize on some kind of app framework using HTML and JavaScript and then have some runtime. But I don’t see that in the imminent future.
But for the moment, if you really want to build a native app, a Chrome app that runs on mobile as a native app, then Cordova is currently the solution for that. We’ve looked at ways that we can make Chrome apps run at least within Android as native. It’s something that we’ve thought about. We don’t have anything to show for it at the moment. But we’ve had those discussions.
AARON:
Yeah, so a few years ago, I was like, “Wow. Google’s got the two largest platforms around in
Chrome and Android. How are they ever going to marry these two?” because it’s not cool for them
to compete against themselves. So, every time someone’s talking I’m always listening about what’s Google going to do to marry their two platforms. And so, the CCA, the Cordova Chrome Apps was kind of an announcement, if you will. But I can’t wait until someone’s like, “Dude.” The Chrome OS and having Android runtime in Chrome OS, that was cool. That was a big announcement.
M:
Yeah.
AARON:
But having a Chrome runtime or allowing my Chrome app to run as an Android app is another announcement I think most people are waiting for. Or I think that’s the only way you could marry Android and Chrome, by letting Chrome apps run on Android.
M:
Yeah. These are the kinds of discussions that we’ve had internally. But at the moment, yeah Cordova’s the way to do it at the moment. We did demonstrate specific, certain specific Android apps running on Chrome OS. And that’s an interesting experiment that we’re running. We’re trying to see if that’s actually something that makes sense for developers and something that they respond to. So, that’s another potential way of doing things. Now at the end of the day, we want developers to build great experiences using whatever language and platform they happen to like. I don’t necessarily see the two platforms as competitive with each other.
One of the things I always tell the guys internally is that, “Look. We could build the world’s greatest web-based app platform and solve all the problems and do everything native code can do. There would still be people who chose to write native apps.” there’s always going to be people who just like native code. There’s always going to be people who like Java and .NET and whatever else. And so, I don’t think you’re ever going to have a situation where one just simply wins out over the others. But the question is, how can we give each audience the capabilities that they need to do to get their jobs done in the way that they best know how?
AARON:
Yeah.
CHUCK:
I have another question and that is, how does writing an app with the Chrome apps system differ from writing apps on Node.js? So for example, the Atom editor is basically written on Node.js. And so, its runtime is a JavaScript runtime. It’s just different.
AARON:
Node Webkit, you’re talking about?
CHUCK:
Yeah.
AARON:
The Node Webkit, [inaudible]
M:
Oh yeah. So, I’ll have to be honest. I haven’t really used the Node Webkit solution. But there are actually other frameworks who do this as well. I think Sencha has one. There’s also the Chromium Embedded Framework, which is by the way how Adobe builds their Brackets tool. So, there are other engines out there that provide a way for people to build native-ish apps using web technologies. Fundamentally, there are similarities in that they use the JavaScript runtime. They use HTML as their frontend. They’ve got various APIs for poking through to the system and so on. So, in that respect, they’re not all that different.
I think the key difference would probably be in the way that Chrome, just various idiosyncrasies with its security model perhaps, because we implement CSP which is the Content Security Policy in Chrome apps. So, that’s probably one key difference. Another key difference is that the way that apps are installed and used on the user’s machine is via the Chrome Web Store. We don’t make you write an installer package which you do with some of these other packages. So, those are probably the main differences. They come down to things like details around shipping and installation and management and that kind of stuff. And obviously, and app built using the Node Webkit solution or Chromium Embedded Framework is not going to run on Chrome OS, because there is no native runtime there. It’s just a Chrome runtime.
AARON:
I think you rushed over the security model. If I was faced with the same app, one a Chrome app, one is a Node Webkit app, I think I’d pick the Chrome app every time just because I don’t trust people. I don’t trust people to build an app anymore where they’re not going to put something on my machine. And Chrome prevents that, or Chrome apps put you in a sandbox where your tax returns in your documents folder aren’t going to start getting uploaded for no reason, whereas a Node Webkit app, it’s running as a native app. You can do any of the things that you’re logged in user can do. And so, the security model for me is a huge difference.
M:
Yeah.
AARON:
It’s not negligible as a user. I would definitely pick the Chrome app.
M:
Sure. From a user’s point of view, absolutely. I think you’re right. We spent a lot of time thinking about the security model. That’s actually one of the pillars of Chrome itself. We wanted to make sure that we didn’t’ give that up. And so, in some cases, it sometimes limits what you can do with a Chrome app. But we’d rather air on the side of caution there. And just giving, so for example, one of the discussions that we went back and forth internally for a long time on was how to we give developers the ability to read and write to directories in addition to just individual files. And that was a huge security discussion that we had to have for months and months until we finally found what we thought was a secure way to allow them to do it. So, everything that we do is bounded by that discussion. There’s always the question of, “Well, what do we do to keep this secure and safe?”
AARON:
That’s awesome.
CHUCK:
So, one other thing that I’m wondering a little bit about is, is there a way to for example write a Chrome app that effectively extends Chrome so that you can do the other things and then have your web app take advantage of them?
M:
Architecturally, Chrome apps are separate from the Chrome browser. But there is a way for Chrome extensions to communicate with Chrome apps. There is a messaging system that you can use to send data back and forth. It’s not so much extending the Chrome browser. It’s more like, if you have an app that for some reason needs to communicate with the browser to get data for something or for some other purpose, there is a way to do that. But there’s no Chrome app way of extending Chrome itself.
AARON:
So, one of the cool things about Chrome apps, another, Chuck asked that. One of the things you could do is in Chrome apps, you can actually launch a server, an HTTP server.
M:
Yes.
AARON:
From inside your Chrome app.
M:
Yup.
AARON:
And so, if you launched for example, if you install the Chrome app and you launched a server on some port that was yours, and then I went over to IE or Firefox and I opened up your page. If your page did a request to local host port whatever, and your little server didn’t have cross origin request turned off, you did a JSON pure request to your local machine, you could actually serve data from a Chrome app to your local machine, regardless of what browser you’re in. You know what I’m saying? So, you could extend a browsing experience through a Chrome app in that sort as well, in that sense.
M:
Yes. Yeah, it is actually possible to open a TCP port and listen for things like that. Yeah, absolutely.
E:
That almost sounds meta.
M:
It kind of is.
CHUCK:
[Laughs]
M:
It kind of is. [Chuckles]
E:
Yeah.
CHUCK:
My web browser gives me a way of starting up a web server that it can then browse to.
[Chuckles]
AARON:
Yeah.
M:
Just don’t cross the streams. [Laughter]
E:
Doesn’t [inaudible] crossing the streams? That’s crossing the streams, right? Especially if you open it up in IE. At that point, all bets are off.
M:
Yeah, no. Don’t ever cross the streams, man.
AARON:
Yeah. No, that’s cool though. The second thing is, a Chrome app TCP server is not the same as a Node server. So, a lot of people are bummed that they can’t use the same code. But whatevs, it’s a cool piece of functionality for now.
E:
So, I want to see a full stack app with Angular, Chrome, and Mongo, nothing else, right?
CHUCK:
[Chuckles] There you go. [Chuckles]
E:
It’s going to be the new wave of the future.
CHUCK:
It is interesting though that you bring that up, because effectively you could then have an internally hosted app that just works on one machine. You could also then work out, if it is Mongo or something, I guess you’d have to have MongoDB installed on your machine. But you could work something out so that the MongoDB is actually how the data sharing works one way or the other.
E:
Mongo Chrome app, dude.
AARON:
Yeah.
CHUCK:
It’d be interesting.
AARON:
Yeah. That’s a huge dependency though.
[Chuckles]
M:
Yeah.
AARON:
I would have to install Mongo.
One of my favorite things for Chrome apps, where I think they fit in the best, is demolishing the current ecosphere of these old enterprise .NET and console Java apps that you install it and you have to… So, you got some guy who he doesn’t know anything about computers other than he hits the keyboard to enter data and he buys some $1200 a year piece of software to run his business. And they’re like, well install .NET 3 and 4 on your machine and an MS SQL Server. So, any time he gets an update he’s updating these packages and he’s like, “What?” He doesn’t know what any of it does other than when he clicks on the icon it opens.
And Chrome apps I think fill that one nicely to say, “Dude. You just have to install the Chrome app and it takes care of it for you and auto-updates. There’s no crappy update story like you have in these other old, I consider them ancient methodologies of building enterprise software.” I think Chrome apps, that’s where they’ll get their biggest wins is by penetrating that market and updating that old ecosphere that I think is just outdated.
M:
Yeah. We actually have had a lot of good conversations with companies around that about building their internal tools on top of Chrome apps. One of the things that we have to do in order to really nail that scenario I think, and we’re working on this, right now Chrome apps require that the Chrome browser be installed in your system. And as you may know, a lot of enterprises are still using a certain other browser from a few versions back.
E:
He who shall not be named?
M:
Yeah, yeah. Don’t say his name.
CHUCK:
[Laughs]
E:
You’ll invoke him. He’ll appear.
M:
Yeah.
[Chuckles]
M:
So, one of the things that we’re working on, again we’re trying to figure out how best to do this, is we’ve gotten the request, “How do I install a Chrome app if I don’t already have Chrome installed?” So, hopefully we’ll be able to address that question pretty soon. I don’t know when. But it’s something that we have definitely thought about.
CHUCK:
Cool.
AARON:
Yeah, that’s awesome.
CHUCK:
So, one other thing that comes to mind with this is that you have Chrome for Windows, Chrome for Mac OS, Chrome for Linux. Are all of the Chrome apps completely cross-platform or do the capabilities vary from platform to platform?
M:
Well, that’s the idea. The idea is that Chrome apps run the same regardless of what OS you’re on. So, by building a Chrome app, I get the same capabilities on Mac, Windows, Linux, and Chrome OS. In practice, I think there have been some cases where some capabilities only showed up on certain platforms like Chrome OS or I think Windows first, or something like that. But we do our best to try to keep the runtime in sync across all the various OS’s. So, as a developer you shouldn’t have to worry about, “Well, my app is running on this OS versus that OS.” In the stable channel, that’s definitely the case. In the stable channel, we keep the APIs nice and sanitized across the OS’s.
AARON:
So, for the, speaking a little bit to the Cordova Chrome apps build that you guys have going, the documentation spells out clearly which bits work both Android, iOS.
M:
Yeah.
AARON:
And which bits are one or the other.
M:
Yeah, yeah. Yeah, and Cordova’s a little bit of a different animal simply because it’s not really Chrome on iOS. It’s their web view control.
AARON:
Yeah.
M:
Which happens to be based on Webkit, but it’s still not proper Chrome.
AARON:
Yeah.
M:
So, there are some things that we don’t entirely have working just yet. But we do what we can to try to minimize that. But in some cases, we have to work around whatever the platform limitations are.
AARON:
That’s awesome. I think we’re getting close to the end, so I’m going to ask a question I’ve been wondering. What are some of your favorite apps that the community’s built? Not that you guys have built, but you see in the community that are built using Chrome apps or Chrome extensions.
M:
Yeah, so there are some good ones out there, especially just recently. One of the apps that I think has done a really good job, actually there’s a calendar app called Sunrise. And they’re a bunch of guys based in New York. And it’s a Chrome app that connects to your Google Calendar. And I think they’ve done a really good job with that. They’ve got these nice, neat, little features.
So for example, if I type in an event and it’s someone’s birthday, and it detects the word birthday in the event name and it assigns an appropriate icon, like a little party hat. And so, it’s really easy even when you’ve got the thing scaled down, to quickly see what events are coming up based on what types they are. I think that was a nice little touch. So, that’s actually a good one. I know you specifically asked apps that we didn’t build, but honestly I’m pretty damn impressed by what the guys did on the Chrome Dev Editor. [Chuckles]
M:
Oh yeah. It’s just, they’ve been working on it for so long. And I actually showed a very, very early version of it at I/O I think last year. And to see how much work they’ve done just in the past year on getting that app working, they’ve really put a lot of effort into it. So, I think the Chrome Dev Editor. If you’re looking for something that you can use to actually build apps on Chrome OS, it’s actually a really cool app.
Some of the games that are available, I’ve been pretty surprised at the quality of some of the Chrome app games. There’s a game called Murder Files on the Chrome Web Store. I think they did a really good job with that. The Cracking Sands guys that I talked about earlier that did the native client stuff, that’s a really cool game because it actually uses, you could actually plug in and use your Xbox controllers. And so, you don’t have to play with a keyboard. You can just use a real game controller, because we provide a game controller API in Chrome.
CHUCK:
[Chuckles] That’s awesome.
M:
Yeah, it’s really neat.
AARON:
That is awesome.
M:
I was really surprised. It was relatively new when we put it in. And then one day I just saw a demo of it. I was like, “Wait, what is this?” And they were like, “Oh yeah, we just used your game controller API.” I was like, “Okay, that’s something that you just can’t do on the web today,” right? That’s a perfect example of something that you just can’t do. I’ve been getting pretty excited about some of the things that used to require desktop apps. There are a couple of really good video editors, like WeVideo for example, where it’s a Chrome app based video editing tool. So, I’ve been pretty impressed by how some of the developers are closing the gap with what used to be required, it used to require a native app to do and now you can do as a web app. So, WeVideo is a good one. There’s an image retouching app called Pixlr from Autodesk. They did a great job on that. So, I think apps that really are pushing the boundaries of what you can actually do with web technology have been pretty impressive lately.
AARON:
That’s awesome. Way cool. I actually have been looking for a better calendar app. And I just installed Sunrise and it looks pretty legit.
M:
Yeah. It is pretty legit. They did a good job on it, yeah.
E:
So, what about learning to do Chrome apps and stuff. What are some resources that you think are awesome?
M:
Yeah. Well, there’s the canonical developer documentation that we’ve got on our site. If you just got to developer.chrome.com/apps, that’s really the best starting place. We also have a full Git repository. So, if you go to GitHub.com/googlechrome you’ll see our repository in there where we have all the Chrome apps samples. And one of the things that we’ve done is every time we add a new API, we build a sample around it. So, there are samples that show how to use all the different things that we’ve put into the platform. I’d say those are probably the two best places to get started.
I believe that a lot of the talks I’ve done at I/O are probably online on YouTube, so I would talk a look at those as well. I’m not familiar with any third-party training resources on Chrome apps yet. There might be some out there. But to get started, we’ve tried to make the developer site for Chrome apps really approachable. And I would say that’s probably a good place to just get started.
AARON:
Stack Overflow’s epic, too.
M:
Oh yeah, absolutely.
AARON:
I think actually Joe, you’re on Stack Overflow nonstop.
M:
Yeah, we have our own tag on there. If you got to Stack Overflow and you do a search on Google Chrome apps, then you’ll see all the tagged questions.
AARON:
Cool.
CHUCK:
Can you talk about what’s coming next with Chrome apps?
M:
Well, we’re continuing to push the platform forward. We’re looking at ways to add new APIs. Like I mentioned earlier, we’re thinking about ways that we can get Chrome apps installed onto machines without requiring Chrome be present. The Chrome App Launcher continues to get built out. I don’t know if you guys have seen this, but we recently officially launched support for Linux for the Chrome App Launcher, finally. It’s been on Mac and Windows for some time now.
So, we’re looking at ways that we can make the Chrome App Launcher more featured and more functional. So, those are probably the nearer term things that we’re looking at. We’re always looking at ways to just make the platform more approachable to developers and more useful. So, our goal is that you should be able to cover your scenario using a Chrome app. If there’s a scenario that you’re bumping into and Chrome apps don’t have the necessary APIs, we always want to know about that. So, I think those are some of the nearer term things that we’re looking at.
CHUCK:
I’m assuming that it has all the capabilities that you would normally have so it can reach out to third-party APIs and things like that, right?
M:
Yeah. If you want it, so when you say third-party APIs you mean like third-party libraries?
CHUCK:
Like Dropbox or…
M:
Oh, sure, yeah. If you want to do, Chrome apps can do full on XHRs and network communications. So, if you want to reach out to third-party services, that’s perfectly fine with us.
CHUCK:
Does it do it through XHR?
M:
You can. Yeah, you can do XHR. You can open up a network connection. You can open up a socket. It depends on however you want to communicate with somebody.
CHUCK:
Okay.
M:
If you want to do XHR, that’s totally fine. You need permission to talk to that website.
AARON:
Yes. So, in your manifest, you just say I want to talk to NFL.com and whatever.com.
M:
Right.
AARON:
And the cross-origin restriction security stuff, it ignores it for those domains because when the user installed your Chrome app, it showed them, “Hey, Aaron’s app here needs permission to blah, blah, blah.”
M:
Right.
AARON:
So, when it installed, they knew you were going to get data from those domains.
M:
Yeah, yeah.
CHUCK:
Got it.
AARON:
So, that’s actually been, it’s really cool to build mashups with Chrome apps because you just turn off your, you get permission to do those cross-origin restriction, the [core’s] request, and you’re good. And then as long as they’ve logged into that other site, you can just make requests to that domain and you’ll get responses back. So, you don’t necessarily have to through and through an OAuth procedure for the third-party site. You can just start hitting that, their endpoints, and getting data back. I don’t know if that’s kosher, but I’ve built some apps like that and it’s been super easy.
M:
Yeah.
CHUCK:
Very cool. Alright. AJ, do you want to start us with the picks?
AJ:
Why, yes I do. Today I’m going to pick Ghostbusters because I realized that ‘cross the streams’ is a reference to Ghostbusters. [Laughter]
AJ:
And I actually heard that several times and it wasn’t until today that I was like, “Wait a minute. That’s a Ghostbusters meme.” [Laughter]
E:
And the 30th anniversary’s coming up here soon.
AJ:
Ooh.
AARON:
Yeah.
AJ:
Nice.
M:
That’s right.
E:
They’re releasing it in the theaters, right?
M:
No way.
E:
Yeah, I think they are, yeah.
M:
Oh, man.
AJ:
I’m so upset I missed Jurassic Park in 3D. Hopefully I can catch Ghostbusters that way. [Laughter]
AJ:
Let’s see. I’ll also pick, there’s as Belkin makes a Thunderbolt hub. The nice thing about the Thunderbolt hub is that if you want to have a three-monitor setup and you don’t want to pay for a Thunderbolt display, then you can take your $50 monitor and pay the $200 for the Thunderbolt hub and then it has a display adapter in it for one display. And so, you can connect another display via mini display port or HDMI. Or you could just take twice the price of your $99 monitor and the Belkin display and connect another Thunderbolt monitor to your Thunderbolt monitor. But it looks really sleek. It looks really sleek. And the gigabit adapter in it works well. And I know this because Google Fiber.
E:
This is all because you don’t want to upgrade your Mac, huh?
AJ:
Wait, can the new Macs, do they have dual Thunderbolt ports?
CHUCK:
And an HDMI.
AARON:
Of course.
M:
Yeah.
AJ:
Oh, man.
E:
AJ.
CHUCK:
Yeah, my MacBook Pro has two Thunderbolt ports and an HDMI.
AJ:
But here’s the thing. When they come out with a 2 terabyte SSD for less than $5000, I’ll jump on it.
E:
You are thoroughly un-Apple, because you want to be able to upgrade your Mac. And that’s not an Apple. You are not an Apple person, obviously.
AJ:
No, I’m not. I am not an Apple person. [Laughter]
AJ:
I’m a technology person. And it just so happens that Apple has the best offering 95% of the time. But right now, they don’t have a good offering and no one else does either. So, I’m sticking with my 2012 that can support a 2 terabyte hard drive. [Chuckles]
AJ:
Because I don’t want to walk around with the stupid dongle so that I can have access to the things I want, because the cloud is a lie. I know that Google’s got Google Fiber and that makes the cloud seem like it’s not a lie. But the cloud is still a lie, just like the cake is a lie. The cloud…
E:
I hope that you know, I hope you know that Steve Jobs hates you.
CHUCK:
[Laughs]
AJ:
He’s dead. He can hate me all he wants.
AARON:
Whoa.
CHUCK:
[Laughs] Oh.
AARON:
Uh-oh.
E:
[Laughs] Harsh. [Laughs] Okay.
AARON:
I think that that was too soon, no matter how late you waited. [Laughter]
AJ:
Yeah. Well anyway, I really don’t believe in the cloud. There are some conveniences to it, but I believe in owning stuff and having it available and not having to cache it or buffer it. And I like my 2 terabyte hard drive.
AARON:
AJ. I don’t think the cloud believes in your either, bro.
AJ:
Good. Then we’re square.
AARON:
Yeah.
CHUCK:
Oh, man.
AJ:
I’m not picking the cloud. I’m picking a 2 terabyte hard drive.
CHUCK:
Did I pick my docking station for my MacBook Pro last time?
AJ:
I think you did once.
CHUCK:
I guess I’ll go next, because I want to talk about this for just a second, because I have one of the Belkin ones for my MacBook Pro. And then I also have one that is a, I don’t even remember what brand, but it’s not Belkin. So, I bought them both, because I have a standing desk and then I have the desk that I sit at most of the time. And I’m going to start spending more time standing over at the standing desk. And so, I wanted to be able to unplug and then re-plug and not have to plug in more than one or two cables in order to get everything I want. The other thing that I really liked about them was that they offer the wired Ethernet port.
And so, I have the Belkin. It says it has two Thunderbolt ports on it, and that is true. But one of them is actually for your computer. So, you really only get one extra Thunderbolt port off of it. I didn’t see an HDMI on my Belkin but I did get an HDMI port on the other one. And so, when I get up from sitting down, I pull out two cables. And then when I go to stand up I plug in one. And I’ll put links to both of them in the show notes. The one with the HDMI on it was actually cheaper than the other setups.
AJ:
So, here’s the deal though, just so you know. That CalDigit is what you’re talking about, I believe. And that one…
CHUCK:
No, it’s not.
AJ:
Oh. Well, all the hubs, they only have one display adapter in them, if they have any at all. So, you can connect via HDMI or you can use a mini display port to HDMI adapter, but you still only get one monitor out on it, because Thunderbolt is a serial connection where you have to daisy chain.
CHUCK:
Okay.
AJ:
And each device will only have one display adapter.
CHUCK:
Alright. Anyway, I love mine. That’s all I have to say about that. Joe, what are your picks?
E:
Alright. So, for my first pick, I’m going to pick the Kardashians. [Laughter]
CHUCK:
Okay?
E:
[Laughs] I’m sorry. I just couldn’t even do that with a straight face.
CHUCK:
Nobody could see that you were not straight-faced.
E:
No, that’s the great part about it, is everybody’s like, “What in the?” No, I’m not picking the Kardashians. Instead I’m going to pick a TV show called Derek. It was done by Ricky Gervais. It’s on BBC. You could actually grab it on Netflix and watch it on Netflix. It’s this awesome dramedy. Ricky Gervais plays a highly autistic mentally challenged guy that works at an old folks’ home. And the show is just about life at the old folks’ home and the people that work there and how life affects them, what it’s like working there. And it’s mixed in with a whole bunch of really, really crude and crass British humor. And so, it’s kind of touching and at the same time, it’s hilarious. So, I’m going to pick Derek.
slide:
ology’. So, if you ever do any kind of presentations of any kind, her two books are the standard works for presentations. And ‘slide:ology’ is all about producing good quality visual presentations in your slides, whereas ‘Resonate’ is all about making a great presentation altogether, making something that resonates with the people. So, rather than just doing a report or something boring, actually communicating effectively through some kind of a presentation. So, that’s my other pick.
CHUCK:
Alright. Aaron, what are your picks?
AARON:
Alright. I’m going to throw three picks out this time. I’m four books into this nine-book series. It’s called the Iron Druid Chronicles. And if you haven’t read it and you’re looking for a cool series, this one’s awesome. It’s a 2000-year old druid. He looks like he’s 21. He’s done everything right until the beginning of book one. And it’s a lot of fun. The world is cool in the book. All the gods are real and any god you’ve ever heard anyone mention, that was a real thing. Bigfoot was real. Everything is real in this world, and he’s met all of them. And in book three, Jesus is like, “Don’t kill Thor.” It’s cool. It’s a cool, cool, cool book series. So, the Iron Druid Chronicles.
My second pick is a library called Pixi.js. It’s a super simple to use 2-dimensional gaming engine. And I thought it was, I think it’s super simple and I think it’s really cool. So, if you’re looking to get into some gaming, Pixi.js was actually really easy and a lot of fun.
And then I got this when I was at I/O and I almost threw it away. I was like, “This is dumb. Why did Google even do this?” And they gave me this piece of cardboard and I was like, “This is dumb,” and I almost threw it away. And then I pulled it out and I used it, and it’s amazing. The cost, you can put them together for less than two bucks. And it’s like an oculus rift made out of cardboard. The view is your cellphone, though. And I put it in and the demo apps were as cool as the oculus rift I’d played. They were as cool as that. And it just blew me away that you could have this disposable oculus rift that if you owned a business of sorts, you could hand out to your clients for very, very cheap and have a cool, cool experience for them. And maybe it’s just a marketing gimmick, but it’s a really cool marketing gimmick. So, I’m a huge fan of Google Cardboard as well.
CHUCK:
Google Cardboard.
AARON:
Yeah. That’s what it’s called. Some people call it oculus thrift because it’s a cheap oculus rift. It’s really cool. You have to check it out.
CHUCK:
Alright. Joe, what are your picks?
M:
You know what today is? Today is the day when OS X Yosemite Beta publicly lands. And it’s been 30 years, another 30-year anniversary, since the Mac was first introduced during the Super Bowl in 1984. So, my pick is going to be, go watch the intro of the Mac ad on YouTube to remind yourself that it’s been 30 years. And help celebrate the launching of the Yosemite Beta.
AARON:
Cool. I will watch.
CHUCK:
Awesome. It’s also Pioneer Day here in Utah, so everybody on this show except Joe took time out of their holiday [chuckles] basically to do the show. So, thanks for coming everybody.
M:
Oh, cool.
AARON:
Yeah, thanks man.
M:
Yeah, thanks guys.
AARON:
Joe. Thanks for making it on such a short schedule, Joe.
M:
Hey, no problem. I’m glad you guys had me on. And hopefully, it’s not the only time.
E:
But hopefully, this is the last guest named Joe.
[Laughter]
AARON:
After the confusion of today, you’ll likely be discriminated against. We’ll need someone else on your team to come on. [Laughter]
CHUCK:
Yeah, here’s another reference. There can be only one. [Laughter]
E:
That’s right.
M:
There you go.
E:
You have to decide this in mortal combat.
CHUCK:
That’s right.
M:
Finish him! [Laughter]
CHUCK:
Which one of you is going to take the other’s head, right?
AARON:
I’ve met them both. I’m picking Marini. [Laughter]
M:
Two devs enter, one dev leave.
[This episode is brought to you by Code School. Code School offers interactive online courses in Ruby, JavaScript, HTML, CSS, and iOS. Their courses are fun and interesting and include exercises for the student.
So, level up your development skills and go to JavaScriptJabber.com/CodeSchool.]
[Hosting and bandwidth provided by the Blue Box Group. Check them out at Bluebox.net.]
[Bandwidth for this segment is provided by CacheFly, the world’s fastest CDN. Deliver your content fast with CacheFly. Visit CacheFly.com to learn more.]
[Do you wish you could be part of the discussion on JavaScript Jabber? Do you have a burning question for one of our guests? Now you can join the action at our membership forum. You can sign up at
JavaScriptJabber.com/jabber and there you can join discussions with the regular panelists and our guests.]
119 JSJ Chrome Apps with Joe Marini
0:00
Playback Speed: