Cutting Edge

Desenvolvimento de site para celular, Parte 5: jQuery Mobile

Nesta coluna, eu vou compartilhar alguns pensamentos sobre jQuery Mobile, uma tecnologia móvel cada vez mais popular.

Como mais e mais sites da Web são ladeadas por sites especializados para atender aos usuários de dispositivo móvel, uma equação toma forma na mente de muitos desenvolvedores e gerentes. Simplificando, isso soa como a seguir: Se você gosta de jQuery, você vai amar o jQuery Mobile, também. Fato é que muita gente (inclusive eu) amo jQuery, assim, potencialmente, um grande número de desenvolvedores estaria inclinado a usar jQuery Mobile como a opção padrão para qualquer desenvolvimento Web móvel sem qualquer mais pensar.

Eu admito que eu segui este padrão exatamente quando comecei o desenvolvimento móvel. Às vezes ele trabalhou; às vezes não. E, talvez mais importante, às vezes eu pensei que ele funcionou, mas no final realmente não recebi o meus clientes estavam procurando.

Desenvolvimento móvel não é simplesmente um ramo de desenvolvimento Web. Para a maior parte, ele não consegue adaptação (bem, principalmente simplificando) que você já tem, quer seja casos de uso, layout, gráficos, scripts ou outras tecnologias relacionadas. Desenvolvimento móvel bem-feito e entre dispositivos é uma verdadeiro paradigma onde o UX vem em primeiro lugar e aparecem novos tipos de profissionais: arquitetos da informação, designers de interação e estrategistas de conteúdo. Software móvel é projetado frequentemente e aprovado através de maquetes e então simplesmente implementado, apresentando dados em uma determinada posição e em um determinado formato.

Mas lembre-se que a tecnologia não deve ditar como você alcançar suas necessidades de negócios; tecnologia deve ser apenas um meio para implementar seus objetivos de desenvolvimento imediato. Pode soar como uma afirmação bastante óbvia, perda, mas — vamos ser honestos, quantas vezes você já viu essa regra violada? Você já ouviu falar sobre o antipadrão "Tecnologia, animal de estimação"? Você pode ler sobre ele em bit.ly/OvJdx0. Às vezes acontece que uma determinada tecnologia é captada por nenhuma razão convincente ou negócios. Da mesma forma, às vezes acontece que uma determinada tecnologia é captada para a tarefa de errado — ou, talvez pior ainda, seu uso leva a uma abordagem menos-do que-ideal para uma dada tarefa.

Em um hoje mudam rapidamente o mundo móvel, colocar toda a tecnologia à frente de UX e considerações estratégicas é um risco enorme. Em desenvolvimento mobile, casos de uso e visão vêm em primeiro lugar, e a tecnologia é apenas um meio — como sempre deveria ser!

Agora vou focar com o assunto principal desta coluna, jQuery Mobile, cujos pontos fortes e fracos, muitas vezes são medidos em uma escala que conta que você pode fazer em vez do que você quer fazer. Você pode ler mais sobre jQuery Mobile em jquerymobile.org.

jQuery Mobile num ápice

Em geral, a definição mais adequada para jQuery Mobile vem de seu Web site. Ele explica que o jQuery Mobile é um sistema de interface de usuário baseada em HTML5 para todas as plataformas de dispositivo móvel popular. Além disso, diz que o jQuery código móvel é construído com "progressive enhancement" em mente e resultados devem ter um design facilmente "tema capaz". Além disso, jQuery Mobile é construído sobre a base sólida de jQuery e jQuery UI. No entanto, muitos desenvolvedores profissionais assumem que o jQuery Mobile é uma versão leve do jQuery otimizado para as restrições de dispositivos móveis típicos.

Na verdade, o que está na página inicial do site jQuery Mobile é precisamente a verdadeira essência da biblioteca. jQuery Mobile é uma estrutura que é fácil de usar para muitos desenvolvedores — ou, pelo menos, que acaba por ser muito mais fácil de usar do que a maioria dos outros quadros lá fora para a construção de soluções móveis. É uma estrutura que ajuda com a interface do usuário de exibições que funcionam bem quando exibido em dispositivos móveis e baseada em toque. Não só são vistas baseada em toque (e posteriormente mobile-oriented) fáceis de criar, mas eles também são fáceis de se unem para formar um sistema de navegação com transições e efeitos. Exibições criadas utilizando as instalações do jQuery Mobile funcionam bem com smartphones e em certa medida também com dispositivos mais antigos, levando à pergunta chave: Este é realmente o suficiente para seu desenvolvimento Web móvel?

Onde está o celular em jQuery Mobile?

Pessoalmente, eu usei o jQuery Mobile para criar a interface do usuário de um aplicativo baseado na Web destinado a usuários de laptop ou tablet — sem qualquer tipo de telefones! — e funcionou lindamente. Foi nessa época que eu primeiro imaginou que algum tipo de estreita relação entre jQuery UI e jQuery Mobile.

Como surpreendente que possa parecer, vamos levantar o ponto: JQuery Mobile é realmente um framework para desenvolvimento móvel?

Com base na descrição da tecnologia em jquerymobile.org, você deve considerar jQuery Mobile como ferramenta principal para a interface do usuário de front-ends baseados em toque. Um front-end baseado no toque é provável que um dispositivo móvel (isto é, tablet ou smartphone), mas o desenvolvimento Web móvel tem muito mais facetas do que apenas o front-end.

Apenas usando jQuery Mobile para arranjar alguns UI que se encaixa muito bem no pequeno imóveis de uma tela de dispositivo podem ser uma abordagem que funciona em cenários simples. Se tomado como uma abordagem global e abrangente, no entanto, pode ser um pouco simplista.

Vamos analisar o que você pode encontrar em uma solução móvel que vai além das capacidades do jQuery Mobile. Primeiro lugar, você deve ter uma visão clara do site que você está construindo, expressa através de uma grande seleção de casos de uso, um fluxo de dados bem definidos entre servidor e cliente, e, mais importante, uma lista dos móveis perfis você pretende servir. Um perfil móvel é um termo genérico para indicar as diferentes famílias de dispositivos de que seu site tem a intenção de servir: smartphones, tablets, laptops, smart TVs e dispositivos similares construídos nos últimos anos, ou mais, ou qualquer celulares que podem se conectar à Internet.

Nem todo site móvel tem de suportar vários perfis de dispositivo, mesmo que essa necessidade está se tornando cada vez mais rigorosas e mais urgente. Suporte a vários perfis de dispositivo significa lidar com diferentes pontos de vista e ajustando dinamicamente a resposta alvo baseada nas características do dispositivo e recursos. Na minha última coluna (msdn.microsoft.com/magazine/jj618291) apresentei uma abordagem multi-serving, baseado em um repositório de descrição de dispositivo do lado do servidor como arquivo de recurso Universal Wireless ou WURFL (consulte wurfl.sourceforge.net). Que tipo de suporte out-of-box fazê-lo de jQuery Mobile nesse sentido?

Design responsivo e jQuery Mobile

Design responsivo é a capacidade da estrutura para fornecer uma versão à medida de uma página para dispositivos específicos. Neste artigo, citando o site jquerymobile.org, mencionado aprimoramento progressivo como um dos pilares do framework jQuery Mobile. Progressive enhancement é um padrão de design de Web bottom-up que você criar páginas aumentando progressivamente um núcleo que funciona em qualquer navegador. Progressive enhancement é o oposto de "degradação graciosa," opta por uma abordagem top-down: Definir a melhor experiência e degradar como normalmente, como você pode se o navegador perde algumas capacidades exigidas. Aprimoramento progressivo pode ser considerado um padrão para tornar a sua experiência de Web mais ágil.

Observe que fazendo uma experiência Web mais responsivos podem incluir oferecer algum suporte móvel ad hoc, mas ser sensível no navegador não significa necessariamente focando clientes móveis.

Assim usando jQuery Mobile, você pode não ser preocupado de detectar capacidades do dispositivo, como a biblioteca garante que a saída também funcionaria em navegadores de nível inferior. Vamos analisar o núcleo da aplicação móvel do padrão progressive enhancement jQuery.

Particionamento de navegador

A biblioteca jQuery Mobile suporta três perfis de navegador — chamado de A, B e C — onde uma classe-browsers receber a marcação mais avançada que a biblioteca pode servir e navegadores classe C apenas recebem HTML simples conteúdo sem recursos extras, como estilos e AJAX. Cada perfil é caracterizada por uma lista de recursos que navegadores oferecem em relação a necessidades da biblioteca. Por exemplo, o suporte para consultas de mídia CSS é um recurso chave no jQuery Mobile, e é um requisito fundamental para um navegador para cair no grupo. Além de consultas de mídia CSS, uma classe-browsers suportam JavaScript, AJAX e manipulação completa de Document Object Model (DOM). Uma classe-browsers são onde a biblioteca funciona em sua plenitude, e a lista de navegadores de grau é atualizada com freqüência.

