HTML 5/ ios/ JQuery/ JQuery Mobile/ Phonegap

Phonegap só resolve 50% do problema, o resto é contigo

cordova_logo_problem

Ok, eu já falei das vantagens e desvantagens do phonegap em comparação ao Adobe AIR, e eu acho que faltou um post mais completo sobre a maior dificuldade que se tem em criar uma solução mobile completa fora da caixa de areia do SDK nativo.

Phonegap resolve parte do problema em suportar Apps escritos em HTML5/JS/CSS, depois que você cria seu primeiro Hello World, você se pergunta, “Ok, e agora o que eu faço?”.

É ai, onde seus problemas começam, definir uma interface fluída, que funcione em diversos dispositivos é tarefa ultra complicada, já que temos dispositivos de diferentes densidades.

Resolver esses problemas sem o SDK nativo é um baita desafio, em especial quando se tem em mente que grande parte de Apps móveis, são customizáveis, já que você vai enfrentar isso, é bom se preparar, eis algumas ferramentas e frameworks para JS que ajudam a encurtar esse caminho.
Se você é do tipo que gosta de frameworks, com tudo prontinho, essa é a lista que eu sugiro para você.

Sencha Touch – O melhor entre todos

JQuery Mobile – Funciona para apps nativas também, só que não é tão bom para diferentes telas.

LungoJS – Biblioteca bem interessante e completa que imita um pouco do jQuery Mobile, mas trabalha com a idéia de componentização.

KendoUI – Igual ao JQueryMobile, poucos componentes.

Agora se você está em um nível que prefere fazer tudo do zero já que sua App demanda isso, devido seu nível de complicação e elementos gráficos, então aqui vai algumas dicas bem interessantes.

Zepto.js – Biblioteca igual ao jQuery, só que mais leve e compatível com o Phonegap, muito rápida por sinal na hora do loop para montagem de listas.

Foundation da ZURB – Eu uso os media-queries do framework Foundation em meu CSS próprio, já que eu não quero gastar tempo calculando o tamanho exato da fluidez das coisas, eles são os melhores e coloca o Twitter bootstrap no bolso nessa questão.

Abuse e reuse bastante de Media queries, aqui vai uma maneira de como eu resolvi meus problemas nessa questão.

 

Separando cada CSS com suas particularidades e aplicando o estilo quando for necessário em cada tela. Dica Javascript Desabilite o Touch Move no body do documento, ou você vai ter problemas de redimensionamento com o conteúdo sambando para um lado e para outro, caso o usuário toque e arraste na tela.

 document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false);

Precisa controlar melhor os gestos que são usados em sua aplicação? Você pode usar os padrões ‘touchmove’,’touchTap’,’swipeLeft’,’swipeRight’, mas você está acostumado com a sintaxe do JQuery ou ZeptoJS, por que não continuar com isso?

O HammerJS é uma biblioteca para isso, muito útil nas dificuldades de implementar gestos em containers que possuem gestos internos já existentes.

O que o phonegap se propoe é lhe ajudar a acessar recursos nativos do aparelho, e isso ele faz com louvor. O que ele não faz é te dar de mão beijada a interface ou componentes que serão usados para criar uma app móvel. É nessa parte que você se pergunta o por que.

Então, da próxima vez que você for criar Apps móveis com tecnologia HTML, leia esse post ou indique à um amigo. Vai salvar alguns dias em seu calendário apertado de entregas.

 

10 thoughts on “Phonegap só resolve 50% do problema, o resto é contigo

  1. Fala Igor, encontrei o seu site hoje e está sendo interessante para apoiar a minha decisão por onde começar no mundo mobile, pois estou em dúvida entre o phonegap e o titanium, com tendência ao phonegap. Pois minha análise é muito em cima tb do que será a dupla HTML5 e CSS3 e seus sucessores. Para defender o titanium existe a questão de que você apenas trabalha com ele, sem precisar recorrer a recursos front end do html5 e css3, mas nesse final de semana me veio a lembrança do grande poder que o HTML5 já possui e possuirá com a combinação do CSS3 e javascript, até mesmo para jogos como é o caso do Andry Birds em HTML5. Mesmo sendo um conhecimento a mais para equipe ou o desenvolvedor solitário eu estou quase certo que o crescimento e desenvolvimento do HTML5 o phonegap tenderá a ter um crescimento tb no quesito interação do usuário devido aos recursos do html5. Tb gostaria de fazer uma pergunta, o que realmente é bom trabalhar com o phonegap hoje? Por exemplo, app para o setor de vendas de uma empresa, app de um comércio eletrônico, app para relacionamento empresa cliente (com geolocalização, cadastro, entre outras coisas…), a parte de video-conferência é uma boa ou melhor deixar com nativo ou o titanium por enquanto…

    • Bom dia Rafael

      O Phonegap é bom por que lhe dar liberdade de integrar em qualquer IDE de seu gosto, em qualquer framework javascript, css, em fim deixa você livre para escolher.
      Se tiver uma coisa que possa comparar e dizer olha é igual, eu diria que seria igual a criar um novo projeto no Adobe Flash, onde você tinha um quadro branco e era livre
      para desenhar, animar, etc.

      Quando parte para video/audio o mais sábio é usar o próprio SDK da plataforma, ou seja nativo. Independente do que haviam dito, nativo é outra história.

  2. Valeu pela resposta Igor. E mais uma, essa é sobre o Sencha touch e o framework foundation. No caso do Sencha Touch, ele tb serve para aplicações mobile, mas precisa do phonegap para acessar recursos do Aparelho, então todo o desenvolvimento deve ser baseado no Sencha, pois se eu não me engano o S. touch é MVC e dentro dele eu coloco a estrutura do Phonegap? O que você poder clarear nisso será bem vindo.

    Quanto ao Foundation, você salva todo o framework dentro do projeto(salvando tudo para não desconfigurar nada) para usar apenas as media queries ou retira alguma coisa de lá de dentro? Mesmo utilizando o Sencha touch, precisa usar as media queries para retirar ou incluir itens para diferentes tamanho de telas?

  3. Igor, primeiramente parabéns pela iniciativa de expor algumas experiências. Tenho uma dúvida, preciso fazer um site HTML/CSS rodar localmente no iPad e com dispositivos com Android. Servirá para os vendedores mostrar os produtos. Qual seria a melhor abordagem para conseguir?

  4. oi igor,

    a combinacao html 5 + jquery mobile + xml + xslt funciona bem em um browser como o opera.

    sabe dizer se funcionara convertendomo web app para app nativo com phonegap?
    a duvida é em relacao ao processamento do xslt.

    abs,

    • Oi Angelo

      O phonegap é apenas a caixinha de areia de sua web app, tudo que for relacionado a web, e compatível com o engine webkit, vai rodar tranquilamente no phonegap.

      Imagine que o phonegap só faz embedar sua app em um navegador built-in.

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *