webgis

WebGIS: Arquitetura de aplicações corporativas – Parte 2

Camada de apresentação de um WebGIS

A camada de apresentação de uma aplicação (também chamada de Front-end) é aquela que permite ao usuário interagir com o sistema. É através dela que os estímulos externos são captados e respondidos após o processamento das informações. Em um sistema WebGIS esta característica é muito mais acentuada, já que a maior parte da navegação do usuário se dará através da interação com um mapa. Por isso que é muito importante construir esta camada de software da forma mais robusta, testável e flexível possível.

HTML 5

Após o HTML 5 ter sido aprovado em 2014 como um padrão W3C oficial, as possibilidades para criação de interfaces ricas cresceram de forma assustadora. E a plataforma de WebGIS pegou carona nesta ascensão. O suporte dos navegadores de internet ao Canvas e ao WebGL proporcionou um mecanismo eficiente e eficaz para renderizar informações diretamente nas estações dos usuários, utilizando inclusive o recurso de aceleração de vídeo 3D via hardware (um exemplo é o uso de Vector Tiles, veja o post anterior aqui) sem a necessidade de instalar nenhum software adicional (Cesium, estou olhando pra você!).

Então ao desenhar a arquitetura de um WebGIS fique atento aos navegadores que serão utilizados, inclusive na plataforma que sua aplicação será executada. Os browsers se comportam de forma diferente em cada sistema operacional (exemplo: Safari no Windows e no iOS). Uma boa dica é ver previamente a compatibilidade dos recursos HTML 5 que deseja utilizar nos sites HTML5test e Can i use?.

Javascript

Aqui a conversa fica bem mais séria. Até 8 anos atrás o desenvolvimento com Javascript se resumia em manipulação de páginas HTML (validação de formulários, DHTML, manipulação de DOM, etc…) de forma precária, onde maior parte do código desenvolvido tinha que ser testado em cada navegador existente na época para garantir seu funcionamento. Particularmente já atuei em diversos projetos em que os browsers eram atualizados e tive que readaptar as aplicações existentes, pois nas novas versões algumas interpretações dos scripts eram modificadas e acreditem, não foi algo trivial de se fazer.

Hoje o Javascript voltou com força total e abraçou horizontes antes nunca imaginados. Abaixo segue uma lista do que deve ser utilizado na construção das interfaces em nesta linguagem:

  • Ao codificar, tente seguir ao máximo o ECMAScript. As definições e funcionalidades do Javascript seguem este padrão, logo os navegadores utilizam (ou deveriam utilizar) esta especificação para construir o interpretador da linguagem. Seguindo esta regra a chance de ter que escrever códigos diferentes para cada navegador diminui bastante!

 

  • Já ouviu falar em AMD? Não é a fabricante de processadores… e sim a definição de Asynchronous Module Definition. É o mecanismo utilizado para modularizar e componentizar seu código Javascript, saindo da estrutura monolítica em que todo o código deveria ser carregado na  página para ser executado para uma estrutura dinâmica, onde o código é carregado somente quando necessário em tempo de execução. Para saber mais detalhes técnicos, bibliotecas e exemplos acesse o site do Require.js.

 

  • Testes no Javascript? Sim… existem e devem ser realizados! Com o uso de módulos AMD a separação do código fica intuitiva e de fácil teste. Bibliotecas como Jasmine, QUnit e Sinon.JS podem ser utilizadas sem problemas utilizando o próprio browser sem a instalação de nenhum software adicional. O Intern, Chai e Mocha precisam do Node.js instalado na máquina do desenvolvedor e do servidor de construção de software.

 

  • Com o crescimento da complexidade da codificação do Javascript, a construção e entrega dos scripts para o servidor de produção (ou qualquer outro diferente de desenvolvimento) se tornou um transtorno para realizar manualmente. Por isso é muito importante utilizar uma biblioteca de construção (build) para transformar seu código fonte em um pacote entregável para outros ambientes. Apresento então o Grunt e o Gulp, que são bibliotecas que automatizam tarefas (como o Maven e o Gradle é para o Java) na plataforma Node.js. Seu ambiente de Integração Contínua agradece! PS: Antes que perguntem, geralmente um processo de build de código Javascript envolve a minificação e obfuscação do código, mudança de parâmetros, inclusão de dependências, etc.

 

  • Utilize um gerenciador de pacotes (bibliotecas e frameworks) no processo de build para sua aplicação Javascript. Isso irá impedir que tenha que fazer o download das bibliotecas sempre que queira utiliza-las (a exemplo que o Maven faz com as dependências no ambiente Java), além de simplificar a mudança de versão de um pacote sem ter que mudar diversas páginas no seu projeto. O Bower resolve todo esse problema pra você. Utiliza também o Node.js como plataforma de execução.

 

  • Quer garantir que toda aplicação construída por sua equipe siga o mesmo padrão estrutural? Não tem ideia de como montar uma aplicação AngularJS ou com Meteor? O Bigodudo Yeoman vai te ajudar! Com ele basta solicitar o download de um gerador de aplicações e pronto! Todo mundo pode seguir a mesma estrutura. Roda também no Node.js.

 

  • Perceberam que marquei em negrito toda a ocorrência do nome Node.js? Pois bem, este cara é um motor de execução de código Javascript que permite executar rotinas nesta linguagem em qualquer computador, só que fora do browser. Por isso que permite transportar o Javascript para execução de código no servidor. Imprescindível para utilizar as ferramentas mencionadas neste artigo. Conheça mais desta maravilhosa plataforma aqui.