A diferença básica entre os navegadores de categoria e classe B é a falta de suporte para AJAX. Em navegadores de classe B, jQuery Mobile pára de usar AJAX para solicitações e transições de página. Então você pode esperar ser capaz de efectuar operações com sucesso, mas com uma experiência menos agradável.

Finalmente, navegadores C-grade são principalmente navegadores herdados com nenhum suporte para consultas de mídia e suporte limitado para manipulação de JavaScript, CSS e DOM. Em navegadores de nível C, nenhuma manipulação de DOM padrão é aplicada a elementos de página, e HTML simples é servido. A matriz mais atualizada dos navegadores e graus está disponível em jquerymobile.com/gbs. Figura 1 e Figura 2 mostrar o processamento da mesma página em navegadores de categoria e classe C.

Figura 1 página de amostra em um dispositivo Android A Grade

Figura 2 página de amostra em um dispositivo Android C-Grade

Razoavelmente, a biblioteca jQuery Mobile não é otimizada para a classe B e classe C-browsers. Como Figura 2 mostra, os usuários ainda podem receber um bom tratamento, mas, mais importante, você não tem controle sobre isso. O HTML no Figura 1 e Figura 2 é bastante simples e não conter mais de uma lista não ordenada. Se você tiver uma página muito mais sofisticada com imagens, pop-ups, blocos de texto de vários tamanho e formato e botões?

jQuery Mobile deve seus bons gráficos (como mostrado na Figura 1) para manipulação intensiva de DOM e recursos do AJAX. Fora do domínio de uma classe-browsers, jQuery Mobile garante apenas que uma página é visível. Você pode encontrar as transições mais abruptas (sem AJAX) e mais simples manipulação de DOM, ou pode haver um retorno completo de HTML simples. Independentemente do fato de que jQuery Mobile pode servir até três vistas distintas da mesma página, os restos HTML básicos mesmo e as regras de transformação são fixos e fora de seu controle.

A linha inferior é que, se você precisar oferecer suporte a mais de uma classe-browsers, você provavelmente seria melhor cair jQuery navegador móvel classificação e introduzindo a sua própria lógica para lidar com perfis de navegador e pontos de vista ad hoc (ver Figura 3).

Figura 3 como alvo diferentes graus de navegadores

O código de exemplo na coluna do mês passado fornece um exemplo desta abordagem.

Para resumir, o jQuery Mobile é essencialmente uma estrutura de interface do usuário que faz um ótimo trabalho de deixar você usar elementos HTML familiares quando você autor um modo de exibição. Em seguida, ele transforma elementos HTML simples em objetos semanticamente equivalentes que funcionam bem em um ambiente baseado no toque e se encaixam bem em tamanhos de tela pequena. jQuery Mobile implementa o padrão de aprimoramento progressivo e não deixa qualquer navegador. No entanto, isso não significa que adotando simplesmente o jQuery Mobile você pode efetivamente resolver o problema de fragmentação de dispositivo — a grande quantidade de dispositivos e navegadores móveis significativamente diferentes. Às vezes você é obrigado a oferecer vistas completamente diferentes para perfis diferentes de classe e mesmo garantir que você particione navegadores de acordo com uma lógica diferente. jQuery Mobile abraça a lógica de responsive Web design e concentra-se em consultas de suporte CSS. Como explicado na minha coluna de julho de 2012 (msdn.microsoft.com/magazine/jj190798), consultas de mídia CSS são grandes para uso com dispositivos ricos (comprimidos, laptops, TVs inteligentes e talvez smartphones) onde tudo o que você quer fazer é reposicionar e ocultar elementos que você não pode exibir. Consultas de mídia requerem navegadores ricos e não são específicas para dispositivos móveis.

Sugiro que antes de você abraçar o jQuery Mobile, você fazer a seguinte pergunta: É OK para designar certos smartphones (ou dispositivos análogos) como ponto de entrada para apreciar realmente o seu site? Se sim, então jQuery Mobile é mais do que OK para você. Caso contrário, levá-lo ainda mais e explorar outras opções.

Dino Esposito é o autor de “Architecting Mobile Solutions for the Enterprise” (Microsoft Press, 2012) e “Programming ASP.NET MVC 3” (Microsoft Press, 2011) e coautor de “Microsoft .NET: Architecting Applications for the Enterprise” (Microsoft Press, 2008). Residente na Itália, Esposito é um palestrante sempre presente em eventos do setor no mundo inteiro. Siga-o no Twitter em twitter.com/despos.

Agradecemos ao seguinte especialista técnico pela revisão deste artigo: Christopher Bennage