Neste artigo, fornecemos uma visão geral detalhada de Flutter, React Native e Xamarin - e um resumo de algumas das outras tecnologias de plataforma cruzada menos conhecidas.

As equipes de desenvolvimento de software estão sempre procurando ferramentas para ajudá-los a se tornarem mais eficientes - e oferecer melhores experiências para seus usuários. Isso é especialmente verdadeiro hoje quando se trata de criar aplicativos.

Conforme nossa indústria amadurece, os aplicativos que criamos são usados ​​em mais lugares e em mais tipos de dispositivos conectados do que nunca.

Com essa complexidade, as ferramentas que podem ajudar os desenvolvedores a criar experiências de plataforma cruzada - e reutilizar código, recursos e designs - podem ser incrivelmente valiosas. As ferramentas de plataforma cruzada podem reduzir os custos de desenvolvimento - e mais importante, o tempo. Quanto mais código você puder compartilhar entre plataformas, mais rápido você pode levar sua ideia de aplicativo ao mercado. E essa economia de tempo e dinheiro não é uma coisa única. Em nossa experiência, o uso de ferramentas de plataforma cruzada também simplifica o suporte e a manutenção e leva à aceleração contínua do roadmap de seu produto.

Hoje, existem três ferramentas de desenvolvimento líderes a serem consideradas para projetos de aplicativos de plataforma cruzada:

• Flutter

• React Native

• Xamarin

E se você está considerando qual escolher para seu projeto de aplicativo multiplataforma, não há resposta certa ou errada.

Neste artigo, fornecemos uma visão geral detalhada de Flutter, React Native e Xamarin - e um resumo de algumas das outras tecnologias de plataforma cruzada menos conhecidas. Mais importante, explicamos por que os desenvolvedores e líderes de engenharia provavelmente escolheriam um em vez do outro.

FLUTTER

Por que Flutter?

Como desenvolvedor ou gerente de engenharia, você pode escolher Flutter porque:

Velocidade e desempenho são muito importantes.

Você deseja usar as mais novas e modernas ferramentas de desenvolvimento e linguagem (Dart).

Prós e contras do Flutter

Prós:

• Todo o conjunto de ferramentas é de código aberto.

• Veja os resultados de suas alterações quase instantaneamente com Hot Reload.

• Ofereça uma experiência de aplicativo nativo de alto desempenho com animações/vídeos de até 60 quadros por segundo.

• Crie componentes de IU com os mesmos recursos dos aplicativos nativos, mas com mais opções para personalizar e criar novos comportamentos.

• Crie animações facilmente e aplique-as a qualquer componente da IU.

• Obtenha acesso direto ao código nativo, para que você possa importar bibliotecas e usar APIs nativas.

• Reutilize a base de código no celular e (em breve) na web e na IoT.

Contras:

• Menos maduro que o Xamarin e o React Native.

• Não há muitos plugins disponíveis.

• Muito poucas ferramentas de integração contínua incluem integração direta com Flutter.

Principais benefícios

Uma das razões pelas quais o Flutter cresceu tão rapidamente entre as melhores soluções de plataforma cruzada é por causa de seu desempenho. Os desenvolvedores podem criar designs de IU sofisticados com transições e animações ricas, sem nenhum impacto no desempenho. Um dos pontos fortes do Flutter é o Dart, uma nova linguagem de programação que oferece o melhor dos dois mundos:

• Um código ultrarrápido “Hot Reload”, para que você possa experimentar e ver os resultados quase instantaneamente.

• Um compilador nativo para otimizar seu aplicativo quando estiver pronto para produção.

Uma característica importante do Flutter é que você não precisa esperar que o Google suporte um novo recurso do sistema operacional ou esperar por uma correção de bug no middleware - porque o Flutter não envolve o código nativo. Em vez disso, ele funciona junto com a estrutura nativa e os desenvolvedores têm acesso direto a todos os recursos nativos. Os desenvolvedores podem fazer quase tudo o que fariam em uma estrutura nativa com a vantagem de ter a reutilização de código não apenas para iOS e Android - mas também para a web, desktop e dispositivos incorporados. 

UI Flutter

A equipe do Flutter optou explicitamente por não usar os componentes de UI padrão das plataformas nativas. Em vez disso, a equipe implementou sua própria UI, com base em um componente chamado Widget. No Flutter, tudo é um widget, e os desenvolvedores podem construir facilmente sua própria UI colocando pequenos blocos juntos. Isso ajuda os desenvolvedores a criar designs personalizados, mas também segue todas as convenções da plataforma nativa.

