#Flutter x #React Native – Análise sobre 10 aspectos – Parte 1

Tempo de leitura: 9 minutos

Neste post, vamos comparar React Native(by Facebook) e Flutter(by Google) em detalhes a partir da perspectiva de um desenvolvedor.

Devido à crescente popularidade dos aplicativos móveis, quase todas as empresas precisam de um aplicativo para permanecerem competitivas no mercado. Além disso, as empresas estão procurando uma opção para construir aplicativos, especialmente para iOS e Android, com maior velocidade e menos recursos. Obviamente, a Apple e o Google forneceram ferramentas e tecnologias nativas para criar aplicativos. Os desenvolvedores de aplicativos para iOS podem criar aplicativos usando o Xcode e o Swift, enquanto os desenvolvedores do Android usam o Android Studio e o Kotlin / Java. No entanto, isso requer que os engenheiros aprendam dois conjuntos de tecnologias completamente diferentes. Como resultado, as empresas começaram a adotar soluções de plataforma cruzada sobre as soluções nativas para criar aplicativos para iOS e Android mais rapidamente usando um único idioma.

Conceitos iniciais básicos

O React Native é um projeto iniciado pelo Facebook internamente que foi aberto em 2015. Do outro lado está o Flutter, um projeto iniciado pelo Google que eles têm promovido fortemente desde o I / O 2017(falamos dele aqui). Ambas as tecnologias ajudam os desenvolvedores de aplicativos a construir -plataforma de aplicativos mais rápido usando uma única linguagem de programação. O React Native já é uma ferramenta madura e tem uma enorme comunidade, mas o Flutter também começou a ver enormes taxas de adoção desde 2017. Neste post, vamos comparar cada um deles usando dez aspectos:

  • Linguagem de programação
  • Arquitetura técnica
  • Instalação
  • Configuração e configuração do projeto
  • Componentes de interface do usuário e API de desenvolvimento
  • Produtividade do desenvolvedor
  • Suporte da comunidade
  • Suporte de teste
  • Suporte à automação de criação e lançamento
  • Suporte a DevOps e CI / CD

Agora que definimos todos os nossos critérios, vamos começar a explorar cada um deles em detalhes.

Linguagem de programação

O principal benefício do uso de uma tecnologia de desenvolvimento de aplicativos móveis multiplataforma é a capacidade de usar uma única linguagem de programação para desenvolver aplicativos para iOS e Android.

React native – JavaScript
React native usa JavaScript para criar aplicativos de plataforma cruzada. JavaScript é uma linguagem muito popular na comunidade da web no momento. É comumente usado com o React e outras estruturas JavaScript populares. Graças ao React Native, os desenvolvedores da Web podem criar aplicativos móveis com pouco de treinamento. Com isso em mente, as empresas adotaram o React Native como algo óbvio. JavaScript é uma linguagem dinamica e tudo pode ser feito com JavaScript, o que é bom e ruim ao mesmo tempo.

Flutter – dart
O Flutter usa a linguagem de programação Dart, que foi introduzida pelo Google em 2011 e raramente é usada por desenvolvedores. A sintaxe do dart é fácil de entender para desenvolvedores JavaScript ou Java, pois suporta a maioria dos conceitos orientados a objetos. É fácil começar a usar o Dart, pois há uma documentação excelente e fácil de seguir disponível no site oficial da Dart.

Análise e Resultado
Como o JavaScript é amplamente usado pela maioria dos desenvolvedores da web, é fácil adotar o framework React Native. O Dart também tem um ótimo conjunto de recursos, mas é raramente usado e menos conhecido na comunidade de desenvolvedores. Considerando isso, fica claro que o React Native ganha o ponto na categoria de linguagem de programação.

React Native 1 x 0 Flutter

Arquitetura Técnica

Ao escolher uma estrutura de desenvolvimento de aplicativos para dispositivos móveis em várias plataformas, é essencial considerar sua arquitetura técnica. Conhecendo os aspectos internos da estrutura, podemos tomar uma decisão informada e escolher aquela que é melhor para o nosso projeto.

React Native – Flux
A arquitetura depende muito do ambiente de tempo de execução JS, também conhecida como JavaScript Bridge. O código JavaScript é compilado em código nativo em tempo de execução. React Native usa a arquitetura Flux do Facebook. Em suma, o React Native usa JavaScript Bridge para se comunicar com os módulos nativos.

Flutter – Skia
O Flutter usa a estrutura Dart, que tem a maioria dos componentes incorporados, por isso, é maior em tamanho e geralmente não exige que a ponte se comunique com os módulos nativos. O Dart possui muitos frameworks, como o Material Design e o Cupertino, que fornecem todas as tecnologias necessárias para desenvolver aplicativos móveis. O framework Dart usa o mecanismo Skia C++, que possui todos os protocolos, composições e canais. Em suma, o Flutter tem tudo o que é necessário para o desenvolvimento de aplicativos no próprio mecanismo Flutter.

Análise e Resultado
O mecanismo flutuante tem a maioria dos componentes nativos na própria estrutura e nem sempre precisa de uma ponte para se comunicar com os componentes nativos. Já o React usa a JavaScript Bridge para se comunicar com módulos nativos, o que resulta em um desempenho ruim.

