Eu desenvolvi o mesmo app com Flutter, React Native e Ionic

• Enquanto eu buscava o framework ideal para desenvolvimento mobile cross-platform, Flutter, React Native e Ionic chamaram minha atenção
• Os três frameworks prometem bom desempenho em várias plataformas com uma única base de código
• Criei três versões de um app mobile que usa API para exibir dados básicos na tela e comparei os resultados
  • Requisitos do app: exibir informações de um país ao carregar a tela, mostrar um spinner de carregamento, ter um botão para buscar um novo país aleatório e carregar a lista de países apenas uma vez

Flutter

• Flutter é um framework open source criado pelo Google em 2017, usado para criar aplicações nativas para várias plataformas a partir de uma única base de código. É baseado na linguagem Dart
• Comecei a desenvolver depois de estudar a documentação e os tutoriais do Flutter por uma hora
• A configuração do ambiente de desenvolvimento e a execução do emulador foram tranquilas
• Consegui criar um app com funcionalidades básicas em 4 horas
• Os recursos de sugestão do Android Studio ajudaram bastante no desenvolvimento
• O recurso Hot Reload permite verificar mudanças imediatamente, reduzindo o tempo de desenvolvimento
• Porém, por causa do conceito de que "tudo é widget", há muita aninhamento e mistura entre estilo e elementos, o que não é muito intuitivo

React Native

• É um framework open source em JavaScript criado pela Meta em 2015, que permite construir aplicações nativas para Android e iOS
• Eu já tinha experiência com a biblioteca React, e o VS Code já estava instalado
• O processo de configuração do ambiente foi complexo/confuso (foi preciso entender a diferença entre Expo Go e React Native CLI)
• Finalizei o app em 2,5 horas, mas tive dificuldade para resolver problemas de exibição de imagem
• Graças à arquitetura baseada em componentes do React, o código ficou conciso e modular
• Com JSX, é possível escrever a UI dos componentes em um código semelhante a HTML

Ionic

• Ionic é um toolkit open source de UI mobile criado em 2012 para construir apps móveis cross-platform modernos e de alta qualidade a partir de uma única base de código
• É possível desenvolver com React, Vue e Angular
• Oferece componentes de UI ricos e uma interface de usuário atraente
• Comecei a desenvolver depois de estudar vídeos e guias do Ionic por 30 minutos
• Desenvolvi o app com a versão Angular e consegui avançar rapidamente graças ao ecossistema de desenvolvimento familiar
• A grande quantidade de arquivos de configuração JSON e TypeScript gerados no setup inicial foi um pouco pesada
• Concluí o app em 2 horas
• A implementação da UI foi fácil e a documentação é bem feita
• É possível separar UI e lógica usando templates HTML
• Componentes de UI como Spinner e Floating Action Button facilitaram bastante a implementação da interface

Comparação: Flutter, React Native, Ionic

• Estilo de código e linguagem
  • Os frameworks baseados em JavaScript se destacam em legibilidade e simplicidade do código
  • O estilo de código aninhado do Flutter é um pouco confuso e difícil de ler
  • A preferência entre templates de React e Angular depende do gosto pessoal
• Ecossistema
  • Em abril de 2024, entre os 500 apps mais instalados nos EUA, 12,57% foram feitos com React Native, 5,24% com Flutter e 0,52% com Ionic
  • React Native oferece muita liberdade, mas isso pode gerar confusão na configuração e no uso das ferramentas
  • Flutter está aumentando sua taxa de adoção e tem muitos repositórios públicos no GitHub
• Ferramentas
  • Hot Reload
    • No navegador, os três frameworks recarregam rapidamente o app quando o código muda
    • Em dispositivos Android ou simuladores, o Hot Reload do Flutter foi o mais rápido
  • Depuração remota
    • O Flutter DevTools é intuitivo e oferece vários recursos
    • O Ionic facilita a depuração com uma interface parecida com a do Chrome Developer Tools
    • O React Native oferece React DevTools, mas fica atrás de Flutter e Ionic em depuração remota
