Speeding up my Web App with WebAssembly

×

WebAssembly ? 🤔

In a nutshell 🌰

@MartinaKraus11

  • Low-Level Bytecode for the Web
  • V1 shipped as Minimum Viable Product
  • Fast, efficient, portable
  • Uses existing sandboxing tools
  • No Plugin needed
  • Standard and specification through W3C

 

 

 

So JavaScript will be replaced, finally? 🥳

WebAssembly and JavaScript

@MartinaKraus11

"WebAssembly is designed to complement JavaScript

not replace it"

StateOfJS 2021

@MartinaKraus11

7.2%

Ok so how can we benefit from WASM? 🤔

GDE in Angular, Web Technologies

 

Women Techmakers Ambassador

 

Trainer and Consultant

@MartinaKraus11

That's Me

Martina Kraus

martinakraus

@MartinaKraus11

WebAssembly for Web Developers

@MartinaKraus11

  1. Performance a.k.a "it needs to be fast"
  2. Filling the gaps in the JavaScript language

 

 

 

DISCLAIMER

Performance

@MartinaKraus11

Runtime performance

(No I/O, databases, HTTP rendering, network traffic)

 

  • JavaScript
  • WebAssembly

 

 

Execution of JavaScript inside the Browser

@MartinaKraus11

Source Code

Parser

AST

Interpreter / Compiler

Machine Code

Inside V8

@MartinaKraus11

https://itenium.be/blog/javascript/webassembly/

https://hacks.mozilla.org/

2018/01/oxidizing-source

-maps-with-rust-and-webassembly/

But how?

 

The C++ Toolchain for WebAssembly

asm.js

@MartinaKraus11

Emscripten

@MartinaKraus11

  • Drop in Replacement: Cross compiles C/ C++ with LLVM to bytecode and then to wasm
  • emulates whole file system if necessary
  • using WebGL to pretend to be OpenGL
  • Support standard C++ Libs (import via build step)
  • Extends LLVM optimizations with JavaScript optimizations

 

 

 

Toolchain

@MartinaKraus11

.cpp

.c

Ports (WebGL)

.js

.html

.wasm

Input/ Output-Files

Emscripten-Tools

Clang/ LLVM

(Fastcomp)

Emscripten Compiler Frontend

(emcc)

Emscripten SDK Manager

(emsdk)

Build pipeline

DEMO

I need to learn C++ now?

Using existing C++ Code

@MartinaKraus11

 

  • JavaScript has many npm packages but sometimes not enough (and not the best quality)
  • Find libs on other languages (C++ / Rust)

 

 

 

The future of

WebAssembly

@MartinaKraus11

WebAssembly Threads

  • One of the most important performance additions
  • using POSIX Threads to run parts of your code in parallel
  • a combination of multithreading paradigms on the web:
    • Web Worker as a WebAssembly Thread
    • SharedArrayBuffer for a shared memory

 

@MartinaKraus11

SIMD

  • Single Instruction, Multiple Data
  • simultaneously performing same operation on multiple data elements
  • compute intensive applications (image processors, audio codecs) will take advantage of SIMD for better peformance

 

@MartinaKraus11

  • WebAssembly ships C++ (and other languages) to the web
  • WASM-binaries faster to download and execute
  • The peak performance of WASM and JavaScript is nearly the same
    • ​but this will change with WebAssembly Threads and SIMD
  • But it's easier with WASM to stay at the "high performance" path
  • Use the ecosystem from other languages too, compile them to WASM

 

Summary

kraus.martina.m@gmail.com

@MartinaKraus11

martina-kraus.io

Slides: https://slides.com/martinakraus/speed-with-wasm

Repo: https://github.com/martinakraus/WebAssembly_Demo

Thank you !!!

@MartinaKraus11


 

 

Links

More with CMake/ Makefiles

@MartinaKraus11

A Makefile defines set of tasks to be executed:

 

Configuration and compilation:

A Makefile defines set of tasks to be executed

 

A Makefile defines set of tasks to be executed

 

Made with Slides.com