Quais são os prós e os contras das abordagens de aplicativos móveis HTML5, nativas e híbridas?

Eu quero desenvolver um aplicativo móvel. Recentemente, li um artigo no Telerik Forum , que compara três tipos de aplicativos para dispositivos móveis e não sei qual deles devo escolher para começar. Aqui está uma imagem descrevendo os prós e contras de diferentes opções de design para dispositivos móveis

Para decidir entre essas opções de design, eu gostaria de entender melhor os prós e os contras de cada opção de arquitetura listada no diagrama. Quais são os prós e os contras de cada abordagem de arquitetura?

Sou um desenvolvedor de dispositivos móveis que passou muito tempo considerando esse problema.

Por que você pergunta?

Provavelmente, você espera reduzir os custos de desenvolvimento de aplicativos:

• Usando habilidades de desenvolvimento HTML5 / Javascript existentes
• Segmentar várias plataformas sem escrever vários aplicativos do zero
• Não é necessário manter várias bases de código no futuro

Os motivos também podem incluir:

• Desenvolvimento HTML5 / Javascript percebido como "mais fácil" do que o desenvolvimento da plataforma nativa
• Evitando o pagamento de taxas de registro no programa para desenvolvedores
• Evitando restrições de conteúdo da loja de aplicativos (jogos de azar, etc.)
• Evitando a compra de hardware de desenvolvimento (por exemplo, desenvolvimento de Mac para iPhone)

Definições

Vamos estabelecer exatamente o que queremos dizer com cada uma das três abordagens mencionadas:

Nativo
Um aplicativo instalado em um dispositivo, geralmente a partir de sua loja de aplicativos (embora às vezes possa ser carregado de lado). Para os fins desta discussão, a interface do usuário de um aplicativo nativo geralmente não consiste apenas em uma visualização da web em tela cheia.

Web para dispositivos móveis
Na verdade, pode ser qualquer página da Web; no entanto, para esta discussão, vamos considerar um aplicativo Web de página única que tenta imitar a aparência de um aplicativo nativo. Não é um aplicativo nativo, é executado no navegador do dispositivo.

Híbrido
Híbrido aplicativo instanceofnativo.

A maioria das pessoas provavelmente entende que um aplicativo híbrido é um aplicativo da web móvel de página única (novamente imitando a aparência de um aplicativo nativo), mas compactado como um aplicativo nativo com acesso a serviços nativos (à la Phonegap).

No entanto, existe de fato um espectro entre o modelo Phonegap e o totalmente nativo, que abordarei mais adiante.

Web para celular

Restrições técnicas
Vamos primeiro listar algumas restrições técnicas em aplicativos da web para dispositivos móveis que, por si só, podem ser um fator decisivo, dependendo do que você está fazendo:

• Apenas interface do usuário HTML / canvas
• Sem acesso a determinados eventos e serviços do dispositivo (estes são amplamente documentados)
• Não pode ser listado nas lojas de aplicativos (afetando a capacidade de descoberta)
• Pode ficar em tela cheia e ter um ícone de tela inicial no iOS, no entanto, essa é uma experiência incomum e desconhecida para a maioria dos usuários

Se você pode viver com tudo o que foi dito acima, continue lendo para saber mais sobre os desafios dos aplicativos da web em estilo nativo de página única. No entanto, esta seção não estaria completa sem referência ao aplicativo FT.

Financial Times
O aplicativo da web FT é um exemplo famoso desse estilo de aplicativo. Aqui está um recurso interessante do jornal britânico Guardian sobre isso.

É certamente um feito notável de engenharia. Observe que, no momento, ele ainda está disponível apenas no iOS - isso me diz que eles estão descobrindo que resolver os desafios do desenvolvimento avançado entre navegadores é realmente muito difícil.

Aplicativos da web em estilo nativo de página única

Esta seção se aplica aos aplicativos da Web para celular e do estilo Phonegap.

A aparência no estilo nativo de um aplicativo Web geralmente é obtida com uma estrutura como o Sencha Touch, que fornece um conjunto de componentes da interface do usuário para você usar.

