1. What if I told you…

2. …you can run code in your browser at near-native speeds…
(WITHOUT PLUGINS)

3. …and use the language of your choice?
Zen Garden Demo:

4. Bare metal webassembly🕸
Your Browser is the new OS
All photographs in this deck © 2019 Jeremy Likness. All Rights Reserved.
@JeremyLikness

5. Jeremy Likness https://blog.jeremylikness.com/ @JeremyLikness
Cloud Microsoft
Quarter Century Professional Developer
👟 Likes to “run”
🥑 % plant-based diet
🎱 Shoots pool whenever possible
@JeremyLikness

6. In the beginning … const computePrime = () => { var lastPrime = -1;
    for (let i = 2; i < 50000; i+=1) {
        let isPrime = true;
        for (let j = i-1; j >= 2; j-=1) {
            if (i % j == 0) {
                isPrime = false;
                break;
            }
        }
        if (isPrime) {
            lastPrime = i;
    }
    return lastPrime; }

7. Along came asm.js …

8. Along came asm.js …
C/C++

9. C/C++
Clang
Along came asm.js …

10. C/C++
Clang
LLVM
Along came asm.js …

11. C/C++
Clang
LLVM
Emscripten
Along came asm.js …

12. C/C++
Clang
LLVM
Emscripten
Asm.js
Along came asm.js …

13. primes.c int computePrimesAsm() { int lastPrime; int i; int j;
int isPrime;
for (i = 2; i < 50000; i = i+1) {
isPrime = 1;
for (j = i-1; j >= 2; j--) {
if (i % j == 0) {
isPrime = -1;
break; }
if (isPrime == 1) {
lastPrime = i;
return lastPrime;

14. Demo https://github.com/JeremyLikness/blazor-wasm/tree/master/primes
Build ASM.js
Demo

15. primes.js function _computePrimesAsm() {
var $0 = 0, $1 = 0, $10 = 0, $11 = 0, $12 = 0, $13 = 0, $14 = 0, $15 = 0, $16 = 0, $17 = 0, $18 = 0, $19 = 0, $2 = 0, $20 = 0, $21 = 0, $3 = 0, $4 = 0, $5 = 0, $6 = 0, $7 = 0;
var $8 = 0, $9 = 0, label = 0, sp = 0;
sp = STACKTOP;
STACKTOP = STACKTOP + 16|0; if ((STACKTOP|0) >= (STACK_MAX|0)) abortStackOverflow(16|0);
$1 = 2;
while(1) {
$4 = $1;
$5 = ($4|0)<(50000);
if (!($5)) {
break; }
$3 = 1;
$6 = $1;
$7 = (($6) - 1)|0;
$2 = $7;
$8 = $2;
$9 = ($8|0)>=(2);
if (!($9)) {
$10 = $1;
$11 = $2;
$12 = (($10|0) % ($11|0))&-1;
$13 = ($12|0)==(0);
if ($13) {
label = 6;
break; }
$14 = $2;
$15 = (($14) + -1)|0;
$2 = $15;
if ((label|0) == 6) {
label = 0;
$3 = -1;
$16 = $3;
$17 = ($16|0)==(1);
if ($17) {
$18 = $1;
$0 = $18;
$19 = $1;
$20 = (($19) + 1)|0;
$1 = $20;
$21 = $0;
STACKTOP = sp;return ($21|0);
primes.js

16. JavaScript vs. asm.js in Chrome

17. Then, in 2017 …

18. A Quick Look Back…
Binary

19. 1010 1101 0010 0000 1101 0000 $AD $20 $D0 Binary Hexadecimal
A Quick Look Back…
Binary
Hexadecimal
$AD $20 $D0

20. 1010 1101 0010 0000 1101 0000 $AD $20 $D0 LDA $D020 A Quick Look Back…
Binary
Hexadecimal
$AD $20 $D0
Assembly
LDA $D020
A Quick Look Back…

21. A Quick Look Back…

22. A Quick Look Back…

23. primes.wasm.c int computePrimesWasm() { int lastPrime; int i; int j;
int isPrime;
for (i = 2; i < 50000; i = i+1) {
isPrime = 1;
for (j = i-1; j >= 2; j--) {
if (i % j == 0) {
isPrime = -1;
break; }
if (isPrime == 1) {
lastPrime = i;
return lastPrime;

24. Wasm is Binary, this is a textual visualization
(module
(type $t0 (func))
(type $t1 (func (result i32)))
(func $__wasm_call_ctors (type $t0))
(func $computePrimesWasm (export "computePrimesWasm") (type $t1) (result i32)
(local $l0 i32) (local $l1 i32) (local $l2 i32) (local $l3 i32) (local $l4 i32)
i32.const 1
set_local $l0
i32.const 2
set_local $l1
loop $L0
get_local $l0
set_local $l2
block $B1
block $B2
loop $L3
get_local $l2
i32.lt_s
br_if $B2
get_local $l1
i32.rem_s
set_local $l3
i32.const -1
i32.add
get_local $l3
br_if $L3
end
i32.const 1
i32.add
set_local $l0
get_local $l1
tee_local $l1
i32.const 50000
i32.ne
br_if $L0
br $B1
end
set_local $l4
get_local $l0
get_local $l4)
(table $T0 1 1 anyfunc)
(memory $memory (export "memory") 2)
(global $g0 (mut i32) (i32.const 66560))
(global $__heap_base (export "__heap_base") i32 (i32.const 66560))
(global $__data_end (export "__data_end") i32 (i32.const 1024)))

25. A Quick Look at the basics
Introducing WebAssembly Studio:

26. Stack-Based Programming

27. Stack-Based Programming
get_local $lhs 2

28. Stack-Based Programming
get_local $rhs 4 2

29. Stack-Based Programming
i32.add 4 6 2

30. Wasm vs. asm.js Byte code (no pre-compilation/script parsing)
Compact delivery (smaller file size)
Wasm-specific instruction set (not constrained by JavaScript)

31. Demo https://github.com/JeremyLikness/b lazor-wasm/tree/master/primes
Wasm and performance
Demo lazor-wasm/tree/master/primes

32. Wasm exposes memory via heaps
Byte: 1 2 3 4 5 6 7
Value
HEAP8 -1
HEAP16
-256
HEAP32
-32769
HEAPU8
128
HEAPU16
32768
HEAPU32
65537
HEAPF32
HEAPF64
4.669

33. JavaScript provides typed arrays
JavaScript Array
BYTES_PER_ELEMENT
HEAP8
Int8Array 1
HEAP16
Int16Array 2
HEAP32
Int32Array 4
HEAPU8
Uint8Array
HEAPU16
Uint16Array
HEAPU32
Uint32Array
HEAPF32
Float32Array
HEAPF64
Float64Array 8

34. Two ways to allocate memory in Wasm
unsigned char x[2] = 2 bytes allocated, access via HEAPU8
int x[2] = 8 bytes allocated, access via HEAP32
long x[2] = 8 bytes allocated, access via HEAP32
Wait, wuuuuut? Support for 64-bit, like winter, is coming
WebAssembly application:
Module.malloc(x) = x bytes allocated
Module.malloc(4 * Float32Array.BYTES_PER_ELEMENT) = 32 bytes allocated as 4 floating-point numbers on HEAPF32
JavaScript:

35. The Chaos Game
Demo

36. Automated Builds

37. Go from 2007 Statically typed and compiled language Memory safety
Garbage collection
Structural typing
Concurrency
Runtime built-in

38. Gophers went Wasm in 2018 “Operating System” = JavaScript
“Architecture” = Wasm
import “syscall/js”
js.Func type
Js.FuncOf for conversion
js.Global()
Get, Set, and Call

39. Demo https://github.com/Jere myLikness/plasmawasm go
Plasma in go
Demo myLikness/plasmawasm go

40. Automated Builds

41. Run a 1980s vm implemented in go on wasm
“Open the mailbox.”

42. A little Rust-y in 2010 C++ syntax Memory safety
Most ❤ in StackOverflow for past four years (yes, there are problems with the survey)
No null pointers
Reference counting for memory management
Explicit mutability
Type ownership

43. Rust 🦀 ➕ WebAssembly 🕸 No runtime so smaller Wasm sizes
wasm-pack for building Wasm from Rust
wasm-bindgen for automated interop (both ways!)
Rust 🦀 ➕ WebAssembly 🕸

44. Demo https://github.com/Jere myLikness/PlasmaWasm Rust
Plasma in Rust
Demo myLikness/PlasmaWasm Rust

45. The Rust Payload

46. .NET
…then in 2017

47. Wait. Why use .NET for browser apps?
Modern languages (C#, F#)
.NET ecosystem
Performance
Full-stack
Tools
Stable & mature

48. “Blazor” preview project
Full-stack web development with .NET via WebAssembly
No plugin or code transpilation
Works in all modern browsers including mobile browsers
Browser + Razor = Blazor!

49. @JeremyLikness

50. @JeremyLikness

51. @JeremyLikness

52. @JeremyLikness

53. @JeremyLikness

54. Blazor DEPENDENCY INJECTION SERVER-SIDE RENDERING COMPONENT MODEL
FORMS & VALIDATION
DEBUGGING
PUBLISHING
Blazor
ROUTING
LAYOUTS
UNIT TESTING
AUTO REBUILD
ASSEMBLY TRIMMING
JAVASCRIPT INTEROP
INTELLISENSE & TOOLING
COMPONENT PACKAGES

55. Demo: Blazor in action
.NET on Wasm with JavaScript interactions

56. Why WebAssembly?
Speed
Reach
Accessibility
Diversity

57. https://github.com/JeremyLikness/blazor-wasm
9/18/ :01 PM
@JeremyLikness
“No GitHub repositories were harmed in the making of this presentation.”
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.