TypeScript to WebAssembly
WebAssembly allows writing browser applications in any language that is strongly typed languages. These include ones like C, C++, Java and more recently Rust. Web developers often use dynamically typed languages like JavaScript, PHP and Python.
It's clear that WebAssembly will never gain the same position as a scripting language for browsers that JavaScript currently enjoys. However, JavaScript developers will be able to import WebAssembly as modules and merge the two libraries. This amalgamation will unlock performance benefits such as streaming compilation in large WebAssembly libraries in JavaScript web apps.
This is why it would be useful for web developers to be able to make modifications to WebAssembly applications. Learning a new language and toolchain like with C++ or Rust, will require a significant time investment. The more practical alternative could be to use TypeScript, a superset of JavaScript which provides strong typing and other advanced language features for it at compile time.
TypeScript shares a syntax with JavaScript and has the necessary infrastructure and language syntax to define strong types. This makes it a great candidate for writing WebAssembly applications in. Developers will have access to familiar tools like NPM and Webpack, yet target the binary format wasm consumed by WebAssembly runtimes in the browser (and on server with Node.js).
AssemblyScript compiles TypeScript to WebAssembly
In order to write WebAssembly apps in TypeScript you will need extended typing and a toolchain to handl the compilation process. Converting a JavaScript app via TypeScript and an accomplying toolchain directly won't work. There are a number of TypeScript to WebAssembly compilers out there, but as of February 2018 AssemblyScript is the most promising of the set.
Even with AssemblyScript being a complete toolchain. You'll need to specifically write code to target wasm, but even so TypeScript can provide a bridge between JavaScript and WebAssembly, which is not perfect but does make the environment more accessible to mainstream web developers.
For a practical example you can see the example Game of Life implementation in AssemblyScript below:
// A simplified version of the game of life as seen on http://dcode.io
var w: u32, // width
h: u32, // height
s: u32; // total size
/** Initializes width and height. */
export function init(w_: u32, h_: u32): void {
w = w_;
h = h_;
s = w * h;
}
/** Performs one step. */
export function step(): void {
var hm1 = h - 1,
wm1 = w - 1;
for (var y: u32 = 0; y < h; ++y) {
var ym1 = select<u32>(hm1, y - 1, y == 0),
yp1 = select<u32>(0, y + 1, y == hm1);
for (var x: u32 = 0; x < w; ++x) {
var xm1 = select<u32>(wm1, x - 1, x == 0),
xp1 = select<u32>(0, x + 1, x == wm1);
var n = (
load<u8>(ym1 * w + xm1) + load<u8>(ym1 * w + x) + load<u8>(ym1 * w + xp1) +
load<u8>(y * w + xm1) + load<u8>(y * w + xp1) +
load<u8>(yp1 * w + xm1) + load<u8>(yp1 * w + x) + load<u8>(yp1 * w + xp1)
);
if (load<u8>(y * w + x)) {
if (n < 2 || n > 3)
store<u8>(s + y * w + x, 0);
} else if (n == 3)
store<u8>(s + y * w + x, 1);
}
}
}
// Performing a step uses bytes [0, s-1] as the input and writes the output to [s, 2*s-1].
// Note that the code above wastes a lot of space by using one byte per cell.
Tweet