Tais estruturas são boas para interfaces de usuário muito simples. No entanto, eles não têm flexibilidade. Você não poderá implementar nenhum design de aplicativo nativo usando o Sencha, precisará adaptar seu design ao que a estrutura pode acomodar.

A principal maneira pela qual essas estruturas sofrem é tentar emular as complexidades da interface do usuário da plataforma. Esse belo efeito de salto que você obtém quando rola para o final de uma lista no iPhone? Sua estrutura precisa emular isso em Javascript. É impossível recriá-lo completamente, será mais propenso a desacelerar e seus usuários ficarão presos no "vale misterioso" de um aplicativo que parece meio nativo, mas claramente não é, e não é técnico o usuário não poderá identificar exatamente o motivo.

O mito "HTML5 / Javascript é fácil"

A fragmentação de dispositivos nos navegadores da Web é abundante e, quando você ultrapassa o HTML e CSS mais básico, percebe que as coisas não funcionam como esperado. Você pode gastar mais tempo resolvendo problemas complicados da interface do usuário do que teria economizado fazendo isso duas vezes nativamente. Se você for nativo, observe que as visualizações da web do aplicativo nativo não são iguais aos navegadores de dispositivos e têm seus próprios problemas de fragmentação.

E, à medida que seu aplicativo se torna funcionalmente mais complexo, você descobre que precisa de mais do que habilidades básicas de jquery para manter seu Javascript limpo e sustentável.

Dito isso, é perfeitamente possível criar aplicativos simples e funcionais rapidamente com essa abordagem. Mas é bastante óbvio quando um aplicativo está fazendo isso.

Mais adiante no espectro

Portanto, queremos um UX melhor do que os aplicativos do estilo Phonegap podem oferecer, sem escrever absolutamente tudo do zero várias vezes. O que podemos fazer?

Compartilhar código não UI

Há uma variedade de técnicas disponíveis para compartilhar a lógica de negócios em várias plataformas nativas. O Google lançou o J2ObjC, que converte Java em Objective-C. Com fatoração cuidadosa do código, uma biblioteca Java pode ser usada no Android e iOS.

Bibliotecas como Calatrava e Kirin permitem que bases de código escritas em Javascript (e, portanto, qualquer coisa que possa ser compilada em Javascript) sejam manipuladas a partir do código nativo. Isenção de responsabilidade: trabalho para as Plataformas Futuras que criaram Kirin; tivemos grande sucesso usando-o no iOS com Javascript gerado a partir de Java com GWT, com o código Java também sendo executado nativamente no Android.

Use visualizações da web ... quando apropriado

As visualizações da Web em tela cheia têm muito trabalho a fazer para imitar as transições da tela e os efeitos de rejeição. Mas uma visualização na web dentro do aplicativo nativo chrome pode ser indistinguível de nativo.

Existem métodos padrão e bem documentados para aplicativos nativos e visualizações da web se comunicarem.

Listas e tabelas podem funcionar particularmente bem quando feitas dessa maneira, no entanto, a entrada de texto é um exemplo de algo melhor manipulado nativamente (para controle total sobre o teclado).

Em suma

A abordagem certa para você depende da complexidade do seu aplicativo e de qual nível de polimento da interface do usuário você ficará satisfeito.

Meu lema: use visualizações da Web sempre que possível, mas verifique se os usuários não sabem .

Primeiro, verifique esta pesquisa para saber o que está acontecendo!

comparação entre os três tipos: Compreendendo as opções de desenvolvimento de aplicativos móveis

Comparações entre nativo e hyprid:

HTML5 x nativo

HTML5 x aplicativo nativo: qual escolher?

Este é realmente bom: HTML5 v aplicativos nativos: considerações importantes para sua estratégia para celular

Comentários:

• Você pode optar por um deles depende do que você tem (habilidades) e do que pode obter (aparência e desempenho, desempenho, funcionalidade, ...)
• Todo desenvolvedor de aplicativos móveis deve ter uma visão / requisitos claros sobre o aplicativo que ele está desenvolvendo para as primeiras versões e as futuras! apenas para garantir que a opção que ele usaria não o limite em algum momento.
• Não há nada como ter uma experiência real com as três maneiras e estar atualizado ao mesmo tempo, isso lhe dará a sensação e a capacidade de tomar a decisão certa.

