// 2010년의 웹 개발자들이 직면한 현실

// JavaScript로 게임 만들기
function gameLoop() {
  // 물리 엔진 계산
  for (let i = 0; i < particles.length; i++) {
    particles[i].x += particles[i].vx;
    particles[i].y += particles[i].vy;
    // 충돌 감지...
  }
  
  // 렌더링
  ctx.clearRect(0, 0, width, height);
  for (let particle of particles) {
    ctx.fillRect(particle.x, particle.y, 5, 5);
  }
  
  requestAnimationFrame(gameLoop);
}

// 결과: 30 FPS도 힘들다
// C++로 만든 네이티브 게임: 60 FPS 여유롭게
// 격차가 너무 크다...

// Flash ActionScript 3.0
// JavaScript보다 훨씬 빠르고 강력했음

package {
  import flash.display.Sprite;
  import flash.events.Event;
  
  public class Game extends Sprite {
    private var particles:Vector.<Particle>;
    
    public function Game() {
      particles = new Vector.<Particle>();
      addEventListener(Event.ENTER_FRAME, gameLoop);
    }
    
    private function gameLoop(e:Event):void {
      // 물리 엔진 계산
      // JavaScript보다 10배 빠름
      for each (var p:Particle in particles) {
        p.update();
      }
    }
  }
}

<!-- Flash 없이 가능해진 것들 -->

<!-- 비디오 재생 -->
<video src="movie.mp4" controls></video>

<!-- 캔버스 그래픽 -->
<canvas id="game"></canvas>
<script>
  const ctx = canvas.getContext('2d');
  // 그리기...
</script>

<!-- 오디오 재생 -->
<audio src="music.mp3" controls></audio>

<!-- WebGL (3D 그래픽) -->
<canvas id="webgl"></canvas>
<script>
  const gl = canvas.getContext('webgl');
  // 3D 렌더링...
</script>

// asm.js: JavaScript의 특수한 부집합

function add(x, y) {
  "use asm";  // asm.js 모드
  
  // 타입 어노테이션 (비트 연산으로 표현)
  x = x | 0;  // x는 32비트 정수
  y = y | 0;  // y도 32비트 정수
  
  return (x + y) | 0;  // 결과도 32비트 정수
}

// JavaScript이지만 AOT(Ahead-of-Time) 컴파일 가능
// 거의 네이티브급 성능

# C/C++ 코드를 asm.js로 컴파일

# game.cpp
emcc game.cpp -o game.js -O3

# 결과: game.js (asm.js 코드)
# 브라우저에서 네이티브급 성능으로 실행!

// Emscripten이 생성한 asm.js 코드 (간략화)

function Module(stdlib, foreign, heap) {
  "use asm";
  
  var HEAP32 = new stdlib.Int32Array(heap);
  var imul = stdlib.Math.imul;
  
  function _compute(x, y) {
    x = x | 0;
    y = y | 0;
    var result = 0;
    
    // C++ 코드가 asm.js로 변환됨
    result = imul(x, y) | 0;
    HEAP32[0] = result;
    
    return result | 0;
  }
  
  return { compute: _compute };
}

// 복잡하지만 빠름!

;; WebAssembly Text Format (WAT)
;; 사람이 읽을 수 있는 형태

(module
  (func $add (param $x i32) (param $y i32) (result i32)
    local.get $x
    local.get $y
    i32.add
  )
  (export "add" (func $add))
)

;; 이것이 바이너리로 컴파일됨 (.wasm)
;; JavaScript에서 호출 가능

// JavaScript에서 WebAssembly 사용

