Guy Nesher Web Architect @CodeValue, in his session from "Architecture Next 19"

1. WebAssembly – Future of the web
Guy Nesher
Web Architect @ CodeValue
Mozilla Tech Speaker
Hodash Dev Meetup
@GuyNesher

2. Introduction To WebAssembly

3. WebAssembly )WASM(
a binary instruction format for a stack-based
virtual machine.
Wasm is designed as a portable target for
compilation of high-level languages like
C/C++/Rust/Blazor, enabling deployment on
the web for client and server applications.

4. WebAssembly Simplified
C
C++
wasm html
Compiler
+
JavaScript
Glue Fast Applications
Rust
Blazor
Etc.

5. Will WebAssembly Replace JavaScript
 The short answer is no
 WebAssembly complements JavaScript
 Useful for heavier processes
 But most applications do not need the extra performance

6. WebAssembly: Neither Web, Nor Assembly,
but Revolutionary
Jay Phelps

7. Let's Start At the Beginning
https://xkcd.com/1367/

8. Web Applications
 No Installation Process
 Cross Platform
 Safe
 But What About Performance?

9. JavaScript Performance – Prime Numbers

10. JavaScript Performance – Prime Numbers

11. 2013 The Birth of asm.js
 Subset of JavaScript
 Compile Target for C/C++
 C/C++ -> LLVM -> Emscripten -> JavaScript
 Faster JavaScript (static typing, no garbage collection) etc.
 Still runs on old browsers (just loses some optimization)

12. Micosoft Demo asm.js vs js
https://bit.ly/2D72ubb

13. A Brief History
2013 - asm.js compiles C/C++ code to a subset of JavaScript
2015 – W3c forms the WebAssembly committee
2017 – MVP Implementation of WebAssembly in all browsers
2018 – W3C releases draft specification for WebAssembly

14. Web Assembly MVP
* By Lin Clark, Till Schneidereit, Luke Wagner - https://mzl.la/2TEUrej

15. WebAssembly MVP Games
Unreal Engine
Unity Engine
Quake

16. WebAssembly MVP Applications
Adobe Lightroom
Autodesk AutoCAD

17. WebAssembly MVP Web Applications
eBay barcode scanner – 50FPS
vs 1FPS (scans per seconds),
95% vs 20% success rate
Wordpress Gutenberg post
parser – 96% - 317% parsing
speed increase

18. But This Is Just The Beginning

19. WebAssembly Heavyweight Apps
* By Lin Clark, Till Schneidereit, Luke Wagner - https://mzl.la/2TEUrej

20. WebAssembly JavaScript Integration
* By Lin Clark, Till Schneidereit, Luke Wagner - https://mzl.la/2TEUrej

21. A Quick Intro to
WebAseembly And Rust

22. Wait, What’s Rust
 Developed in 2010
 Syntax similar to C++
 Memory Safe
 Used in Production by Dropbox, Yelp, NPM and many others
 The most loved programing 2016 – 2019 (according to Stack Overflow
survey)
 Use rustup - https://rustup.rs/
 Cargo – rust package manager (similar to package.json), packages are
called 'Crates'

23. C++ FizzBuzz Rust
int main(void)
{
int num;
for(num=1; num<101; ++num)
{
if( num%3 == 0 && num%5 == 0 ) {
printf("fizzbuzzn");
} else if( num%3 == 0) {
printf("fizzn");
} else if( num%5 == 0) {
printf("buzzn");
} else {
printf("%dn",num);
}
}
return 0;
}

24. FizzBuzz in Rust
fn main() {
for num in 1..101 { // Range notation!
match (num%3, num%5) { // Pattern Matching FTW!
(0, 0) => println!("fizzbuzz"),
(0, _) => println!("fizz"),
(_, 0) => println!("buzz"),
_ => println!("{}", num)
}
}
}
* By Szmozsánszky István https://mzl.la/2JIrfyA

25. Rust And WebAssembly
 wasm-pack – crate, simplest way to build WebAssembly
 cargo install wasm-pack
 wasm-pack build
 wasm-bindgen – crate which manages JavaScript -> WebAssembly
interaction
 Starting a new project:
 cargo new --lib <project name>
 wasm-pack build

26. Cargo File
[package]
name = "hello_world"
version = "0.1.0"
authors = ["Guy Nesher <nesher.guy@gmail.com>"]
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2.42"

27. Wasm Webpack
const path = require("path");
const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
module.exports = {
// ...
plugins: [
new WasmPackPlugin({
crateDirectory: path.resolve(__dirname, "crate"),
}),
]
// ...
};

28. Rust / JavaScript Interaction
Rust Code JavaScript Code
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub extern fn add(x: u32, y: u32) -> u32 {
x + y
}
async function handleAdd(event) {
event.preventDefault();
const { add } = await import(‘../add/pkg’);
console.log(add(2, 3));
console.log(add(100, 500));
}

29. JavaScript Bindings
import * as wasm from './hello_world_bg';
function _assertNum(n) {
if (typeof(n) !== 'number') throw new Error('expected a number argument');
}
export function add(x, y) {
_assertNum(x);
_assertNum(y);
return wasm.add(x, y) >>> 0;
}

30. WebAssembly Post MVC Summary
 Fast browser applications
 Using a language of your choice
 Adopted by many large corporations
 .NET Core support using Blazor - http://tiny.cc/bvnh7y
 Or use Rust - http://tiny.cc/6znh7y
 Missing features are coming*

31. Guy Nesher
Web Architect @ CodeValue
Mozilla Tech Speaker
Photographer
@GuyNesher