Flutter vs React Native: O Guia (quase) Definitivo

Essa semana, a Google anunciou o lançamento da versão 1.0 do framework mobile Flutter. Em desenvolvimento desde Maio desse ano, o anúncio da versão 1.0 significa que o framework atingiu, ao menos pelos critérios da Google, maturidade suficiente para ser considerado estável - apesar dele não ter passado por uma versão “0.9”, sendo a mudança de numeração puramente arbritária e, possivelmente como objetivo de marketing, mas prossigamos.

Do outro lado, o React Native aparece como principal alternativa ao Flutter, tendo por trás o apoio do Facebook e da já estabelecida comunidade do React.

Apesar disso, a maioria dos artigos comparando os dois frameworks que eu pude ler são bastante rasos e fazem uma comparação puramente teórica, sem levar em conta a experiência prática do desenvolvedor e do usuário.

Assim, como desenvolvedor que utilizou o Flutter lá pelos idos da versão 0.5.x e também como alguém que mergulhou no mundo do React Native recentemente, escrevo esse artigo como um guia para quem alguma vez se encontrou, assim como eu, em dúvida sobre as duas ferramentas.

Primeiro, é necessário desfazer algumas ideias erradas que existem em torno do Flutter - e que aparecem com bastante frequência em qualquer artigo sobre ele.

Eu vou precisar gastar tempo aprendendo Dart!

Mascote da Dart. Se você queria um motivo para não aprendê-la, está aí.

Sim, você vai ter que aprender Dart. Mas qual é o problema, mesmo?

Dart é uma linguagem de facílima adaptação, emprestando algumas ideias de linguagens multiparadigma com foco em orientação a objetos que você provavelmente já usa - C++, Java, C#, Javascript/Typescript…

Para alguém que já entenda alguns conceitos de Orientação a Objetos, Tipagem e programação imperativa no geral, aprender Dart é uma tarefa simples. E, sinceramente, usar Dart é pra mim um dos pontos positivos do Flutter.

Dart é uma linguagem construída do zero pensando no Flutter - por mais que a Google não diga - e tem um sistema de tipos muito bom. Eu odiava tipagem forte e estática, até ter contato com Dart. Hoje é algo que eu não vivo sem. Dart também é menos verboso e bastante “straightforward”. O código é simples de entender e se adaptar não é um problema.

Flutter tem uma performance maravilhosa!

Esse é um dos pontos dados como positivo pro framework mas que, bem, ainda não são totalmente verdade.

Primeiro, é preciso entender como o Flutter funciona: ao invés de usar os elementos nativos do sistema - como o React Native faz -, ou de implementar um Webview - Ionic, Cordova… -, o Flutter parte de um ponto totalmente diferente e simplesmente toma pra si a tarefa de renderizar todos os pixels na tela. É uma tarefa ambiciosa e que meio que funciona.

Roubei daqui

O ponto positivo disso é que ele consegue rodar até num aparelho com iOS 8 ou Android 4.1. O sistema operacional não é uma barreira para a plataforma, já que ela faz tudo que envolva renderização. Também não tem chance de algo parar de funcionar numa versão mais nova de um sistema já que o app funciona de forma totalmente alheia aos Widgets/Componentes nativos.

O ponto negativo é que a performance, por vezes, fica prejudicada. E a engine ainda está pouco otimizada. Não é raro um app em Flutter, principalmente se utilizar sombras e elmentos 2D mais complexos, começar a esquentar o dispositivo (sim) e consumir bateria mais rápido que o normal. Também tem um tempo pro cache do app “esquentar”, o que significa que a primeira vez que você abrir algo no app provavelmente vai ser bem lenta e travada, pra só melhorar depois. Isso fica ainda mais evidente em apps que renderizam listas: o scroll nunca é tão bom quanto o nativo, seja no Android ou no iOS, mesmo usando as práticas recomendadas.

E isso é um dealbreaker pra muita gente, pois significa que a primeira impressão sobre o seu app, pelo usuário, não será a melhor.

Ah, e tem outro ponto negativo: pois bem, como a renderização é feita de forma totalmente alheia ao S.O., até pouco tempo não era possível implementar alguns widgets nativos como Mapas. A Google já está correndo atrás e lançou um beta do Google Maps para Flutter, mas ainda é um problema recorrente.

No geral, a UI de um App em React Native tende a ser mais fluída que a de um app em Flutter. Os erros também parecem ser menos constantes - enquanto o React esconde do usuário o problema, o Flutter, mesmo em produção, exibe uma tela azul vermelha da morte:

Tela azul da morte versão soviética.

Flutter é instável!

Bem, depende do que você considera estável. Se o parâmetro for as GNU coreutils, sim, é instável. Mas se a comparação for com o React Native…

É válido lembrar, por exemplo, que o Flutter é um framework sobre os ombros de tecnologias antigas e provadas, como a biblioteca Skia - que renderiza os elementos 2D - e a própria Dart, que já tem 7 anos de desenvolvimento.

Do pouco que eu usei, Flutter me permitiu avançar rápido e prototipar aplicações de forma muito ágil, sem qualquer bug no Gradle - estou olhando pra você, React Native. Em contrapartida, minha experiência com o React Native foi bem ruim nesse quesito, principalmente em relação à compilação. O ReactJS, de fato, funciona muito bem, mas a integração com as ferramentas mobile ainda é bastante precária.

