Duration 34:28
16+
Play
Video

Build the future of the web with WebAssembly and more

Thomas Nattestad
Product Manager at Google
  • Video
  • Table of contents
  • Video
2018 Google I/O
May 8, 2018, Mountain View, USA
2018 Google I/O
Video
Build the future of the web with WebAssembly and more
Available
In cart
Free
Free
Free
Free
Free
Free
Add to favorites
86.9 K
I like 0
I dislike 0
Available
In cart
Free
Free
Free
Free
Free
Free
  • Description
  • Transcript
  • Discussion

About speaker

Thomas Nattestad
Product Manager at Google

Thomas is the product manager for WebAssembly, V8, Chrome Storage, and Games on Chrome. He grew up in Denmark, recently graduated from Olin College and has been at Google about 2 years ago. He is passionate about the free and open web and making it as great of an experience for users and developers as possible.

View the profile

About the talk

This talk will cover how to use the most advanced modern web technologies to build experiences that were never possible on the web before. WebAssembly is enabling the browsers to expose lower-level primitives that can be built on by developers to create performance demanding functionality, like real time media processing, without having to wait for it to be standardized and implemented. See some of the amazing experiences that have already been built and learn how to apply them to today.

Share

Hello, everyone. Everyone hearing me. Hey. My name is Thomas and I'm the product manager for V8 and webassembly on Chrome. This is my second talk ever like this, but I'm really thinking it might also end up being my last talk ever if the Google Assistant get any smarter than it already is. Right now is making phone calls and I feel like soon it'll end up doing all the Talking for us with let's be honest is the real end goal here. Anyways, right? Well anyways, I joined the web assembly team a little while ago and since then I've been learning more and more

about webassembly and what is an Abel's on the web. And as I learned more I started getting more and more excited about how it could change. Not only what we can create on the web. But also how we created. So what is webassembly anyways, well assembly is a new low-level binary format for the web. This means that it's close to the CPU machine code that your computer understands. It has all of the security that we've come to expect from executing code on the web. It's compiled from other languages, which means that you can write something like cplusplus and then

compiled it into webassembly because it's so low level and compile some other languages. It also offers maximize performance in this talk. I want to talk to you about why webassembly is such a game-changer for how we create things on the web. Then I want to actually jump into some code and show you how you can be writing webassembly today. Then I'll showcase some of the amazing applications that we've seen on the web already utilize webassembly to great effect, and then I'll close out by showcasing a little bit of what we still have on the road map for webassembly features. Okay. So what are

the actual advantages of webassembly and why might you want to use it? Well first off is his performance because webassembly was designed for Speed. It offers better performance than JavaScript can JavaScript is that Dynamic language, which is great to making it easier to write but it also means that the JavaScript engine has to optimize. JavaScript as it's being executed on the page webassembly is out tonight before it actually hits the browser and this allows it to offer better and more reliable performance in JavaScript. Secondly webassembly offers amazing portability

because you can compile from other languages. You can Port not only your own applications to bled but also the incredible wealth of C plus plus libraries that open source applications that exist out there and because cplusplus specifically is supported on practically every platform including IOS and Android you can alright cephas Plus at the common language across your different web and mobile deployments by leveraging webassembly. Leslie and potentially most exciting too many of you out there. It's a prospect of more flexibility when writing for the web specifically the ability

to write in different languages since the webs Inception script has been the only fully supported option for developers who want to write Logic for the lab, but now with webassembly you have more choice. The current fully supported languages are C C plus plus and rust but there are many other languages that are experimenting with adding support including kotlin and dotnet both of which have ship experimental support for webassembly. So why do these powers and abilities webassembly actually matter in the first place? And why do we want to do interactivity on the web? Well, it's really

explain that I want to go back to a time when we didn't have any interactivity on the web whatsoever. This is the first-ever webpage published by Tim berners-lee in 1991. As you can see in its original form. The web was really just slightly formatted text meant only for consumption of information aside from clicking on links. There was literally nothing you could interact with at all. Turn JavaScript comes along and it's famously created this single 10-day hackathon this bring some level of basic code execution to the browser. And with this Foundation of JavaScript, we

