Case study - HTML5 in deviantART muro

Mike Dewey
Mike Dewey

Introduzione

Il 7 agosto 2010, deviantART ha festeggiato il suo decimo anniversario. Per festeggiare il nostro anniversario, abbiamo lanciato uno strumento di disegno HTML5 chiamato deviantART muro. Lo strumento può essere utilizzato come applicazione web autonoma e come strumento di disegno leggero per aggiungere immagini ai commenti del forum.

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

Il seguente articolo fornisce alcune informazioni su come utilizziamo HTML5, sul perché abbiamo scelto di utilizzare le tecnologie che abbiamo scelto e su cosa 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 Disegna qui. Si trattava di uno strumento di "graffiti web" lanciato da un preferito. Veniva utilizzato per disegnare immagini su qualsiasi pagina web. Disegna qui è stato inizialmente creato utilizzando SVG (era appena uscita la versione beta di Firefox 1.5, uno dei primi browser a supportare SVG).

Su Internet Explorer, stavamo creando SVG in background, ma il rendering del disegno veniva eseguito utilizzando VML. Al momento WebKit non supportava SVG, quindi ho portato il nostro codice per eseguire il rendering di SVG utilizzando canvas (che all'epoca era una nuova tecnologia disponibile solo in WebKit). A un certo punto, ho persino creato una porta in modo che il nostro codice SVG potesse essere visualizzato sui browser meno recenti utilizzando un insieme di elementi div incollati insieme. Ovviamente, si trattava più di una battuta per dimostrare che era possibile, ma era estremamente lento da usare.

Nel suo periodo di massimo splendore, Draw Here veniva utilizzato per realizzare circa 100 disegni al giorno. Era abbastanza completa da essere considerata più di un semplice esperimento, anche se non aveva il perfezionamento finale di una grande applicazione web. A metà 2006 il progetto è stato abbandonato, anche se il sito è ancora attivo, soprattutto per divertimento.

Tecnologie utilizzate da deviantART muro

Grazie alla mia esperienza nell'utilizzo di varie tecnologie HTML5 nelle loro fasi iniziali, mi è stato chiesto di diventare lo sviluppatore principale di deviantART muro. Chiunque stia leggendo questo articolo probabilmente può capire perché abbiamo deciso di utilizzare HTML5 anziché una tecnologia basata su plug-in come Silverlight o Flash. Volevamo qualcosa di solido e che utilizzasse standard aperti.

Scegliere tra Canvas e SVG

Abbiamo deciso di creare il livello di disegno utilizzando Canvas. Alcune persone potrebbero chiedersi quando devono utilizzare canvas e quando devono utilizzare SVG. Le due tecnologie hanno molte sovrapposizioni in termini di funzionalità. Come dimostrato da Draw Here, entrambe possono essere utilizzate per creare un'applicazione di disegno.

Ho scoperto che SVG è ottimo se vuoi mantenere i manici degli oggetti che hai disegnato. Ad esempio, se vuoi che l'utente possa disegnare una linea e poi trascinare parti della linea per modificarne la forma, sarebbe abbastanza facile utilizzare SVG. Ma la stessa cosa è molto scomoda con Canvas.

Quando utilizzi Canvas, inserisci elementi e poi te ne dimentichi. Una tela vuota e una su cui è stato disegnato per un'ora si comportano esattamente allo stesso modo nel codice e hanno circa la stessa impronta in memoria. Sebbene un programma di disegno raster di solito funzioni molto bene con la tecnologia "prepara e dimentica", complica alcune cose. Ad esempio, creare una funzione di annullamento rapida è molto più difficile in canvas che in SVG. In SVG, puoi semplicemente mantenere un handle per le ultime linee che hai inserito e annullare l'operazione è solo una questione di rimuovere questi oggetti. Con Canvas, una volta tracciata una linea, non sai cosa c'era sotto, quindi per rimuoverla è necessario ridisegnare l'area in cui si trovava.

Una volta deciso di utilizzare HTML5 per Canvas, abbiamo deciso di sfruttare qua e là altri vantaggi di HTML5. Un esempio è l'utilizzo di localStorage per tenere traccia delle impostazioni del pennello dell'utente. In questo modo, una volta configurati i vari pennelli come preferiscono, possono tornare a queste impostazioni la volta successiva che utilizzano il nostro strumento. localStorage significa che non dobbiamo utilizzare il nostro cookie o effettuare richieste al server per ottenere queste preferenze.

Utilizzo di Canvas

Canvas ha fatto molta strada negli ultimi cinque anni. Con Draw Here, non abbiamo pubblicato la mia porta Canvas, perché il rendimento non era buono. Ora, credo che sia sicuro affermare che probabilmente ha un rendimento migliore di quanto immagini. In genere, è possibile cancellare una vasta sezione della tela e ridisegnare forme complicate a velocità superiori alla percezione umana. L'unica cosa che ho riscontrato essere occasionalmente troppo lenta è l'utilizzo di getImageData() per campionare i pixel. La velocità dell'operazione dipende ovviamente dalle dimensioni della tela, ma, su una tela di grandi dimensioni, eseguire getImageData() al momento sbagliato può richiedere tempo sufficiente per far sì che un utente percepisca che l'applicazione è lenta a rispondere.

Dopo aver letto vari tutorial su Canvas, inizialmente avevo l'impressione che fosse un elemento pesante che doveva essere utilizzato con parsimonia, magari una o due volte in una pagina. Non so se tutti lo capiscono, ma io sì, quindi lo usavo con parsimonia quando abbiamo iniziato a codificare la bacheca di deviantART. Dopo un po' di tempo, però, ho scoperto che ci sono molti piccoli casi in cui una tela può farti risparmiare molto tempo. Ad esempio, i mockup per la nostra app specificavano che doveva essere presente un selettore colori costituito da due triangoli sovrapposti che mostravano i colori principali e secondari:

Selettore colori
Selettore colori

Il mio primo istinto è stato iniziare a pensare a un modo per creare questo piccolo gadget dell'interfaccia utente con HTML e CSS tradizionali. Gli esperti di hacking CSS potrebbero indicare come tutto ciò possa essere fatto tramite CSS, ma la forma triangolare delle due parti che cambiano colore non è così evidente.

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 canvas ovunque. Ogni livello è una tela e modificare l'ordine dei livelli è solo una questione di modifica dell'indice z. La tavolozza "navigatore" dello zoom che mostra una visualizzazione ridotta dell'area di disegno è solo un'altra tela che occasionalmente chiama drawImage() utilizzando le tele dei livelli come immagini di origine. Anche il cursore dell'area di disegno (un cerchio a due tonalità che regola le dimensioni in base alle dimensioni del pennello e allo zoom) è una tela che si sposta sotto il mouse.

Il motivo per cui abbiamo adottato un approccio più permissivo con canvas rispetto ad altre tecnologie HTML5 è che la libreria ExplorerCanvas di Google consente di simulare canvas in Internet Explorer. Questo mi porta alla sezione successiva.

Internet Explorer (IE)

Il motivo principale per cui i siti web più importanti non utilizzano ancora HTML5 è che non vogliono perdere i propri utenti di Internet Explorer. Sono sicuro che la prima domanda che viene in mente alla maggior parte degli sviluppatori quando sente che deviantART ha creato un'applicazione di disegno HTML5 è: "Che cosa è stato fatto per IE?"

All'inizio abbiamo deciso di fare del nostro meglio per far funzionare tutto in Internet Explorer, ma non volevamo più utilizzare lo stile di sviluppo web più comune. Poiché la community web ha adottato l'approccio per cui un sito non può essere lanciato finché non ha lo stesso aspetto su tutti i browser noti, gli utenti non possono capire quando il loro browser non è supportato. Per l'utente medio, i problemi di velocità sono imputabili alla connessione a internet e ogni pagina viene visualizzata più o meno allo stesso modo. Quindi scelgono il browser preferito in base a piccoli elementi arbitrari dell'interfaccia utente, come il colore del pulsante Indietro.

Abbiamo deciso di creare qualsiasi funzionalità interessante che ci venisse in mente utilizzando le specifiche HTML5, provare a farla funzionare in Internet Explorer e, se non fosse stato possibile, visualizzare una finestra modale che spiegasse che la funzionalità non era disponibile perché il browser non aveva ancora implementato uno standard web.

Inizialmente abbiamo cercato di far funzionare tutto con ExplorerCanvas (exCanvas) di Google. È sorprendentemente bravo a imitare la tela per la maggior parte delle cose. Tuttavia, ha un svantaggio. Ogni tratto tracciato sul canvas è un oggetto DOM nella traduzione VML sottostante. Per la maggior parte delle operazioni che potresti provare con la tela, va bene, ma alcuni dei pennelli di deviantART muro creano forme sovrapponendo molti tratti. Quando Internet Explorer si trova di fronte a VML con migliaia di nodi, anche su una macchina veloce, si arresta in modo anomalo. Per questo motivo, per molte chiamate di disegno, abbiamo dovuto scrivere codice in VML, e utilizzare trucchi per concatenare i nodi e utilizzare il comando di spostamento per specificare dove devono esserci spazi. Molti dei piccoli controlli e quant'altro nell'interfaccia utilizzano un tag canvas, poiché questi piccoli utilizzi in genere funzionavano bene con exCanvas.

Oltre a far funzionare alcune funzionalità con exCanvas, abbiamo suggerito agli utenti di continuare a utilizzare la propria versione di Internet Explorer se installavano 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, utilizza ancora il browser che conosce, ma, sotto sotto, la nostra pagina viene visualizzata con le funzionalità HTML5 di Chrome e JavaScript più veloce.

Sapevo che doveva essere facile eseguire il porting per il funzionamento con Chrome Frame, ma non avevo idea di quanto fosse semplice. Basta inserire un meta tag aggiuntivo e… il gioco è fatto, le cose iniziano a funzionare in IE.

Riepilogo

È un'esperienza fantastica lavorare con le nuove tecnologie della specifica HTML5 e direi che tutto ciò che ho utilizzato è sicuramente pronto per il grande pubblico. Anche se hai bisogno che tutto funzioni perfettamente su IE, puoi fare cose sorprendenti combinando canvas ed exCanvas. Anche scrivere un livello di traduzione tra SVG e VML è sorprendentemente fattibile. Una volta che inizi a utilizzare la tecnologia, è come entrare in un mondo completamente nuovo.

Riferimenti