Case study - HTML5 in deviantART muro

Mike Dewey
Mike Dewey

Introduzione

Il 7 agosto 2010 deviantART ha festeggiato il suo decimo compleanno. Abbiamo festeggiato il nostro compleanno lanciando uno strumento di disegno HTML5 chiamato deviantART muro. Lo strumento può essere utilizzato sia come applicazione web autonoma sia come strumento di disegno leggero per aggiungere immagini ai commenti del forum.

La community di deviantART ha accolto questo nuovo strumento di disegno con grande entusiasmo e lo strumento stesso ora vede tanto traffico quanto alcune proprietà web di dimensioni adeguate. Dal suo lancio, un nuovo disegno viene inviato utilizzando deviantART muro una volta ogni 5 secondi circa. Questi sono solo il numero di disegni completati; molti altri sono stati avviati e non salvati.

Il seguente articolo fornisce alcune informazioni sul modo in cui utilizziamo HTML5, sul motivo per cui abbiamo scelto di utilizzare le nostre tecnologie e sulle cose che ho scoperto durante la scrittura di una delle prime applicazioni HTML5 complete per un sito web importante.

Il mio background

Alla fine del 2005, ero uno degli sviluppatori responsabili dello strumento di disegno utilizzato da Draw Here. Si trattava di uno strumento "web Graffiti" lanciato da un bookmarklet. Era utilizzato per disegnare immagini su qualsiasi pagina web. Inizialmente, Draw Here è stato creato utilizzando SVG (era appena uscito Firefox 1.5 beta, che è stato uno dei primi browser a supportare SVG).

Su Internet Explorer, creavamo il file SVG in background, ma eseguivamo il rendering del disegno utilizzando VML. All'epoca WebKit non supportava il formato SVG, quindi ho trasferito il nostro codice per eseguire il rendering del file SVG utilizzando canvas (una nuova tecnologia all'epoca presente solo in WebKit). A un certo punto, ho persino creato una porta per consentire il rendering del codice SVG sui browser meno recenti, usando una serie di elementi div. (Ovviamente era più uno scherzo per dimostrare che si poteva fare ed era molto lento da usare).

Nel suo periodo di massimo splendore, Draw Here era utilizzato per realizzare circa 100 disegni al giorno. Era abbastanza completo da essere definito più di un semplice esperimento, anche se non aveva l'ultima novità di un'importante applicazione web. A metà del 2006 il progetto è stato abbandonato, sebbene il sito sia ancora mollato, soprattutto per risate.

Tecnologie utilizzate da deviantART muro

Dato che all'inizio usavo varie tecnologie HTML5, mi hanno chiesto di diventare lead developer di deviantART muro. Chi sta leggendo questo articolo probabilmente capisce perché abbiamo deciso di adottare HTML5, piuttosto che una tecnologia basata su plug-in come Silverlight o Flash. Volevamo qualcosa che fosse robusto e anche che utilizzasse standard aperti.

Scelta tra Canvas e SVG

Abbiamo deciso di creare il livello di disegno utilizzando la tela. Alcuni utenti potrebbero chiedersi quando usare la tela e quando invece il SVG. Le soluzioni che si possono fare con le due tecnologie sono molto simili tra loro: come ha dimostrato Draw Here, entrambe le tecnologie possono essere utilizzate per creare un'applicazione di disegno.

Ho scoperto che il formato SVG è ottimo se vuoi mantenere i handle degli oggetti che avevi disegnato. Ad esempio, se vuoi che l'utente sia in grado di disegnare una linea e poi di trascinarne i bit per modificarne la forma, sarebbe piuttosto banale usare il formato SVG. Ma la stessa cosa è molto imbarazzante usare le canvas.

Quando usi una tela, spari qualcosa sulla tela e poi te ne dimentichi. Una tela vuota e una che è stata disegnata per un'ora funzionano esattamente come nel codice, ma hanno praticamente lo stesso ingombro di memoria. Un programma di disegno raster di solito funziona molto bene con il fuoco ed elimina la tecnologia, ma rende difficili le cose. Ad esempio, creare una funzione di annullamento rapido è molto più difficile nel canvas che in SVG. Nel formato SVG, puoi mantenere un punto di manipolazione nelle ultime righe posizionati e annullare l'operazione consiste solo nel rimuovere gli oggetti. Con la tela, una volta dipinta una linea, non sai cosa c'era sotto, pertanto per rimuovere la linea devi ridisegnare l'area in cui si trovava.

Una volta che abbiamo deciso di utilizzare HTML5 per le canvas, abbiamo deciso di usare qualche piccolo extra di altri componenti aggiuntivi HTML5 qua e là. Un esempio è il modo in cui abbiamo utilizzato localStorage per tenere traccia delle impostazioni del pennello dell'utente. In questo modo, una volta configurati i vari pennelli come piace a loro, possono tornare a queste impostazioni la prossima volta che usano il nostro strumento. Con localStorage, non dobbiamo usare i nostri cookie né eseguire azioni sui server per ottenere queste preferenze.

Utilizzo di Canvas

Canvas ha fatto molta strada negli ultimi cinque anni. Grazie a Draw Here, non abbiamo pubblicato la porta della tela perché le prestazioni non erano buone. Ora, credo, si può dire che probabilmente ha un rendimento migliore di quanto immagini. Cancellare un'ampia area e ridisegnare forme complesse solitamente avviene a una velocità superiore a quella della percezione umana. L'unica cosa che a volte ho scoperto essere troppo lenta è l'uso di getImageData() per campionare i pixel. La velocità dell'operazione dipende ovviamente dalle dimensioni del canvas; tuttavia, su un canvas di grandi dimensioni, eseguire una funzione getImageData() nel momento sbagliato può richiedere abbastanza tempo da far credere all'utente che l'applicazione sia lenta a rispondere.