see the first real web applications actually comes the web these include examples like Gmail, but also things like MapQuest and eBay. Essentra screw in what you could do with interactivity on the web. We saw an incredible explosion of developer created libraries and use for libraries such as jQuery for doing. Manipulation and another popular Frameworks for organizing your page content on the client and also things like three JS and d3.js to make beautiful and Interactive visualizations. And there are so many more other libraries that expand what we can collectively create on the

web. This is one of my favorite things about working on the web platform is that you have this easy ability for any developer to package up some functionality that they are the expert on and then share that capability with everyone allowing us to build amazing things that we wouldn't have been able to otherwise Browsers also continued to advance during this time you had things like V8 revolutionising JavaScript performance to expand what you could actually feasibly create with JavaScript. You also had abilities like webgl bringing interactive Graphics HTML5

bring new capabilities to the Dawn and just recently with Surfer service workers allowing you to do offline and so much more all of these Technologies and others continue to expand it was actually possible to do on the web and the industry responded in kind by bringing more and more of their applications to blood we saw examples like Google Docs fellow and even Microsoft Office 365 all start to move to the web. But why why was there such an appetite for application and interactivity on the web in the first place? Why didn't we just leave interactivity to the

native operating system where developers could have full access to everything and shoes whatever language they wanted to be developing it. Well, there are three fundamental powers of the web that actually make it a fantastic space specifically for applications. First off is linkability. This means that your ass is not only accessible by a single click on any other page would you can even share your application for a specific document for your application through a single shareable clickable strength? Secondly the web application cuz ephemeral and this means that your users don't

have to worry about the process of going in installing your application or whether the application is trustworthy really delivered in a sandbox environment as soon as the user needs it. Lastly the web is the only truly Universal platform. Meaning that your application is accessible by anyone on any device. This also means that you can maintain a single code base and be sure that every user can access your application something. I think all of us can really appreciate. And so because of these incredible powers that the web offers for interactivity we went from

this small scripting language all the way to this incredibly powerful and popular platform filled with amazing applications and capabilities, but which was still fundamentally powered by this same scripting language that was never really designed to do all of this in the first place. That's why the web browsers came together to create webassembly and it's why webassembly is now shipping in all four major browsers making it the first run time since JavaScript was created more than 20 years ago to be shipped in every browser. Webassembly isn't meant to replace JavaScript out.

The two were designed to interoperate and was in Chrome. It's actually the same team working on both rather webassembly is the foundational power that unlocks the ability to create new native life experiences on the web and it even gives you a porting path to move your applications to the web without having to rewrite them. Okay, so hopefully that gives you a little bit of a sense of what webassembly can offer and gets you as excited as I am to jump into some code. I want to start off by showcasing the final result of what you can actually do right here in Ohio by going and checking out the

code lab that we have available to you or you can access it from bit. Ly / Lassen IO 2018. This is a hourglass example where we've taken the Chipmunks physics engine, which is the one utilized by cocos2d and then we've leveraged webassembly to bring it into the browser will use the engine to stimulate his running hourglass where every single grain of sand that you see in The Hourglass is actually its own SVG Dom element. And if I want I can actually play with it and you can see this for yourself when you go and check out the code lab,

but you can turn it over and have all of the little SVG elements respond accordingly. Okay, let's have a look at some actual code and again. The first thing I want to mention is webassembly amazing toolchain descriptive. Some of you may know him scripting from when it was used to turn cplusplus into a Sim JS, which was a precursor to webassembly description has since morphed into a fantastic food chain for webassembly your source file into the webassembly format, but it also does so much more for you. It offers a lot of automatic translation such as

translating your opengl API calls into their webgl Alternatives and it also stimulates the entire file system for reported application to utilize It also includes the C standard library and provides alternatives to Linux build tools such as configure and make you can read all the details about unscripted and I'm skipping. Org. Okay, so let's look at some code. Here, I have the computational equivalent of a Hello World, which is a simple seed function that calculates the nth Fibonacci number. You'll notice these two additional pieces of the top. This top-line is included

is used to include the inscription library. And then the second line is used to telling script in that we're going to be calling this function and that it shouldn't remove this function. Even if it seems to be unused This is the command that will use actually compiled or file and we can step through each of the pieces. You're the first use EMCC to actually execute the inscription compiler. Then we'll pass in dash s glass of equals one to make sure that inscription will output webassembly since it's still outputs as Andreas by default. They'll just will be

