00:00:17.480
Ruby in the browser before we get in first question spend 10 seconds 15
00:00:24.439
seconds whatever it takes to think about this use your fingers count how many languages are you professional something
00:00:30.240
how many languages have you programmed
00:00:36.360
in all right if it's more than two put up your hand three so drop your hand if it's
00:00:44.640
less than so three four five 6 7 8 9 10 11 okay we got 10 what are
00:00:56.520
some of the 10 just out of curiosity
00:01:06.960
no python allow okay so that's a good sample
00:01:16.840
um well I'm not sure that that is the case right because we have a very diverse Community we have many different
00:01:23.280
languages and we tend to use many different tools Ruby is not the end all of all languages in fact I'm pretty sure
00:01:28.920
that most of us came to Ruby from some other language right which is why virtually everybody in this room put up
00:01:34.680
their hand as more than two languages and I'm pretty sure that Ruby is not going to be the last language that
00:01:40.399
you're going to learn either right so there's going to be more tools and then we look at something like
00:01:47.719
the browser right so the browser is an interesting Beast it's this new platform that we invented and we have you know if
00:01:54.079
you look at a very high level we have the CSS um engine there's a JavaScript engine there's a Dom there's the layout
00:02:01.000
um everything in between and the HTML 5 uh standard tries to kind of put all of
00:02:08.399
that together and in my view some and know I should preface this and I should say I'm a big fan of HTML 5 I love what
00:02:15.920
they're doing I I buy the vision um even bought the uh you know the mandatory
00:02:20.959
t-shirt and all the rest but they in my view they're kind of
00:02:27.800
trying to force a monoculture right it's like there's one way to do it there's a JavaScript way to do it and you're stuck
00:02:34.519
in that world and I don't necessarily buy that because even as you look at the history you'll find that you know we
00:02:40.760
have we have of course CSS JavaScript and Dom but then there is The Supporting Cast of thousands at the bottom right
00:02:47.680
the stuff that some of us love to hate so active X you know and this is from um
00:02:53.360
left to right probably in the order of pain that they've caused to the web so active X we're still trying to actively
00:02:59.400
WIP from our memory and all of the compromised computers out there um action script um like it or hate it um
00:03:06.959
it's been a giant uh bridge for us right it's it's flash it's what enabled video
00:03:12.879
this is why we have all of this technology so it has been critical in evolution of the web Java appolis won't
00:03:18.599
even go there um never happened right but there's there's a lot more now my personal relationship with
00:03:25.840
JavaScript went something like this right I didn't know it hence for I didn't like it um then I had a miserable
00:03:32.879
experience um trying to program to the Dom with it and this is probably five or
00:03:38.200
six years ago and I hated it then I took a long pause then J Curry came out um I
00:03:43.319
was playing with rails and I was like hey look this is actually not as painful as I thought then I actually had a very good experience I wrote a Firefox
00:03:50.560
extension which was basically pure JavaScript no interaction with the Dom and somewhere in there I I realized that
00:03:56.319
JavaScript is actually a pretty nice and beautiful language right the moment I stepped away from the Dom I didn't have
00:04:01.840
to deal with all the browser quirks and all the rest I actually had um a lot of fun later as the extension evolved and I
00:04:08.519
had to maintain it um I learned that you know there there's a few pitfalls um the
00:04:13.560
testing was very hard the maintenance was very hard and all the rest so long story short I like it I think JavaScript is
00:04:21.680
great I'm not trying to dissuade anybody from away from using JavaScript um
00:04:27.280
but I also have this Theory that JavaScript is maybe possibly a monopoly
00:04:32.720
right it's actually kind of crazy when you think about the ecma um standards body would you ever
00:04:38.440
trust all the major vendors to get together and invent the language and that all of us would have to program to
00:04:44.680
it well that that is Javascript that is ecma right that is what we're actually
00:04:49.840
putting up with and it's kind of crazy and I I don't necessarily think JavaScript is bad but I don't think this
00:04:55.759
is a good position to be in either right because diversity is good um we just said that we like many different
00:05:01.800
languages there's different ideas there's different approaches um there is no one particular solution that is
00:05:08.479
better and even if we look at the Ruby ecosystem um so I I stole the slide from
00:05:15.680
Constantine from his talk yesterday I think this is fascinating and amazing um these are all the different um
00:05:22.319
implementations of Ruby in various states of incompleteness right I'm I'm pretty sure that 90% of these won't even
00:05:29.080
run any semi-reasonable Ruby code but that's not the point the point is people are experimenting they're trying different
00:05:35.600
things they're trying to see what scks case in
00:05:42.000
point Cofe script so I had this idea of Ruby in a browser for a long time now
00:05:47.400
and I've been talking to a bunch of people and you know they kept saying like well why do you need that that's crazy you know JavaScript is awesome now
00:05:54.520
I'm talking to the same people this year and they're like look we got coffee script it's awesome it's like yeah
00:06:00.680
exactly because that's what I was talking about all all all along they're like no no no but it's just it's same thing it's
00:06:06.479
JavaScript so this is one instance of where we innovated within the browser and
00:06:12.800
everybody goes crazy over it right so imagine what would happen if we actually had more languages more possibilities of
00:06:20.120
running this stuff in the browser now this is uh a good time for me to step back
00:06:26.440
and actually say so yes I work for Google Now and um I'm not affiliated with Native client Chrome any other
00:06:33.280
teams my I'm only pathologically Cur curious so I you know I tend to talk to
00:06:39.560
a lot of those guys but all all opinions are my own I'm not trying to um convey
00:06:45.120
anything in that sense so uh Ruby in a browser wouldn't that be nice right uh
00:06:51.840
what would that look like but let's take that a step further it's not just about
00:06:57.000
Ruby right it I would actually really like to to see all of the other languages in the browser as
00:07:02.599
well why not right um for Trend
00:07:08.919
maybe you think I'm joking assembly why not actually we'll we'll
00:07:14.120
see an example so first example have you guys tried
00:07:21.160
this uh this actually um launched I guess two days ago a refresh to tr
00:07:27.199
rby.org very very awesome project let's see if we can actually
00:07:33.919
pull this off
00:07:39.319
wow
00:07:46.240
okay so you have an interactive shell in the browser this is pretty awesome
00:07:52.479
so but so this is technically Ruby in the browser but how does it work right if we go to inspect element
00:08:00.319
load up our Network tab you'll actually see that it's making
00:08:07.280
a web request right and if we look at the web request you can see that it's actually
00:08:12.759
sending a command um form data and it gets a response back from the server so it's not really Ruby nebr so this is an
00:08:19.520
awesome project but it's not really what we're looking for let's go back
00:08:28.240
here so of course being curious you know I started playing with this thing
00:08:34.039
and here's an example of interacting with a truby service you know so I'm using remote service to execute Ruby
00:08:40.120
code um pretty nice turns out they're actually running Ruby 192 um all that's all clever but of
00:08:48.160
course you know you give somebody a a fun tool to play with and then the next thing I'm finding myself experimenting
00:08:53.240
with this like well what can I do right cuz I'm not trying to be malicious and
00:08:59.040
bu by the way if anybody from um envil laabs is here I'm sorry for the slide but um it is to illustrate a point right
00:09:05.480
so security is always tough so here what I'm doing is I'm sending a command and I'm saying hey there's a string called a
00:09:12.160
and just make that a 32 megabyte string of A's just allocate that on on the
00:09:18.519
server and you know that's kind of malicious silly and not very productive
00:09:24.200
but um you can see how this can be abused easily so this is not great
00:09:31.079
so what would it take to actually get Ruby running in the browser um has anybody tried this um turns out there's
00:09:39.240
been actually a couple of different seams and I'm going to pick on three um in this presentation and this is not a
00:09:44.680
complete list so first one is a project uh called gestal uh by the Microsoft
00:09:50.760
team which is actually pretty awesome um they came out with this project probably two years ago and very few people paid
00:09:57.720
attention to this what it is is and I'll I see a bunch of people
00:10:04.480
typing so I'll leave the slide for a second the link is at the bottom so what what it
00:10:10.279
is or what allows you to do is to have code like this in your browser so
00:10:15.360
instead of saying script type JavaScript right why should we declare JavaScript
00:10:20.920
every time we write JavaScript because we know it's only JavaScript anyway right like what's the point so now we're
00:10:26.079
actually using that we're saying hey this is actually text Ruby and we're going to Define an onclick Handler and
00:10:32.600
the onclick Handler is going to pop up an alert box and then we're going to create a um an event handler and I think
00:10:39.920
this is pretty awesome right here we're going to grab the method handle on the onclick Handler and assign that to be
00:10:46.320
the onclick handle so we're actually exercising the power of Ruby we're grabbing the uh the method handle and
00:10:51.920
assigning it as a call back which is pretty cool so imagine you could write this um in your
00:10:57.639
browser of course some of you will come out and say well that's like coffee script right we have that um but hey
00:11:03.399
this was here two years ago and you have the full meta program capabilities of Ruby in a browser so how does this
00:11:12.480
work Microsoft has this project which a lot of people love to hate called
00:11:17.959
silverite silverite actually embeds the DLR their DLR which is dynamic language
00:11:23.399
runtime on which projects like iron Ruby iron python and a bunch of others run
00:11:28.800
right right so in fact um c f um would run on uh the zlr and then they built
00:11:36.279
this shim which is the gestal layer which is the library and basically what it provides is a way to communicate
00:11:41.760
between the browser and the DLR right so you have the silver light um basically plug-in um running inside of the browser
00:11:49.040
and then you're just communicating back and forth and you can manipulate the Dom you can do anything that you would effectively in your JavaScript frun time
00:11:56.360
so that's I think that's pretty awesome now now unfortunately what I don't know is whether there's actually a future for
00:12:03.399
silver light or even iron Ruby for that matter um unfortunately it seems like silver light got positioned as you a
00:12:09.720
flash killer a video substitute and it was actually much more or it is much
00:12:15.240
more than that because it has the full DLR capabilities and all the rest so it's unclear now what's happening um
00:12:21.519
with silver light at least within Microsoft and likewise for iron Ruby a
00:12:26.639
couple of the core committers have moved on um it's I'm not sure what the status of the project is so I hope uh both of
00:12:35.160
these U directions continue to get explored I think it's a very interesting project and I think a lot of people
00:12:40.519
underestimate the usefulness of silver light so now I think it's a good point
00:12:47.000
to actually take a brief uh brief uh detour I did not know much about browser
00:12:52.440
plugins when I got um into researching this topic and I thought it was actually very interesting to understand what they
00:12:57.959
are how they work and why we have some of the solutions designed the way they are today so here's a fun story so we
00:13:04.839
have Netscape netc capes uh just launched it's hot and we're doing a demo to Jim
00:13:12.720
Clark who is the CEO of Netscape at the time and a couple of adobe guys come in
00:13:18.279
and they demo this thing to him which is previously in the browser the only thing you could do or the only thing that the
00:13:24.519
browser understood um was images right so you have an image tag it would Det Che that it's the the right M type and
00:13:30.639
pull in the image and display it so Adobe guys had this vision of like well when you click on a PDF file it should
00:13:36.240
just seamlessly um show up in your browser instead of invoking a download
00:13:41.360
and then you have to go into your download folder and open it an external app so they demo this they they built a
00:13:47.279
tool they demo it and you know great success um very
00:13:53.440
exciting who's helping you oh we just reverse engineered it all right so um
00:13:59.880
they weren't they didn't actually invent or work with Netscape to invent um a way
00:14:04.920
to do this they they basically look at the code reverse engineered it and made it work so you know depending on your
00:14:11.160
view you can call that a lot of people interpret adobe's products is mware you know maybe this is the Inception of it
00:14:17.600
all um but anyway out of that experience the NP API
00:14:26.240
which stands for Netscape plug-in API was born which actually became the standard in all of the browsers so iie
00:14:33.040
Firefox Chrome um and all all the others use NP API which is basically um a
00:14:39.519
fairly simple API for uh defining how do you communicate with the browser so you have uh binary that wants to do
00:14:45.880
something and it needs to communicate to the browser NP API is that bridge so how does it
00:14:52.519
work the rendering engine uh basically looks at all of the file types that it's
00:14:58.320
pulling in if it recognize a registered file type or M type in this case let's say a music MP3 file it says oh yeah I
00:15:05.399
have a plugin that's registered to do that or register to interpret that I'll just pass it off to that plugin so this
00:15:10.920
is how your uh quick time works or acrobat works and all the rest so a pretty simple
00:15:17.279
Bridge um just to visualize it a little bit better we have the Dom we have the um nutscape plugin API and then we have
00:15:23.759
a bunch of external binaries right so there's flash silver light what have you you can build your
00:15:30.040
now turns out there's a couple of problems with this first the binaries themselves by
00:15:37.120
Design are Standalone processes right so they run outside of the browser and uh they have full access to
00:15:44.360
your operating system to your file system to your everything on on the computer and that gives them great power
00:15:51.240
to do very cool things but it also means that they can wreck complete havoc on your system which is why a lot of people
00:15:58.720
love to hate plugins because as a manufacturer of the browser put yourself
00:16:04.240
into Netscape Chrome Firefox shoes guess who gets blamed when your
00:16:11.360
computer gets infected with a virus oh it's the browser I navigated to this bad site it
00:16:18.040
installed this crap on my computer and now you know Firefox is a terrible browser and of course Firefox has
00:16:23.759
nothing to do with this right it's because you installed some dumb plug-in somewhere earlier on and now it's
00:16:29.160
getting exploited so browser manufacturers are actively trying to push away from this uh plugin
00:16:35.120
architecture and which is why they're also trying to enforce hey everything has to run within this HTML 5 sendbox
00:16:40.920
we're not going to let you pull in external processes so it makes sense uh
00:16:47.160
but you know this is something that we had to deal with or have to deal with still so then Google Chrome uh comes
00:16:53.920
along which is actually fairly recent it it seems kind of crazy you know it wasn't that long ago when I remember
00:17:00.120
when I saw the announcement I was incredulous right kind of like you crazy
00:17:05.400
why do we need another browser and of course now um Chrome is gaining market share so iie and Firefox are both losing
00:17:13.039
market share as of September um Chrome is I think 26% across the internet and growing So
00:17:21.000
within a month or two they'll actually be the second uh browser on the web which is actually pretty amazing if you
00:17:26.679
think about it and Firefox will get pushed down to three and I'm sure that you know IE will Solly
00:17:33.200
but surely kind of yield control of
00:17:42.360
that wow okay so the comment is um it won't because of
00:17:49.400
China moving on all right I China and
00:17:54.880
Google yeah not my topic so the interesting thing about uh Chrome
00:18:02.159
The Innovation if you will that they did was uh they said hey every tab is going to be a standalone process instead of
00:18:08.200
having one process and many tabs with it every single tab is going to be isolated so this gives you some nice things like
00:18:15.720
everybody has own security standand boox so if something goes wrong in one tab it won't affect anything else in fact we
00:18:21.039
can just kill that one Tab and you know everything's great so that's cool one problem so now we're back to
00:18:29.000
the same Flash movie on our web page what does that mean for security so we've isolated every tab into a process
00:18:36.679
uh but how we're going to isolate The Flash movie just reviewing what we saw earlier
00:18:42.679
right so we have the browser we have the plugin API and then we have flash so you have this external binary and security
00:18:49.159
is one of the probably most important things that Chrome is focusing on um
00:18:54.600
probably goes hand inand with speed but security comes first so they
00:19:00.400
won't trade off speed for security so they came up with a interesting
00:19:06.039
solution and there's two things in here so there's the native client and then
00:19:11.760
there's the pepper uh pepper API and if you don't get the joke so
00:19:18.240
native client is salt shorten to knle
00:19:23.679
and you have salt and pepper so what is pepper pepper is basically an update to
00:19:29.039
NP API Netscape plug-in API it's basically the same thing cleaned up a little bit repackaged um they proposed
00:19:35.480
it it's a standard Firefox has adopted it more browsers are coming along and in fact you know they built the web kit um
00:19:41.600
integration so um not sure what state Safari is in but it should be in available in there as well so we have
00:19:48.360
this pepper Bridge which is basically just a cleanup and then we have native client so what is native client native
00:19:55.120
client is a sandboxing technology for safe safe execution of native code so
00:20:01.520
let's unpack that a little bit it is actually native machine code that runs
00:20:07.799
on your CPU right it is not an interpreter the way I kind of Drew it here is a little bit misleading it looks
00:20:13.440
like we have this plugin which runs inside of a sendbox uh or the knle uh
00:20:20.000
sendbox but it's not the case that the the plugin is getting interpreted or going through a bridge what happens is
00:20:25.880
you actually compile the code and it and Knack will provide some safety guarantees so a little bit closer to
00:20:34.159
what's uh happening under the hood you have your C C++
00:20:40.480
code and you compile it with a specialized tool chain that the Nel team provides so there's the modify GC
00:20:48.400
compiler Etc because you're using this tool chain you do have to compile to different architectures so 32 64 arm and
00:20:55.480
and all the rest um it generates U mag a manifest file and then um which which
00:21:01.720
then gets loaded by the browser so how does the security part work and I should
00:21:06.919
also preface this and say I'm not the security expert here I you know there's a lot of very interesting and good information on the um if you follow that
00:21:14.200
link at the bottom but basically what happens is when you compile so first there's a static compile that you have
00:21:20.240
to do as a developer right so to build that uh Native client executable
00:21:28.640
when the code then the code gets loaded by the browser so a visitor comes to your site that executable gets loaded at
00:21:35.559
that time the nle runtime actually does a verification of the code so it
00:21:41.600
basically looks at all the instructions that are within that binary and um tries to figure out hey are you trying to do
00:21:47.600
something malicious here and if you are it stops you from running it um so it
00:21:53.559
doesn't prevent bad code getting into your browser but it tries to prevent bad code from executing in your
00:22:00.360
browser um and then of course it guarantees um to guarant to provide that
00:22:05.679
sandbox it actually excludes a bunch of apis so you do have the full power of C C++ and all the rest in your browser uh
00:22:13.679
but it doesn't allow uh forking uh you can't just willingly access your file
00:22:20.520
system or you know do something uh to that extent and if you go to the to the link
00:22:27.200
at the bottom you can actually find um a full list of documented CIS calls that are
00:22:34.760
disabled so let's take a quick example of how this actually works so imagine you have an HTML web page and we're
00:22:40.960
trying to load this native client module um in this HTML web page we load the
00:22:46.360
module and we have this function that says did the module load right was it
00:22:52.440
successful we grab so in this case I'm actually just using the example from the
00:22:57.559
native Cent site so we have the hello tutorial so we grab the the ID of that
00:23:02.600
tutorial or of the actual module so it's just a Dom element that gets embedded
00:23:07.720
and we assign an event listen listener which is the handle message so basically when uh the native client code sends us
00:23:15.320
a message our handle message method will get invoked in JavaScript pretty
00:23:21.320
simple and then to send the message to Native client it's as simple as just using post message so if you guys have
00:23:27.320
used we workers or anything um similar to that in HML 5 this is exactly the
00:23:32.480
same API so it shouldn't make any difference so and that's actually one of the nice things about Native client you can mix web workers and native code um
00:23:39.799
kind of in the same way now native client doesn't actually provide any sort of serialization so in this case I'm just sending a string you can do
00:23:46.679
whatever you want you can um stringify you know Json and send that in but of course then you have to unpack it on the
00:23:52.880
other side so you can invent your own uh serialization formats or do whatever you want completely up to you then on the
00:24:01.200
actual native client side um there's of course a little bit more boiler plate because you know we are working with
00:24:06.520
cc++ but here's kind of the minimal simplest silliest example that I could
00:24:12.520
come up with which is um let's check um that first U we're getting a string so
00:24:18.120
this is uh we're receiving a Hello message we'll extract that message and
00:24:24.279
we'll just create a reply which is going to send the same message back to the line so this is not very exciting but it
00:24:31.640
does do what we want and then last but not least in our actual web page we just
00:24:38.840
embed the native client module and you can see here they embedding the hello
00:24:44.279
tutorial nmf so nmf is the Manifest file so as I said earlier because you're
00:24:50.440
using something like GCC in that whole tool chain you have to or we have to figure out which platform your code is
00:24:57.159
going to run on so x86 32 64bit maybe you're an an ARM device so the nmf file
00:25:04.279
basically if you look at it it's a Json file that specifies if this for this architecture download this
00:25:10.200
executable very very simple and then your browser figures out which one once and loads it
00:25:15.760
up so what can you do with this so the idea for a native client
00:25:21.520
is to provide effectively the same apis that you have access to in the browser
00:25:27.760
so you have stuff like audio you can actually do some file IO so I earlier I said you can't do file IO not entirely
00:25:34.600
true there's two ways to do it one is to actually use the HTML 5 file IO so for
00:25:39.799
example you can get the user to click the input field specify a file and then you can just pipe it to Native client
00:25:45.720
and do something with it and then native client also provides a kind of a scratch
00:25:50.880
Pad surface area where you can um store some temporary files as you're
00:25:56.080
processing and doing something so there's the there's Graphics Mouse input events a URL loader so you can basically
00:26:02.440
get the browser to invoke um remote fetch some like an Ajax request directly
00:26:08.159
from na native client and all the rest but the key takeaway here is you have the same privileges as the JavaScript
00:26:16.000
runtime right so this is this addresses our original problem you can't just go to the file
00:26:22.559
system or you can't just spawn a process to download a web page or what have you you have to respect the same boundaries
00:26:29.039
that the JavaScript runtime gives you within the browser so in JavaScript we can't just save a file to your I don't
00:26:35.279
know temp folder in your machine or change the background or do something crazy like that so this is the same same
00:26:41.840
deal but the added benefit of all of this is you do have access to all of the
00:26:47.279
C and C++ library in fact you even have stuff like P threads right so you can actually so browsers today are single
00:26:53.679
threaded it's actually kind of crazy when you think about it we have the JavaScript r s we have the layer engine
00:26:58.880
we have everything in between it's all single threaded it's all um we don't have any parallelism across different
00:27:05.200
cores now that's not entirely true with chrome because as we said every tab is a separate process so that actually gives
00:27:10.240
it a little bit of a speed boost um but within the specific tab right if our
00:27:16.039
rendering engine decides to take two minutes to do something you're stuck um so with uh knle you can actually spawn
00:27:24.000
uh threads and they'll do exactly what you think they should do and a lot of people have been porting
00:27:29.840
libraries to knle so because you have to recompile them with a specialized tool chain there are some modifications that
00:27:35.039
need to be made so you can find stuff like GSL you know G chest so if you want to build a if you have a c or c+++
00:27:43.000
library and there's many of those which are very good and you want to build let's say a a chess uh game in your
00:27:48.720
browser you can just grab new chess and just pipe it into Chrome right and run it right in the browser um one of the
00:27:55.600
original use cases or motivations for this kind of stuff was processing video um audio processing and all the rest so
00:28:02.039
of course you'll find a lot a lot of uh libraries that are doing this kind of stuff in Native clients so you can um do
00:28:08.480
video editing in Chrome by running native uh native code on your machine right so you're not doing you're not
00:28:15.039
trying to do that in JavaScript which is actually kind of cool and you can imagine companies like um Autodesk and
00:28:20.919
others would be interested in this kind of thing because you know when you have a use case that's um very CPU intensive
00:28:27.000
3D modeling and all the rest there's a lot of benefit to having um something
00:28:32.320
like this run in the browser because you get the benefit of of both both worlds
00:28:37.480
so full circle um can we get Ruby running on Native client right um it does run C and
00:28:45.360
C++ code so in theory it should work and in fact it does so because native client
00:28:53.720
code or native client is rapidly changing um the API is still in active
00:29:01.559
development you will to get this to work you will actually need Chrome 9 the only problem is I bet you none of
00:29:08.919
you know which version of Chrome you're running so I know that I have Chrome 9
00:29:15.440
running because Chrome 9 still has the oh you guys can't see the can see the icon let me go
00:29:22.000
back so here we go so if I go to Chrome about Google Chrome so I have Chrome 9
00:29:27.960
running so this is a build from about a year ago
00:29:33.080
and if we look at the latest version oops it's actually version
00:29:39.880
14 right so there's been five major iterations in the last year which is itself I think pretty amazing but let's
00:29:47.360
go back to this so this is Chrome 9 the the apis have changed slightly so we have uh Native client running in here we
00:29:55.000
have Ruby running so we can do something something like that and it
00:30:00.320
prints I am Ruby now let's do something slightly more
00:30:08.760
interesting right so we can call object methods and you can see all the methods that object has and of course just to
00:30:14.000
prove the point we can do the same thing as we did earlier with TR Ruby we can go to the network
00:30:19.159
Tab and let's do that again and if all goes well you should
00:30:25.279
see no Network um traffic in here because this is actually truly running in the browser
00:30:32.360
and if we look at the actual Source um you can see that I'm embedding
00:30:38.279
the nexi um right within here in fact I'm I'm even skipping the uh the
00:30:43.919
Manifest file so this is this is for demo purposes for something that would actually run you know for many different
00:30:50.720
clients um you'd want to use the the Manifest file so this is kind of
00:30:56.080
interesting and in fact you know I have u i launched Chrome from uh command line here so you can actually
00:31:02.720
see that it's running on my computer and you know here it is it's invoking these
00:31:08.080
commands the N native client is just spitting out stuff to standard out on the command line as well so I'll just
00:31:14.720
kill Chrome here and you can see
00:31:21.039
o so knle was a year ago knle was behind a flag so I have to enable knle disable a
00:31:28.159
Sandbox and I can then launch this process um with a kind of Standalone profile so this
00:31:35.159
is let's go back
00:31:40.559
here so that's that's kind of a cute example um let's look at something slightly more interesting how about
00:31:45.639
running quake in the browser all
00:31:52.600
right so here it is let's just
00:31:59.039
okay unfortunately can't resize it but if we look at the source
00:32:07.000
here so we have we're loading the Quake manifest
00:32:12.519
file right there um you guys can't see that Quake
00:32:17.919
nmf it's a knle extension so let's go back um it's a fully functional uh Quake
00:32:23.840
so let me actually it even has audio
00:32:36.880
oops sorry that's a good question so here it
00:32:42.360
is okay so I suck at this game but um multiplayer no right because you don't
00:32:48.679
have access to the network you can just open a socket does JavaScript allow you to open a socket to a random server no
00:32:55.799
so this is the same constraint that knle gives you right you can just open a random socket you can invoke a a URL
00:33:02.639
HTTP fetch but you can just say like connect to this whatever Port 25 and you know send some spam mail for
00:33:10.519
me so that's quake in a browser and you know there are many more interesting demos of this kind of stuff so what what
00:33:17.440
you needed to do to make this work is basically take the original source code use the tool chain that the nle team
00:33:23.320
provides compile it and then just embed it in uh in the browser so that's pretty
00:33:33.559
cool
00:33:39.080
yeah so the question is what about D manipulation um yes it's getting better
00:33:45.279
so if you remember the um the silver silver light example you you saw the block right within your code so that one
00:33:53.240
was very nice knle right now they're targeting more of the high performance Computing type angle you can certainly
00:34:00.840
do a do manipulation because you can you can connect you can imagine building a bridge through the pepper API to say you
00:34:06.720
know I'm sending you this command so do something and then yes you can do that have to do yourself
00:34:15.440
correct correct yeah yeah which is basically what the gestal project is all
00:34:20.720
about anyway right they basically built a a a JavaScript library on top which just makes that
00:34:27.399
simpler so native client by default does not provide anything like that so okay let me I still have Quake
00:34:35.599
running in the background I can hear the sound there we go much
00:34:43.679
better all right so what's the future of native client this is all kind of cool but you
00:34:49.399
know where's it heading so native client is a plugin in
00:34:55.320
Chrome turns out it's actually going to be replaced so I said it was under
00:35:00.800
active development what's happening is there's this new project called pacle which is portable knle which we'll talk
00:35:06.680
about um in a second and um it is available within Chrome so if you're
00:35:12.720
using Chrome if you if you open a new tab and you type in about plugins you'll actually see a list of plugins that are
00:35:19.000
enabled or disabled within your browser and most likely you'll find that if you're using the latest version of
00:35:25.040
Chrome um you'll find that native client is enabled now it's not enabled outright
00:35:31.280
it's enabled in the Chrome web store so what this means if you guys have used Chrome web store if you deploy a web
00:35:37.440
store app you can actually use native clients to do crazy stuff like uh you built a video editing app you can put it
00:35:44.680
at the web store and you can use native clients within Chrome to do that kind of thing but I think their Vision long term
00:35:49.960
is to actually enable it outright you know there's there's some questions there still about adoption from other
00:35:55.960
vendors but uh that's a different story so some examples of this um anybody here uses a
00:36:03.160
Chromebook or used a Chromebook all right a few people so about a few weeks
00:36:09.680
ago I believe um there was an announcement that Chromebook can now play Netflix video or you can stream
00:36:16.160
Netflix and this is done through native client so Netflix has some requirements for their own DRM right they they run
00:36:23.400
their own stuff and to make that work it's a native client uh plugin that is
00:36:28.800
installed in Chrome and hence you can um stream Netflix to Chromebooks now some
00:36:33.839
of the other examples of native client in the wild which I think are very very interesting so there's Google app engine
00:36:39.920
Google app engine today officially supports a bunch of languages so there's uh go which is still I believe in beta
00:36:45.920
there's python which is the original one and then there's Java python currently is version 24 which is ancient and the
00:36:53.280
way to make that work is they basically took the python code r ripped out a whole bunch of stuff that they felt as
00:36:58.920
insecure basically to try and sandbox python so you can't you know because it's running as a platform as a service
00:37:04.920
you can't just um open a random connection you in fact have to use the
00:37:10.119
Google app engine API for make this request for me please and you can just write to local file system so that was
00:37:16.079
basically they took the source code modified it ripped out all the stuff that they felt was unnecessary and then
00:37:21.800
um ran this so that's getting replaced um if you look on the discussion and a
00:37:27.280
mailing list for app engine very very soon there's going to be python 27 on app engine and app engine uh in Python
00:37:35.079
27 is running through native client so instead of modifying The Source they're just taking the python code compiling it
00:37:42.319
against native client and all code will run in Native client on app engine which is pretty cool right because this is a
00:37:48.440
generic way to take any um any project and basically make it available and one of the benefits of this is they can now
00:37:55.000
think about exposing n native extensions on app engine because now you could as a
00:38:00.200
developer you could actually say well you know what if I can compile this against native client then I can
00:38:05.800
guarantee as a third party user that I won't wreck haboc on your platform as a service so maybe there's going to be a
00:38:12.560
way to upload your native extension to app engine and just say like oh yeah you know optimize this for me I have this video editing task so um use that
00:38:20.760
instead which I think is is actually very cool and very powerful and then the other project um which uh go announced
00:38:27.839
back in uh March of this year I believe is EXA cycle which is actually really really awesome um they said they're
00:38:33.280
going to donate 1 billion CPU core hours to Scientific
00:38:40.240
Computing so if you're a researcher you can apply for this um and Google has a
00:38:47.319
few a few clusters of machines lying around one or two yeah maybe a spare
00:38:54.240
rack somewhere and they're going to use that spare rack somewhere to give you 1 billion CPU hours so it's a big
00:39:02.680
rack and the way that works is you write your code and it's going to run a native
00:39:08.839
client because it's going to run on Google's infrastructure and they want a way to isolate you from you know doing
00:39:14.040
crazy stuff on Google's infrastructure so um that's yet another application which I think is pretty cool so the
00:39:20.599
moral of the story here is native client is not just a plugin for your browser you can actually use it for other things
00:39:26.200
as well well in fact there's there's a talk later in the day on sandboxing Ruby you can use native client to sendbox
00:39:32.040
Ruby that's effectively what we've done um in the demo earlier right and we guarantee that there's no file.io or
00:39:37.839
anything um that can cause problems so uh pacle portable knle where what are we
00:39:45.079
doing here they did a bunch of research and realized that hey what we're doing
00:39:50.160
with this manifest file building against different architectures is actually not that great um what if we did something
00:39:55.520
different what what if we compiled down to llbm bit code and actually just provided an
00:40:01.400
llbm um runtime within the browser right and that is what portable that that is
00:40:07.640
portable knle so it'll support um x86 32 64bit and arm and the only difference
00:40:15.720
is uh when you compile your code once again there's a specialized uh tool chain you'll just have to use the pacle
00:40:23.000
GCC and that'll basically emit the L bit code which then gets run in your
00:40:29.520
browser um on the bare basic on the bare Hardware of your
00:40:34.800
machine so that's pretty awesome right so now we have llvm in the browser and
00:40:42.280
this is like oh man cuz there's a lot of interesting
00:40:48.040
stuff built for llvm Fortran is available in lbm you can run
00:40:53.720
Fortran in in the browser so so the and of course you know we have rinus which
00:41:00.160
is based on uh llvm there's it's a little bit more tricky than maybe other
00:41:05.839
languages to get running but still we have cc++ mac Ruby piie Objective C
00:41:11.119
there's dozens of languages that are already targeting
00:41:17.440
llvm so that's when I discovered this project so there's a project called M
00:41:24.240
scripton and I'm hoping I hope I'm pron that correctly which is an llvm to JavaScript compiler which is mindblowing
00:41:31.280
when you think about it so it takes what does it do it takes the llvm
00:41:39.040
bit code so you take your C C++ whatever you compile it to bit code then you run
00:41:45.960
that bit code through mcrip and and what it does is it translates it to
00:41:52.160
JavaScript just freaking awesome so that that means you can take that bit code and you can run it
00:41:58.200
natively on your machine or you can run it in the browser so that means we can run python
00:42:04.200
Lua C whatever and in fact there's even a ruby project so encripted Ruby it's
00:42:12.720
basically Ruby 187 that's been modified uh to you know it ripped out a whole bunch of functionality to meet the
00:42:19.400
knle standards and or not knle standards uh to compile um against um llbm
00:42:27.599
and we can actually try
00:42:32.800
it so here is and I'm hoping Wi-Fi will
00:42:40.720
work oh come on don't do that
00:42:48.680
yay all right so llvm M scripton Ruby right so 1 plus
00:42:55.160
one so that's nice we can once again you
00:43:01.319
know check that there's nothing crazy going on
00:43:08.200
here ah it's still loading resources so okay you'll just have to trust me that it's not
00:43:14.640
actually making any requests to any external service it's actually running in the browser it's through this bridge
00:43:21.240
and the cool thing is remember how we said that there's a lot of languages targeting lvm well well even on this
00:43:27.079
side alone you can see that it provides hey we can run Q basic in the browser we can run fourth there's the Ruby version
00:43:33.599
there's Lua there's scheme there's JavaScript I'm not sure why you would want to write
00:43:38.880
JavaScript okay um L code so I think this is pretty awesome so I I ended up
00:43:45.200
on the site yesterday and I spent too much time um on this one specifically so
00:43:50.599
we can do right
00:44:00.079
sorry uh no no so that no that wouldn't work
00:44:07.480
and all right so how many people here have this is a slight diversion but I think this will be fun how many people
00:44:13.040
have written LOL code okay you guys need to try it out
00:44:18.559
it's pretty awesome so I spent some time yesterday so I have a cheat sheet
00:44:25.000
here so we're declaring a variable and we're
00:44:30.359
then then we're going to ask for standard standard input right so give me animal now I want to check what type of
00:44:37.319
animal it is
00:44:54.960
um
00:45:12.800
all right
00:45:18.559
visible
00:45:24.880
h
00:45:31.280
okay it's kind of hard to
00:45:36.319
see all right I'm hoping I I have to my problem yesterday
00:45:42.640
was I was typing the right grammatical terms and that was causing so let's try this all
00:45:50.640
right we can run this again all right there you go so we have
00:45:58.079
W code running in the browser um through the magic of llbm JavaScript and a few other things
00:46:05.040
in between so this is crazy canuse l lol C to
00:46:10.160
ins I'm sure you can yes so this is this is Javascript right this is Javascript
00:46:16.640
running in your browser so for all intents and purposes you can do anything the heck you want I'd love to see that
00:46:22.960
uh me too sounds like a pretty nice project so this is not an
00:46:30.440
exhaustive list right so the point of this was hey this is kind of a curious exploration of what what would it mean
00:46:36.200
if we tried to get ruby in a browser um we talked about three different but but
00:46:42.440
somewhat related uh Stacks so on the left there is the silverite DLR which I
00:46:49.040
think is actually really really awesome project I hope that that teams will continue working on this project it
00:46:54.440
seems like they've you know gone silent for a while um then there is the Google stack which is the portable native
00:47:01.920
client uh which allows you to run cc++ and soon in in 2012 um they'll switch to
00:47:08.920
um llvm and then there is the the last one that we just talked about which is mcrip in which which instead of having a
00:47:15.920
different um binary and then having that pepper Bridge it runs directly on top of
00:47:22.079
JavaScript so these are kind of three different approaches and the interesting thing is the last two
00:47:27.960
are actually possibly complimentary so remember that we said that um Native
00:47:34.480
client is today available in Chrome there are actually plugins for um other
00:47:40.680
webkit browsers there's fire a Firefox plug-in and I think there's even I an ie
00:47:46.520
plugin although I'm not sure um it's not officially supported by those browsers so you know that's still an outstanding
00:47:52.640
question in terms of I think Firefox is more or less is or at least their
00:47:58.200
developers have said hey we don't like native client that's kind of the status quo today so anyway one potential crazy
00:48:05.880
stack that you can come up with is to say well we'll have an llvm sandwich which is we'll have the browser we have
00:48:12.800
the pacle runtime which is the the native code and then you know as a fallback if you don't have native client
00:48:19.280
available we can actually run it still in your browser through em scripting and you know that's kind of nuts but it
00:48:25.680
would work it wouldn't be very fast when you run it through the JavaScript version but um that's that's still
00:48:31.440
something that's being entertained by these teams so in summary I think Innovation
00:48:37.079
is good I think we need a lot more of it in the browser JavaScript is fun but um
00:48:42.720
I would love to see more languages right I really really truly hope that JavaScript is not the end all like I
00:48:48.760
would not want to find myself writing JavaScript in 20 years I'm hope we get to invent
00:48:54.319
something better so I would encourage you you guys to play experiment and you know push the boundaries and then um in
00:48:59.520
terms of the actual resources there's you know I've covered a lot of ground um you can just Google for knle and pacle
00:49:05.920
there's actually quite a bit of interesting information available there's a really good Google IO session
00:49:10.960
for which there's an available video which talks in depth about um what does this how does this thing work how do you
00:49:17.640
connect it and it actually gives you um a play-by-play example of building a native client um extension for the
00:49:24.640
browser so with that um thank you very much and any questions thoughts ideas
00:49:50.480
complaints right so the question is um what about Google Dart how does it play together or not at all with this stuff
00:49:56.880
um so to be honest I don't know much about Dart and for for those of you who are not familiar with dart um there was
00:50:03.079
recently a a doc file a PDF I don't know something that leaked um intentionally
00:50:08.160
or not I don't know that is basically that basically says Hey JavaScript is not the end all surprise and in fact
00:50:15.799
we're going to invent a better language right and we're going to call it Dart and we're working on it and we'll convince everybody to use
00:50:22.520
it um so I good luck with that I I don't know um I think um It
00:50:30.160
suffers from the same problem to me as JavaScript it's like it's cool awesome a new language in the browser and maybe
00:50:35.799
it's better than JavaScript and I can script A Dom with it but you know what if I disagree with your syntax or what
00:50:41.240
if I want a different construct I think what we're missing in the browser within the browser is that capability to just
00:50:46.440
say like I want to try a crazy idea I want to try a different syntax coffee script is a great example right it's
00:50:51.480
like this one thing came along and now everybody's falling over it it's like oh this is so great ecma script is changing their spec to match some of the coffee
00:50:58.000
script syntax it's like oh that's cool imagine what what we could do if we actually enabled that to a wider
00:51:03.079
demographic and you know unleash some of the power so the short answer is I don't know um but I'm still curious to find I
00:51:10.480
I don't actually know much about the dart
00:51:22.400
internals so the actual libraries are basically disabled so if you try to
00:51:28.319
let's say require TCP socket just say I can't even find TCP socket if you try to do EXA um it'll just say there's you
00:51:35.119
know not not allowed or can't do it um by default what knle does is let's say you do get some malicious code into the
00:51:42.920
user's browser and you're trying to do something bad when it detects that it'll just kill the tab altogether or it'll
00:51:49.400
aboard the whole thing right so once again knle does not prevent bad code from getting in you can sort of
00:51:55.440
basically anything you want to the client uh but at runtime it'll do some
00:52:00.480
checking and you know there's a little bit of a performance hit obviously associated with that um depending on the
00:52:05.720
benchmarks I think I've seen like 5 10 15% but still it's much much faster than
00:52:11.559
anything
00:52:17.799
else so websockets yes you can certainly use websockets so once again um in knle
00:52:23.839
you have the same privilege and same access to anything as the JS runtime
00:52:29.920
right so you could you today you can very easily open a websocket connection
00:52:34.960
but websocket connection is not actually a socket right it's basically it's an HTTP session that gets upgraded to a
00:52:41.280
bidirectional channel so you can't just say like oh yeah websocket open
00:52:46.799
connection once again to Port 25 let's send some spam uh that that's not going to work but in Native client you could
00:52:53.240
say okay I have this uh websocket Connection open let's pipe the data back and
00:53:08.480
forth
00:53:19.720
right sure
00:53:40.799
y sure sure so um I've try to summarize that so there's the Ruby GS project that
00:53:47.520
you can is basically compiled Ruby to JavaScript um but you know there's missing stuff like standard library and
00:53:54.119
debugging as a hell and you know is that even practical in the long run so the short answer is I think the the immediate answer to
00:54:01.480
that is no it's not practical I think it's more interesting to to play with and think about um I'm not trying to so
00:54:08.079
the title of the talk is obviously Ruby in a browser but to me Ruby is just an example right I'm not sure I'm not
00:54:13.359
convinced that Ruby is the right tool for the browser maybe maybe it is maybe it's not uh but what I would like to see
00:54:19.480
is something like I would love for the browsers to just say you know what llvm in the browser everybody provides that
00:54:26.240
um you can build whatever the heck bindings please yes with dom bindings please um so let's provide that and then
00:54:33.799
we can once once again push some of that ability to innovate back to the web
00:54:39.079
developers not to the standards body that is ecmascript that mandated that thou shalt not do file.io it's like well
00:54:46.720
you know not
00:54:54.079
exciting uh knle sorry
00:55:02.040
what so I've seen some discussions about supporting lbm um in the browser um I
00:55:09.119
think right now there's basically the Chrome team is on the fence I mean obviously they're building uh portable knle and and all
00:55:16.359
the rest so they're they're open to the idea I think the Firefox team is a little is against it uh they basically
00:55:23.760
said um you know that's we're not going to do it although they are now in
00:55:29.680
parallel building their own language called rust to uh basically provide some
00:55:35.440
of the same functionality so you know I think there there's competing interests
00:55:40.760
there but which once again points to this problem of like now we need all of the vendors to agree on something and
00:55:47.400
Firefox thinks rust is the best thing ever and everybody else thinks it's something
00:55:53.359
else um
00:56:00.400
um go and lvm uh not sure I'm sure it's doable um but I'm not sure if there
00:56:06.799
there's a port of it do we actually have some go programmers in here is
00:56:13.280
that not not possible no okay so today not possible tomorrow
00:56:23.920
maybe
00:56:29.839
so can you use Speedy so Speedy is yet another Chrome Innovation is basically
00:56:35.240
saying um HTTP hasn't been updated since 1997 which is the 1.1 pack uh let's
00:56:41.520
invent something better so you have B directional communication you can do actual multiplexing and all the rest um
00:56:47.359
the short answer is yes you can of course once again you're within the JavaScript sandbox it doesn't actually
00:56:52.440
matter what you fetch data from so if you remember the apis there's a URL uh
00:56:57.599
loader API it actually doesn't care right because Speedy is um an upgrade to
00:57:04.119
an HTTP if you look at the protocol you make a request it does an auto negotiation that says oh yeah you can
00:57:09.799
use Speedy so let me send you data back so as a developer you probably wouldn't even be aware of it but if you're
00:57:15.760
providing both the client and the server then you can obviously optimize your infrastructure to say I'm going to serve
00:57:21.760
my content over Speedy which by the way Google does I don't know how many of you guys know but Speedy is enabled by
00:57:29.480
default in your Chrome web browser and chances are when you access Google today you're actually running over Speedy not
00:57:35.359
htcp which is pretty crazy and awesome all right so I think we're done
