Arhitektura modernih web aplikacija – Deo 10: Arhitektura budućnosti: WebAssembly, AI-driven apps, PWA i trendovi 2025–2030

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

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

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

wasm-pack build --target web

import { useState } from 'react';
import init, { fib } from './pkg/wasm_fib.js';

export default function WasmDemo() {
  const [n, setN] = useState(30);
  const [result, setResult] = useState<number | null>(null);

  const calculate = async () => {
    await init(); // Učitaj WASM
    const start = performance.now();
    const res = fib(n);
    const end = performance.now();
    setResult(res);
    console.log(`WASM fib(${n}) = ${res} za ${(end - start).toFixed(2)}ms`);
  };

  return (
    <div>
      <input type="number" value={n} onChange={e => setN(+e.target.value)} />
      <button onClick={calculate}>Izračunaj Fibonacci</button>
      {result && <p>Rezultat: {result}</p>}
    </div>
  );
}

// worker.ts
interface Env {
  RECOMMENDATIONS: KVNamespace;
}

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url);
    const userId = url.searchParams.get('user');

    // 1. Dohvati iz KV (Edge keš)
    let recs = await env.RECOMMENDATIONS.get(`rec:${userId}`);
    if (!recs) {
      // 2. Ako nema – pozovi AI model (HuggingFace, OpenAI)
      const aiRes = await fetch('https://api.openai.com/v1/embeddings', {
        method: 'POST',
        headers: { Authorization: `Bearer ${OPENAI_KEY}` },
        body: JSON.stringify({ input: `User ${userId} likes JS, React` })
      });
      const embedding = await aiRes.json();
      // 3. Sačuvaj u KV (TTL 1h)
      recs = JSON.stringify(embedding);
      await env.RECOMMENDATIONS.put(`rec:${userId}`, recs, { expirationTtl: 3600 });
    }

    return new Response(recs, { headers: { 'Content-Type': 'application/json' } });
  }
};

// next.config.js
const withPWA = require('next-pwa')({
  dest: 'public',
  disable: process.env.NODE_ENV === 'development'
});

module.exports = withPWA({
  // tvoj config
});

// public/manifest.json
{
  "name": "ITNetwork App",
  "short_name": "ITN",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

Homepage → SSG
Blog → ISR (revalidate: 60)
Dashboard → SSR
API → Serverless/Edge