changing to defaulting to webassembly. We also want to name our output file. So we will pass in dash of FIB. Js. And then finally will pass it on input file V. See. This is the whole command that you need to execute. BMCC will then give us back to different files saved and 5th. J. S awesome holds the minimal webassembly binary for a Fibonacci function while live. JS wholesome helper code to load the webassembly module and set it up properly. It's worth noting here than inscription has many different ways to Output

code based on your knees in this example. We're having an output this JS help her file would you can even have an output an entire HTML page with a terminal simulator in its help you get started these are both useful way to get started but they include some code that might not be necessary and every application and if you're trying to create something that's truly production grade will be important important for you to dig into the inscription library and documentation to figure out what to include All right. So next let's have a look at the HTML page that you need to use in

order to actually include this at the Top Line will just use the simple script time to import r v. Jason including us V. JS is what gives access to this module object. The module object is a central part of emscripten and it's how you allow access inscription functionality this module a check comes with a function called Serie, which will return a JavaScript function that allows us to call or compiled webassembly function while taking care of all of the input and output type conversion for us. And then we can actually just call that function directly and if we passed since well if

we correctly see that we get back out 233. Awesome. So this is a basic example of how you can communicate between webassembly in JavaScript. But there are also other ways for you to communicate between the border of JavaScript and webassembly which one you choose ultimately depend on your own preference and the architecture of your application. All right. So the next example, I want to start off and show a brand new way of how you can communicate between this JavaScript and webassembly border. Our end goal will be to make this animating weirdly spinning ball painted onto a canvas by

utilizing some web apis, but with logic control in C plus plus so let's start off and we'll create a ball. CPP file and you'll notice. Once again, we include the inscription library to get all of the benefits of that provides. Next let's talk about this dmjs function, which seems to have JavaScript code inside of it. Despite this being a C plus plus file. Well, the reason why we can do this is because it's a special macro known by the inscription Library. The format is that you first passenger return type then the name of the function and then the list of arguments that

you'll be calling that function with. The great advantage that dmjs gives is that you can alright the JavaScript that you know, and love while staying in that same C plus plus file. So in this piece of JavaScript, we just simply find the canvas and paint a red circle at the given location with the given radius. We didn't include a classic main function that calls are function draw Circle passing in the given location and radius thanks to emj is emscripten takes care of converting these inputs into what will be used inside of the JavaScript function

and then calling that guy was good time function. You can also find more documentation on how he MJS works and I'm skipping. Org. Alright, so this is the command that we're going to use to compile this piece of code and this time we're going to get a little bit more fancy an optimized with it. Will pass in this - 03 which will tell the inscription compiler to optimize aggressively including the removal of unused code. Because we're telling him stripping to remove unused code. We also have to be explicitly explicitly tell emscripten that we're going to want our old

friend sea wrap to still be included since we'll be utilizing that later. All right. Now we have again at index. HTML file dirt simple this time. It just includes the canvas tag. And then we load our ball. J a script you'll notice that we don't actually have to call or a main function at all. This is because we named it Meme and then stripped in nose to execute that on Startup because of the common C plus plus pattern. And boom you put all that together and you have your single cplusplus file that tells that calls a JavaScript function and then paints this fall onto the canvas. This is

great. But so far, the only thing that we're actually doing in C plus plus logic is calling into a JavaScript function. So let's do something a little bit more interesting. We want to start by animating this fall and in order to animated. We have to clear the canvas each frame. So we'll just make another ATM dance function will pass in boy's name it clear canvas and no arguments inside of this. We're just grabbing the context again and clearing it completely. Okay, so we want to actually start taking advantage of some of the C plus plus logic that we can

Implement and we'll start off by including math. 8 because some scripting includes the C standard Library we get full interoperable access to this math Library without having to worry about putting it ourselves. Then further down in our file will also have this static floaties in order to keep track of time and we'll swap out our main function for an update function that will be calling repeatedly. Just like in our last example will utilize emscripten Keepalive to make sure that I'm skipping doesn't get rid of this function. Would you also noticed that we have this

