WebAssembly will change the Web Experience

They’re heeere! Other languages can now participate in shaping up the Web experience.

WebAssembly is here

  • WebAssembly has full support in most browsers
  • It runs at near native speeds.
  • WebAssembly and JavaScript are interoperable — they can import and call functions from each other.
  • WebAssembly code can be written in (wait for it…) other languages.

The ability to write code that runs in a browser at native speeds in a language other than JavaScript is a game changer

What problem does WebAssembly solve?

Can WebAssembly make a “normal” website run faster?

JavaScript is not going away anytime soon.. or ever.

Desktop experience in the browser

Games

Time tested implementations of algorithms are now ready for the web.

Desktop Applications

What does it mean for Frontend development?

Wasm Code

;; main.wat
(module
(
func $add (param $arg1 i32) (param $arg2 i32) (result i32)
get_local $arg1 ;; Push arg1 to stack
get_local $arg2 ;; push arg2 to stack
i32.add ;; Execute opcode i32.add
)
(export "add" (func $add))
)
> od -c main.wasm 
\0 a s m 001 \0 \0 \0 001 \a 001 ` 002 177 177 001
177 003 002 001 \0 \a \a 001 003 a d d \0 \0 \n \t
001 \a \0 \0 001 j \v \0 036 004 n a m e
001 006 001 \0 003 a d d 002 017 001 \0 002 \0 004 a
r g 1 001 004 a r g 2
async function init() {
const result = await WebAssembly
.instantiateStreaming(fetch("../out/main.wasm"));
const wasm = result.instance.exports;
document
.getElementById("container")
.textContent = wasm.add(19, 23); // wasm function
}
init();

Writing Wasm code

AssemblyScript

  • your active code base, including libraries you want to bring into WeAssembly, is in JavaScript.
  • Training your team in a new language is out of scope.

Rust

Rust vs AssembyScript

Invoking JavaScript functions from Wasm

// The function that wasm can call
const sayHello = () => {
console.log("Hello from WebAssembly!");
}
async function init() {
const result = await WebAssembly
.instantiateStreaming(fetch("../out/main.wasm"), {
main: { sayHello }
}
);
const wasm = result.instance.exports;
document
.getElementById("container")
.textContent = wasm.add(19, 23);
}
init();
declare function sayHello(): void;sayHello(); // is defined in the browserexport function add(x: i32, y: i32): i32 {
return x + y;
}

WebAssembly beyond the Web: WASI

Conclusion

--

--

--

Frontend Architect, San Jose, CA

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

10 JavaScript Interview Question

The Best of 2017 on dormoshe.io

Codewars Coding Challenge: ISOGRAMS

Prevent Nullpointer Exception In IBM BAW JavaScript

Why does a project need React?

Why Do We Even Use React?

Navigating Javascript Documentation: Array.prototype.filter()

Implementing Custom HTML Elements — Know-How

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajesh Naroth

Rajesh Naroth

Frontend Architect, San Jose, CA

More from Medium

How I cleaned up my hard drive from over 50 GBs of npm dependencies.

Run JavaScript Code One Magnitude Faster Using WebAssembly

Act 2: “The Client” — Part 8 (Dealing with very heavy Asynchronous Tasks)

Typescript Feature Proposal