As duas estruturas de desenvolvimento de aplicativos móveis multiplataforma mais populares disponíveis no momento são Flutter e React Native . Esses juggernauts são apoiados por duas das maiores empresas de tecnologia do mundo: Flutter foi criado pelo Google e React Native foi criado pelo Facebook.
Neste guia, vamos comparar Flutter vs. React Native , explore o que torna cada estrutura tão especial e descubra por que eles são tão procurados.
Aqui está o que vamos cobrir:
- O que é Flutter?
- O que é React Native?
- Principais diferenças entre Flutter e React Native
- Por que o desenvolvimento de aplicativos móveis é tão popular?
- Flutter vs. React Native: Performance
- Flutter vs. React Native: ecossistema de desenvolvedor
- Exemplo prático: desenvolvimento de um aplicativo com Flutter e React Native
- Você deve usar Flutter ou React Native?
Para ver como o React Native se compara ao Xamarin, outra estrutura móvel multiplataforma popular, consulte “ Xamaris vs. React Native . ”
O que é flutuação?
Flutter é uma estrutura de interface do usuário de plataforma cruzada desenvolvida pelo Google. Foi lançado pela primeira vez em maio de 2017 e tem crescido constantemente em popularidade ao longo dos anos.
Um dos principais argumentos de venda do Flutter é que ele permite que você crie plataforma cruzada aplicativos usando uma única base de código. Tradicionalmente, se uma empresa quisesse criar um aplicativo que estivesse disponível na web, móvel e desktop, ela teria que usar mais de uma ferramenta para atingir esse objetivo. Por exemplo, pode ser necessário contratar um desenvolvedor especializado em desenvolvimento da web, outro desenvolvedor com experiência na criação de aplicativos de desktop e um desenvolvedor móvel dedicado para criar aplicativos para iOS e Android.
Em uma situação como essa, você pode ter um desenvolvedor usando React para construir o site, outro usando C # e Java para criar a versão desktop e Kotlin e Swift para construir os aplicativos Android e iOS, respectivamente. Isso exigiria uma equipe inteira de desenvolvedores, para não mencionar uma tonelada de reuniões para garantir que o design e a marca sejam consistentes em todas as plataformas. Você também deve levar em consideração os testes de cada plataforma e abordar seus respectivos bugs e peculiaridades.
Com o Flutter, as empresas podem contratar um desenvolvedor para criar aplicativos em plataformas com apenas uma base de código para gerenciar. Isso reduz significativamente o tempo e os recursos necessários para iniciar e manter um aplicativo.
Graças ao Flutter, um desenvolvedor pode criar aplicativos em todas essas plataformas com apenas uma base de código para gerenciar, o que reduziria o tempo e os recursos.
O que é React Native?
React Native é uma estrutura multiplataforma criada pelo Facebook. Torna bastante simples criar aplicativos de plataforma cruzada porque a base de código é essencialmente escrita em JavaScript. Isso diminui a barreira de entrada para desenvolvedores de JavaScript porque eles não precisam aprender uma linguagem completamente desconhecida.
O desenvolvimento da web existe há muitos anos e a maioria dos desenvolvedores da web tem usado JavaScript durante grande parte de suas carreiras. O desenvolvimento móvel ainda é relativamente novo, mas o ecossistema amadureceu bastante nos últimos anos. Se você já conhece JavaScript, a curva de aprendizado para o desenvolvimento de aplicativos móveis usando React Native não será tão íngreme.
Atualmente, muitas empresas estão usando o React Native para o desenvolvimento de aplicativos. A Microsoft desenvolveu recentemente seu novo aplicativo da loja Xbox usando React Native, como um exemplo importante. Como o Flutter, o React Native torna possível criar aplicativos em várias plataformas usando uma base de código.
Principais diferenças entre Flutter e React Native
Flutter e React Native compartilham muitas semelhanças, mas também são bastante diferentes em vários aspectos importantes.
Para começar, o Flutter usa a linguagem de programação Dart em sua base de código, enquanto o React Native usa JSX, que significa JavaScript XML. Ambas as linguagens são baseadas no tipo de sintaxe C-style e seguem princípios orientados a objetos. Esse terreno comum significa que Flutter e React Native são fundamentalmente semelhantes em termos de design e o código também é muito semelhante.
Programação dinâmica vs. estática
Há uma diferença significativa quando se trata da linguagem de programação central. JavaScript é dinâmico por natureza. Isso significa que você pode alterar os valores de vários tipos de dados, o que o torna muito versátil. O Dart é dinâmico e estático, o que lhe permite ter o melhor dos dois mundos.
Uma linguagem tipificada estaticamente é geralmente considerada muito mais segura, pois força você a declarar e usar o tipo de dados correto. Por exemplo, você não pode atribuir um número a uma string; fazer isso geraria um erro.
Estático significa que você provavelmente terá menos erros. É possível impor mais segurança de tipo e verificação de erros com JavaScript se você optar por usar o TypeScript, que é um superconjunto sintático estrito do JavaScript.
Layout
O Flutter usa um estilo widget para construir a interface do usuário, enquanto o React Native usa JavaScript e JSX. Widgets Flutter são pré-fabricados, então você não precisa tecnicamente criar seus próprios widgets personalizados, a menos que queira. Como eles foram criados e testados pelo Google, você não precisa se preocupar com problemas de incompatibilidade.
Algo que devo mencionar é que, se você estiver usando uma linguagem de programação como Swift para desenvolvimento de aplicativos móveis, normalmente não consegue ver o código que a Apple usou para criar componentes de interface do usuário, como botões. Com o Flutter, por outro lado, o código é visível para que você possa ver como o Google criou todos os widgets.
Flutter e React Native compartilham terreno comum quando se trata de construir o layout, pois ambos usam CSS Flexbox . A maneira como eles o implementam é diferente, mas contanto que você conheça o Flexbox, não deverá ter problemas para construir o layout de seu aplicativo. A equipe que trabalhou no Flutter também trabalhou nas ferramentas de desenvolvedor para o navegador Google Chrome, o que possibilita uma transição rápida, já que as ferramentas de depuração são bastante semelhantes.
Por que o desenvolvimento de aplicativos móveis é tão popular?
O campo de desenvolvimento de aplicativos móveis tem crescido continuamente nos últimos anos. Quase todo mundo no planeta tem um telefone celular, então a base de usuários é enorme. Hoje em dia, você pode encontrar um aplicativo para quase tudo.
Existem alguns caminhos que você pode seguir se quiser criar um aplicativo móvel. Você pode escolher seguir a rota nativa, o que significaria usar o Swift para criar aplicativos móveis ou Kotlin para criar aplicativos Android. Essas são as linguagens de programação oficiais que a Apple e o Google usam, respectivamente, então você pode contar com suporte próprio e atualizações frequentes.
Como alternativa, você pode escolher seguir o caminho de plataforma cruzada e usar Flutter ou React Native. Normalmente, um desenvolvedor nativo usaria Xcode e Swift para construir aplicativos iOS e Android Studio e Kotlin para aplicativos Android. Essas ferramentas são aplicáveis para trabalho em plataforma cruzada. Também é bastante comum que os desenvolvedores usem um ambiente de desenvolvimento integrado (IDE), como Visual Studio Code .
Na maioria dos casos, os desenvolvedores tendem a usar um IDE, Android Studio ou Xcode ao construir aplicativos com Flutter e React Native. Minha preferência é usar Visual Studio Code para aplicativos React Native e Android Studio para aplicativos Flutter. O Android Studio, na verdade, tem um plug-in Flutter com auxiliares de código, que torna muito mais fácil escrever e depurar seu código. No momento, este plug-in tem 8,3 milhões de downloads, o que mostra o quão popular ele é.
No momento em que este artigo foi escrito, o React Native é um pouco mais popular do que o Flutter, em parte graças à associação do React Native com o popular framework da web React. O React Native também existe há mais tempo, então sua base de usuários é maior. Dessa forma, atualmente há uma demanda maior por desenvolvedores React Native do que por desenvolvedores Flutter.
Flutter vs. React Native: Performance
Tanto o Flutter quanto o React são de código aberto, o que significa que são de uso gratuito. Ambas as bibliotecas são bem mantidas, como seria de esperar, considerando que foram criadas pelo Google e pelo Facebook. É possível testar aplicativos criados usando os dois frameworks, seja virtualmente usando um simulador embutido em seu computador para iOS e Android ou nativamente em seu telefone. Você precisará de um computador Apple se pretende desenvolver no iOS, uma vez que o SDK está disponível apenas em computadores Apple. Os usuários do Windows e do Linux estão sem sorte. Felizmente, você pode desenvolver aplicativos de desenvolvimento Android em qualquer plataforma.
Ambas as estruturas usam recarregamento a quente para que você possa fazer alterações e vê-las instantaneamente. Isso torna o desenvolvimento mais eficiente porque você não precisa parar e iniciar seus aplicativos para ver as atualizações.
Há algum debate se Flutter e React Native são realmente nativos. Para serem considerados 100 por cento nativos, eles precisam ser escritos na linguagem para a qual foram projetados-ou seja, Swift para iOS e Kotlin/Java para Android.
A experiência que você obtém ao usar um aplicativo que foi escrito em React Native e Flutter é, na maior parte, uma experiência nativa. O código Dart, que o Flutter usa, é compatível com C, que é o mais próximo do nativo que você pode esperar. Você pode supor com segurança que isso proporcionaria um melhor desempenho.
A empresa que criou o Reflectly recentemente mudou o aplicativo do React Native para o Flutter e viu um aumento significativo no desempenho . Este é um exemplo de melhoria. No entanto, não será o mesmo para todos os aplicativos; há muitos casos extremos a serem considerados, como o tipo de aplicativo, base de código, banco de dados, telefone, sistema operacional etc.
Flutter vs. React Native: ecossistema do desenvolvedor
Os desenvolvedores que desejam construir aplicativos Flutter tendem a consultar a documentação oficial . Porém, no caso do React Native, você tem várias opções. Você pode usar a documentação oficial ou pode usar uma plataforma diferente, sendo a mais popular Expo . Expo oferece mais recursos e personalizações, incluindo uma biblioteca de ícones integrada, enquanto os documentos oficiais do React Native são mais básicos.
O ecossistema React Native está mais maduro e tem mais usuários desde que o JavaScript existe desde 1995. Flutter, ao contrário, foi lançado em 2017. React é provavelmente o framework de front-end mais popular no momento e tem uma comunidade muito ativa em mídia social. Flutter não é desleixo; no momento em que este artigo foi escrito, ele tinha mais estrelas do que React Native no GitHub.
Tanto o Flutter quanto o React Native foram usados em aplicativos comerciais populares. Flutter foi usado para criar os aplicativos para Reflectly, Stadia, Baidu, Groupon e eBay, para citar alguns. Enquanto isso, os aplicativos para Facebook, Instagram, Shopify e Discord foram desenvolvidos com React Native .
Os números são bastante semelhantes nas mídias sociais também, com o Flutter tendo mais seguidores no Twitter e o React Native tendo um número maior de seguidores no Reddit .
Exemplo prático: desenvolvimento de um aplicativo com Flutter e React Native
Vamos examinar alguns exemplos de código rápido para demonstrar como criar um aplicativo usando Flutter e React Native.
Nosso aplicativo de exemplo é chamado Social e tem duas telas. As versões iOS e Android parecem idênticas. As imagens abaixo mostram como fica em um iPhone:
Exemplos de código de flutuação
A arquitetura baseada em widget do Flutter é bastante única em comparação com as metodologias de programação tradicionais. Depois de entender como funciona, torna-se uma segunda natureza.
arquivo main.dart
import'package: flutter/material.dart';
import'package: social_app/screens/home_screen.dart';
import'package: social_app/screens/profile_screen.dart'; void main () { runApp (Social ());
} class Social extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return MaterialApp ( initialRoute: HomeScreen.id, rotas: { HomeScreen.id: (contexto)=> HomeScreen (), ProfileScreen.id: (contexto)=> ProfileScreen (), }, ); }
}
home_screen.dart
import'package: flutter/material.dart';
import'package: social_app/screens/profile_screen.dart'; class HomeScreen extends StatelessWidget { estática String id='home_screen'; @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( backgroundColor: Color (0xffb0c1957), appBar: AppBar ( toolbarHeight: 40, título: Texto ( 'Social', style: TextStyle ( color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold), ), backgroundColor: Colors.white, ), corpo: coluna ( mainAxisAlignment: MainAxisAlignment.spaceBetween, crianças: [ Recipiente( largura: 400, margem: EdgeInsets.only (topo: 20), filho: RaisedButton ( cor: Cor (0xff23397B), preenchimento: EdgeInsets.all (20), onPressed: () { Navigator.push (contexto, MaterialPageRoute (construtor: (contexto)=> ProfileScreen ())); }, filho: Texto ( 'PERFIL', estilo: TextStyle (color: Colors.white, fontWeight: FontWeight.bold), ), ), ), SizedBox ( altura: 1, ), Recipiente( criança: Centro ( filho: Texto ( 'CASA', style: TextStyle ( fontSize: 40, cor: Colors.white, fontWeight: FontWeight.bold), ), ), ), Recipiente( criança: Imagem ( imagem: AssetImage ('images/home-bg.jpg'), ), ), ], ), ); }
}
profile_screen.dart
import'package: flutter/material.dart';
import'package: social_app/screens/home_screen.dart'; class ProfileScreen extends StatelessWidget { estática String id='profile_screen'; @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( backgroundColor: Color (0xffb0c1957), appBar: AppBar ( toolbarHeight: 40, título: Texto ( 'Social', style: TextStyle ( color: Colors.black, fontSize: 16, fontWeight: FontWeight.bold), ), backgroundColor: Colors.white, ), corpo: coluna ( mainAxisAlignment: MainAxisAlignment.start, crianças: [ Recipiente( largura: 400, margem: EdgeInsets.only (topo: 20), filho: RaisedButton ( cor: Cor (0xff23397B), preenchimento: EdgeInsets.all (20), onPressed: () { Navigator.push (contexto, MaterialPageRoute (construtor: (contexto)=> HomeScreen ())); }, filho: Texto ( 'CASA', estilo: TextStyle (color: Colors.white, fontWeight: FontWeight.bold), ), ), ), SizedBox ( altura: 50, ), Recipiente( criança: Centro ( filho: Texto ( 'PERFIL', style: TextStyle ( fontSize: 40, cor: Colors.white, fontWeight: FontWeight.bold), ), ), ), SizedBox ( altura: 20, ), Recipiente( filho: CircleAvatar ( raio: 130,0, backgroundImage: AssetImage ('images/profile-image.jpg'), )), SizedBox ( altura: 20, ), Recipiente( filho: Texto ( 'SARAH TAYLOR', style: TextStyle ( cor: Colors.white, fontSize: 20, fontWeight: FontWeight.bold), ), ), SizedBox ( altura: 20, ), Recipiente( cor: Cor (0xff000d4a), preenchimento: EdgeInsets.all (18.0), criança: Container ( filho: Texto ( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut ultricies velit. Proin at nisi nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eu tincidunt dui. Quisque non ornare ex, facilisis congue en. In neque nulla, posuere at gravida id, dapibus et libero.", style: TextStyle ( cor: Colors.white, fontSize: 17, ), ), ), ) ], ), ); }
}
Exemplos de código nativo React
Se você já conhece o React para a web, o código aqui lhe parecerá muito familiar. A arquitetura para configurar um projeto React Native é quase a mesma do React.
Estrutura do projeto
App.js
//Importar instruções para os componentes usados no aplicativo e na navegação
import React from'react';
importar {NavigationContainer} de'@ react-navigation/native';
importar {createStackNavigator} de'@ react-navigation/stack';
const Stack=createStackNavigator ();
importar HomeScreen de'./src/screens/HomeScreen';
importar ProfileScreen de'./src/screens/ProfileScreen';
//O principal componente com toda a lógica de negócios de roteamento de tela
const App=()=> { Retorna ( );
};
exportar aplicativo padrão;
Home.js
//Importar instruções para os componentes usados no aplicativo
import React from'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} de'react-native';
importar HomeBG de'../../assets/home-bg.jpg';
//O principal componente da tela inicial
const HomeScreen=({navigation})=> { Retorna ( navigation.navigate ('ProfileScreen')} > Perfil Home );
};
//Os estilos específicos do componente para a tela inicial
estilos const=StyleSheet.create ({ appStyle: { backgroundColor:'rgb (12,25,87)', altura:'100%', }, btnContainer: { backgroundColor:'# 23397B', preenchimento: 20, justifyContent:'center', alignItems:'center', marginHorizontal: 20, marginVertical: 20, }, btnText: { cor:'#ffffff', intensidade da fonte: Negrito', textTransform:'maiúsculo', }, cabeçalho: { fontSize: 40, cor:'#ffffff', textAlign:'center', margem: 20, intensidade da fonte: Negrito', textTransform:'maiúsculo', }, homeBG: { altura:'100%', largura:'100%', },
});
exportar HomeScreen padrão;
ProfileScreen.js
//Importar instruções para os componentes usados no aplicativo
import React from'react';
import {View, Text, StyleSheet, TouchableOpacity, Image} de'react-native';
importar ProfileImage de'../../assets/profile-image.jpg';
//O principal componente da ProfileScreen
const ProfileScreen=({navegação})=> { Retorna ( {/* TouchableOpacity é basicamente um componente de botão mais personalizável */} navigation.navigate ('HomeScreen')}> Home Perfil Sarah Taylor Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut ultricies velit. Proin em nisi nisl. Aula aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam eu tincidunt dui. Quisque non ornare ex, facilisis congue enim. In neque nulla, posuere at gravida id, dapibus et libero. );
};
//Os estilos específicos do componente para a ProfileScreen
estilos const=StyleSheet.create ({ appStyle: { backgroundColor:'rgb (12,25,87)', altura:'100%', }, btnContainer: { backgroundColor:'# 23397B', preenchimento: 20, justifyContent:'center', alignItems:'center', marginHorizontal: 20, marginVertical: 20, }, btnText: { cor:'#ffffff', intensidade da fonte: Negrito', textTransform:'maiúsculo', }, cabeçalho: { fontSize: 40, cor:'#ffffff', textAlign:'center', margem: 20, intensidade da fonte: Negrito', textTransform:'maiúsculo', }, profileContainer: { alignItems:'center', }, imagem de perfil: { borderRadius: 100, altura: 250, largura: 250, }, nome do perfil: { cor:'#ffffff', fontSize: 20, textAlign:'center', intensidade da fonte: Negrito', margem: 20, textTransform:'maiúsculo', }, profileBioContainer: { backgroundColor:'rgba (0,13,74,0.4234068627450981)', }, profileBio: { marginHorizontal: 20, marginVertical: 20, cor:'#ffffff', fontSize: 18, },
});
exportar ProfileScreen padrão;
Você deve usar Flutter ou React Native?
Não há um vencedor claro aqui: tanto Flutter quanto React têm seus prós e contras, e a escolha certa dependerá de sua experiência e das metas e requisitos de seu projeto.
Se você já conhece JavaScript, escrever aplicativos móveis no React Native é um acéfalo. No entanto, se você está procurando melhor desempenho e estabilidade e um ambiente mais coeso entre os ecossistemas, considere dar uma chance ao Flutter.
A postagem Flutter vs. React Native apareceu primeiro em LogRocket Blog .
