Parte 1
Devido à crescente popularidade dos aplicativos móveis, quase todas as empresas precisam de um aplicativo para permanecerem competitivas no mercado. Neste post, vamos comparar React Native (do Facebook) e Flutter (do Google) em detalhes a partir da perspectiva de um desenvolvedor. 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 Swix, 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
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 – JavaScriptReact 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 – FluxA 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 – NPMO 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 NativeO 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 componentesA 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 FlutterE 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? Toda semana tem post novo aqui no blog com mais dicas para o seu impulso digital.