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.