extern C rapper around our function? This is included. So then I'm scripting won't do any name mangling while compiling or C plus plus function. The reason we didn't have to do this in the previous example is because that was just decode Nazi foot plus any Funk C plus plus function whose name you want to remain unchanged and reference Isabel from JavaScript needs to be inside of the Sexes currency rapper. All right, and then inside the center logic, we just updated our time variable color clear canvas function and then draw a draw Circle function with some funky sign math

that we get from the math Library. Awesome, tonella's jump into our index. HTML page and actually set this up so that will call her update function on a continual basis. To do this, but once again take advantage of emscripten understanding what the module object is Will Define this module object. Then we set up rerun function on it and it's pretty run function simply utilizes requestanimationframe to call or update function that we once again get some C rap. And then at the bottom will also include our ball. J a script. And just

like that you have this wonderfully weird animation being controlled by C plus plus logic. Great. So now that we have some of that basic now, we know the basics of writing some webassembly. Let's have a look at what some developers have already accomplished by utilizing webassembly. One company that's been able to utilize the performance of webassembly and the link ability of the lab is stigma stigma is a powerful cloud-based screen design platform that makes it easy for teams to work in sync on a design to a single URL designers product managers engineers and others

involved in the design process can now iterate and design on a single place to gather feedback without having to worry about exporting documents or managing the application. It's all right there in continuously. It used to be that was native design tools. You have to worry about managing all of your files whether everyone involved in the process had the right software installed and whether or not people's operating system even supported the application in the first place. Now, you can use the power of Links at the single source of Truth while enabling anyone on any device to access

your application or a specific document while trusting that it'll always be up to date. Great. So let's have a look at how they've actually architecture the application to include webassembly and see if we can learn anything. The non-performing part of their rendering or of their application they use a modern typescript language with the react framework. In the center area of the application. They have a single canvas with all of their logic implemented in C plus plus through webassembly. This section has three different components inside of it. The first is a custom

rendering engine where they decode their file format through webassembly and then render it onto the canvas by utilizing webgl. Secondly is a custom text editor where they actually been able to utilize popular open-source cplusplus Library Again by leveraging webassembly. And then finally, they have a collaboration system that uses websockets for fast multi-player editing by utilizing all of these different Advanced pools and features of the web. They're able to create an application experience that it's not only highly performant but also has all of the advantages of being an

application on the web. Another great company that I want to talk about that truly been able to Leverage The universality and ephemeralness of the web is constant free concerts 3 is a full-blown game engine and editor that allows you to create an export games directly from the browser. Thanks for the ephemeralness. They have an onboarding flow that takes you from their marketing page loads of the editor lets you pick the project and be inside of the application in less than a minute. Once you're in the application, you can immediately jump in and start making any edits that you

want maybe adding a little bit of game logic or doing whatever other edits you need to and then when you're ready, you can also export it directly from inside of the browser. This is an interesting point because here's where conspec three leverages the universality of support for the web platform by and enabling their exports a different platforms. It actually exports the game as a single web page and then utilize his basic rappers around that content to make it appear like a native application contract has all of their UI in logic implemented in JavaScript that utilizes

webassembly for its audio decoding as well as Polly feelings functionality and some older browsers. Alright, another company that I'd like to tell you about is AutoCAD, but instead of me telling you about it. I'd like to invite markers O'Brien onto the stage senior product line manager at AutoCAD to tell you about the experience East Thomas. That's great. Everyone has it going so my name is Marcus O'Brien and I leave the AutoCAD product management team at Autodesk. So we have a couple of people from all the kids in the audience here today and

like to give a shout out to the web team in the mobile team. That's come from Tel Aviv it specifically for Google Io. Today, I'd like to tell a short story about all the kid's journey to the web. So all the cat is a computer aided design and drafting software application. It's used by the world's most Innovative engineers and Architects to imagine design and make the world around us. It was first released in 1982. It's not a new application. I'm prior to AutoCAD design was done by people using pen and paper on drafting boards Dacosta revision with slow

and Innovation was slow as a result. So the vision for AutoCAD from the very beginning was to reduce the amount of time. It takes to innovate to increase the number of iterations possible within a design process and to ultimately help designers optimized for the best possible solution to the problems. They were trying to solve And all the characters change the world continuously as it's evolved over the last 35 years. More than 10 years ago or more than ten years after audit address first introduced. The internet was born we heard sir Tim berners-lee Pioneer this a Nautica