Se precisar acessar o hardware do telefone, crie um aplicativo nativo (em HTML5, você pode acessar alguns dos componentes de hardware do dispositivo, como GPS).

Se você estiver mais à vontade com o desenvolvimento da Web, você deve continuar, a menos que precise criar um aplicativo nativo.

Tanto quanto você deve saber, eu diria que você deve ter em mente todos os diferentes tamanhos de tela (incluindo orientação vertical e horizontal). Você deve ter em mente várias versões do sistema operacional (isso é mais para o Android). Como se trata de divisões móveis, existe a chance de o usuário atender uma chamada telefônica e também não ter o poder de computação de um desktop ou servidor.

Para mim, ao escrever qualquer aplicativo de consumidor, o que é fundamental para o seu sucesso é a aceitação e a percepção do usuário pelo aplicativo. Por esse motivo, quatro razões para apoiar aplicativos nativos, apesar dos custos adicionais associados ao aprendizado, treinamento e perda do WORA (a gravação é executada em qualquer lugar) são:

1. Inicialização mais rápida do aplicativo
2. Rolagem mais suave
3. Interface do usuário do aplicativo com mais consistência que se liga de maneira mais consistente com o restante do SO e dos aplicativos
4. Resposta mais rápida da interface do usuário do aplicativo

O que você deseja acima de tudo é uma ótima experiência do usuário que ajuda seu aplicativo a ter sucesso no mercado de garganta cortada. É claro que há exceções, especialmente falta de qualificação, falta de tempo e orçamento. Às vezes, os aplicativos são voltados para um conjunto limitado de usuários de negócios que podem não se importar muito com essas coisas.

É por razões semelhantes a essas que o Facebook abandonou sua estratégia de aplicativos em favor de aplicativos nativos para IOS e android:

Por favor leia:

Mark Zuckerberg: Nosso maior erro foi apostar demais no HTML5 http://techcrunch.com/2012/09/11/mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on- html5 /

Por que o Facebook abandonou a Web móvel e se tornou nativo com seu novo aplicativo para iOS http://readwrite.com/2012/08/23/how-facebook-ditched-the-mobile-web-went-native-with-its-new- ios-app # awesm = ~ o9jDrRefxdgnpS

Espero que isto ajude.

Com o exposto abaixo, minha posição atual sobre esse desastre é que é bom começar com o híbrido, explorar seu aplicativo, iterar rapidamente o feedback do cliente e estabilizar o conjunto de recursos. Em seguida, reescreva o aplicativo como nativo de acordo com as especificações, para aprimorar a experiência.

Deixei o Mobile Web de fora porque ele serve a um propósito completamente diferente. Se você quer estar nas lojas de aplicativos, o Native / Hybrid é o caminho a percorrer. Se você deseja simplificar a implantação e deseja sacrificar a experiência e a capacidade técnica, vá para a Web móvel.

Pro / Contras Nativo :

• Pro: ele se encaixa com o restante da experiência do dispositivo, sem problemas estranhos no vale .
• Pro: fornece principalmente uma experiência de interface do usuário consistente e suave, sem atrasos, sem interrupções.
• Pro: poucas limitações técnicas, você pode utilizar totalmente o dispositivo.
• Pro: ferramentas nativas fornecem conformidade com a validação de lojas de aplicativos.
• Pro: estruturas nativas incluem ajustes por versão da plataforma, menos tempo gasto no ajuste fino.
• Con: É compilação para durar e, portanto, leva mais tempo para compilar.
• Contras: Requer desenvolvedores poliglotas difíceis de encontrar e caros.
• Contras: É necessário familiarizar as APIs de cada plataforma de dispositivo (iOS / Android / etc).
• Con: Curva de aprendizado acentuada.
• Con: Conjunto de ferramentas diferente por plataforma.

Pro / Contras Híbrido :