• Tamanho do app
  • Ionic: 3.2MB, Flutter: 18.1MB, React Native: 25.2MB
  • Após a instalação, o espaço ocupado é de 9.61MB, 34.66MB e 55.47MB, respectivamente
• Experiência do usuário
  • Flutter e Ionic oferecem componentes de UI adequados à plataforma, garantindo uma experiência de usuário consistente
  • React Native depende de bibliotecas adicionais
• Desempenho
  • Como o Flutter compila para código nativo, espera-se que seja mais rápido que o React Native
  • Como o Ionic roda em WebView, seu desempenho pode ser um pouco mais lento

Conclusão

• Quero me aprofundar mais no estilo de código do Flutter, e o recurso Hot Reload, que pode mudar o jogo na depuração, é atraente
• Ainda assim, me sinto mais atraído pelo Ionic, que permite aproveitar conhecimentos prévios de desenvolvimento web (TypeScript, HTML, CSS) no desenvolvimento de apps mobile
• Acredito que desenvolver habilidades com Ionic vai melhorar minha capacidade como desenvolvedor mobile e web
• À medida que o projeto evoluir, organização de código, separação de responsabilidades e reutilização de componentes vão ficar mais claras
• É possível construir ótimas aplicações com qualquer um dos três frameworks
  • Ao escolher um framework, não se deve ignorar o prazer de desenvolver
  • Recomendo explorar diferentes frameworks criando apps experimentais

[firea32]

É a única biblioteca cross-platform que usa UI nativa, então é difícil desistir dela…
Se houvesse uma alternativa, eu trocaria na hora, mas vendo que tanto o Flutter quanto o Ionic no texto também não escolheram UI nativa, parece que não há futuro.

[bus710]

No meu caso, gostei do Flutter porque dá para fazer tudo em Dart sem precisar conhecer html/css.

[superwoou]

Normalmente, quem já trabalhava com web diz que o RN é mais confortável; para quem não vinha desse contexto, o Flutter costuma ser mais fácil.

[optid77]

Como o próprio cross-platform acaba sendo algo mais de nicho, o desenvolvimento de bibliotecas relacionadas tende a ser mais lento ou insuficiente.
O React Native parece ter como ponto forte o fato de compartilhar parte do ecossistema do React.

Tenho a impressão de que, em comparação com quando desenvolvi há 2 anos, recentemente ao trabalhar com RN a produtividade aumentou cada vez mais graças ao uso de bibliotecas muito ativamente desenvolvidas e utilizadas no React, como Tailwind, React Query e tRPC.

[kaistj]

Pela minha experiência pessoal, as partes mais importantes no desenvolvimento de apps foram o gerenciamento de estado e a UI.

No RN, usei Redux + Redux-saga para gerenciamento global e React-query por página.
No Flutter, usei Riverpod.

Pessoalmente, achei mais fácil entender o gerenciamento de estado e a ordem do fluxo da lógica no lado do React,
e também foi mais prático de desenvolver. Como é uma plataforma baseada na web, o desenvolvimento foi um pouco mais fácil.

No Flutter, pessoalmente não achei fácil entender o Riverpod. (Também investi relativamente pouco tempo nisso.)
No gerenciamento de estado simples não tive grandes dificuldades, mas talvez por causa do entendimento da plataforma,
houve uma certa complexidade? dificuldade na implementação da lógica de tratamento de mudanças de estado e do processamento comum após lidar com APIs de servidor.

Na parte de UI, os widgets do Flutter tinham propriedades e funções bem definidas, então o desenvolvimento foi tranquilo.
No React, usei a biblioteca de UI antd, e a experiência de uso não foi ruim.

Minha experiência com React foi de 2 anos atrás, então a experiência com bibliotecas relacionadas ao desenvolvimento já está um pouco desatualizada,
e desenvolvi com Flutter recentemente, mas investi pouco tempo.

Estou deixando minha experiência de desenvolvimento aqui nos comentários também~
Pensem nisso apenas como um “ah, então existe esse lado também...”~ ^^

[xguru]

Obrigado! Acho que isso também vai ajudar outras pessoas.