O Flutter oferece uma enorme biblioteca de componentes prontos dentro da estrutura, para que os desenvolvedores possam ter os mesmos componentes de IU que teriam se estivessem desenvolvendo o aplicativo no iOS ou Android. Mesmo que pareçam componentes nativos, nos bastidores o Flutter gerencia tudo usando a Biblioteca de Gráficos Skia. Por exemplo, a transição padrão entre as telas é diferente quando o aplicativo está rodando no Android ou iOS, sem que o desenvolvedor precise especificar a adaptação.

Flutter APIs nativas e integração de terceiros

Tanto APIs nativas quanto bibliotecas de terceiros são tratadas da mesma maneira no Flutter: os desenvolvedores podem importá-los e usá-los da mesma forma que fariam na estrutura nativa. No entanto, os desenvolvedores precisam implementar uma camada Dart adicional para se comunicar com o código nativo.

Para entender por que isso é necessário, precisamos dar uma olhada na arquitetura do framework Flutter. O Flutter foi projetado com camadas isoladas que permitem que o framework seja executado em qualquer plataforma com apenas um shell nativo, que hospeda o mecanismo Flutter e tudo ao seu redor. Dentro de qualquer projeto Flutter, há um pequeno projeto nativo, onde o kit de ferramentas Flutter é carregado e chamado. Esse também é o lugar onde o desenvolvedor pode e deve escrever as APIs ou bibliotecas nativas. No entanto, os desenvolvedores ainda precisam invocar o código nativo específico do Flutter. Para fazer isso, eles precisam usar canais de plataforma em ambos os lados, seja para chamar métodos no código nativo ou para compartilhar dados.

Um canal funciona como um sistema de mensagens binárias muito simples, onde os desenvolvedores podem enviar uma mensagem do aplicativo para os shells e vice-versa. Este sistema de comunicação é assíncrono e possui uma resposta de resultado opcional, onde os desenvolvedores podem retornar alguns dados do código que é chamado. Flutter tem suporte embutido para algumas estruturas de dados, mas o desenvolvedor pode serializar qualquer tipo de dados para binário e recuperar do outro lado, fornecendo um codec ou qualquer outra solução de codificação / decodificação (por exemplo, Protobuf ). O objetivo deste sistema é permitir que os desenvolvedores estejam no controle do que está acontecendo entre o aplicativo Flutter e o shell nativo, facilitando qualquer implementação customizada. Porém, se o desenvolvedor quiser acelerar as coisas, ele pode usar Plugins , pacotes Flutter feitos pelo Google e pela comunidade.

Arquitetura do projeto Flutter

Mesmo que a estrutura Flutter esteja crescendo em popularidade, a equipe do Google ainda não forneceu um padrão de design recomendado. Além disso, existem desenvolvedores que vêm para o Flutter de várias origens, especialmente devido à semelhança do Dart com linguagens modernas como JavaScript, Kotlin e Swift. Esses desenvolvedores usam padrões de sucesso aos quais já estão acostumados em outras plataformas. Como resultado, uma variedade de arquiteturas estão sendo implementadas em projetos Flutter, incluindo BLoC, Provider, Scoped Model, Redux, MVP, MVVM e muitos outros.

A equipe do Flutter declarou publicamente que está usando BLoC e Provider para seus próprios projetos, mas a equipe não ofereceu uma recomendação oficial. Você pode encontrar muitas das arquiteturas como parte de pacotes gerenciados de forma independente da comunidade.

Documentação do Flutter

A estrutura do Flutter é de código aberto e tudo está documentado e disponível na web pública. Além disso, o site Flutter tem tutoriais específicos para desenvolvedores vindos do Android, iOS, web e até mesmo outras soluções de plataforma cruzada. Existem livros de receitas, laboratórios de código e exemplos - para que os desenvolvedores possam aprender em qualquer lugar - e um canal do YouTube muito ativo .

REACT NATIVE

Por que React Native?

Como desenvolvedor ou gerente de engenharia, você pode escolher React Native porque:

• Você ou sua equipe estão familiarizados com desenvolvimento web e JavaScript.

• Você está transferindo um aplicativo da web existente para iOS e Android.

• Você precisa contratar desenvolvedores; JavaScript é a linguagem de programação mais popular do mundo.

React Native prós e contras

Prós:

• Fácil de começar a usar.

• Integre os recursos do React Native com o código nativo existente.

• A adoção do mercado é alta.

• Boa documentação.

• Fácil de depurar por meio do Chrome Dev Tools ou Safari Dev Tools.

• Aplicar conhecimentos e ferramentas de desenvolvimento web e mobile.

• Código aberto e gratuito para usar.

Contras:

• Relativamente imaturo em comparação com Xamarin.

• Às vezes é difícil atualizar aplicativos para novas versões do React Native.

• Alguns recursos ainda requerem desenvolvimento adicional em plataformas nativas.

React Native background

Como outras estruturas de desenvolvimento de plataforma cruzada, React Native foi criado para ajudar a agilizar o desenvolvimento de aplicativos - mas construído em torno de ferramentas de desenvolvimento web conhecidas, começando com JavaScript. React Native combina as melhores partes do desenvolvimento nativo com React, uma biblioteca JavaScript para construir interfaces de usuário. Em conceito, uma estrutura JavaScript que pode ser aplicada a aplicativos móveis de plataforma cruzada parece incrivelmente útil - e a semelhança com a sintaxe React JS a torna ainda mais interessante. Usando a mesma linguagem e sintaxe, é possível desenvolver aplicativos nativos e aplicativos web. O React Native nasceu em 2013 durante um hackathon no Facebook e, em 2015, tornou-se open source. O Facebook continua a investir no ambiente React - e a adoção pelo mercado está se acelerando. Empresas como Instagram, Tesla, Uber, Walmart e Pinterest lançaram aplicativos desenvolvidos com React Native.

Principais benefícios do React Native

Você pode começar a usar o React Native com qualquer projeto de desenvolvimento de aplicativo existente e ele pode coexistir sem problemas com as ferramentas e equipes de desenvolvimento nativas do iOS e Android. Os desenvolvedores nativos podem trabalhar nas estruturas nativas, enquanto os desenvolvedores do React trabalham em outros recursos para o mesmo aplicativo. A UI do React é capaz de traduzir qualquer código nativo e convertê-lo em componentes UI de plataforma cruzada.

React Native UI

Se você já escreveu páginas da web HTML + CSS antes, sabe como criar uma UI com o React Native. Ele se baseia em JSX , um tipo de sintaxe HTML que aproveita CSS para alinhamento, cores e animações simples, e Flexbox para fornecer um layout consistente em diferentes tamanhos de tela.

Os desenvolvedores só precisam criar diretivas, como:

• O conteúdo deve ser exibido como uma linha ou coluna?

• Deve ser espaçado uniformemente ou centralizado?

• Você precisa alterar a ordem de alguns itens?

React Native também tem várias alternativas de estilo e layout - duas das mais conhecidas são Styled Components e Emotion . Como o “Hot Reload” do Flutter, o React agora oferece um Fast Refresh para os desenvolvedores recarregarem apenas o componente em que você está trabalhando - em vez de recarregar o aplicativo inteiro - para ver as alterações imediatamente.

React Native APIs e integração de terceiros

Existem vários módulos disponíveis para estender o React Native. E se os desenvolvedores precisarem de um módulo que ainda não está disponível, eles podem escrevê-lo em JavaScript ou usar as linguagens nativas para iOS (Swift, Objective-C) ou Android (Java, Kotlin) .Antes de codificar um módulo do zero, os desenvolvedores devem pesquisar o NPM . É provável que você encontre o módulo que deseja lá. A Comunidade React Native também mantém muitos módulos de código aberto confiáveis ​​que podem ser integrados a projetos de desenvolvimento de aplicativos móveis sem muito esforço ou atualização.

Arquitetura do projeto React Native

Ao arquitetar um aplicativo React Native, recomendamos começar com Expo, um conjunto de ferramentas e serviços para ajudar a desenvolver, construir, implantar e iterar rapidamente em aplicativos iOS, Android e web com a mesma base de código JavaScript. Como alternativa, os desenvolvedores podem usar React Native CLI. Ambas as ferramentas ajudam a configurar um aplicativo para desenvolvimento e estabelecer a arquitetura do projeto.

Documentação do React Native

Quando se trata de documentação, o React Native brilha. Tem uma comunidade ativa que compartilha regularmente informações e casos de uso reais no YouTube, Medium, Reddit e muito mais. Além disso, a própria equipe do React está muito comprometida em manter a documentação e os tutoriais atualizados.

Xamarin e Xamarin.Forms

Por que Xamarin?

Como desenvolvedor ou gerente de engenharia, você pode escolher o Xamarin porque:

• Você ou sua equipe têm ampla experiência em desenvolvimento da Microsoft e C# e/ou serviços da Microsoft estão no centro da pilha de tecnologia da sua empresa.

• É o conjunto de ferramentas de desenvolvimento de plataforma cruzada mais maduro do mercado.

• Ele oferece uma experiência de usuário de aplicativo nativo.

Prós e contras do Xamarin

Prós

• Acesse 100% das APIs da plataforma.

• Obtenha desempenho, aparência e comportamento nativos em cada plataforma.

• Compartilhe mais de 90% do código com o uso do .NET.

• A ferramenta multiplataforma mais madura e completa (8 anos e usada por 1,6 milhão de desenvolvedores em todo o mundo).

• Teste as alterações da IU imediatamente com o XAML Hot Reload.

• Execute o mesmo aplicativo no Android, iOS, watchOS, macOS, Windows, Tizen e WebAssembly.

• Aproveite muitas bibliotecas disponíveis no NuGet.

Contras:

• Tamanhos de arquivo de aplicativo maiores do que aplicativos desenvolvidos em plataformas nativas.

• Aplicativos com gráficos pesados, como jogos, não são adequados para o Xamarin (embora seja possível fazer jogos com o Xamarin ).

• Custo: Construir aplicativos comerciais (não de código aberto) com equipes com mais de cinco desenvolvedores requer uma assinatura paga do Visual Studio.

Background Xamarin

Fundado em 2011 pelos criadores do Mono (uma implementação de código aberto do .NET Framework da Microsoft), o Xamarin é uma plataforma madura para construir aplicativos modernos e de alto desempenho para iOS, Android e Windows. Em 2016, o Xamarin foi adquirido pela Microsoft - e a plataforma foi integrada ao Visual Studio. Desde então, a Microsoft tornou o Xamarin um código-fonte aberto, tornando-o uma escolha ainda mais popular para desenvolvedores móveis.

Embora seja possível desenvolver aplicativos Xamarin usando F# (uma linguagem de programação madura, de código aberto, plataforma cruzada e funcional), a linguagem principal usada para escrever aplicativos Xamarin é C#. Desenvolvido pela primeira vez em 2002, o C# versão 8 foi lançada recentemente com excelentes novos recursos.

Principais benefícios do Xamarin

O Xamarin é ideal para desenvolvedores que desejam compartilhar código, testes e lógica de negócios entre plataformas. Nossa equipe de desenvolvimento Xamarin descobriu que aproximadamente 90% do código e da lógica de negócios podem ser reutilizados em aplicativos iOS e Android.

A capacidade de reutilizar código é certamente uma das maiores vantagens de usar o Xamarin, especialmente se seus aplicativos se integram a um ambiente de back-end .NET. Isso inclui o Azure, que, de acordo com a Microsoft, agora é usado por mais de 95% das empresas Fortune 500. Se um ambiente de desenvolvimento foi amplamente composto por tecnologias Microsoft, com boa separação de código, os desenvolvedores podem compartilhar a lógica de negócios e torná-la agnóstica de front-end. Em seguida, eles podem conectar a lógica a qualquer cliente, incluindo aplicativos Xamarin, API ASP.NET Core, SignalR e muito mais. Não há necessidade de reinventar a roda nem perder tempo escrevendo as regras de negócios duas vezes, só porque você não pode compartilhar um código que foi escrito em uma linguagem ou outra.

E, claro, se a sua equipe de desenvolvimento já possui conhecimento e experiência da Microsoft com C#, a curva de aprendizado não será tão íngreme. (Embora, como nosso EVP de Engenharia Paulo Michels escreveu uma vez, seus desenvolvedores da Microsoft ainda precisam desenvolver experiência móvel: “Não há campo de treinamento que seus desenvolvedores da Microsoft possam fazer para transformá-los instantaneamente em super-heróis do desenvolvimento móvel Xamarin”).

Xamarin UI

Para o desenvolvimento de UI, o Xamarin tem ferramentas robustas para ajudar os desenvolvedores a alcançar aplicativos perfeitos em pixels. O XAML separa o código da UI das regras de negócios. Recentemente, o Xamarin lançou o XAML Hot Reload, uma ferramenta tão esperada que ajuda os desenvolvedores a completar o código da UI em menos tempo. Não apenas isso, mas a Microsoft anunciou recentemente que o Xamarin Hot Restart será lançado em breve. Esses dois anúncios permitirão que os desenvolvedores escrevam e validem a interface do usuário com mais rapidez e confiança. O Xamarin tem algumas alternativas de estilo e layout:

• Xamarin.Forms

Frequentemente confundido com o próprio Xamarin, Xamarin.Forms é uma biblioteca de kit de ferramentas de interface cruzada de código aberto que oferece um conjunto de controles que usam renderizadores de plataforma para converter os elementos de interface cruzada em controles nativos.

• SkiaSharp

SkiaSharp é uma porta para C# da Skia Graphics Library, uma biblioteca de gráficos 2D de código aberto gerenciada pelo Google. Os aplicativos Flutter usam o Skia como mecanismo gráfico. O projeto SkiaSharp é mantido pela equipe Xamarin e funciona bem com o Xamarin.Forms. Os desenvolvedores que precisam desenhar gráficos vetoriais 2D, bitmaps ou texto podem usar o SkiaSharp para lidar com o trabalho.

APIs nativas Xamarin

Com o Xamarin, os desenvolvedores têm acesso total às APIs da plataforma nativa - um grande benefício. Por exemplo, os desenvolvedores usam APIs específicas da plataforma para habilitar notificações push, Apple Pay no iOS e Google Wallet no Android, entre muitos outros. A equipe do Xamarin pretende lançar uma versão estável do Xamarin.iOS e do Xamarin.Android dentro de 24 horas após o lançamento oficial do sistema operacional pela Apple ou Google - embora às vezes esses lançamentos ocorram alguns dias depois.

Integração de terceiros Xamarin

Os desenvolvedores podem construir integrações com bibliotecas de terceiros em aplicativos Xamarin de duas maneiras diferentes: usando o gerenciador de pacotes NuGet ou criando bibliotecas de ligação de pacotes nativos iOS/Android.

• NuGet: permite aos desenvolvedores publicar seus pacotes para uso geral em um ambiente .NET e integrar bibliotecas de terceiros aos aplicativos. De acordo com nuget.org, 180.227 pacotes exclusivos estão disponíveis até o momento. O popular pacote Xamarin Essentials de código aberto recentemente ultrapassou 1 milhão de downloads.

• Bibliotecas de ligação: são bibliotecas nativas do Android ou iOS que oferecem acesso via C# às bibliotecas Java ou Objective-C existentes. Eles permitem que os desenvolvedores façam uso de bibliotecas nativas para Android ou iOS que não estão disponíveis via NuGet, pois não são .NET. Criar ligações nativas não é trivial e pode consumir muito tempo. 

Arquitetura do projeto Xamarin

Conforme observado acima, os aplicativos Xamarin fazem parte do ecossistema .NET e usam as melhores práticas do mundo .NET.

Os aplicativos Xamarin normalmente dependem do MVVM, um padrão de arquitetura nascido na Microsoft há 14 anos. A grande maioria dos aplicativos Xamarin é construída com MVVM. Os desenvolvedores não precisam escrever o básico para suportar o MVVM, pois eles já estão implementados no .NET. Ele combina muito bem com o desenvolvimento de IU usando XAML. O padrão MVVM foi recentemente recomendado pelo Google em seu guia para arquitetura de aplicativos

Documentação Xamarin

A Microsoft sempre teve muito cuidado com o suporte aos desenvolvedores por meio de documentação, tutoriais e vídeos, e a equipe Xamarin não é exceção. Há alguns anos, eles lançaram o docs.microsoft.com, um portal de conteúdo criado com design responsivo, recursos de compartilhamento social, temas e pesquisa. Todas as coisas .NET.

A documentação do Xamarin inclui informações sobre o SDK, exemplos de código, tutoriais e muito mais. Está repleto de conteúdo para ajudar os desenvolvedores a obter o máximo da plataforma. Os desenvolvedores também podem conferir o canal Xamarin Developers no YouTube. A Microsoft também oferece treinamento Xamarin gratuito na plataforma Microsoft Learn.

Precisa de ajuda com seu projeto de aplicativo de plataforma cruzada?

A Doutbox vem construindo aplicativos usando diferentes tecnologias de plataforma cruzada desde o surgimento da App Store. Entre em contato conosco para saber mais sobre como o desenvolvimento de plataforma cruzada pode ajudar a acelerar o planejamento de seu produto e economizar dinheiro.

Fonte: www.arctouch.com