was made popular with Mosaic and Netscape in Internet Explorer in the water of internet connectivity with AutoCAD 2000. I where I stood for internet and many years later. We first released in 2010 the audit ADD web and mobile apps, but really this was just the beginning of the Arctic Cat connected story. So now with all the cat on desktop web and mobile and New Vision was born. This was a vision where we could free. Our customers these designers from their desk so that they could take AutoCAD wherever they go

with them to increase their chances at innovating even further and to add to the workflows. So the article web app was intended to allow people to work from anytime anywhere and have access to this position drafting app where they're at home or on-the-go. I just want to tell you that already had standard file type is called a DWG file. There are an estimated 225 million DWG files open today at the lot and there's some 5 billion DWG SoundCloud sort servers today. So the anytime anywhere access is even more important than it's ever been before.

However as much as we wanted to bring all the tide to a browser, we were a little bit limited by the technology that was available at the time in 2010 rebate. We released a flash face version which kind of a toe in the water in terms of having a basic editor in the browser. In 2014, we shifted from Flash and change the HDMI L5 and JavaScript and this work, but we realized very quickly that this was not a very scalable way for us to build this Precision drafting tool in a browser because we had all the features already on our C plus plus code base and we're having to

rewrite them and JavaScript for this browser, so it wasn't very scalable. So two years ago, we started exploring and what were the options for us to support our common code base to the browser and we got a number of Quick wins early on so we started take it more seriously. Ana winds kept coming. So 1 year ago. We were able to release our first beta viewer to our beta customers where they could view or read Nathan's bwg's in browser to put that into context customers were able to open a 25 year olds drawing file and read it in the browser.

About eight months ago. We were able to poured our first true feature from AutoCAD core over to our browser. In December, we have the makings of a basic editor with lions accents Arcos on webassembly and we are least sisters in beta as well to our customers and then on March 22nd of this year. We hit a major milestone for the first time. We were able to release the AutoCAD weather and we are finally able to unlock the power of all the cat in the browser with 0 download and install required. So, how do we make this happen? We have the common AutoCAD

cplusplus code base, which we translate with inscripted. Which gets compiled at runtime in the browser? We have a reactant typescript your UI running on the main trade and it works together with wedded webassembly modules running on a web worker to create the AutoCAD web application. What does this really mean in real terms? So having a shared common C plus plus code base means that are C plus plus developers can develop features and Bug fixes for across all platforms without ever having to learn JavaScript or other web Technologies and for a customers that means that they have

enhanced cohesive experiences the feature that you build on desktop. It just works on on web. So here's a look at it running and chrome you might have seen this made stage yesterday. So customers are familiar with all the cat will immediately recognize this you can see it in a canvas year. It's very familiar and you can see that you got your crosshairs. It's a very odd experience and interacting with it feels like using AutoCAD desktop. You can see the JavaScript UI it's getting very user feedback and control to the user and it's interacting smoothly with the performant webassembly canvas

that's been ported from R C plus plus code base. So overall building on webassembly helped us lock deeper capabilities of all the cats optimize codebase that would have been impossible to rewrite in JavaScript. It cuts our development by orders of magnitude. And in fact, it's more performance than have you developed this in JavaScript alone. So with all the cats running on webassembly in in addition to our product guide for codebase. Our vision for a web app is no longer limited by web technology. So I'm really excited about where we

taking this in the opportunities that we're pursuing, but both for AutoCAD and for our customers in terms of what they can do without a cat in a browser and with that I'd like to head back over to Thomas. Thanks very much. Thank you Marcus. It's been really amazing to see AutoCAD utilize webassembly to gain all of the powers of the web and enabled our customers to access AutoCAD anywhere. So now that we've seen some of these different amazing high-performance remaining applications. I want to go back and talk again

about libraries remembering back to the early stages of the web. When we saw that explosion of amazing developer created libraries. I think we're at a similar infection point now with webassembly. Why don't have time to show up all these examples. Unfortunately, we've seen some amazing developers leverage webassembly to make everything from physics engines facial recognition systems video editing and even artificial intelligence. These tools can be packaged up and then enable all of us to have the capabilities for ourselves, and I'm so excited to see what all of us will be able to build