Dopo aver letto vari tutorial su canvas, all'inizio ho avuto l'impressione che fosse un mezzo pesante da usare con parsimonia, forse una o due volte in una pagina. Non so se tutti hanno questo senso, ma l'ho fatto, quindi lo usavo con parsimonia quando abbiamo iniziato a programmare deviantART muro. Dopo un po', però, ho scoperto che ci sono molti piccoli posti in cui una tela può farti risparmiare un sacco di fatica. Ad esempio, i modelli della nostra app specificavano che doveva essere presente un selettore colori costituito da due triangoli sovrapposti con colori primari e secondari:

Selettore colori
Selettore colori

Il mio istinto è stato quello di iniziare a pensare a un modo per creare questo piccolo aggressore dell'interfaccia utente con i linguaggi HTML e CSS tradizionali. Le persone brave a contrastare i CSS potrebbero sottolineare come tutto questo si possa fare con CSS, ma la forma triangolare delle due parti che cambiano colore lo rende non così ovvio.

Quando mi è venuto in mente di utilizzare solo una tela, ho creato il widget con un singolo elemento DOM e un paio di righe di JavaScript. DeviantART muro utilizza nodi di canvas in ogni punto. Ogni livello è un canvas e per cambiare l'ordine dei livelli basta cambiare z-index. La tavolozza "navigatore" dello zoom che mostra una vista ridotta dell'area di disegno è solo un'altra tela che a volte chiamaDrawImage() utilizzando i canvas dei livelli come immagini di origine. Persino il cursore dell'area di disegno (un cerchio bicolore che regola le dimensioni in base alle dimensioni del pennello e allo zoom) è una tela che fluttua sotto il mouse.

Il motivo per cui siamo stati più liberali con le canvas rispetto ad altre tecnologie HTML5 è che la libreria ExplorerCanvas di Google consente di simulare canvas in Internet Explorer. Passiamo alla prossima sezione.

Internet Explorer (IE)

Il motivo principale per cui un numero maggiore di siti web importanti non utilizza ancora HTML5 è che non vogliono perdere gli utenti di Internet Explorer. Sono sicura che la prima domanda che pensa la maggior parte degli sviluppatori quando sentono che deviantART ha creato un'applicazione di disegno HTML5: "Che cosa è stato fatto con IE?"

All'inizio abbiamo deciso che avremmo fatto del nostro meglio per far funzionare le cose in Internet Explorer, ma che dovevamo fare lo sviluppo web con il minimo comune denominatore. Poiché la community web ha adottato l'approccio che un sito non può essere lanciato finché non ha lo stesso aspetto su tutti i browser noti, gli utenti non possono dire quando manca il browser. Per l'utente medio, i problemi di velocità sono dovuti alla connessione a internet e il rendering di ogni pagina è più o meno uguale. Pertanto, decidono il loro browser preferito in base a elementi arbitrari a livello di interfaccia utente, come il colore del pulsante Indietro.

Abbiamo deciso di creare qualsiasi funzionalità interessante che mi venisse in mente usando la specifica HTML5, provare a farla funzionare in Internet Explorer e, se non funzionasse, aprivamo semplicemente una finestra modale che spiega che la funzionalità non era disponibile perché il browser non aveva ancora implementato uno standard web.

Inizialmente abbiamo provato a far funzionare le cose con ExplorerCanvas (exCanvas) di Google. È sorprendentemente bravo a imitare le tele per la maggior parte delle cose. Ha però uno svantaggio. Ogni tratto eseguito sul canvas è un oggetto DOM nella traduzione VML sottostante. Per la maggior parte delle operazioni che si provano con la tela, questo non va bene, ma alcuni pennelli di deviantART muro creano forme in base alla sovrapposizione di molti tratti. Quando Internet Explorer si trova di fronte a un VML che contiene migliaia di nodi, anche su una macchina veloce, cade e si arresta. Per questo motivo, per molte delle chiamate al disegno, in realtà abbiamo dovuto scrivere il codice in un VML effettivo e usare trucchi per concatenare i nodi e usare il comando di spostamento per specificare dove dovrebbero esserci delle lacune. Molti dei piccoli controlli e degli altri elementi dell'interfaccia utilizzano un tag canvas, dato che questi piccoli utilizzi generalmente funzionano bene con exCanvas.

Oltre a far funzionare alcuni elementi con exCanvas, abbiamo suggerito agli utenti di continuare a utilizzare la loro versione di Internet Explorer se avessero installato il plug-in Google Chrome Frame. Google Chrome Frame è un plug-in che incorpora il motore di rendering di Google Chrome in Internet Explorer. Dal punto di vista dell'utente, sta ancora utilizzando il browser con cui ha familiarità, ma, sotto le copertine, la nostra pagina viene visualizzata con le funzionalità HTML5 e JavaScript più veloce di Chrome.

Sapevo che sarebbe stato facile trasferire i file per far funzionare Chrome Frame, ma non mi ero reso conto di quanto fosse semplice. Hai appena inserito un meta tag aggiuntivo e... il gioco è fatto, le cose iniziano a funzionare in IE.

Riepilogo

È un piacere lavorare con le nuove tecnologie nella specifica HTML5 e direi che tutto quello che ho usato è decisamente pronto per il lancio ufficiale. Anche se hai bisogno di qualcosa che funzioni alla perfezione su IE, c'è una quantità sorprendente di cose che puoi fare combinando canvas ed exCanvas. È sorprendente anche scrivere un livello di traduzione tra SVG e VML. Una volta che inizi a utilizzare la tecnologia, è come entrare in un mondo completamente nuovo.

Riferimenti