70 lines
3.2 KiB
Markdown
70 lines
3.2 KiB
Markdown
# Stack tecnologico
|
|
|
|
## Tecnologie principali
|
|
|
|
| Livello | Tecnologia | Perché |
|
|
|---------|-----------|--------|
|
|
| **Rendering** | Skia CanvasKit WASM | Stesso motore di Figma — prestazioni provate, accelerato GPU, pixel-perfetto |
|
|
| **Framework UI** | Vue 3 + VueUse | API di composizione reattiva, eccellente supporto TypeScript |
|
|
| **Componenti** | Reka UI | Primitivi UI headless e accessibili (tree, slider, ecc.) |
|
|
| **Stile** | Tailwind CSS 4 | Utility-first, iterazione rapida, tema scuro |
|
|
| **Layout** | Yoga WASM | Motore CSS flexbox di Meta, collaudato in React Native |
|
|
| **Formato file** | Kiwi binario + Zstd | Formato proprio di Figma — compatto, parsing veloce, compatibile .fig |
|
|
| **Collaborazione** | Trystero + Yjs | P2P WebRTC via segnalazione MQTT, sync CRDT, persistenza y-indexeddb |
|
|
| **Colore** | culori | Conversioni spazio colore (HSV, RGB, hex) |
|
|
| **IA/MCP** | MCP SDK + Hono | 90+ strumenti per il coding IA, trasporti stdio + HTTP |
|
|
| **JSX Transform** | Sucrase | 201 KB JSX → JS, sincrono, compatibile browser |
|
|
| **Eventi** | nanoevents | 108 byte, emettitore eventi tipizzato per mutazioni SceneGraph |
|
|
| **JSX Transform** | Sucrase | 201 KB JSX → JS, sincrono, compatibile browser |
|
|
| **Eventi** | nanoevents | 108 byte, emettitore eventi tipizzato per mutazioni SceneGraph |
|
|
| **Desktop** | Tauri v2 | ~5 MB app nativa (vs ~100 MB di Electron), backend Rust |
|
|
| **Build** | Vite 7 | HMR veloce, moduli ES nativi |
|
|
| **Test** | Playwright + bun:test | Regressione visiva (E2E) + test unitari veloci |
|
|
| **Linting** | oxlint | Basato su Rust, ordini di grandezza più veloce di ESLint |
|
|
| **Formattazione** | oxfmt | Formattatore basato su Rust |
|
|
| **Verifica tipi** | typescript-go (tsgo) | Implementazione nativa in Go del type checker TypeScript |
|
|
|
|
## Dipendenze principali
|
|
|
|
```json
|
|
{
|
|
"canvaskit-wasm": "^0.40.0",
|
|
"vue": "^3.5.29",
|
|
"yoga-layout": "npm:@open-pencil/yoga-layout@3.3.0-grid.2",
|
|
"nanoevents": "^9.1.0",
|
|
"sucrase": "^3.35.1",
|
|
"reka-ui": "^2.8.2",
|
|
"tailwindcss": "^4.2.1",
|
|
"culori": "^4.0.2",
|
|
"fzstd": "^0.1.1",
|
|
"fflate": "^0.8.2",
|
|
"trystero": "^0.20.0",
|
|
"yjs": "^13.6.24",
|
|
"y-indexeddb": "^9.0.12"
|
|
}
|
|
```
|
|
|
|
## Perché non...
|
|
|
|
### Perché non il rendering SVG?
|
|
|
|
SVG è lento per documenti complessi. Ogni nodo è un elemento DOM — 10.000 nodi significano 10.000 elementi DOM con overhead di layout, disegno e composizione. CanvasKit disegna tutto su una singola superficie GPU.
|
|
|
|
### Perché non Electron (come Figma desktop)?
|
|
|
|
Tauri v2 usa il webview di sistema (~5 MB) invece di incorporare Chromium (~100 MB). Il backend Rust fornisce prestazioni native per I/O file e integrazione di sistema.
|
|
|
|
### Perché non React?
|
|
|
|
Il progetto è migrato da React a Vue 3 nelle fasi iniziali. Il sistema di reattività di Vue e i composables VueUse si sono rivelati più ergonomici.
|
|
|
|
### Perché non un motore di layout personalizzato?
|
|
|
|
Yoga è mantenuto da Meta, collaudato su miliardi di dispositivi React Native e implementa la specifica CSS flexbox.
|
|
|
|
## Tecnologie pianificate
|
|
|
|
| Tecnologia | Scopo | Fase |
|
|
|-----------|---------|-------|
|
|
| CSS Grid in Yoga | Auto layout basato su griglia | ✅ Incluso tramite [fork Yoga](https://github.com/open-pencil/yoga/tree/grid) (`@open-pencil/yoga-layout`) |
|