Desenvolvendo aplicativos da Web para dispositivos móveis: quando, por que e como

Existem 6,8 bilhões de pessoas no planeta, das quais 5,1 bilhões possuem telefone celular. E hoje, uma porcentagem cada vez maior desses dispositivos são smartphones. De acordo com um estudo recente do Pew Research Center, o número de usuários que acessam a Internet em seus smartphones mais que dobrou nos últimos 5 anos, assim como o número de usuários que baixam e usam aplicativos móveis. Daqueles que usam a Internet ou e-mail em seus telefones, mais de um terço ficam online principalmente por meio de seus dispositivos portáteis.

De fato, a computação móvel está se tornando cada vez mais onipresente... e é incrível.

Exceto, é claro, quando não é.

Como um usuário de dispositivo móvel, poucas coisas são tão frustrantes e difíceis de navegar com os dedos como um aplicativo da web móvel mal projetado, ou mesmo um aplicativo nativo.

E, como desenvolvedor de aplicativos móveis, poucas coisas podem ser tão irritantes quanto tentar oferecer suporte à maior variedade possível de clientes móveis, cada um com seu próprio conjunto frustrante de idiossincrasias. Se você optar por desenvolver uma web móvel, um aplicativo nativo ou híbrido, a busca para oferecer suporte a vários navegadores móveis, dispositivos mais exóticos e lidar com várias plataformas pode ser uma experiência bastante dolorosa.

É claro que nem todo desenvolvedor hoje precisa se preocupar em oferecer suporte a clientes móveis. Mas a natureza cada vez mais onipresente dos dispositivos e aplicativos móveis sugere fortemente que aqueles que não precisam oferecer suporte a clientes móveis hoje provavelmente precisarão fazê-lo em um futuro não muito distante. Portanto, se você ainda não está pensando no desenvolvimento de aplicativos para dispositivos móveis, provavelmente deveria estar.

Aplicativo da Web para dispositivos móveis x aplicativo nativo x aplicativo híbrido

Como acontece com a maioria das seleções de tecnologia, não há uma resposta única quando se trata do tipo de aplicativo móvel a ser desenvolvido. Existem várias práticas recomendadas de aplicativos da Web a serem consideradas, nem todas são técnicas. Quem é seu público alvo? Eles são mais propensos a preferir uma web móvel ou um aplicativo nativo? Qual é a diferença entre aplicativos nativos e híbridos? Quais recursos de desenvolvimento você tem e com quais tecnologias móveis eles estão mais familiarizados? Qual é o modelo de licenciamento e vendas que você está imaginando para o seu produto?

De um modo geral (embora sempre haja exceções), a rota do aplicativo da web móvel é mais rápida e mais barata que a rota do aplicativo móvel nativo, especialmente quando o objetivo é oferecer suporte a uma ampla variedade de dispositivos. Por outro lado, pode haver recursos nativos do dispositivo móvel (como o sensor de movimento e assim por diante) que são essenciais para o seu aplicativo, mas que só podem ser acessados ​​por meio de um aplicativo nativo (o que tornaria a escolha do aplicativo da web móvel uma opção não obrigatória). inicial para você).

E além da questão de aplicativos da web antigos versus aplicativos nativos, um aplicativo móvel híbrido pode ser a resposta certa para você, dependendo de seus requisitos e restrições de recursos. Aplicativos híbridos, como aplicativos nativos, são executados no próprio dispositivo (em oposição a dentro de um navegador), mas são escritos com tecnologias da Web (HTML5, CSS e JavaScript) e normalmente sustentados por uma estrutura de aplicativo híbrido. Mais especificamente, os aplicativos híbridos são executados em um contêiner nativo e aproveitam o mecanismo do navegador do dispositivo (mas não o navegador) para renderizar o HTML e processar o JavaScript localmente. Uma camada de abstração web-to-native permite o acesso a recursos do dispositivo que não são acessíveis em aplicativos móveis da web, como acelerômetro, câmera e armazenamento local.

Mas qualquer que seja a escolha que você fizer – seja um aplicativo da web móvel, um aplicativo nativo ou híbrido – tenha o cuidado de pesquisar adequadamente e confirmar suas suposições. Como exemplo, para os propósitos deste tutorial de desenvolvimento de aplicativos da Web para dispositivos móveis, você pode ter decidido desenvolver um aplicativo móvel nativo para comércio eletrônico para vender seus produtos. Mas, segundo o Hubspot, 73% dos usuários de smartphones dizem que usam mais a web móvel do que os aplicativos nativos para fazer suas compras… Então, neste caso, você pode ter apostado no cavalo errado.

E depois, é claro, há as considerações práticas de tempo e orçamento. Como diz um dos meus ditados favoritos, “mais rápido, melhor, mais barato… escolha dois” . Embora as restrições de tempo de colocação no mercado e de custo sejam de suma importância no desenvolvimento de aplicativos da Web, é crucial não comprometer muito a qualidade no processo. É muito difícil recuperar a confiança de um usuário que teve uma primeira experiência ruim.

De fato, aplicativos nativos, híbridos e da Web para dispositivos móveis são feras radicalmente diferentes, cada um com seu próprio conjunto exclusivo de benefícios e desafios. Este tutorial de desenvolvimento da Web para dispositivos móveis foca especificamente em metodologias e ferramentas a serem empregadas e armadilhas a serem evitadas no desenvolvimento de aplicativos da Web para dispositivos móveis altamente funcionais, intuitivos e fáceis de usar.

O desenvolvimento de aplicativos da Web para dispositivos móveis requer planejamento detalhado

Identificar seus requisitos (ou de seu cliente) é uma das práticas recomendadas mais essenciais no desenvolvimento de aplicativos, móveis ou outros. Pesquise cuidadosamente os recursos direcionados para determinar se eles são alcançáveis ​​em seu aplicativo da Web para dispositivos móveis. É bastante frustrante e altamente improdutivo perceber que uma ou mais de suas funções essenciais de cliente não são suportadas, quando você já investiu tempo e recursos para projetar a interface baseada na Web e a infraestrutura de suporte.

Outra pegadinha comum para iniciantes em desenvolvedores de aplicativos da Web para dispositivos móveis é supor que o código baseado na Web para um navegador de desktop funcionará "como está" em um navegador para dispositivos móveis. Não. Definitivamente existem diferenças e, se você não estiver ciente delas, elas podem definitivamente mordê-lo. A funcionalidade de reprodução automática da tag HTML5 <video> , por exemplo, não funciona em navegadores móveis. Da mesma forma, as propriedades de transition e opacity do CSS não são suportadas (ou pelo menos não são consistentemente suportadas) na maioria dos navegadores móveis hoje em dia. Você também terá problemas com alguns métodos de API da Web em uma plataforma móvel, como a API de streaming de música SoundCloud que requer o Adobe Flash, que não é compatível com a maioria dos dispositivos móveis.

Um fator particularmente complicado no desenvolvimento de aplicativos móveis da Web é que a vida útil dos dispositivos móveis tende a ser muito menor do que a dos monitores de desktop (a vida útil média de um telefone celular nos EUA é de cerca de 21 meses). Esses tempos de vida mais curtos do dispositivo, acompanhados por lançamentos constantes de novos dispositivos e tecnologias móveis, geram um cenário em constante mudança de dispositivos a serem direcionados. Embora trabalhar em um navegador alivie um pouco esse problema, protegendo você de vários problemas específicos do dispositivo, você ainda precisará projetar uma visualização baseada em navegador que suporte muitas resoluções de tela diferentes (além de ajustar adequadamente para orientações de paisagem e retrato ).

É preciso pensar também no suporte aos Retina Displays da Apple (telas de cristal líquido que têm uma densidade de pixels alta o suficiente para que o olho humano seja incapaz de discernir pixels individuais a uma distância de visualização típica). Vários produtos da Apple – incluindo iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini e iPad Air – oferecem telas Retina. Para um aplicativo da Web para dispositivos móveis em particular, é importante estar ciente de que uma tela Retina faz com que as imagens de baixa resolução (que normalmente são veiculadas em dispositivos móveis) pareçam confusas e a pixelização pode ocorrer. A melhor solução de desenvolvimento de aplicativos nesses casos é fazer com que o servidor reconheça que a solicitação vem de um dispositivo Retina e, em seguida, forneça uma imagem alternativa de resolução mais alta ao cliente.

Se você quiser usar algumas das coisas legais do HTML5, lembre-se de verificar com antecedência se a funcionalidade que você está procurando é compatível com o cenário de dispositivos que seus clientes provavelmente usarão. Por exemplo, no iOS 6 e superior, não há suporte para a funcionalidade do navegador getUserMedia , pois a câmera só pode ser acessada por meio de aplicativos nativos. Dois ótimos recursos para verificar o que é compatível com dispositivos e navegadores específicos são caniuse.com e html5test.com.

As consultas de mídia CSS3 também podem ajudá-lo a fornecer conteúdo personalizado para cada dispositivo. Aqui está um código de exemplo para capturar diferentes características do dispositivo, como densidade de pixels, resolução de tela e orientação:

 /* For lower than 700px resolutions */ @media (max-width: 700px) { ... } /* Same as last but with the device orientation on land scape */ @media (max-width: 700px) and (orientation: landscape) { ... } /* Including width and orientation you can add a media type clause, in this case 'tv' */ @media tv and (min-width: 700px) and (orientation: landscape) { ... } /* for low resolution display with background-image */ .image { background-image: url(/path/to/my/image.png); background-size: 200px 300px; height: 300px; width: 200px; } /* for high resolution (Retina) display with background-image */ @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { -repeat; background-size: 200px 400px; /* rest of your styles... */ } }

Otimizando seu aplicativo da web móvel para desempenho

“OMG, essa coisa é tão lenta!” Como desenvolvedor de aplicativos da Web para dispositivos móveis, essas são provavelmente as últimas palavras que você deseja ouvir de um de seus usuários. Portanto, você deve pensar cuidadosamente em como reduzir e otimizar cada byte e transferência de servidor para reduzir o tempo de espera do usuário. Não é realista esperar que as transferências sejam sempre feitas através de uma rede WiFi, e você deve saber que 60% dos usuários da web móvel dizem esperar que um site seja carregado em seu celular em 3 segundos ou menos (fonte). Da mesma forma, o Google descobriu que, para cada cinco segundos extras de tempo de carregamento, o tráfego caiu 20% (e também vale a pena notar que os mecanismos de pesquisa analisam os tempos de carregamento como parte do cálculo do índice de qualidade da página).

Como parte deste tutorial de desenvolvimento de aplicativos da Web para dispositivos móveis, aqui estão algumas dicas que podem ajudar a otimizar o desempenho de seus aplicativos da Web para dispositivos móveis e minimizar a latência:

• Otimização de Imagem. O tempo de carregamento da imagem é conhecido por ser um dos maiores problemas de desempenho que afetam o carregamento da página em dispositivos móveis. O uso de otimizadores de imagem online, como smushit.com, pode ser útil para resolver esse problema.
• Compressão de código. A compactação de seus arquivos JavaScript e CSS, dependendo da quantidade de código que você possui, pode ter um impacto significativo no desempenho.
• Consultas de banco de dados.
  • Alguns navegadores de dispositivos móveis não aceitam tantos cookies quanto os navegadores de desktop, o que pode resultar na necessidade de executar ainda mais consultas do que o normal. O cache do lado do servidor é, portanto, especialmente crucial ao oferecer suporte a clientes de aplicativos da Web para dispositivos móveis.
  • Lembre-se de empregar os filtros apropriados para evitar injeção de consulta SQL que poderia comprometer a segurança do seu site e servidor.
• Redes de entrega de conteúdo (CDN). Se você planeja fornecer muitos vídeos, imagens, arquivos de áudio ou outros tipos de mídia, o uso de uma CDN é altamente recomendado. Algumas das CDNs comerciais mais comuns incluem Amazon S3, Microsoft Windows Azure e MaxCDN. As vantagens de usar uma CDN são inúmeras e incluem:
  • Melhor desempenho de download. Aproveitar os recursos de uma CDN permite distribuir carga, economizar largura de banda e aumentar o desempenho. Os melhores CDNs oferecem maior disponibilidade, menor latência de rede e menor perda de pacotes. Além disso, muitos CDNs fornecem uma seleção de data centers distribuídos globalmente, permitindo que os downloads ocorram de um servidor mais próximo da localização do usuário (resultando em menos saltos de rede e downloads mais rápidos).
  • Mais downloads simultâneos. Os navegadores normalmente limitam o número de conexões simultâneas a um único domínio, após o qual downloads adicionais são bloqueados até que um dos downloads anteriores seja concluído. Muitas vezes, você pode ver esse limite em ação ao baixar muitos arquivos grandes do mesmo site. Cada CDN adicional (em um domínio diferente) permite downloads simultâneos adicionais.
  • Análise aprimorada. Muitas CDNs comerciais fornecem relatórios de uso que podem complementar a análise do seu próprio site e que podem oferecer uma melhor quantificação das visualizações e downloads de vídeo. O GTmetrix, por exemplo, possui uma excelente ferramenta de relatórios de sites para monitorar e otimizar as fontes carregadas em seu site.