React Native 1 x 1 Flutter

Instalação

O método de instalação deve ser simples, sem ter muitos passos complicados para que possa ser facilmente aprendido pelos desenvolvedores que estão apenas começando com ele.

React Native – NPM
O framework React Native pode ser instalado usando o Node Package Manager (NPM). Para desenvolvedores que possuem um background JavaScript, a instalação do React Native é fácil, enquanto outros desenvolvedores precisam aprender o NPM antes. O NPM pode instalar os pacotes local ou remotamente. Os desenvolvedores precisarão entender onde exatamente o binário está localizado. Ao instalar o React Native no macOS, precisamos ter o gerenciador de pacotes HomeBrew também.

Flutter – download binário da fonte
O Flutter pode ser instalado fazendo o download do binário para uma plataforma específica do Github. No caso do macOS, temos que baixar o arquivo flutter.zip e adicioná-lo como uma variável PATH.

O Flutter deve melhorar o método de instalação apoiando gerenciadores de pacotes como Homebrew, MacPorts, YUM, APT, etc., para que os usuários não precisem executar essas etapas extras durante a instalação.

Análise e Resultado
Tanto o Flutter quanto o React Native não possuem uma instalação linear com gerenciadores de pacotes nativos para um S.O específico, mas a instalação Flutter parece exigir etapas extras para adicionar o binário ao PATH e baixá-lo do código-fonte, o que pode ser útil para o devs que não usam JS (o que acho difícil). O React Native pode ser instalado usando apenas gerenciadores de pacotes e sem o incômodo de baixar o binário da origem.

React Native 2 x 1 Flutter

Configuração do projeto

O processo de configuração da máquina do desenvolvedor para usar o novo framework leva tempo. Requer muita configuração de instalações de software. A tecnologia deve ter documentação adequada para colocar os usuários em funcionamento.

React Native
O guia de primeiros passos do projeto React Native supõe que o desenvolvedor já tenha todas as configurações necessárias para desenvolvimento para iOS e Android. Há poucas informações sobre as ferramentas de linha de comando do Xcode, mas isso não será suficiente para prosseguir. A documentação pula diretamente para a etapa de criação de um novo projeto. Um novo projeto React Native pode ser criado e executado no simulador do iOS usando os seguintes comandos:

$ react-native init MyProject
$ cd MyProject
$ run-native run-ios

Não há guia de configuração para projetos Android no documento React Native.

Flutter

O guia de introdução do Flutter contém informações detalhadas sobre a configuração do IDE e a configuração da plataforma para iOS e Android. Além disso, o Flutter tem uma ferramenta CLI chamada flutter doctor, que pode orientar os desenvolvedores na configuração. Ele inspeciona quais ferramentas estão instaladas na máquina local e quais ferramentas precisam ser configuradas. Uma vez que o comando do flutter doctor concluir, podemos continuar com a criação de um novo aplicativo Flutter. Há uma página separada sobre como configurar os editores para começar com o Flutter. Uma vez que toda a configuração é feita, podemos criar e executar um novo aplicativo Flutter da CLI:

$ flutter create MyProject
$ cd MyProject
$ flutter run

Nesta fase, você deve ter toda a configuração para o projeto Flutter.

Análise e Resultado
A partir da comparação acima, fica claro que o Flutter oferece melhor documentação e suporte CLI para configuração e configuração.

React Native 2 x 2 Flutter

Componente de interface do usuário e API de desenvolvimento

Ao desenvolver aplicativos móveis de plataforma cruzada, o suporte para o componente nativo é essencial. Sem o suporte do componente nativo, nosso aplicativo não será um aplicativo nativo. É muito importante que o framework tenha uma API para acessar os módulos nativos sem qualquer dor.

React Native – menos componentes
A estrutura principal do React Native fornece apenas APIs de renderização de dispositivo e acesso a dispositivos. Para acessar a maioria dos módulos nativos, o React Native precisa confiar em bibliotecas de terceiros. React Native é muito dependente de bibliotecas de terceiros.

Flutter – rico em componentes
O Flutter Framework é fornecido com componentes de renderização da interface do usuário, acesso à API do dispositivo, navegação, teste, gerenciamento com preservação de estado e grande quantidade de bibliotecas. Esse rico conjunto de componentes elimina a necessidade de usar bibliotecas de terceiros. Se você obtiver a estrutura Flutter, isso significa que você terá tudo o que é necessário para desenvolver aplicativos para dispositivos móveis. O Flutter também possui widgets para Material Design e Cupertino, que permitem aos desenvolvedores renderizar facilmente a interface do usuário na plataforma iOS e Android.

Análise e Resultado
O Flutter é rico em APIs de desenvolvimento e componentes de UI, enquanto o React Native é muito dependente de bibliotecas de terceiros.

React Native 2 x 3 Flutter

E ao fim da nossa primeira etapa, o Flutter tem a vitória parcial no comparativo. Não perca o post da próxima semana para conferir o resultado final.

Gostou do conteúdo? não deixe de seguir a uebile nas redes sociais, pois toda semana tem post novo aqui no blog com mais dicas para o seu impulso digital.