when we unlock these new next-generation libraries that are enabled I web assembly We also seen existing popular libraries start to adopt webassembly to maximize their performance. We've seen the glimmer rendering engine which is the one utilized by the Ember framework already start making commits with webassembly to improve their performance. Okay. So now that we've seen some cool uses webassembly learned a little bit of webassembly ourselves. I want to show off what we still have in the works. This is some in progress works. So it's not completely refined yet

something that I think will come across in the style of the slides. Probably the most exciting feature that we're working on its threads which can double or even quadruple the performance of your application modern CPUs ship with sepulchure's but historically the web has had very limited access to these additional course restricting how performant your application could be compared to Native. You get some additional access to these cords through web workers, which are great, but workers can be quite heavy weight and they only communicate through post message restricting what use cases

they enable. The way webassembly threats will work is by using shared or a buffer to communicate between the workers at high speed. This also means that existing cplusplus code bases that utilize pthread. I always rely on blocking can be reported directly to the web and take full advantage of the benefits of threading provides. We're also improving the way that webassembly can talk to the rest of the web browser right now webassembly always sits within a sea of JavaScript and when he wants to make calls to the dawn where to web apis like webgl, it has to go through JavaScript to do

so. We're changing that. So the webassembly can directly hold references to the Dom or web apis and communicate without having to go through JavaScript. Looking a bit further ahead. We've also started exploring direct es module support for webassembly. This will improve the ability for JavaScript and webassembly to import and interact with modules of the other time without having to do any unnecessary rapping together with letting webassembly hold references to the Dom in web apis. We're substantially improving webassembly is interoperability with the rest of the

website. Also further out is the prospect of adding first class support for other languages. The reason why I C C plus plus and rust are the current fully supported languages is to they manage their own memory and don't have a garbage collection system that manages it for them. As I mentioned earlier. We have seen languages like kotlin or The. NET Framework ship experimental support for webassembly and they've been able to accomplish this by actually compiling down there garbage collector and the rest of the runtime environment to webassembly and then shipping it

along with their page because of webassembly small-size. This doesn't add as much bloat as you might think but it's definitely not ideal and you also have to be very careful when making interactions with the Dom or with web apis to prevent you from leaking memory. We're working on a proposal to call the managed object proposal that we hope will add better first-party support to these languages and enable them fully in the browser. That brings me towards the end of my talk and to close out. I want to really just ask all of you to go out there and build amazing things with webassembly go Port

some application to the lab go create some amazing developer library that will give all of us a different super powers on the web. Whatever you do and whatever you end up creating. I hope you'll share with others. I would certainly love to hear about it and you can tweet me directly or you can suede be awesome v18. That's actually working on all of this functionality at VHS. Thank you so much.

Cackle comments for the website

Buy this talk

Access to the talk “Build the future of the web with WebAssembly and more”
Available
In cart
Free
Free
Free
Free
Free
Free

Access to all the recordings of the event

Get access to all videos “2018 Google I/O”
Available
In cart
Free
Free
Free
Free
Free
Free
Ticket

Interested in topic “Software development”?

You might be interested in videos from this event

September 28, 2018
Moscow
16
159
app store, apps, development, google play, mobile, soft

Similar talks

Rob Dodson
Developer Advocate at Google
+ 1 speaker
Dominic Mazzoni
Software Engineer at Google
+ 1 speaker
Available
In cart
Free
Free
Free
Free
Free
Free
Steve Orvell
Software Engineer at Google
Available
In cart
Free
Free
Free
Free
Free
Free
Ludo Antonov
Head of Growth Engineering at Pinterest
+ 2 speakers
Ben Galbraith
Product director for the Web Platform at Google
+ 2 speakers
Malte Ubl
Engineering lead of the AMP Project at Google
+ 2 speakers
Available
In cart
Free
Free
Free
Free
Free
Free

Buy this video

Video

Access to the talk “Build the future of the web with WebAssembly and more”
Available
In cart
Free
Free
Free
Free
Free
Free

Conference Cast

With ConferenceCast.tv, you get access to our library of the world's best conference talks.

Conference Cast
558 conferences
22059 speakers
8245 hours of content