WebAssembly: Disrupting JavaScript

I'm Dan Callahan I'm Cal ahead on Twitter I work for Mozilla and I'm gonna be talking about web assembly so I say I work for Mozilla I think it's important to note that Mozilla works for the web and and what I mean by that is that every major browser except Firefox is controlled by one of the three largest for-profit corporations in the world Mosel is a non-profit and we exist to strike a balance between public interest and private interest on the Internet to really realize the human and the public good potential of the web and we do that not just the rabbika see but by building a web browser by building Firefox in the open as free software to really put our principles into practice so so Firefox it's a great browser but it's also the only browser that that is at the table when these large corporations are making decisions about the future of the web decisions about DRM decisions about tracking we're the only party at that table that doesn't have a profit motive in how you use the web so if you think that's important if you think that's interesting you think the web is a is a public resource that that needs that balance between public and private please check out Firefox we've got a really exciting release coming out in November you can preview it today and developer edition which is what I'm going to be demoing in without further ado gonna talk about web assembly want ask one question who knows what that logo on the left is just shout it out it we the Mozilla developer Network we kind of we pulled a KFC it is now just MDN the letters don't stand for anything anymore but but we run a wiki that is more or less the canonical reference for JavaScript and CSS on the web most people don't know mdn is a wiki if you if you need documentation if you think you can explain something better please feel free to edit it better web Doc's by us for us was the tagline a long time ago check it out we're also behind the rust programming language you wouldn't you and writing a rust or heard of rust a couple people all right cool yeah talk to me afterwards it's I want to know what you're doing anyway web assembly I'm gonna talk to you about web doesn't believe it my talk is mainly a bunch of disorganized live demos if you want to read about web assembly I highly recommend googling four-lane Clark she's one of my colleagues in developer relations at Mozilla Twitter is Lynn Clark she's written articles a cartoon intro web assembly which is this really great illustrated guide to what this is how it works what it does cartoon intro shared array buffer what web assembly means for react she has these amazing amazing series of articles and talks that kind of boil this down to something really pragmatic and relevant so so if you want reference material googling Clark after the talk web assembly is a compiler target for programs on the web what does that mean so show hands who here primarily works in a high-level interpreted language like JavaScript or Python or Ruby okay that's almost everyone is anyone here a C or C++ hacker a couple of people okay yeah so so compilers I mean if you're if you're doing front-end bug gulp and you're probably used to by these days using a transpiler like babel to convert your code from from one thing to another from modern JavaScript to backwards compatible JavaScript what assumably does is it gives you a compiler that can convert from traditional programming languages like C and C++ to something that runs on the web and the best way I can think to explain this is is by demoing it so if I come over here I don't know C and I don't know C++ and I've never been a low-level developer so I went and I found this 2005 open source 3d demo and it's it draws a cube and the cube spins and it's colorful and apparently this is what you do in graphics programming 101 but I'm a geology major so I have no idea what this is I found out it's open source and if I build it I can say yeah make native and I get this binary out that's built for my Mac and when I run it I get a spinning cube and the cool thing about languages low-level languages like C and C++ is that they're portable so just like the web I the web doesn't care if you're on Mac or a PC if you use portable little of languages you can say actually compile this for window compiled this for Linux compile this for Android and you just have to you have to you have to choose what you're compiling for but you can target a bunch of different platforms well what does somebody lets us do is say compile it for the web so all I do is I say instead of outputting this cube binary output output build slash web assembly dot HTML and what I get is a dot wasum file which is a compiled binary program that runs that same exact code unmodified in my browser and this doesn't care if I'm on Firefox or Safari technical preview or Chrome or anything else it doesn't care if I'm Mac on Windows it doesn't care if I'm on Android if I'm them Intel or arm I can take the same codebase that hasn't been touched in 12 years and say ok instead of spitting you out spitting out a binary for the web or for a Mac or a PC spit out a binary for the web does that make sense is that kind of cool ok I'm gonna I'm gonna limit applause from here on out because that demo is kind of awful and you should not have clapped that much well it's more nursing's taking something if you have a compiler you can compile arbitrary things right so the unity engine can also export to a web assembly so this is one of the unity tutorials a little tank demo or I can drive my tanks around and I can win the round because web assembly lets me play this game using 3d using sound at more or less native speed in my browser without any plugins on any platform web assembly goes where the web goes similarly and it sticks a little longer to load but epics Unreal Engine can also export to web assembly so you can take these triple-a game engines and anytime you have a URL you can just send people to this game send people to this experience I know that AutoCAD is also being ported to webassembly all these major applications that you can just link to now and they run and this is all being rendered in real time and going camera finishes zooming do go look at the fish pond and this is the full unity our full Unreal Engine in my browser compilers can compile arbitrary code the web can do things like WebGL it has Web Audio we have all the tools we need we just didn't have the performance and we didn't have the compiler now we do so that's webassembly or at least that's what was somebody's capable of let's stop that from playing sound back to the presentation so why do we need why do we need something like this on the web why do we need a new binary format why couldn't we just compile to JavaScript so so the big motivators that plugins were dying so so if you remember back in the day of having to install flash or Java or Silverlight or QuickTime or Real Player or Adobe Acrobat Reader or all these things that hooked themselves into your browser to display different types of web content it was an awful awful time because every one of those plugins was native code so they they weren't protected by your browser security sandbox you had to compile it just like that native cube demo you had to compile your plug-in your java version for linux and for windows and for mac OS and then when a platform like android comes out well maybe flash doesn't work there an iphone maybe flash doesn't work there because the plugin hadn't been ported so we had to get away from this and get to something that was universal like the web should be but all we had on the on the browser side was JavaScript and JavaScript is hostile to the sort of optimizations that are necessary if for instance your adobe and you want to port over the decades and decades of human effort that have gone into your PDF engine so you want to be able to take that exact code that you already have and reuse it on the web you can compile it to JavaScript but it wouldn't run fast enough because javascript is an interpreted language and it doesn't have good type information I'll talk about what this means but it's it's really hard for a computer to optimize JavaScript ahead of time and this effectively meant that you couldn't reuse existing code on the web so we had to fix that that's why we needed to build web assembly and we built it with a couple of design goals in mind one be as safe as universal as JavaScript to run as quickly as native code and we're within about 20% of that that target 3 provide consistent predictable performance so one of the challenges with JavaScript especially with a game engine is that JavaScript garbage-collected which means that as your program is running at some point your program will stop running and the browser will go and look through and see how much memory am I using am I still using that specific chunk of memory ok I can release that I need to keep this etc and that's fine for most applications because you're not going to notice the framerate of your spreadsheet slows down we absolutely will notice if the framerate of your game slows down or it stutters or it's inconsistent whereas with the lower level language like C or C++ you can control exactly when you release memory how you handle memory when you request it etc and we also wanted to have code reuse between the web and native there's an enormous enormous universe of low-level code that is available to every platform but the web if I'm building a browser for you know for mobile for desktop etc I can go and rely on Lib JPEG or any other portable C library to do image decoding or stream processing or whatever else I need but I couldn't then take that same library into the web itself well this simply fixes that questions before I move on to the next chunk questions no questions okay so so we got here through experiment that Mozilla initiated several years ago called Azam js4 he said all right well can we make JavaScript fast enough can we make it so that the browser can can optimize JavaScript ahead of time and what we basically did was write a lot of JavaScript that did nothing like for instance we do a bitwise or with zero for a variable which if you few bitwise or any value with zero you get that same value out so it's a no op but we've inserted these things as kind of coded messages to the compiler to the runtime to say this is going to be an integer or we add zero to it if we want to signal that this is a floating-point number and so we had this way to kind of hide type information inside JavaScript and then our JavaScript engine could read that and say okay I'm gonna opt out of normal JavaScript I'm going to use this restricted smaller subset I'm gonna treat this JavaScript like C and it actually worked it it went really fast and we actually had several browser vendors microsoft included that went and implemented Azam's a s in their browser and so this is a chess AI that microsoft built where they used the exact same code one version as 'm json' version in normal JavaScript and all they changed was the the flag that says treat this like c and and what happens is each of these a eyes gets a certain amount of time to plan its next move and because the Azzam json' doesn't have to worry about garbage collection it doesn't have to worry about type checking it has a lot more budget for actually doing the computations that matter in this program and so if i go and look at the cheston engine output you can see that the azam james version despite being identical code by being able to opt out of garbage collection by being able to opt out of type checking and kind of escape these these things that make javascript a very productive but slower language the azzam james version was able to to consider four times as many possibilities it was able to search three levels deeper in the possible tree of of game states and so that wins and so we proved that we could build something that was just JavaScript it worked it was backwards compatible but it was faster and we got Microsoft on board and Apple and Google implemented some some optimizations as well and we started looking at this and saying okay but there's something here there's something that we can do we can make the web a lot faster and there's value to that if we all agree what's holding us up why don't we just go ahead and break with the past build a new binary format thus webassembly demos so I don't like keynote okay so one speaking of browser support before I go into the demos Firefox and Chrome whether somebody works today Safari technical preview and the next release of Safari web assembly works there by default the next race of edge weather simply works there does anyone know when web assembly first appeared in a browser on by default March this year so we went from no implementations to now by the end of the year all major browsers are supporting this brand-new executable format in a year the web historically has not moved that quickly and I think it's a really a real testament to the the potential of assembly that we were able to make that happen an example of some of the great things obvious and we let you do in terms of performance see look at a web DSP this is a demo a suite of demos a group built where they implemented a bunch of different video filters so you can invert the image you can grayscale it you can do edge detection and they wrote them in JavaScript and again javascript is a fast language but it's not as fast as some of these lower level languages that give you more manual control and so you can see that the frame rate here is just it's not great it's not smooth and so what they did is they went back they kept the same API and they said okay we're gonna we're gonna keep all these same filters we're gonna re implement each one in C++ and compile it to web assembly and then they do feature detection so in this library loads it says does the browser support web assembly if so use this faster version of the filter if not use the JavaScript fallback and so if I turn off the JavaScript version you see this immediately is just perfectly smooth you know it runs in much closer to real time compared to the JavaScript version so so there are a couple lessons here one webassembly can make computationally intensive things go faster - it lets you take existing code to the web and these are these are completely different use cases because even if there was no speed-up it's still really valuable to be able to to use a library without reinventing the wheel inside the browser or if you're trying to do computation it's really valuable to be able to do that quickly and be able to have control over over processing and how things work well this simply gives you both and and like with this demo as an in developer you may never have to see what was in will you mean I have to never have to touch it as long as the libraries and the frameworks that you're depending on implement things so it's it was very possible to see something like you know react might implement a virtual Dom kind of reconciler inside web assembly wrap the rest of it in reacts JavaScript and you're none the wiser all of a sudden just your app runs faster on the web and that's the future we're trying to get to where you can build these small reusable core libraries share them both on the web and off the web and everyone benefits but you also you don't have to become a C hacker - to gain from this as an end user developer questions before we move on to binaries yeah which languages can be compiled to webassembly so right now webassembly doesn't support garbage collection or things like that so you have to if you want to efficiently compile to web symbol you have to be using a language that does manual memory management so that means C C++ rust has an experimental target there's been work on swift and D web assemblies being implemented natively inside LLVM so any languages that go through the LVM compiler toolchain Objective C Swift etc should eventually be able to target web assembly yes sorry can't hear from up here hmm API limitations I've got a slide on that we'll get to it in just a second so I want to step back for a second to talk about this optimization in the binary format stuff so what I have here is the wasm Explorer web assembly Explorer that we just kind of an online code fiddle and let's we type in C so let's say int foo and X return X divided by 4 and compile it and what you get over here is a textual representation of the web assembly program and this is kind of it's like a you can think of it like a Java bytecode or LVM bit code it's kind of it's not quite machine code but it's close to it and this will work anywhere you send it to a browser and then the browser compiles it down to native code specific to the architecture you're on so I'm on a Mac so this is x86 assembly and you will never have to see this when you're working with all the symbols this is just kind of a peek under the hood but we take this and we say ok convert it to actual machine code and then this is what runs in the browser the cool thing about about being able to use a language like C or C++ is that you have type information and you have compiler that has access to that information ahead of time which means you can make a lot of optimizations you you cannot as easily do in JavaScript so in this case we're dividing X by 4 and so inside the body of this function we get X we get 4 and we divide one by the other you'll notice the the type I 32 so whether simply has 32 and 64 bit in sand floats and that's it very very primitive data types but one of the things that we can do and see is we can say this is an unsigned integer which means that it's always going to be positive or 0 and if you know that instead of dividing by 4 you can shift every bit over by 2 because functionally that if you move the bit every time you move the bits over you're cutting the number half but this doesn't work you're dealing with negative numbers this is a lot faster to implement in silicon on under CPU than a full you know floating point division and the cool thing about it is that that when you run JavaScript your browser is watching every function you call it's watching every every instruction that executes and it's trying to figure out okay am I always dealing with positive numbers then maybe I can maybe I can do this sort of optimization but it takes it a while to warm up it takes a while to get into this optimized form and every time you call the function it has to check that the inputs are what it expected so maybe the first 99 numbers were positive integers but the hundredth is negative and then it has to throw out that optimization and start again with webassembly cuz we have this type information upfront we can do that compilation or do that optimization during compile time and the browser can start with optimized code as opposed to to having to figure that out as you go every time you load the page does that make sense okay general general nodding some side to side but but the big the big deal is that web assembly lets you provide more information to improve the performance of your code once ahead of time seconds been longer compiling on my machine and everybody else's browser benefits how do I actually call this so I'm gonna download this file open up my console can anyone tell me how to write an xhr an ajax request without using jQuery new okay you actually look confident I'm gonna use fetch fetches a new API uses promises it's much easier so I just say fetch test azzam and it gives me a promise which eventually turns into a response so I can say then with the response response to array buffer so I'm gonna turn that that wasum file into a series of like an array of bytes more or less that gives me a promise I get this array buffer out then with that array buffer I'm going to take that and I'm going to say now webassembly dot instantiate that array buffer and then again promise this this is all asynchronous all in the background it returns immediately and does the computation in the background that eventually turns into a value which is an object which has two properties instance in module so let's go ahead and pop this out as a global variable so tempo so we have this this object has a module in an instance when you compile a web assembly file you get a module in instance and just just real quick to show you that what this is let's see them downloads test up azzam what we're sending to the browser is this it's a bunch of gobbledygook that you can't read because the contrast white high contrast if I run that through xxd it's completely binary there's no human readable text in here at all aside from at the very beginning this null ASM which is kind of the magic number so you look at these first bytes and you're like oh this is an assembly file you can see things like foo there's a name of our function but otherwise this is all binary this isn't JavaScript it's not an encoding of JavaScript it's a completely different format for programs and we compile it when we do that conversion from the intermediate bytecode into the native code we get two things we get the module which is the compiled version of the code this is like an exe file on your desktop and we get an instance a running copy of that code like something you'd see in the task manager and so I can say instance exports foo and now I have a reference to that that function we defined over here and so if I call this with like the number 64 they get back 16 this is code this is JavaScript and a JavaScript number being passed from JavaScript into webassembly doing a computation and passing a number back out this is how you can interoperate between the two now the only things you can share because webassembly has a very primitive data type you can only share integers and floating point numbers 32 and 64-bit this is still valuable does javascript have 64-bit integers does JavaScript have a new jurors at all no by definition every number of Java scripts afloat which only gives you about 53 bits of of integers if you're trying to do emulation if you're trying to do certain types of of computations not having those extra 11 bits is actually a huge Panda but well this simply gives that to you if you want to pass more complex things like I want to pass a string or an image into web assembly you can use what's called shared array buffer so you can basically in JavaScript set up a really big array where each item in the array is a byte I didn't say okay well simply look at this and the weather simply can change that array you can write to it can read from it it can pass a pointer back into the array to you so you could say okay I've got this memory call the webassembly love with somebody goes and gets its data from there does the computation puts it back and signals that you should reread that so you kind of have to you have to do some work again you probably won't do this library authors will do this frameworks we made that make this easier but right now just passing numbers works great what happens if I pass a string what is hello world divided by 4 0 this seems surprising but it's really no different than if I check what the square root of hello world is in all these cases javascript has well-defined conventions and rules for how you convert from one data type to another and remember that the webassembly gets to say what data types it wants to operate on and so as we're going from JavaScript planned to web assembly land we pass through these conversions and it turns out that strings we just pass in zero so the web assume we never see is that string because it was expecting an end and so we're gonna give it an end one way or another questions yeah so so several questions there and this your question about security will tie back into your question about api's and access you have top file size how that works so that that demo was 95 bytes so it's very small that was one of the chief things that we were concerned about with with azzam j/s it was we were adding all this extra information of javascript and making just he's like multi megabyte JavaScript packages which is just awful webassembly is pretty small it Jesus even smaller was easy so those gzip larger because they're so tiny but real-world code goes smaller that's weird all right okay so so does everything get downloaded every single page it works the same as in JavaScript libraries so because what this simply has explicit imports and exports you know what you need you know what you're getting you can cache it just like any any other JavaScript file you can put it on CDN when you do that web assembly dot instantiate and you get that module back out you can shove that in index DB and pull it out really quickly like we can pull out unity in a or unreal in like I think a couple of milliseconds the compilation takes a little longer at first but once you do that you only have to do that once for architecture just like was JavaScript you have to ship your own libraries unless you're relying on a CDN or something like that you can hook together external libraries so I could pull in you know live a dot wasum and use that from my own custom food wasum so you can kind of you can think of it as just a more efficient encoding for a javascript file more or less the compiler that that's being used right now is called him scriptum EMCC is the command line let me make this inverted and what amis krypton does it it actually has built into it ports of a bunch of different libraries so z lahood PNG STL for doing 3d and graphics and sound and what it can do is it can you can use these libraries just like you wouldn't see your c++ and then scriptum has like a shim that understands how to take an OpenGL drawing call and convert it to a WebGL drawing call and so you can kind of has there's some things built in otherwise you can compile your own libraries the hard thing is how do you interact with the outside world what api's are available and if I knew my slides well note which I may not talk about that open standard we talked about that this so so right now in your browser there are kind of two worlds there's the JavaScript engine v8 SpiderMonkey etc and that has a JavaScript interpreter it has a guard Derr it has a compiler because we have to take that JavaScript in and try to get it into faster native code once we observe it so you've got a profiler with all this machinery to make jobs are Brunton but for it to do anything it needs to be able to do i/o it needs to be able to to show results on the screen it needs to be able to make sounds make requests through the web etcetera store data and that's what what the web platform brings so you have things like WebGL Web Audio indexdb web worker service workers these are the api's that you use to access the outside world - do I owe what do you think about webassembly your JavaScript VM is trying to get somewhere close to there already it's trying to look at the JavaScript and say how close can I get to native code and still be correct well web system he does is basically say let you shortcut that and say well hey I've already got the native code or something really close to it just use that and so we can host this right inside the same compiler runtime platform that's already in your browser so whether somebody kind of exists as a peer to JavaScript inside all these are major browser engines and more or less is kind of it just skips that first phase and cuts in a little bit later in the process this means that web assembly is running inside the same exact sandbox and has the same restrictions as any other JavaScript so if you want to do something on the screen you have to use WebGL if you want to make a raw socket connection well you can't you can do WebSockets you're subject to the same origin policy you're subject to all of the same restrictions that you have in JavaScript it's just now it's a different binary that's that's kicking all this off which means that there should be no security problem in web assembly that is not also present in the JavaScript engines more or less the other cool thing is that we're calling it web assembly but who here's used nodejs look at most people right is node useful yeah it's it's a reasonable reasonable platform to work with well what no does is it takes the same thing but it just it gets rid of the web platform bits it just gives you the JavaScript runtime and that's still useful and what assembly does the same thing and note 8 supports web assembly and sure you don't have access to like WebGL but you have access to other things and you can expose things differently depending on what context the runtimes end so so well weather is simply starting in browsers there's nothing that keeps it there this is truly a general-purpose executable format that just happens to be born out of the web does that answer your question okay you good another question so you have access to all of those but how was that actually exposed in your seat coats and see isn't quite like JavaScript literally just random right so how is that exposed so in the same way that I cannot do this reliably as a live demo because live coding is stressful but I will we show you the compiled bit so just like in C for instance if I have a an external library an external function I want to call I can say all right X turn int bar takes an int and then down here I could say all right first pass let's say X equals bar of X so if we're gonna we're gonna call this external function modify the value and then do our divided by four and when I compile that we did this import stands out that says all right import from the environment something called bar and so you can do that by like supposing and then when we call this a no I'm not gonna try to it live but we call that webassembly dot instantiate you provide a separate dictionary that says imports bar and then you can provide a function here that yeah X and then return X times 10 and then what that would do is is make that JavaScript function available inside the C just like you would use to access any other external C thing this means that people still need to build good reference libraries to expose the web platform to see that's an active project but you can it's possible to do right now and that's what I'm scriptum does with its built-in support for things like STL file system access if you just using the normal C API is try to open and write to a file the unscripted compiler will map that into opening and storing data inside index dB so so there you can build that that kind of translation into the compiler yeah so what are the consequences of having raw memory access having pointers and things like that and see and then bring that to the web and web assembly so so with web assembly you can request memory in 64 K chunks and you can allocate from there or allocate that and deal with it however you want but you are still limited to explicitly the memory you allocate so you've got this kind of virtual memory manager this is alright this is the memory you have access to you anything you try to access outside of that is just not going to we're not going to allow that to happen at the compiler level when we do the translation from the gasm bit code into into the native code that makes sense yeah yeah I am I'm coming from the JavaScript world I'm not particularly familiar with how shared objects and linking like that works and how it works in here I know it is possible we can talk more afterwards I can get your info and I can put you in touch with an engineer that actually does hack at that level it is an independent specification just happens that the first implementation is inside LLVM because we had we've done that work for as MJS it is finalized the one day shift in March and we are to the best of our ability not going to introduce any backwards and compatibility changes I think available changes the the binary format there will be new features that were quite a future direction just like in Javas we have to say you know do I support fetch so I can use that instead of xhr but but there's a way to do that okay so low level stuff so what is this again compiler tart with the web low-level binary format open standard with cross browser support direct successor of as MJS and is a general-purpose virtual architecture why is this interesting so this doesn't replace JavaScript it expands what the web can do you can do things on the web that are faster you do things on the web that perform more consistently you can do things on the web that reuse existing code this enables new hybrid designs where you may have a core of your application you may have the computationally intensive parts implemented in any language like C or C++ like we saw that that stream processing edge detection filter but the API you exposed to your users is JavaScript so there none the wiser they don't have to learn this but they get better performance it means that for compilers the web is just another platform it's here today it works today I talked about as MJS being this like kind of Cluj of a hack to see can we make something faster and still make a JavaScript yes well that means that for backwards compatibility you can compile to wasm and just save the Azzam j/s artifact as well and serve that to browsers that don't accept web assembly so there's there's a good back compat story coming in the future better tooling multi-threading sem d we want to add garbage collection of assembly that's probably a two year project but but really trying to make this platform a capable platform that can really natively interact with with the web it's javascript is a great language but it should not be the only language FAQ is this JavaScript dead or dying it's alive its monopoly on the client-side is dead that's the big takeaway that the the notion that you have to know JavaScript to work on the web is no longer true as of March this year however you can't just take you can't just come in as a C++ developer and say now I can work on the web and expect to have an experience that feels like the web so both of these communities have a lot to learn from each other about how to build things that that best leverage the strengths of each platform to company each other you've got a high level textual language in JavaScript you've got a low level binary language format and webassembly makes new things possible older browsers again you can compile to as MJS to wasm will just save the as MJS output the compilers right now in scriptum is the experimental compiler we've been using for as MJS for the last six seven years upstream LLVM is coming hopefully soon but for now you'll be using him scripting and then Benari and is the program that does the translation from azzam jsn to Azzam can I compile JavaScript web assembly some people look at this like oh if I'm using typescript or JavaScript can I just compile my code do i zoom and make you go faster don't do that anyone want to guess that why you shouldn't do that you already have a really good Java Script I'm in your browser it knows all the dirty tricks and all the awful secrets to make things go fast for JavaScript and web assembly doesn't know that much about datatypes so if you want to run javascript in your browser using your own runtime well you have to come with your own way to represent objects and strings and things like that in memory again your browser already has one and it's great what about type errors are kind of demoed this so there are well defined rules so it's no different from calling the square root of hello world at that boundary and there is overhead so webassembly we're working to lower it as much as possible but crossing that boundary from JavaScript into web assembly and back there is overhead where we have to do type checking we have to do type coercion which means both assembly is typically better if you can get the data into it once and operate there versus calling two of assembly a whole lot at a high rate I have a couple closing demos this is the the real fun part let's see so let's start with pipe ijs so I said you had to bring your own runtime and that means that it's it's not as efficient to take a high-level language and put it on the web I have a a colleague that looked at this looked at this so Python there's a Python runtime called pi pi and pi PI is written in Python so you compile Python to see pi PI to see and then you put that into GCC and that compiles to C into a native code and you put Python into that native code and then you get it jetted back into the native code again so this is kind of the pi PI interpreter or runtime script him does something similar it's a compiler so you take C you put C into and scriptum it spits out JavaScript the Java circles into your browser your browser turns that into native code so that works so if you switch these together he rose well we can take pi pi convert that into c put that into him stripped him to convert the C into JavaScript put that into your browser which converts it to native code now if you Python into that native code in your browser we can have that spit out as 'm j/s which your browser will then get back into native code and now you have python the web so so he built this as a proof of concept and this was before whether simply this is just using using Azzam j/s but it works and the problem is like okay you have to bring your whole Python runtime with you but that that means you've got like an eight megabyte javascript file not awful you don't want to do this on every web page but but it's possible and that file has all the information about like how to represent a Python object in memory and so now I can say from test import PI snip license a bench mark built into pi PI or Python things a pice domain and this is running natively my browser and I'm getting about 150 280 270 thousand of these these benchmark computations per second if I come over to my actual my actual computer and run this natively I get like three times four times slower performance than running in the browser and so so this is this is smoke and mirrors that the difference is this is PI Pi which is an alternative runtime for Python this is C Python which is the reference runtime so if I did this in pi PI from test import PI stone by stone main then my native computer will go a lot faster however most people using Python are using this version and they're happy with it and so this is a proof that you can get something running faster than than the native common version of Python on your desktop inside your browser and the only overhead is you have to ship a whole Python interpreter with it because whether somebody doesn't know how to do garbage collection it doesn't know how to how to represent other types of data that's cool let's compile another thing also this is the tabby cat extension every time you open a new tab it gives you a new cat it's wonderful all right so this this will take a minute to load but somebody compiled DOSBox to web assembly and dos boxes and windows is a kind of Windows emulator and so this is an immediate version of Windows 31 for workgroups running in DOS box compiled web assembly my browser we rendering to an html5 canvas which is then being painted let's expand this into a web view our context or WebGL context and and that dial-up modem sound you heard this is actually fully multi-user so if anybody else loaded this you could actually see their camera flying around as well using WebSockets but I can come up here and I can you know it'll take forever but I can open up Netscape in my 3d environment in my browser emulating a Windows computer on Intel and it works actually I wonder does this actually I haven't tested example.com do we actually have network access oh hey we do so connects hack so so this worked and this is this is thanks to webassembly that we can get this and it's it actually performs reasonably and so you can use this for awful things and you can use this for amazing things but you can use this today and it does things that the web has never been able to do before the kicker plugins things like that you had Google's Native Client which was dare attempt to replace JavaScript you still had to compile for every target architecture or every target operating system and so even if you had something like this it you know it wouldn't work when all of a sudden phones come out and now we're all carrying around arm computers in our pocket instead of Intel computers in our pocket but whether somebody's processor agnostic so I can load this on my phone and I swear to god and I will happily demo it to you it will work on my phone as well emulating an Intel processor running Windows on an arm piece of silicon in my pocket and because you've got an accelerometer you can look around the environment and you put on the Google cardboard this is web assembly everything has changed and it changed in March and we haven't realized it yet and so what I want to do with this talk is not so much to tell you how to make something practical with this but to tell you that this is possible and go out and learn and play with it and look at Lyn Clark's talks if you want to actually learn something about this with like helpful illustrations I'm just trying to get you excited about but exciting cool [Applause] Oh somebody else is here so there's there's another camera also kudos to whoever on the connect tech team made a version I made the website made the markup such that it works in Netscape Navigator 3 released it loads something that's that's incredible I've got seven minutes I'm gonna leave you with one last thing who's used SAS front-end developers okay most people have touched this somebody implemented SAS and C++ SAS was originally written in Ruby and people like me and that's great but it's pain in the butt to call Ruby from other languages because Ruby has its own runtime its own idea of things and that's one of the benefits of the low-level language is you can call from one to the other really easily so somebody employed SAS and C and C++ and now you can call it from go and Java and JavaScript and Lua in all these languages there's a version of this for nodejs node SAS this again speaks to the compilation problem because what node SAS does it supports this matrix of operating systems architectures and node versions because they're shipping native code they have to compile for all of these different targets ahead of time and so each of these is a couple of megabytes and there are dozens of them for every release so hundreds of megabytes of compiled bindings and data every time note SAS makes a new release somebody that is not me somebody with more C++ compiler experience please for the love of God compile node SAS two webassembly set the node min Verta eight and just ship one little web assembly binary cuz it'll work everywhere in all of these environments that's that's what I think is really exciting this ability to take these libraries and stop caring about the processor but still get most of the same performance the world is rife with these opportunities live archive supports all of these different formats it's portable C works everywhere it's used in the BS DS it's used in a lot of popular applications if I want to do something in node I go the archiver packaged downloaded almost 90,000 times today it handles zip and tar and it had to reinvent that wheel well the assembly means that if you're using node if you're using the browser you can stop reinventing wheels and you can make things faster and you can do stupid things like run DOSBox and that's capable in a little 3d environment that has Jolt Cola and Fritos so thank you so much if you have questions I'm here all day today I unfortunately have to leave tomorrow morning but please find me there's stickers on the back table I have plushies you ask questions other people ask questions I can't I can't throw it all the way back there so I'm just gonna start tossing these out and before you go I have the Firefox you have to win the Firefox who can name to see you so a lot of front-end people who can name either of the two women that are most instrumental in the development of the CSS grid specification Rachel Andrews the other is Jin Simmons congratulations I'm not gonna toss this you can come up and get it all right three more thank you so much I'm Cal ahead on Twitter don't forget Ling Clark on Twitter if you want to learn more about this and have a great conference [Applause]

Channel: Coding Tech

Views: 44,894

Rating: 4.861187 out of 5

Keywords: webassembly, javascript, c++, rust, web development

Id: 7mBf3Gig9io

Length: 51min 42sec (3102 seconds)

Published: Wed Oct 17 2018