JavaScript przez 24 lata był jedynym językiem programowania działającym natywnie w przeglądarkach. WebAssembly przełamuje ten monopol, otwierając drzwi do uruchamiania kodu napisanego w dowolnym języku bezpośrednio w przeglądarce. Czy to oznacza koniec ery JavaScript? Niekoniecznie, ale na pewno rozpoczyna nową erę web developmentu.

Dlaczego WebAssembly to przełom?

Web aplikacje zawsze musiały się mierzyć z ograniczeniami JavaScript – interpretowany język, który nie zawsze radzi sobie z wymagającymi obliczeniowo zadaniami. WebAssembly (WASM) to kompilowany format binarny, który działa w przeglądarce z wydajnością zbliżoną do aplikacji natywnych.

Czym jest WebAssembly?

WebAssembly to low-level format binarny zaprojektowany jako target kompilacji dla języków wysokiego poziomu. Można go uruchomić w przeglądarce obok JavaScript, wykorzystując te same APIs i DOM.

### Kluczowe cechy WebAssembly:

– **Near-native performance:** Wydajność zbliżona do aplikacji natywnych
– **Language agnostic:** Wspiera C/C++, Rust, Go i inne języki
– **Safe execution:** Działa w sandboxie przeglądarki
– **Portable:** Jeden kod działa na wszystkich platformach
– **Interoperability:** Współpracuje z JavaScript

JavaScript vs WebAssembly – różnice

Pierwszy program WebAssembly

Stwórzmy prosty program, który dodaje dwie liczby. Użyjemy C i skompilujemy go do WebAssembly.

### Instalacja Emscripten

Emscripten to główny kompilator z C/C++ do WebAssembly:

# Pobranie Emscripten
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# Instalacja latest version
./emsdk install latest
./emsdk activate latest

# Ustawienie zmiennych środowiskowych
source ./emsdk_env.sh

### Kod C do kompilacji

// math.c
#include 

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
    return a + b;
}

EMSCRIPTEN_KEEPALIVE
int multiply(int a, int b) {
    return a * b;
}

EMSCRIPTEN_KEEPALIVE
double power(double base, double exponent) {
    double result = 1.0;
    for (int i = 0; i < exponent; i++) {
        result *= base;
    }
    return result;
}

### Kompilacja do WebAssembly

emcc math.c -o math.js -s WASM=1 -s EXPORTED_RUNTIME_METHODS='["cwrap"]'

Ta komenda wygeneruje dwa pliki:
- `math.wasm` - binarny moduł WebAssembly
- `math.js` - wrapper JavaScript do ładowania WASM

### Użycie w HTML

    


    
WebAssembly Calculator
    Test WASM Functions
    
   

Interoperabilność z JavaScript

WebAssembly nie zastępuje JavaScript - współpracuje z nim. JavaScript może wywoływać funkcje WASM i vice versa.

### Przekazywanie danych między JS a WASM

// Liczby są łatwe
const result = wasmModule.add(10, 20);

// Stringi wymagają więcej pracy
function callWasmWithString(str) {
    // Alokacja pamięci w WASM
    const buffer = Module._malloc(str.length + 1);
    Module.stringToUTF8(str, buffer, str.length + 1);
    
    // Wywołanie funkcji WASM
    const result = wasmModule.processString(buffer);
    
    // Zwolnienie pamięci
    Module._free(buffer);
    
    return result;
}

Praktyczne zastosowania WebAssembly

### Gdzie WebAssembly ma sens w 2019:

**1. Obliczenia naukowe**
- Symulacje fizyczne
- Przetwarzanie sygnałów
- Analiza danych

**2. Gry**
- Porty engine'ów jak Unity
- Emulatory konsol
- Gry 3D z WebGL

**3. Multimedia**
- Edycja zdjęć/wideo
- Codeki audio/video
- Real-time audio processing

**4. Kryptografia**
- Szyfrowanie/deszyfrowanie
- Hashing
- Digital signatures

### Przykłady z prawdziwego świata:

Ograniczenia WebAssembly w 2019

### Co jeszcze nie działa:
- **Brak dostępu do DOM:** Tylko przez JavaScript
- **No threads:** Wielowątkowość w planach
- **Garbage Collection:** Każdy język musi zarządzać pamięcią sam
- **Debugging:** Narzędzia dopiero się rozwijają
- **Size overhead:** Emscripten generuje duże pliki

Alternatywne języki dla WebAssembly

### Rust + wasm-pack

// lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

# Kompilacja z wasm-pack
wasm-pack build --target web

Przyszłość WebAssembly

### Co nas czeka w najbliższych latach:

**Threading support:** Wielowątkowość z SharedArrayBuffer
**WASI:** WebAssembly System Interface - WASM poza przeglądarką
**Garbage Collection:** Wsparcie dla języków z GC
**DOM access:** Bezpośredni dostęp do DOM APIs
**Debugging:** Lepsze narzędzia developerskie

Przydatne zasoby:

• Oficjalna strona WebAssembly
• Emscripten Documentation
• Awesome WebAssembly - curated list
• Rust and WebAssembly Book

WebAssembly to jedna z najbardziej ekscytujących technologii w web developmencie od lat. Choć nadal jest we wczesnej fazie rozwoju, już teraz otwiera niesamowite możliwości przeniesienia high-performance aplikacji do przeglądarki. Czy to przyszłość web developmentu? Czas pokaże, ale jedno jest pewne - WASM zmienia zasady gry.

Jakie są Twoje doświadczenia z WebAssembly? Czy widzisz potencjał dla swoich projektów?