// 1. WASM 로드
const response = await fetch('module.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.instantiate(buffer);

// 2. WASM 함수 호출
const result = module.instance.exports.add(5, 3);
console.log(result);  // 8

// 3. 메모리 공유
const memory = module.instance.exports.memory;
const data = new Uint8Array(memory.buffer);
// JavaScript와 WASM이 같은 메모리 사용!

// C++ 코드
#include <emscripten.h>

extern "C" {
  EMSCRIPTEN_KEEPALIVE
  int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

// 컴파일
// emcc fibonacci.cpp -o fibonacci.wasm -O3

// JavaScript에서 호출
const wasm = await WebAssembly.instantiateStreaming(
  fetch('fibonacci.wasm')
);

console.log(wasm.instance.exports.fibonacci(40));
// JavaScript로 하면 느림
// WASM으로 하면 훨씬 빠름!

// Unity 게임을 WebAssembly로 로드

createUnityInstance(canvas, {
  dataUrl: "Build/game.data",
  frameworkUrl: "Build/game.framework.js",
  codeUrl: "Build/game.wasm",  // WebAssembly!
  streamingAssetsUrl: "StreamingAssets",
}).then((unityInstance) => {
  // 게임 실행
});

// 수백 MB의 C++ 코드가 브라우저에서 실행됨

// FFmpeg을 브라우저에서 실행!
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();

// 비디오 변환 (모두 브라우저 내에서)
ffmpeg.FS('writeFile', 'input.avi', await fetchFile('/input.avi'));
await ffmpeg.run('-i', 'input.avi', 'output.mp4');
const data = ffmpeg.FS('readFile', 'output.mp4');

// 서버에 업로드할 필요 없음!
// 모든 처리가 클라이언트에서

// sql.js: SQLite의 WebAssembly 포트
import initSqlJs from 'sql.js';

const SQL = await initSqlJs({
  locateFile: file => `https://sql.js.org/dist/${file}`
});

const db = new SQL.Database();

// 테이블 생성
db.run("CREATE TABLE users (id INTEGER, name TEXT)");
db.run("INSERT INTO users VALUES (1, 'Alice')");

// 쿼리
const result = db.exec("SELECT * FROM users");
console.log(result);

// 완전한 SQL 데이터베이스가 브라우저 안에서!

# Pyodide: 브라우저에서 Python!
from js import document
import numpy as np
import pandas as pd

# NumPy 사용
data = np.random.rand(100, 100)
result = np.linalg.inv(data)

# Pandas 사용
df = pd.DataFrame({'x': [1, 2, 3], 'y': [4, 5, 6]})
print(df.describe())

# DOM 조작
document.getElementById('output').innerHTML = str(result)

# 서버 없이 브라우저에서 데이터 과학!

// WebAssembly로 가속화된 암호화

// 1. Bitcoin mining (교육용)
const wasm = await WebAssembly.instantiateStreaming(
  fetch('sha256.wasm')
);

function mineBlock(data, difficulty) {
  let nonce = 0;
  while (true) {
    const hash = wasm.instance.exports.sha256(data, nonce);
    if (hash < difficulty) {
      return nonce;
    }
    nonce++;
  }
}

// 2. 영지식 증명 (Zero-Knowledge Proofs)
// zkSNARKs 계산을 WebAssembly로 가속

// 3. 지갑 애플리케이션
// 키 생성, 서명 등을 안전하고 빠르게

// Cloudflare Worker with Rust + WebAssembly

// Rust 코드
#[wasm_bindgen]
pub fn process_request(data: &str) -> String {
  // 복잡한 처리...
  format!("Processed: {}", data)
}

// Worker 코드 (JavaScript)
import { process_request } from './module.wasm';

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const result = process_request(await request.text());
  return new Response(result);
}

// 전 세계 엣지에서 Rust 코드 실행!

// Rust 코드를 WASI로 컴파일
use std::fs::File;
use std::io::Write;

fn main() {
  let mut file = File::create("hello.txt").unwrap();
  file.write_all(b"Hello, WASI!").unwrap();
}

// 컴파일
// rustc --target wasm32-wasi main.rs

// 실행 (브라우저가 아닌 런타임에서)
// wasmtime main.wasm

;; SIMD 예제 (WebAssembly 2.0)
(module
  (func $add_vectors (param $a v128) (param $b v128) (result v128)
    local.get $a
    local.get $b
    i32x4.add  ;; 4개의 32비트 정수를 동시에 더함
  )
)

;; 한 번에 4개의 연산 = 4배 빠름!

// WebAssembly Interface Type (WIT)

interface image-processor {
  record image {
    width: u32,
    height: u32,
    data: list<u8>,
  }
  
  blur: func(img: image, radius: u32) -> image
  sharpen: func(img: image, amount: float32) -> image
}

// Rust, C++, Go 등 어떤 언어로든 구현 가능
// 다른 언어에서도 사용 가능
// 진정한 "Write Once, Use Everywhere"

// 완벽한 조합

// UI와 접착 코드: JavaScript
import { processImage } from './image-processor.wasm';

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const imageData = ctx.getImageData(0, 0, width, height);

// 고성능 처리: WebAssembly
const processed = processImage(
  imageData.data,
  imageData.width,
  imageData.height,
  filters
);

// 결과 표시: JavaScript
ctx.putImageData(processed, 0, 0);

// 각자 잘하는 일을 하는 것

# 다양한 플랫폼에서 동일한 WASM 바이너리 실행

# 브라우저
<script src="app.wasm"></script>

# Cloudflare Workers (엣지)
wrangler publish

# Docker 대신 (WASI)
wasmtime app.wasm

# 임베디드 시스템
wasm3 app.wasm

# 블록체인 스마트 컨트랙트
near deploy app.wasm

# 하나의 바이너리, 모든 플랫폼!