Veja 3 dicas para desenvolver seus mashups para Qlik Sense

Veja 3 dicas para desenvolver seus mashups para Qlik Sense

Usar mashups para renderizar painéis do Qlik Sense permite inúmeras funcionalidades não presentes na versão tradicional “self-service” da ferramenta, uma vez que é possível mesclar tecnologias web de forma livre. No entanto, essa liberdade pode acarretar em prejuízo ao usuário final, caso alguns cuidados não sejam observados durante o desenvolvimento.

1) Use Single Page Application em um HTML apenas

Em um primeiro momento pode soar estranho, mas trabalhar com apenas um arquivo HTML torna o mashup mais performático. A troca de páginas e o novo carregamento dos arquivos e objetos demanda uma perda de performance significativa. A dica é trabalhar com Single Page Applications (SPA), de forma a otimizar o carregamento dos recursos necessários para o funcionamento do mashup. Vale ressaltar que, para quem utiliza Angular ou renderização de templates HTML por demanda, a funcionalidade de drag’n drop do dev-hub não funcionará.

Exemplo prático:

Arquivo principal: index.html
Template pagina 1: page1.html

Utilizando angular ou qualquer outra ferramenta para incluir uma página dentro do arquivo principal, em tempo de execução, impossibilitará o uso do dev-hub para a função de drag’n drop. Isso ocorre porque, quando arrastamos um objeto para dentro de um elemento da página carregada por demanda, o dev-hub olhará para o arquivo index.html em sua máquina e não encontrará o elemento (afinal, o arquivo de origem não carregou nenhuma página ainda, portanto não possui o elemento necessário).

2) Use o editor HTML com CUIDADO

Desenvolvedores prezam por seus editores de uso pessoal, com variados temas, plugins, extensões, etc. Assim o desenvolvimento de mashups se torna mais confortável em termos de codificação de interfaces e, além de tudo, mais produtivo em um ambiente externo ao ambiente fornecido pela Qlik (dev-hub). Porém, há um ponto de atenção crucial para evitar retrabalhos.

Pensaremos num mashup com os seguintes arquivos e cenário de desenvolvimento:

mashup.html
mashup.css
mashup.js

Abas abertas do browser:
Mashup aberto com o dev-hub, para utilizar a funcionalidade de drag’n drop dos objetos.

Suponhamos que, utilizando um editor HTML externo, alteramos o arquivo mashup.html e mashup.js. Quando voltarmos para o browser para utilizar o drag’n drop do Qlik, é necessário recarregar a página com a limpeza automática de cache (no Google Chrome: F12 -> Network -> Disable cache). Isto porque o dev-hub utiliza um cache agressivo, de forma que os arquivos persistem em seu ambiente, ignorando eventuais modificações externas.
O mesmo vale caso um arquivo seja modificado utilizando o dev-hub: toda e qualquer modificação externa será desconsiderada e perdida caso os mesmos arquivos estejam abertões em um editor HTML externo, gerando um considerável retrabalho.

3) Faça o design para mobile primeiro

Se o seu mashup é bom para dispositivos móveis, então ele se adaptará mais facilmente para os outros tipos de dispositivos. O método mobile-first refere-se a projetar e implementar o design pelos dispositivos móveis antes da versão “desktop”. Em telas pequenas devemos deixar visível apenas aquilo que realmente tem importância, tanto de funcionalidades quanto de conteúdo. Desta forma garantimos em primeira viagem, o coração do nosso mashup com os elementos indispensáveis para o usuário. Conseguimos assim favorecer performance, usabilidade e conteúdo para todos as resoluções.

 

Deixe uma resposta

O seu endereço de e-mail não será publicado.