Um projeto Javascript mudou completamente de como era abordado antigamente, por esse motivo que está em evidência o chamado Desenvolvedor Front-end (que é diferente do Web Designer, por favor!), especialista em construir projetos de interface de software.

CSS

O CSS é responsável por controlar a aparência da sua aplicação nos diversos tipos de mídia. Antes rotulado como “coisa pra Web Designer”, hoje também já tem grande importância para um projeto de software Front-End, assim como aconteceu como o Javascript.

Durante o desenvolvimento da camada de apresentação, sempre dê preferência a utilizar estilos CSS para alterar a aparência/comportamento de um elemento no HTML. Isso permite que você tenha menos pontos de alteração de código quando quiser mudar algum estilo (utilizar CSS siginifica ter as chamadas folhas de estilos, que são arquivos externos que contém apenas as definições de aparência).

Outro ponto importante é o uso da última versão do CSS (versão 3). Nele se pode criar vários efeitos nas páginas de forma nativa, sem utilizar nenhum artifício para realizar tal operação (como uso de plugins ou bibliotecas Javascript). Lembro mais uma vez que é importante checar a compatibilidade do que se quer usar com os navegadores de internet utilizados pelos usuários de sua aplicação.

Uma ferramenta muito utilizada para facilitar a manutenção de CSS na aplicação é o uso de preprocessadores. São softwares que interpretam e fazem mudanças nas regras de CSS, permitindo que recursos mais avançados não existentes sejam utilizados (como exemplo o uso de loops e condicionais). O SASS e o  LESS são os mais utilizados no mercado, e devem ser invocados no processo de construção de sua aplicação.

Informações adicionais

Nem todas as empresas utilizam o Node.js como plataforma para aplicações, o que pode impedir o uso de boa parte das ferramentas citadas neste artigo. Uma alternativa é verificar se sua plataforma existente de construção de aplicações fornece suporte para o Javascript. No mundo Java, o Maven tem diversos plugins que permitem a realização da maioria destas atividades, porém é um processo muito mais complexo de alcançar os objetivos (como o uso de WebJARs para incluir dependências Javascript e também no PhantomJS para gerar relatório de testes automatizados, por exemplo).

Com isso chegamos ao fim da discussão sobre a camada de apresentação no ponto de vista arquitetural. No próximo post irei abordar o uso das bibiotecas de webmapping, que estão na camada de apresentação e fornecem o meio de construir efetivamente um WebGIS. Se ficou alguma dúvida ou quiser contribuir com este artigo, basta escrever um comentário. Até mais!

Deixe um comentário