###### tags: `WebHack#29`

# Native goes Web: Create powerful browser apps with WebAssembly

I am a frontend engineer from U-Next.

#### Warmup Quiz

Q: The W3C made which important press release on Dec 5.
A: WebAssembly becoming official web language

### Bringing mangas to your browser (Background story)

* Unext manga can be viewed in both desktop browsers and mobile browsers
* Unext books: Major release in Mar 2019, contents includes mangas, novels, etc.
* Unext manga book viewer is powered by wasm.

### Short retrospective about native code in web

#### Technical challenge

* Each page is a **high resolution** bitmap
* Bitmap is huge
* JPEG has high convertion rate but performs bad in **text**
* webp is low text artifacts and high compression but not supported by most browsers

### Why WebAssembly matters

##### Solution Before WASM

* asm.js is pre-ancestor of wasm.
* Using libwebp with asm.js (like following figure)

Java Applet / Silverlight / ActiveX has a lot of security issues and mobile browsers don't support them.

* Why wasm is fast? -> static data type...

* Abstract syntax tree:
Parse human readable string to machine readable


#### How to load WASM from JS

const importObject = { imports: {} };
WebAssembly.instantiateStreaming(
    fetch("./polysample.wasm"),
    importObject
).then(...)

### Tool box
* WebAssembly Binary Toolkit -> a set of command line tool
* [Binaryen](https://github.com/WebAssembly/binaryen)
* [Emscripten](https://github.com/emscripten-core/emscripten)
* [Rust compiler (target: wasm32-unknown-unknown)](https://www.rust-lang.org/what/wasm)
* [Blazor](https://github.com/aspnet/Blazor)

### WebAssembly with Rust in action

#### Demo
- Image Manipulation - Don't need Adobes(ex.photoshop) anymore
- Adjust contrast (loops through every pixels to calculate pixels)
- Applying the contrast data to `canvas` (each canvas is 4 bytes)

##### Rust terms for JS developers

- `Cargo.toml` is like `package.json` in Node.js, which list the required packages

##### Comparison between browsers doing a 2M image contrast

| Browsers \ Features | Without WASM | With WASM |
|---------------------|--------------|-----------|
| Chrome | 125ms | 80~100ms |
| Firefox | 180ms | 68ms |
| Safari | 2441ms 😱 | 76ms |

### QA

Q1. Benchmark of module size and an it reduce the downloading file size

A1. WASM is a compressed module so it can be very small.

Q2-1. No supprt for 64bits heaps

A2-1. Even book viewer is not a large project; it's like a small module so I can't give a good answer.

Q2-2. I used emscripten for one of my project. For C++ devs, we know how to debug with it but Wasm is lack of it. Have you have a big project exprience of using WASM?

A2-2. Current WASM is a MVP (Minimum Valueable Product) so it's a good start but still not so performant yet.

Q3. There is a Wasm version windows 2000.
A3. Thank you for your sharing!

Ref: https://www.reddit.com/r/webdev/comments/98ufca/windows_2000_emulated_in_webassembly/