Ferramentas de desenvolvimento de aplicativos da Web para dispositivos móveis

“As ferramentas certas para o trabalho certo” é um ditado antigo que se aplica tanto ao desenvolvimento de software quanto a qualquer outro domínio. Este tutorial fornece uma introdução a algumas das ferramentas mais populares e amplamente usadas para o desenvolvimento de aplicativos da Web para dispositivos móveis, mas lembre-se de que pode muito bem haver outras ferramentas que são as "certas" para desenvolver seu aplicativo da Web para dispositivos móveis, dependendo do suas necessidades e recursos disponíveis.

Escolhendo a estrutura certa de aplicativos da Web para dispositivos móveis JavaScript

Como o desenvolvimento de aplicativos da Web para dispositivos móveis tende a criar muitos dos mesmos desafios comuns – como compatibilidade entre navegadores e HTML e CSS inconsistentes em navegadores móveis – estruturas foram desenvolvidas (baseadas em HTML5 e CSS3) especificamente projetadas para resolver esses problemas e para funcionar da maneira mais perfeita possível em uma ampla variedade de smartphones e tablets. A maioria dessas estruturas de aplicativos da Web para dispositivos móveis é leve, o que ajuda a facilitar a navegação rápida na Web para dispositivos móveis sem comprometer a aparência do seu site.

Ampliando nossa visão além do cenário móvel, se houver um único framework JavaScript popular que vale a pena mencionar, é o jQuery. Se você estiver familiarizado com a versão para desktop, recomendo experimentar o jQuery Mobile para seu aplicativo da web móvel. Possui uma biblioteca de widgets que converte a marcação semântica em um formato amigável para gestos, facilitando as operações em telas sensíveis ao toque. A versão mais recente consiste em uma base de código muito leve que contém muitos elementos gráficos que realmente podem melhorar sua interface do usuário.

Outra alternativa, o Sencha Touch, também está ganhando participação de mercado rapidamente. Ele oferece excelente desempenho geral e ajuda a produzir uma interface de usuário da Web móvel que se parece com uma interface nativa. Sua biblioteca de widgets completa é baseada na biblioteca JavaScript ExtJS da Sencha.

Aqui estão algumas diferenças importantes a serem consideradas ao comparar o jQuery Mobile e o Sencha Touch:

• Olhe e sinta. De um modo geral, a aparência de um aplicativo Sencha Touch é mais nítida e superior à de um aplicativo móvel jQuery, mas é importante lembrar que tais reações tendem a ser altamente subjetivas.
• Extensibilidade. O jQuery Mobile oferece muitas extensões de terceiros e é inerentemente projetado para ser altamente extensível, enquanto o Sencha Touch atualmente é muito mais uma estrutura "fechada".
• Suporte a dispositivos. O jQuery Mobile atualmente tem como alvo uma seção transversal maior de dispositivos do que o Sencha Touch.
• HTML “vs.” JavaScript. jQuery é em grande parte centrado em HTML (isto é, estendendo e manipulando HTML existente em JavaScript), enquanto a codificação Sencha Touch é inteiramente baseada em JavaScript. (Este é um exemplo, aliás, do conjunto de habilidades de sua equipe de desenvolvimento que é importante considerar ao fazer suas seleções de tecnologia.)
• Dependências externas. jQuery mobile requer jQuery e jQuery UI para manipulação de DOM, enquanto o Sencha Touch não possui dependências externas.
• Curva de aprendizado. A maioria dos desenvolvedores acha que o tempo de aceleração com o jQuery é menor que o do Sencha Touch, talvez impulsionado pela grande porcentagem de desenvolvedores da Web que já estão familiarizados com as bibliotecas padrão do jQuery.

Estruturas responsivas e aplicativos da Web para dispositivos móveis

Um número crescente de estruturas responsivas começou a surgir nos últimos anos, com duas das mais populares atualmente sendo Bootstrap e Foundation. Em suma, as estruturas responsivas simplificam e agilizam o design e a implementação de UI responsivos baseados na Web, encapsulando os layouts e paradigmas de UI mais comuns em uma estrutura reutilizável e otimizada para desempenho. Principalmente baseados em CSS e JavaScript, muitos desses frameworks são de código aberto, gratuitos para download e facilmente personalizáveis. A menos que você tenha um conjunto de requisitos altamente peculiar, é provável que o uso de uma dessas estruturas reduza o nível de esforço para projetar e implementar seu aplicativo da Web móvel.

Examinando as duas opções principais, Bootstrap e Foundation, algumas das principais diferenças a serem consideradas incluem:

• Plataformas direcionadas. Embora o Bootstrap suporte dispositivos móveis, tablets e desktops, ele é orientado principalmente para o uso em desktops. O Foundation, por outro lado, foi projetado para praticamente todos os tamanhos e tipos de tela.
• Compatibilidade do navegador. O Bootstrap é compatível com o IE7 ou superior, enquanto o Foundation é compatível apenas com o IE9 ou superior.
• Diversidade de layouts e componentes. O Bootstrap possui uma coleção significativamente maior de elementos de interface do usuário do que a oferecida pela Foundation.
• Redimensionamento automático. Com o Foundation, a grade encolhe e estica de acordo com a altura e largura do navegador atual, enquanto o Bootstrap suporta apenas um conjunto predefinido de tamanhos de grade com base em um conjunto padrão de tamanhos de tela.

Depuração e teste de aplicativos da Web para dispositivos móveis

A depuração de aplicativos da Web para dispositivos móveis pode ser complicada e um pouco frustrante, especialmente se você precisar procurar dispositivos diferentes para testar ou instalar SDKs para uma emulação (normalmente imperfeita) das plataformas de clientes de destino.

Nesse contexto, uma clara vantagem do desenvolvimento da Web para dispositivos móveis (em comparação com o desenvolvimento de aplicativos nativos) é que você pode utilizar ferramentas de desenvolvedor padrão baseadas em navegador para depurar seu aplicativo. Com base na minha preferência pessoal por depuração remota, o que recomendo neste tutorial de desenvolvimento de aplicativos é o Chrome com suas DevTools. Outras opções padrão incluem o Firefox com Firebug ou as ferramentas Dragonfly do Opera.

Algumas das razões pelas quais eu prefiro o Chrome com seus DevTools incluem:

• Emulador móvel no DevTools do Chrome. Isso talvez seja motivo suficiente para selecionar o Chrome para depuração de aplicativos da web para dispositivos móveis. Os principais recursos incluem emulação de eventos de toque, falsificação de agente do usuário, limitação de largura de banda de rede, substituições de geolocalização, substituições de orientação de dispositivo e emulação de tipo de mídia CSS.
• Editor interativo. Capacidade de editar JavaScript ou CSS on-the-fly.
• Depurador JavaScript superior. Permite pontos de interrupção do DOM e fornece a capacidade de perfilar o tempo de execução do código JavaScript.
• Visualizadores JSON e XML integrados. Evita a necessidade de qualquer plug-in para inspecionar as respostas do servidor.
• Suporte para o protocolo Android Debug Bridge (ADB) diretamente por USB. Facilita a instanciação fácil de uma sessão de depuração remota. (Aqui está um bom tutorial do Google sobre como iniciar a depuração remota no Chrome.)
• Inspeção dinâmica de recursos. Permite que você inspecione as fontes de dados locais do seu aplicativo, incluindo bancos de dados IndexedDB ou Web SQL, armazenamento local e de sessão, cookies e recursos de Cache de Aplicativo. Você também pode inspecionar rapidamente os recursos visuais do seu aplicativo, incluindo imagens, fontes e folhas de estilo.

Para testar o layout e a compatibilidade de navegação cruzada do seu aplicativo da Web, você também pode usar algumas ferramentas online úteis, como o BrowserStack. Basta inserir a URL do seu aplicativo, selecionar o navegador, a versão e o sistema operacional e você obterá a visualização emulada (e a velocidade de carregamento) do seu site nesse ambiente. Outra ferramenta útil para isso é o CrossBrowserTesting.

Embrulhar

Com a contínua expansão rápida do número, variedade e sofisticação de dispositivos móveis no mercado e em uso hoje, a necessidade de aplicativos móveis eficazes, fáceis de usar e de alto desempenho provavelmente aumentará substancialmente. Ser capaz de desenvolver essas aplicações de forma inteligente e eficiente continuará, portanto, a ser de suma importância.

Muitos fatores devem ser considerados ao escolher entre as opções de aplicativos móveis da Web, nativos e híbridos para dispositivos móveis. Cada um tem suas próprias vantagens, mas os aplicativos da Web para dispositivos móveis geralmente representam sua opção de desenvolvimento mais eficiente (e, portanto, de tempo de lançamento no mercado). Se você optar por seguir esse caminho, espero que este tutorial de desenvolvimento de aplicativos da Web para dispositivos móveis ajude você a chegar mais diretamente e com sucesso ao seu destino.