Introdução
No dia 7 de agosto de 2010, o deviantART completou 10 anos. Comemoramos nosso aniversário com o lançamento de uma ferramenta de desenho HTML5 chamada deviantART muro. A ferramenta pode ser usada como um aplicativo da Web independente e uma ferramenta de desenho leve para adicionar imagens a comentários do fórum.
A comunidade deviantART recebeu a nova ferramenta de desenho com muito entusiasmo, e a própria ferramenta agora recebe tanto tráfego quanto algumas propriedades da Web de tamanho adequado. Desde o lançamento, um novo desenho é enviado uma vez a cada cinco segundos usando o deviantART muro. Esses são apenas os números de desenhos que estão concluídos. Muitos outros foram iniciados e não foram salvos.
O artigo a seguir fornece um histórico de como usamos o HTML5, por que escolhemos usar as tecnologias que usamos e o que descobri enquanto escrevia um dos primeiros aplicativos HTML5 completos para um grande site.
Meu plano de fundo
No final de 2005, eu era um dos desenvolvedores responsáveis pela ferramenta de desenho usada pelo Draw Here. A ferramenta era uma ferramenta de "grafite na Web" iniciada por um favorito. Ela era usada para desenhar imagens em qualquer página da Web. O Draw Here foi criado inicialmente usando o SVG (o Firefox 1.5 Beta tinha acabado de ser lançado e foi um dos primeiros navegadores a oferecer suporte ao SVG).
No Internet Explorer, estávamos criando SVG em segundo plano, mas renderizamos o desenho usando VML. O WebKit não era compatível com SVG na época, por isso fiz a portabilidade do nosso código para renderizar o SVG usando o canvas, que era uma nova tecnologia vista apenas no WebKit na época. Em um momento, eu até criei uma porta para que nosso código SVG pudesse ser renderizado em navegadores mais antigos usando vários elementos div colados. (Isso, obviamente, era mais uma brincadeira para mostrar que era possível fazer e era muito lento para usar).
Na época, o Draw Here era usado para fazer cerca de 100 desenhos por dia. Ele foi completo o suficiente para ser chamado de forma mais do que apenas um experimento, embora não tenha feito o acabamento final de um grande aplicativo da Web. Em meados de 2006, o projeto foi abandonado, embora o site ainda esteja caminhando até hoje - principalmente por sorrisos.
Tecnologias utilizadas por deviantART muro
Como eu já usei várias tecnologias HTML5 no início, fui solicitado a ser o desenvolvedor chefe do deviantART muro. Qualquer pessoa que estiver lendo este artigo provavelmente sabe por que optamos pelo HTML5 em vez de uma tecnologia baseada em plug-in, como Silverlight ou Flash. Queríamos algo que fosse robusto e que também usasse padrões abertos.
Como decidir entre Canvas e SVG
Decidimos fazer a camada de desenho usando canvas. Algumas pessoas podem se perguntar quando usar tela e quando usar SVG. Há muita sobreposição no que pode ser feito com as duas tecnologias. Como o Draw Here comprovou, ambas as tecnologias podem ser usadas para criar um aplicativo de desenho.
Acho que o SVG é ótimo para manter alças nos objetos que você desenhou. Por exemplo, se você quiser que o usuário possa desenhar uma linha e arrastar partes para mudar a forma, esse processo é bastante simples. Mas é muito estranho usar o canvas.
Quando você usa o canvas, você dispara coisas nele e depois esquece. Uma tela em branco e outra que foi desenhada por uma hora agem exatamente como o mesmo em código, e têm praticamente o mesmo consumo de memória. Embora um programa de desenho rasterizado geralmente funcione muito bem e esquece a tecnologia, ele dificulta algumas coisas. Por exemplo, criar uma função de desfazer rapidamente é muito mais difícil no canvas do que em SVG. No SVG, você pode manter uma alça até as últimas linhas colocadas, e desfazer é apenas uma questão de arrancar esses objetos. Com o canvas, depois que uma linha é pintada, não se sabe o que estava abaixo dela, portanto, remover a linha exige redesenhar a área em que ela estava.
Assim que decidimos que iria usar HTML5 para canvas, decidimos fazer uso de pequenas peças do HTML5 aqui e ali. Um exemplo disso é como usamos localStorage para acompanhar as configurações de pincel do usuário. Assim, depois que os pincéis estiverem configurados da maneira desejada, eles poderão retornar a essas configurações na próxima vez que usarem nossa ferramenta. LocalStorage significa que não precisamos usar nosso cookie ou fazer viagens no servidor para ter essas preferências.
Como usar o Canvas
O Canvas avançou muito nos últimos cinco anos. Com o Draw Here, não publicamos a porta da tela, porque o desempenho não foi bom. Agora, acho que é seguro dizer que ele provavelmente tem um desempenho melhor do que você imagina. A limpeza de uma grande parte da tela e a reformulação de formas complicadas geralmente acontecem em velocidades mais rápidas do que a percepção humana. A única coisa que, às vezes, eu ficava muito lenta foi usar getImageData() para extrair pixels de amostra. A velocidade da operação obviamente depende do tamanho da tela, mas, em uma tela grande, realizar um getImageData() no momento errado pode levar tempo suficiente para que o usuário sinta que o aplicativo está lento para responder.
Depois de ler vários tutoriais de canvas, originalmente tive a impressão de que era algo pesado e que deveria ser usado com moderação, talvez uma ou duas vezes em uma página. Não sei se todo mundo entende isso, mas eu entendi, então estava usando com moderação quando começamos a codificar deviantART muro. Depois de um tempo, descobri que há muitos lugares pequenos em que uma tela pode poupar muito esforço. Por exemplo, os modelos do nosso app especificaram que precisa haver um seletor de cores com dois triângulos sobrepostos mostrando cores primárias e secundárias:
Meu primeiro instinto foi começar a pensar em uma maneira de criar esse pequeno enigma de interface com HTML e CSS tradicionais. Pessoas com experiência em hackear CSS podem apontar como tudo isso pode ser feito no CSS, mas a forma triangular das duas partes que mudam de cor não deixa isso tão óbvio.
Quando pensei em usar apenas uma tela, fiz o widget com um único elemento DOM e algumas linhas de JavaScript. O DeviantART muro usa nós de tela por toda parte. Cada camada é uma tela, e mudar a ordem das camadas é apenas uma questão de mudar o Z-index. A paleta de zoom "Navigator" que mostra uma visualização reduzida da área de desenho é apenas outra tela que, de vez em quando, chama drawImage() usando as telas da camada como imagens de origem. Até mesmo o cursor da área de desenho (um círculo de dois tons que ajusta o tamanho dependendo do tamanho do pincel e do zoom) é uma tela que flutua sob o mouse.
O motivo pelo qual somos mais livres com o canvas do que outras tecnologias HTML5 é que a biblioteca ExplorerCanvas do Google possibilita simular a tela no Internet Explorer. Isso me leva à próxima seção.
Internet Explorer (IE)
A principal razão pela qual mais grandes sites ainda não usam HTML5 é que não querem perder seus usuários do Internet Explorer. Tenho certeza de que a primeira pergunta na mente da maioria dos desenvolvedores ao ouvir que o deviantART criou um aplicativo de desenho HTML5 é: "O que foi feito no IE?".
Decidimos no início que faríamos um esforço máximo para fazer as coisas funcionarem no Internet Explorer, mas que estávamos usando o estilo de desenvolvimento da Web de menor denominador comum. Como a comunidade da Web adotou uma abordagem de que um site não pode ser iniciado até que tenha a mesma aparência em todos os navegadores conhecidos, os usuários não conseguem saber quando faltam navegadores. Para um usuário médio, os problemas de velocidade ocorrem na conexão de Internet, e cada página é renderizada de forma mais ou menos igual. Então, eles escolhem o navegador favorito com base em pequenas coisas arbitrárias da interface do usuário, como a cor do botão "Voltar".
Decidimos criar qualquer recurso legal que viesse à mente usando a especificação HTML5, tentar fazê-lo funcionar no Internet Explorer e, se ele não funcionasse, exibiríamos um modal explicando que o recurso não estava disponível porque o navegador ainda não implementou um padrão da Web.
Inicialmente, tentamos fazer com que as coisas funcionassem com o ExplorerCanvas (exCanvas) do Google. Ele é surpreendentemente bom em imitar a tela para a maioria das coisas. Mas ele tem uma desvantagem. Cada traço feito na tela é um objeto DOM na tradução VML subjacente. Para a maioria das coisas que você pode tentar com canvas, isso é bom, mas alguns dos pincéis do deviantART muro criam formas usando várias camadas de traços juntos. Quando o Internet Explorer se depara com um VML com milhares de nós, mesmo em uma máquina rápida, ele cai e morre. Por isso, em grande parte das chamadas de desenho, tivemos que entrar e codificar no VML real, usando truques em que concatenamos os nós e usamos o comando "move" para especificar onde havia lacunas. Muitos dos pequenos controles e outros itens da interface usam uma tag de tela, já que esses pequenos usos geralmente funcionam bem com o exCanvas.
Além de fazer algumas coisas funcionarem com o exCanvas, sugerimos aos usuários que eles possam continuar usando a versão do Internet Explorer se instalassem o plug-in do Google Chrome Frame. O Frame do Google Chrome é um plug-in que incorpora o mecanismo de renderização do Google Chrome no Internet Explorer. Do ponto de vista do usuário, ele ainda está usando o navegador que já conhece, mas, em segundo plano, nossa página é renderizada com os recursos HTML5 do Chrome e o JavaScript mais rápido.
Sabia que deveria ser fácil transferir coisas para o Chrome Frame, mas não percebi o quão simples. Basta inserir uma metatag extra e pronto. As coisas começam a funcionar no IE.
Resumo
É uma alegria trabalhar com as novas tecnologias na especificação HTML5. Eu diria que tudo o que usei está pronto para o horário nobre. Mesmo que você precise que as coisas funcionem perfeitamente no IE, há uma quantidade surpreendente de coisas que você pode fazer combinando canvas e exCanvas. Criar uma camada de tradução entre SVG e VML também é surpreendentemente. Quando você começa a usar a tecnologia, é como entrar em um mundo totalmente novo.
Referências
- deviantART muro (em inglês)
- fórum do DeviantART (em inglês), onde você pode desenhar (requer login)
- ExplorerCanvas
- Frame do Google Chrome