{"id":405,"date":"2018-01-22T14:34:04","date_gmt":"2018-01-22T18:34:04","guid":{"rendered":"https:\/\/timesheet.dovico.com\/blog\/?p=405"},"modified":"2025-08-13T17:37:50","modified_gmt":"2025-08-13T20:37:50","slug":"an-introduction-to-webassembly","status":"publish","type":"post","link":"https:\/\/timesheet.dovico.com\/blog\/2018\/01\/22\/an-introduction-to-webassembly\/","title":{"rendered":"An Introduction to WebAssembly"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

The concept behind WebAssembly isn\u2019t new and is based on work that was pioneered by Mozilla (asm.js)<\/em> and Google (Native Client \u2014 NaCl and Portable Native Client \u2014 PNaCl)<\/em>.<\/p>\n\n\n\n

One of WebAssembly\u2019s main goals is parity with asm.js so I\u2019ll give you a little background on that before we start digging into WebAssembly.<\/p>\n\n\n\n

When I first heard of asm.js a few years ago I was excited. The ability to write code in C\/C++ and have it compiled down into a special form of JavaScript that the browser could then run at near-native speeds if it supported asm.js.<\/p>\n\n\n\n

You don\u2019t typically write asm.js code by hand, it\u2019s usually created by a compiler.<\/em><\/p>\n\n\n\n

The code starts off with the asm pragma<\/strong> statement (“use asm”;) and then typing hints are included that allow JavaScript interpreters, that support asm.js, to know that they can use low-level CPU operations rather than the more expensive JavaScript operations.<\/p>\n\n\n\n

For example, a | 0<\/strong> is used to hint that the variable \u2018a\u2019 is a 32-bit integer. This works because a bitwise operation of zero doesn\u2019t change the original value so there are no side effects to doing this. Because there are no side effects to this, it can be used wherever it\u2019s required in the code to hint the type for either the return value or the parameters passed into a method as in the following example:<\/p>\n\n\n\n

function AsmModule() {\n  \"use asm\";       \n  return {\n    add: function(a, b) {\n      a = a | 0;           \n      b = b | 0;           \n      return (a + b) | 0;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
The nice thing about asm.js is that, even if the browser doesn\u2019t support it, it would still run and you would get identical results since the code is still valid JavaScript. The only difference is that it would be slower compared to if the browser did support asm.js.<\/p>\n\n\n\n
Being able to write code in C\/C++ and have it compiled into a special form of JavaScript that is significantly faster than standard JavaScript is pretty cool but asm.js did have some disadvantages:<\/p>\n\n\n\n