As modernas aplicações web de hoje precisam estar devidamente preparadas para atender o publico em sua totalidade. Isso que dizer que a solução web precisa estar acessível para ser usada em navegadores de desktops e principalmente agora nos navegadores dos modernos dispositivos móveis conhecidos como smartphones e tablets que se infiltram cada dia mais no cenário das corporações.
O fator de complicação dessa nova tendência é que a filosofia de usabilidade de aplicações web nos navegadores móveis é completamente diferente da usabilidade de um navegador desktop. Mesmo os dispositivos móveis hoje tendo uma alta capacidade computacional, eles se diferem em dois aspectos chaves:
- Monitores reduzidos
- Estimulo de ação e digitação baseada em touchscreen.
Isso quer dizer uma mesma solução desenvolvida para ser utilizada no navegador do desktop pode ter seu uso totalmente impraticável em dispositivos móveis. É justamente o que tem acontecido na maioria das vezes. Temos dispositivos com alta capacidade computacional e conexão 3G, mas quando você entra em uma solução web, logo de inicio percebe que fica impraticável ficar gerenciando zoom nos monitores reduzidos e usando touch para disparar as ações. Quem ainda não passou por isso?
Problemas Básicos
Interface gráfica web para navegadores de dispositivos móveis não podem ser grandes, nem complexos e os componentes de ações devem ser maiores com espaçamento significativo entre eles. Tudo isso tem o com objetivo de gerar facilidade no momento de disparar as ações via touch. Outro fator é que estas interfaces devem ser resumidas, oferecendo objetividade no acesso e a leitura para as informações dentro do contexto da solução. Veja neste artigo os pontos problemáticos de usabilidade.
E é péssimo abrir algum Site que não esteja otimizado para mobile. Mesmo nos smartphones mais modernos com telas maiores que permitem abrir sites normais, não há dúvidas que um site não otimizado para mobile traz uma pior experiência para o usuário. E isso prejudica suas vendas, trata mal potenciais clientes e até afeta negativamente sua marca.
Como resolver?
O responsável por uma solução web hoje deve implicitamente considerar tal requisito e assim preparar sua solução para atender essa demanda de navegadores móveis. É justamente isso que eu hoje gostaria falar hoje. No geral, temos duas abordagens parar resolver tal questão:
Abordagem 1 – Construir uma única camada de apresentação hibrida
Criar uma única camada de apresentação na solução para ambos os navegadores, fazendo as interfaces gráficas se comportarem especificamente quando forem acessadas por navegadores de dispositivos móveis. Quando um dispositivo móvel acessar as páginas da solução, será necessário tem certa “inteligência” que aplique algumas mudanças nas páginas como redução de layout, não envio de algumas imagens mais pesadas, maior separação entre os botões de ação e até troca de alguns componentes por outros mais intuitivos.
Pontos Positivos
- A solução terá uma única camada de apresentação.
- Atualização única para todos os usuários.
Pontos Negativos
- Aumento da complexidade na camada de visão nessa “inteligência hibrida”.
- Algumas páginas podem apresentar limitações que compliquem a customização justamente pelo próprio contexto do negocio ou usabilidade da solução. Esses limitadores podem impedir alguma customização, gerando desconforto para usuário final.
Como resolver isso arquiteturalmente?
Não existe segredo! A camada de visão necessitara ser “costurada” com decisões que gerem a mudanças adequadas que melhor customizem as páginas quando um navegador de dispositivo móvel estiver acessando.
Abordagem 2 – Criar duas camadas de apresentação
Nesta abordagem é criada uma camada de apresentação na solução exclusiva para cada um deles, uma para desktop e outra para os navegadores móveis. Quando o usuário acessar a pagina de entrada, a solução identificara o navegador corrente e redirecionara para a determinada camada A ou B. Essa é a abordagem mais usada hoje pelos grandes players do mercado.
Pontos Positivos
- Melhor experiência em usabilidade.
- Otimização de performance por menos latência de trafego HTTP com paginas 100% customizadas.
Pontos Negativos
- Duas versões diferentes de camada de apresentação na mesma solução.
- Manutenção duplicada.
- Novas funcionalidades devem ser projetadas, implementadas e testadas duplicamente nas duas camadas.
Como resolver isso arquiteturalmente?
Construa uma versão diferente de cada interface gráfica de todos os processos oferecidos pela solução:
- Uma para o navegador desktop sem limites e sem restrições.
- Uma para o navegador móvel com layout bem mais simples, com menos recursos, mais objetiva e com separação razoável entre os componentes visuais.
Reuso de Regras de Negócio
O objetivo é dar manutenção em duas interfaces gráficas diferentes, mas a regra de negócio de ambas é a mesma e dever ser totalmente reutilizável. Para alcançar isso, adicione uma camada lógica de serviço usando padrão Facade[GOF] entre as camadas de visões e a camada de negócio da solução, não permitindo dependência direta entre elas. Com esta camada de serviço, é possível centralizar os comportamentos em comuns das ambas camadas de apresentação, na interação com a camada de negócio. Isso que dizer que qualquer manutenção das regras e ou processo de negócios serão propagadas para ambas a camada de visão.
Reuso de Autenticação e Autorização
Mesmo tendo duas camadas de apresentação, as regras de autenticação e autorização também continuam a mesma. O mecanismo de autenticação e autorização da solução deve ser projetado de forma flexível para que possa reconhecer que ambas camadas de visão estão debaixo das mesma “regras de credencialidade”.
Paradigma das Páginas para Dispositivos Móveis
Temos hoje duas vertentes diferentes de paradigmas para a filosofia de construção das paginas web para dispositivos móveis.
Páginas Otimizadas
As paginas são construídas para os dispositivos móveis iguais a uma pagina HMLT padrão. O único diferencial é que elas são otimizadas, simples, com menos código, layouts, poucas ou sem imagens, css simples e com javascripts básicos.
Páginas Look Feel Nativas
As paginas são construídas aparentando serem interfaces gráficas desktop da própria plataforma móvel. Ou seja, as páginas aparentam ser aplicações nativas, utilizando todos os componentes específicos e a forma de usabilidade totalmente voltada para as monitores otimizados. Provedores de componentes JSF 2.0 já identificaram essa nova abordagem de solução é já estão fornecendo componentes 100% automáticos. Veja alguns exemplos:
RichFaces Mobile
PrimeFaces Mobile
JQuery Mobile
Da mesma forma ja existem vários frameworks javascript oferecendo também componentes prontos para criar aplicações web mobile. Segue os destaques:
Sencha Touch
Dojo Mobile
Na verdade todas elas são simples páginas HTML puras com algumas imagens, css e javascript que “simulam” as funcionalidades equivalentes a aplicações nativas instaladas no próprio aparelho móvel. Dessa forma é possível entregar uma solução web com aparência e a usabilidade de uma aplicação nativa.
“Feliz é o homem que persevera na provação, porque depois de aprovado receberá a coroa da vida, que Deus prometeu aos que o amam.” Tiago 1:12
“Um dos principais desafios ao se elaborar a arquitetura de um software está em considerar seus atributos de qualidade e, principalmente, a correta especificação destes atributos. Muitos dos problemas, não por acaso, estão diretamente relacionados à essa dificuldade na especificação, como acontece no tratamento de segurança e desempenho, citando apenas alguns. Os atributos de qualidade possuem um papel de extrema importância na aceitação do cliente e do usuário final. Desta forma, tratá-los de uma maneira sistemática e apropriada é um esforço importante, porém desafiador.” Veja o artigo completo.
