La stessa mappa, tre modi: SVG, Rust e Flutter

EVnSteven ha raggiunto una posizione confortevole. La piattaforma è stabile e non richiede molta manutenzione, esattamente ciò che volevamo quando abbiamo iniziato: un piccolo sistema che funziona silenziosamente. Questo lascia un po’ di spazio per sperimentare, e ha lasciato ai nostri fondatori il tempo di avviare alcuni altri progetti, che troverete alla fine.

Quindi abbiamo fatto un esperimento. Abbiamo preso la mappa sulla nostra pagina principale e l’abbiamo ricostruita due volte: una volta in Rust compilato in WebAssembly, e una volta in Flutter. Questo articolo mette tutte e tre su una pagina e le confronta.

1. L’originale: SVG, CSS e un po’ di JavaScript

In termini semplici: questa è la mappa sulla nostra pagina principale. È costruita come il resto di una pagina web: un disegno fatto di forme che il tuo browser sa già come visualizzare e animare. È la più semplice delle tre, ed è quella che la maggior parte dei visitatori vede.

È un disegno SVG unico. Il browser esegue la maggior parte delle animazioni tramite CSS, e un piccolo script gestisce il resto.

A suo favore: non c’è una fase di build, quindi basta un template Hugo. È vettoriale, quindi rimane nitido a qualsiasi dimensione. Tutti e 44 i punti sono raggiungibili con la tastiera, ciascuno con un’etichetta per i lettori di schermo. E le poche parole sono tradotte in tutte le nostre lingue.

Il costo è il peso nella pagina. Il markup della mappa è di circa 107 KB (circa 30 KB compressi), e una volta in esecuzione ha circa 670 elementi e circa 200 animazioni CSS. La logica è anche difficile da testare: il timing vive all’interno delle keyframe CSS e di uno script nella pagina, quindi l’unico test è guardarla.

2. Rust e WebAssembly

In parole semplici: Rust è un linguaggio di programmazione noto per essere veloce e per intercettare molti errori prima che un programma venga eseguito. Qui abbiamo scritto il “cervello” della mappa in Rust, impacchettato in una forma compatta che i browser possono eseguire (chiamata WebAssembly), e gli abbiamo permesso di dipingere l’intera mappa da solo, come un pittore che ridipinge una tela molte volte al secondo. Per te sembra lo stesso.

L’intera mappa viene disegnata su un singolo canvas da Rust che è stato compilato in WebAssembly. Il codice Rust gestisce tutto il comportamento della mappa e ridisegna tutto ad ogni frame.

La parte che ci è piaciuta è che la logica è puro Rust senza nulla del browser al suo interno: la matematica per dove vanno le cose e quando cambiano, e il parser che legge il contorno della terra. Ha 13 test che vengono eseguiti in una frazione di secondo, e se il timing del ciclo è sbagliato, un test fallisce invece che qualcuno noti che sembra strano. Circa un terzo delle circa 1.070 righe di Rust sono quel nucleo testato (con i suoi test); il resto disegna sul canvas e gestisce gli eventi del mouse.

La pagina risulta molto leggera: un solo elemento canvas. Ma il download è più grande. Il modulo compilato è di circa 254 KB (circa 92 KB compressi) più circa 28 KB di JavaScript glue che lo strumento di build genera. E ci sono costi che sentiamo quando ci lavoriamo:

• Una toolchain. La compilazione richiede Rust, il target WebAssembly e uno strumento da riga di comando la cui versione deve corrispondere esattamente a quella della libreria. Il nostro script di compilazione esegue prima i test e si ferma se uno fallisce.
• Nessun accesso tramite tastiera o screen reader alle singole città. Una canvas è un’immagine. I 44 punti focalizzabili della versione SVG sono spariti.
• Solo inglese. Le etichette sono scritte all’interno del programma.
• Sfocatura. Il bordo dell’ombra morbida utilizza un filtro di sfocatura canvas, che non tutti i browser supportano. Non abbiamo testato Safari, dove il bordo potrebbe risultare netto.

3. Flutter

In parole semplici: Flutter è un toolkit di Google per costruire app che girano su telefoni, computer e web da un unico set di codice. Non usa i blocchi costitutivi della pagina web. Disegna tutto da sé. Qui la mappa è una piccola app mostrata all’interno di questa pagina, lo stesso toolkit che alimenta il nostro calcolatore di ricarica.

Dipinge la mappa con un pittore personalizzato, ed è mostrata qui in un riquadro. Flutter può anche costruire app per telefono e desktop dallo stesso codice, che è il suo argomento principale: scrivi la mappa una volta, falla girare in più posti.

È la stessa logica della mappa Rust, portata su Dart, con 11 test. Circa 1.100 righe inclusi i test. Flutter presenta ogni città ai lettori di schermo come un pulsante etichettato, cosa che la versione canvas non ha (non abbiamo verificato quanto funzioni bene con un vero lettore di schermo). È anche il download più grande: l’app è di circa 1,8 MB (circa 535 KB compressi). Il motore di disegno di Flutter è un ulteriore download, ma il sito condivide già una copia con la calcolatrice, quindi un visitatore che ha aperto la calcolatrice non lo scarica di nuovo. Il suo testo è impostato nel font del sito, Merriweather, che il browser scarica al momento dell’esecuzione.

Cosa abbiamo trovato

Un’ulteriore nota sulla velocità. Nel nostro controllo, sia la mappa SVG che la mappa Rust hanno funzionato al tasso di aggiornamento dello schermo (circa 120 fotogrammi al secondo sul display di prova), quindi il frame rate non le distingueva. Non abbiamo misurato il frame rate di Flutter, né abbiamo misurato l’uso della batteria o della CPU, quindi non possiamo dire quale sia più leggero su un telefono.

Cose che ci hanno sorpreso

Alcuni dettagli sono facili da sbagliare. I nostri primi cloni disegnavano la chiave e gli orologi a una quota fissa della mappa, quindi si riducevano su schermi piccoli e sembravano minuscoli rispetto all’originale. L’originale li dimensiona nell’unità di font della pagina stessa (rem, che cambia con la larghezza dello schermo). I cloni ora leggono quella dimensione dalla pagina. Anche gli orologi differiscono: le lancette dell’originale si muovono a passi di 15 minuti, mentre nelle versioni Rust e Flutter girano continuamente.

I fusi orari non erano integrati. Né Rust compilato in WebAssembly né Dart includono un database dei fusi orari che conosca “Asia/Dubai”. Entrambi chiedono invece al browser, tramite il suo servizio Intl integrato, che gestisce correttamente anche l’ora legale.

Tutti e tre condividono i loro input. Le mappe Rust e Flutter leggono la lista delle città e il contorno delle terre dalla pagina su cui si trovano, gli stessi dati usati dalla mappa SVG. Cambi una città e tutti e tre cambiano. Questo significa anche che le mappe possono funzionare solo su una pagina che li fornisca.

Flutter web ricorda. Flutter web installa la propria cache, quindi dopo una ricostruzione continuavamo a vedere la vecchia versione finché non l’abbiamo svuotata.

La nostra conclusione

La mappa SVG resta nella pagina principale. Per un disegno di questa dimensione è la più leggera, è accessibile, è tradotta e non necessita di nulla per essere costruita. Rust è il secondo classificato più interessante: se mai avessimo bisogno che la logica della mappa sia dimostrabilmente corretta, o di fare calcoli pesanti nel browser, un core Rust testato è un buon modo per farlo. Flutter ha senso se la mappa deve mai vivere all’interno di un’app Flutter.

Un esperimento non deve cambiare il prodotto per valere la pena di essere eseguito. Alla fine abbiamo ottenuto un quadro più chiaro di quanto costa ogni approccio, una descrizione testata di come si comporta la mappa e una pagina dove puoi vedere tutti e tre con i tuoi occhi.

Cosa stanno costruendo i nostri fondatori dopo

Una piattaforma stabile lascia tempo per altre idee. Oltre a EVnSteven, i nostri fondatori stanno lavorando a questi progetti:

Ride-hailing, in arrivo molto presto Kimem ↗ (opens in a new tab) Un servizio di ride-hailing per Bahir Dar, Etiopia, dal fondatore Mekonnen Alemu. I passeggeri vedono una stima della tariffa prima di prenotare, guardano il conducente più vicino avvicinarsi su una mappa e pagano la tariffa calcolata in contanti alla fine del viaggio.

No-profit, open source StrayCats ↗ (opens in a new tab) Un progetto di David per aiutare le persone che si prendono cura di gatti randagi, gatti di strada o qualsiasi gatto, anche se quel gatto dovesse essere un cane. È ancora nella fase di idea, senza un’app al momento, e David sarebbe felice di ricevere le tue idee e feedback. Dedicato a Saibo, 2010–2026.

Tracciamento contanti, gratuito, in arrivo presto Effectivo ↗ (opens in a new tab) Contabilità imperfetta con un tocco speciale, per chi usa contanti. Registra un acquisto con pochi tocchi, conta ciò che hai nel portafoglio e guarda indietro a ciò che è valso la pena. Il tocco speciale è che chi continua a usare contanti aiuta a mantenerli in circolazione per tutti gli altri. Gratuito e senza pubblicità, in arrivo su Android e iPhone, con una beta e una demo web già attive.