A Sencha lançou uma versão beta da biblioteca para criação de gráficos interativos em HTML5, o Sencha Touch Charts, otimizada para dispositivos móveis. A biblioteca, um add-on pago para o produto Sencha Touch (que é gratuito), possibilita que desenvolvedores criem gráficos dos tipos radar, barras, linhas, área e torta/pizza, com recursos de interatividade. Os gráficos gerados são otimizados para iOS, Android e BlackBerry.
A biblioteca Sencha Touch Charts utiliza aceleração de hardware em dispositivos que suportam este recurso. Também dá suporte a gestos de toque, o que pode ser usado para facilitar a visualização de conjuntos de dados complexos. Os gestos suportados incluem pinçar para ampliar, arrastar (swipe) para navegar horizontalmente pelos dados, e toques rápidos (taps) para aprofundamento nos dados.
A biblioteca utiliza recursos do HTML5 como a tag <canvas> para o desenho dos elementos visuais, e CSS3 para a definição da aparência, o que a torna compatível com navegadores móveis modernos.
No Sencha Touch Charts, a definição dos componentes e suas iterações é feita com JavaScript:
var chartPanel = new Ext.chart.Panel({ title: 'Pie Chart', fullscreen: true, dockedItems: [...], items: { cls: 'pie1', theme: 'Demo', store: store1, shadow: false, animate: true, insetPadding: 20, legend: { position: { portrait: 'bottom', landscape: 'left' } }, interactions: [ { type: 'reset', confirm: true }, { type: 'rotate' }, { type: 'iteminfo', gesture: 'taphold', listeners: {...} }, { type: 'piegrouping', onSelectionChange: function(me, items) { ... } } ], series: [...] } });
A definição dos estilos é feita com SASS/SCSS que é compilado para CSS3:
... chart[cls=piecombo1] { padding: 20; series { label { display: rotate; contrast: true; font: 14px Arial; } } } ...
O InfoQ.com falou com um representante da Sencha, que deu mais detalhes sobre o novo produto:
InfoQ: Para melhorar o desempenho vocês implementaram um engine de renderização utilizando Canvas do HTML5. Poderia nos dar mais detalhes?
Sencha: Para desenho em HTML5, há basicamente as tecnologias SVG e Canvas. Escolhemos Canvas para dispositivos móveis por dois motivos. Primeiro, o SVG não era suportado no ambiente Android antes do Honeycomb. Portanto, para suportar os milhares de dispositivos rodando a versão 2.x do Android no mercado, não poderíamos utilizar SVG. O segundo motivo: nos nossos testes de desenho, o Canvas tem se mostrado mais performático em telefones e tablets.
InfoQ: Alguns anos atrás, nem mesmo se podia criar gráficos simples que funcionassem bem em todos os browsers, mas isso está mudando com o HTML5. Quais tecnologias HTML5 vocês acharam mais úteis neste projeto?
Sencha: A grande evolução para exibição de gráficos e visualização de dados em geral foi a melhora na capacidade de desenho dos browsers. Os browsers têm trabalho bem na exibição de páginas, mas agora com Canvas, SVG (e logo com o WebGL), o browser sozinho tem capacidade de exibir conteúdos multimídia, o que antes só era possível utilizando Flash ou Silverlight. Agora que os browsers têm essa capacidade nativa, não precisamos mais depender de plugins externos..
InfoQ: Quais os maiores desafios enfrentados pela empresa ao trabalhar com browsers em ambiente móvel, como por exemplo o mobile WebKit, em comparação com browsers desktop?
Sencha: Nosso maior desafio foi o desempenho, que tratamos em duas dimensões. Primeiro consideramos o poder de processamento. Trabalhamos muito para garantir que não houvesse uma sobrecarga na CPU e que os gráficos ficassem mais responsivos. A segunda dimensão é a memória. Dispositivos móveis têm uma quantia limitada de RAM, e precisamos fazer uma quantidade enorme de ajustes para garantir o uso otimizado da memória disponível nesses equipamentos.
InfoQ: O que fez com que vocês escolhessem SASS para folhas de estilo, ao invés de CSS3?
Sencha: Utilizamos o SASS em vez do CSS3 básico por ele adicionar várias funcionalidades de metaprogramação ao CSS. Pode-se por exemplo definir que os botões serão 20% mais claros que a cor de fundo, e utilizar variáveis e funções para guiar todo o estilo da aplicação — ao invés de fazer tudo manualmente.
Você pode encontrar mais informações sobre Sencha Touch e ExtJS, no InfoQ.com e no InfoQ Brasil.