Já o Flutter compila de forma “lisa”. E o hot-reload é um espetáculo à parte, permitindo você avançar e prototipar com agilidade. Mesmo falando de Android, famoso pelos seus erros de compilação, a experiência de desenvolver é excelente - claro que não podia ser diferente vindo de algo da mesma empresa, mas…

Hot-reload em ação.

Chega de enrolação

Ok, em linhas gerais, os maiores pontos positivos do Flutter são:

Hot reload com preservação de estado ✔️

Sério, é muito lindo. É difícil viver sem uma vez que você experimenta.

Integração com Firebase e ferramentas Google ✔️

Esse é um ponto digno de nota. Enquanto integrar o Firebase no React Native é um pesadelo - ainda mais quando você quer utilizar notificações push e outras funções mais avançadas -, no Flutter é apenas adicionar um pacote. Claro que há um certo boicote da Google em relação ao RN e é necessário usar as bibliotecas nativas do Firebase para conseguir uma integração decente, mas é o que tem pra hoje.

Design sólido ✔️

A adoção do Material Design como carro-chefe traz uma vantagem pro Flutter. Os widgets foram muito bem feitos e parecem nativos - contando que você não esteja scrollando ou navegando de uma tela pra outra. Eles já trazem padrões de design sólidos e eliminam um problema constante do desenvolvedor de React Native que é criar seus próprios componentes ou resolver problemas em bibliotecas de terceiros - vai, os componentes padrão são muito sem personalidade.

Apenas Funciona ✔️

Sem Gradle dando pau, sem problemas de API deprecada ou que bugou duma versão pra outra sem aviso. Ele apenas funciona.

Documentação ✔️

Ok, apenas pra não dizer que eu não falei desse: a documentação do Flutter é maravilhosa. Não que a do RN seja ruim, ela só não é tão boa.



...

E os pontos negativos - onde o React Native se sai melhor:

Sintaxe

Lembra quando eu disse que Dart é lindo? Então, é verdade. Mas Flutter não é um script em Dart. Você tem que lidar com as APIs do framework. E ela é terrivelmente confusa quando o assunto é design e folha de estilos. Tudo fica jogado no meio do código e vira uma confusão só, que exige um olhar atento para ser compreendido.

Pra não dizer que eu to mentindo

Design literalmente sólido

A não ser que você tenha tempo de sobra, o design pode ser uma faca de dois gumes. Se, por um lado ele facilita caso você queira adotar uma abordagem mais próxima do Material Design (ou do padrão Apple), ele vai dificultar se você quiser tentar algo mais personalizado. O Material é bastante flexível, claro, mas existem ainda poucas alternativas a ele dentro do mundo Flutter, enquanto o React Native tem um bom número de UI kits prontos e com abordagens e personalidade própria. E, não poderia deixar de dizer que a tela azul vermelha da morte em builds de produção é um dealbreaker imenso.

Comunidade

Esse é bem óbvio. O React já está aí há alguns anos, enquanto o Flutter ainda engatinha e, embora já exista uma comunidade bastante dinâmica em torno deste, ela é consideravelmente menor. Esse é um ponto especialmente sensível para não-desenvolvedores também: ter uma codebase inteira em Flutter significa que será mais difícil achar profissionais no mercado para trabalhar nela caso seu time precise.

Performance

Esse eu já expliquei lá em cima. Embora a performance do Flutter seja linda para animações pontuais, responsividade de botões e algumas coisinhas, no mundo real ela sofre com alguns travamentos em coisas básicas que destroem completamente qualquer mérito anterior. É um saco. Ponto pro React Native nessa.

Tem literalmente um bug nesse código! Desculpa.

...

Sei que pode dar a entender que o Flutter é objetivamente melhor - afinal, eu passei mais tempo falando bem dele do que criticando -, mas não é verdade. Embora eu tenha listado somente 4 pontos negativos, eles são especialmente sensíveis, especialmente os últimos dois.

É onde mais pesa: a facilidade de achar pessoas “que falem a mesma língua” e a UX - ok que se você usa Ionic ou Cordova não tem o que reclamar sobre UX do Flutter, viu?

No final, eu indico a qualquer desenvolvedor testar e conhecer o Flutter. Não é perdido. E, se você tem um projeto pessoal ou MVP em mente, ele já é maduro o suficiente para ser adotado. Para projetos maiores, porém, ainda está um pouquinho cru.

Para saber mais:

Flutter Showcase: Apps que usam Flutter em produção. É uma boa forma de conhecer de forma prática os resultados do framework.

Flutter for React Native Devs: Introdução ao Flutter para quem já desenvolve em React Native.

Effective Dart: Guia para quem está chegando agora no mundo da Dart.

Hacker News: Flutter: the good, the bad and the ugly: Thread no Y Combinator Hacker News sobre Flutter. Os comentários são bastante proveitosos - e, claro, cheios de opinião. É um bom lugar para entender o que é o Flutter na prática.

Medium: Flutter: the good, the bad and the ugly: Artigo no Medium que gerou a discussão toda no Hacker News indicada acima.