Build the future of the web with WebAssembly and more (Google I/O '18)
Use The engine to simulate this 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 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. So let's have a look at some actual code and again. The. First thing I want to mention is web assemblies amazing, tool chain unscripted, some. Of you may know him scripting from when it was used to turn C++. Into, Assam Jas which was a precursor to webassembly, M scripting. Has since morphed into a fantastic, tool chain for, web assembly it's. What you'll use to compile your source file into, the web assembly 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 simulates an entire file system for your ported applications, 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 of atom script Anatomy scripting org. Ok, so let's look at some code. Here, I have the computational, equivalent of a hello world which. Is a simple C function, that calculates the, nth Fibonacci number. You'll. Notice these two additional pieces at the top this, top line is included, is. Used to include the M script and library and then, this second line is used, to tell M 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 we'll use to actually compile, our file and we can step through each of the pieces. You'll. First use EMCC, to, actually execute the inscription compiler. Then. We'll pass in - s latin. Equals 1 to, make sure that M scripting will output webassembly. Since, it still outputs, as in J s by default though this will be changing to defaulting, to webassembly soon. We. Also want to name our output file so we will pass in - o fib, KS, and. Then. Finally we'll pass in our input file fib dot C and this is the whole command that you need to execute. EMCC. Will then give us back two different files fib, Lassen and fib, KS. Cybil, azzam holds, the minimal web assembly, binary, for a Fibonacci function while. 50s, holds. Some helper code to load the web assembly module and set it up properly, it's. Worth noting here that I'm scripting has many different, ways to, output, code based on your needs in. This example we're having an output this.j, s helper file but, you can even have it out put an entire HTML, page with a terminal simulator, in it, to help you get started these. Are both useful ways to get started but they include some code that might not be necessary in, every application and if, you're trying to create something that's truly production-grade, it'll. Be important important for you to dig into the m script in library, and documentation. To figure out what to include. Alright, 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 we'll just use the simple script tag to import.