• Pro: base de código única para segmentar várias plataformas de dispositivos.
• Pro: ciclos rápidos de desenvolvimento, grande flexibilidade no layout, perfeito para prototipagem e MVPs .
• Pro: curva de aprendizado confortável, muita documentação, estruturas para ajudá-lo.
• Pro: conjunto de ferramentas de desenvolvimento único. As ferramentas de depuração do Chrome são excelentes.
• Pro: uma base de código para segmentar várias plataformas de dispositivos.
• Pro: Muitos desenvolvedores disponíveis, fáceis de aprender.
• Contras: Requer uma estrutura decente da interface do usuário para adaptar a interface do usuário para que todas as plataformas diferentes sejam consistentes com a experiência do dispositivo. Existem soluções como Kendo UI , Sencha Touch .
• Contras: Precisa ter muita consciência sobre o uso da memória e da computação, alguns CSS e loops de javascript podem atrasar seriamente o aplicativo. Não são muito boas ferramentas disponíveis no dispositivo para depuração.
• Con: Ainda não amadureceu, as coisas podem mudar repentinamente, as ferramentas estão melhorando.

Sendo um desenvolvedor de dispositivos móveis, o pior é o acesso offline. Você simplesmente força os usuários a estar online, o que deve funcionar em muitos aplicativos, mas não em todos.

O outro grande aspecto ruim é a lentidão. O tempo necessário para analisar dados remotos pode levar um tempo significativo. Sim, você pode buscar previamente os dados durante o tempo de carregamento, mas em todos os outros casos, não pode evitar a lentidão.

Descobri que esse aplicativo encerrava o aplicativo mais caro que os nativos. Já não os recomendo a nenhum cliente meu.

O grande problema dos aplicativos híbridos é a fragmentação dos frameworks: existem claramente muito mais deles (Ionic, Xamarin, React Native etc.) do que plataformas de interesse móveis nativas (geralmente apenas duas, Android e iOS). Essas estruturas competem, emergem, declinam, portanto, a adoção de híbridos não o impedirá de pular de plataforma em plataforma, mesmo se você planeja manter sua equipe atual por toda a vida.

Google e Apple estão se esforçando ao máximo para fornecer e apoiar editores, depuradores, estruturas de teste, ferramentas de refatoração e outros meios para desenvolver para essas plataformas. Portanto, eu usaria uma redação típica: " é muito mais fácil desenvolver um aplicativo híbrido, editar com seu editor favorito e abrir em um navegador " com a reserva razoável. Xamarin e React Native são plataformas de desenvolvimento, assim como Swift ou Java / Android, e, embora o "olá mundo" possa parecer mais curto, eventualmente deve levar um tempo comparável para aprender adequadamente.

Se, em qualquer caso, surgir a necessidade de componentes nativos (por exemplo, a biblioteca de terceiros existente deve ser integrada), você terá três estruturas em vez de duas: iOS, Android e sua estrutura híbrida na parte superior, terminando com arquitetura mais complexa. Depurar esses aplicativos, alternar entre chamadas entre camadas, registrar todas as camadas, manter o código sincronizado é complexo e às vezes impossível.

Alguns dizem que o " aplicativo será exatamente o mesmo para todas as plataformas ". É realmente uma coisa boa? O aplicativo Android deve ser semelhante ao aplicativo Android e o aplicativo iOS deve ser semelhante ao aplicativo iOS.

E os novos recursos? Vestíveis? Aplicativos instantâneos agora oferecidos pela plataforma Android? Mostrando dados adicionais no monitor externo? Agora, os aplicativos híbridos suportam muitos recursos nativos, mas eles realmente oferecem suporte a todos eles? A qualquer momento, imediatamente?

Por fim, não apenas o desempenho e a experiência do usuário, mas também a segurança podem estar mais do lado do aplicativo nativo. A estrutura híbrida adiciona a camada de indireção que pode ter erros próprios, incluindo erros de segurança.

Concluindo tudo acima, com a possibilidade de escolher, eu definitivamente escolheria os dois aplicativos nativos, um para iOS e outro para Android ou, alternativamente, simplesmente projetaria uma versão móvel do site sem se preocupar com o desenvolvimento de aplicativos para qualquer plataforma .