Riepilogo
SVGOMG: un frontend responsive, bello e materico per SVGO.
Cosa ci piace?
Realizzato dal nostro Jake Archibald, SVGOMG è un esempio quasi perfetto di uno strumento completamente adattabile e capace scritto con tecnologie web. Presenta un'estetica raffinata in Material Design, ServiceWorker garantisce che l'app si carichi rapidamente e sia disponibile offline e le transizioni sono fluide sui dispositivi mobili.
Possibili miglioramenti
L'unico vero difetto che abbiamo riscontrato è che l'esperienza utente iniziale è confusa a causa dell'assenza dell'interfaccia utente principale. A parte questo, ottimo lavoro.
Intervista a Jake Archibald
Perché il web?
Pigrizia. Pigrizia totale. Non sono esperto nello sviluppo di app native per Windows, OSX o nella creazione di app native per iOS, Android, Windows Phone o Linux. Tuttavia, posso occuparmi del web e questo insieme di competenze mi ha permesso di creare una sola volta qualcosa che funzionasse su tutte queste piattaforme.
Cosa ha funzionato molto bene durante lo sviluppo?
Sono davvero soddisfatto delle prestazioni. Mi assicuro che la pagina venga visualizzata prima che JS sia disponibile. Infatti, viene eseguito il primo rendering con solo 5000 caratteri di codice HTML con alcuni CSS e SVG in linea. Gli script e il CSS principali vengono caricati tutti in background. Ciò significa che il sito sembra caricarsi in 1, 5 secondi anche su 3G con una cache vuota e la maggior parte del tempo è occupata da DNS e SSL.
La schermata di apertura è molto semplice, quindi non è stato difficile realizzarla in 5K. Mi infastidisce molto che così tanti siti aspettino JS per il primo rendering, alcuni addirittura richiedono al proprio JS di effettuare ulteriori richieste prima del rendering. Questo spinge il tempo di rendering 3G verso i 10 secondi. Come utente di dispositivi mobili, lo so bene: non lo tollererei.
Il codice JS principale è di 15 KB, ma non include le parti che analizzano e riducono al minimo il codice SVG, che viene caricato come fase aggiuntiva in background. È fantastico perché l'interattività viene visualizzata molto rapidamente e l'utente non nota il caricamento extra. Se l'utente riesce a selezionare un SVG prima che lo script sia disponibile, il caricamento dello script sembra far parte del tempo di elaborazione.
Ho anche utilizzato ServiceWorker per fare in modo che l'intera app funzioni offline. Lavorare offline è una funzionalità molto interessante, ma la uso soprattutto per il rendimento. Le visite successive a SVGOMG vengono visualizzate quasi istantaneamente, indipendentemente dalla connessione dell'utente. Date le variazioni nella connettività mobile, è davvero importante.
Se potessi avere un'API per migliorare la tua app, quale sarebbe?
Ho utilizzato Babel per poter utilizzare le funzionalità future di JavaScript. Sarebbe fantastico avere alcune di queste funzionalità disponibili nativamente nella piattaforma. Nello specifico, async/await, funzioni freccia, valori predefiniti degli argomenti e scomposizione.
Ho dovuto utilizzare una libreria per comprimere l'output con gzip per scoprire le dimensioni compresse. L'utilizzo di una libreria per questo è un po' fastidioso perché il codice è già nel browser per le cose HTTP, ma non esiste un'API. Idealmente dovrebbe essere un tipo di stream di trasformazione in modo da poter contare le dimensioni dell'output senza dover memorizzare l'intero insieme in memoria.