WebAssembly lets us write blazing-fast web code using our programming language of choice, bridge disparate ecosystems, and utilize them inside the browser. However, WebAssembly does not intend to replace JavaScript - but rather integrate with it. The future web app is a hybrid of HTML, CSS, JavaScript, and WebAssembly, taking the best of all worlds. In this session, we’ll examine the relationship between WebAssembly, JavaScript, TypeScript, the browser, and other hosting environments.

1. We Come In Peace:
Hybrid Development with WASM
Maayan Hanin
Software Architect
Backend Practice Lead @ CodeValue
maayanh@codevalue.net
@MA_Hanin

2. About Me
Maayan Hanin
 Software Architect, Developer, Debugger
 Backend Practice Lead
 .NET, Rust, Go, JS/TS
 @ CodeValue since 2017
2

3. Agenda
 What is WebAssembly?
 What is it good for?
 WASM adoption
 Hybrid development with WASM
 Demos!
 Ending notes
3

4. WebAssembly
 The 4th standard language supported by browsers
 Machine language
 Binary format
 Near-native performance
 Integrated into the browser engine itself
 Not a plugin: not another Flash or Silverlight
 Safely sandboxed
 The real deal!
4

5. Writing WASM Code
 No-one really writes WebAssembly code directly
 Various programming languages with WASM support
 Different degrees of maturity
 Compiled to WASM
 Notably: C, C++, Rust, Go
5

6. E.g. Concrete Machine
Implementations (x64 CPU)
Compiler Toolchain
Compiling C++ to x64
6
C++
Frontend
C++ Optimizer
IR x64
Backend
IR
x64
Machine
Code
Instruction Set
Architecture
x64

7. E.g. Concrete Machine
Implementations (arm32 CPU)
Compiler Toolchain
Compiling C++ to arm32
7
C++
Frontend
C++ Optimizer
IR arm32
Backend
IR
arm32
Machine
Code
Instruction Set
Architecture
arm32

8. Compiler Toolchain
Compiling Java to Java Bytecode
8
Java
Frontend
Java Optimizer
IR
Java
Bytecode
Backend
IR
Java
Bytecode
(JVM machine
code)
or Scala, Kotlin, Clojure…
Instruction Set
Architecture
E.g. Concrete Machine
Implementations (JVM)
Java
Bytecode

9. E.g. Concrete Machine
Implementations (x64 CPU)
Compiler Toolchain
Compiling C++ to x64
9
C++
Frontend
C++ Optimizer
IR x64
Backend
IR
x64
Machine
Code
Instruction Set
Architecture
x64

10. Compiler Toolchain
Compiling C++ to WASM
10
C++
Frontend
C++ Optimizer
IR IR
Instruction Set
Architecture
E.g. Concrete Machine
Implementations (WASM VM)
WASM
Bytecode
WASM
Backend
WASM
Machine
Code

11. WASM Use Cases
 Bridging Ecosystems
11
C / C++
Graphics
3D
Audio Video
Cryptography
Data Structures
Browser / NodeJS / Deno
JavaScript

12. WASM Use Cases
 Bridging Ecosystems
 Porting and Reuse
12
Product
Library
Code

13. WASM Use Cases
 Bridging Ecosystems
 Porting and Reuse
 Performance
13
Browser / NodeJS / Deno / other host / …
JavaScript
(or Python, C#, Java…) WASM
Low Overhead
Control
Determinism
Precision
Throughput Low latency
Low Energy
Footprint

14. WASM Use Cases
 Bridging Ecosystems
 Porting and Reuse
 Performance
 Extensibility
14
Plugin SDK
C++
Plugin SDK
Rust
Plugin SDK
Go
Plugin SDK
AssemblyScript
WASM VM
Plugin1
C++
Plugin2
Rust
Plugin3
Go
Plugin4
AsmScript
Plugin1
WASM VM
Plugin2
WASM VM
Plugin3
WASM VM
Plugin4
Core Application

15. WASM Adoption, 2021 Q2
15
WASM

16. WASM Adoption
 Porting & New Developments
16

17. WASM Adoption
 Porting & New Developments
 Frameworks
17

18. WASM Adoption
 Porting & New Developments
 Frameworks
 Language Support & Bindings
18

19. WASM Adoption
 Porting & New Developments
 Frameworks
 Language Support & Bindings
 Runtimes & Hosting
19
Wasmtim
e

20. Recap: JavaScript’s Golden Age
 2007 – Atwoo’d Law
 2009
 Node.js
 Apache Cordova
 2010 - AngularJS
 2012 - TypeScript
 2013 – Electron
 2014 – AWS Lambda
20
“Any application that can be written in JavaScript,
will eventually be written in JavaScript”
-Jeff Atwood

21. Now
 Backend languages in the browser
 Backend languages in Node.js
 WASM-based UI frameworks
 WASM in serverless
 WASM in CLI tools
21

22. 22
JavaScript Developers
Seeing WebAssembly Adoption

23. 23
C
Rust
We Come In Peace
Go Planet
Web

24. We Come In Peace
 WASM is designed to run alongside JavaScript!
 Not meant to replace it!
 “don’t break the web”
 Not all projects are greenfield
 Existing codebases
 Existing ecosystem
 Existing knowledge, experience and skills
 Hybrid development
 HTML + CSS + JavaScript + WASM
 Get the best of both worlds
 Co-existence
 Integration
 Symbiosis
24

25. Demo
Hybrid
Development
25
WASM Source: Rust
Hosting: Browser

26. …and there is so much more!
 WebSockets
 WebRTC
 WebGL
 Canvas
 Iterators
 Static Methods
 Variadic Parameters
 More TypeScript integrations
26

27. Under the Hood
 WASM Runtime Implementation
 WASM Runtime Integration
 Module Loading & Instantiation
 Function Imports & Exports
 Memory Management
 Host ABI
 Data Types Marshalling
 Language Constructs Translation
 Language-Specific Libraries
 Binding Code Generation
 Type Definitions
27

28. Hybrid Development: Are We There Yet?
Browsers
Server-side JavaScript platforms
Node.js, Deno
 WASM-based extensibility
 Envoy, Vector
 DIY WASM VM embedding
28

29. Takeaways
 WASM is coming here
 Not a successor to JavaScript
 Designed with hybrid development in mind
 The things you want to do – you probably can
 Don’t fear it – embrace it!
 Let there be peace in the galaxy
29

30. Resources
 Code
 https://github.com/Spoonbender/wasm-hybrid-development
 Demo
 https://wasm.maayan.tech
 WASM
 https://webassembly.org/
 Rust
 https://www.rust-lang.org/
 WASM bindings in Rust
 https://rustwasm.github.io/docs/wasm-bindgen/
30

31. Q
A
31

32. Maayan Hanin
Software Architect
Backend Practice Lead
maayanh@codevalue.net
@MA_Hanin