Como o Flutter me levou ao React Native — e vice-versa
A experiência de pequenos times com as duas ferramentas e as decisões que fizemos para uma melhor experiência de usuário em 2017 e em 2020
Eu havia acabado de entrar na faculdade no início de 2017 e estava empolgado para participar de algum projeto de pesquisa da universidade. A maioria das vagas para essas oportunidades exigiam conhecimento na área de desenvolvimento de aplicações mobile para Android e iOS e eu queria muito aprender a desenvolver para essas plataformas.
Na área, a única experiência que eu havia tido até então era a de ter desenvolvido uma aplicação minúscula utilizando templates do Android Studio. Por não possuir nenhum produto da Apple, eu era impedido de desenvolver soluções para iOS. Ou seja: eu não possuía experiência alguma em desenvolver aplicativos.
Eu estava motivado pelas bolsas de estudo que os projetos de pesquisa ofereciam (não existe almoço grátis) e pela necessidade de aprender tecnologias de desenvolvimento de aplicações para um público só crescia, e por isso busquei alternativas que atendessem aos principais requisitos desses projetos.
O que eu procurei (e encontrei) em 2017
Eu necessitava de ferramentas que fossem fáceis de aprender, divertidas, produtivas. Além disso, essa ferramenta precisava me oferecer a possibilidade de desenvolver aplicativos para Android e iOS. Devido a isso, foquei minha pesquisa em soluções cross-platform.
Eu já era um entusiasta das novas tecnologias que o Google desenvolvia. O Polymer Project é um bom exemplo de como a empresa pretendia, na época, prover uma nova alternativa para o desenvolvimento de aplicações Web. Apesar disso, desenvolver utilizando o Polymer era frustrante e o código era difícil de entender. E isso foi exatamente o contrário do que eu encontrei no Flutter.
Experimente o Flutter
Se você ainda não conhece o framework ou ainda não usou, você realmente deveria considerar essa opção. Flutter é um framework que possibilita o uso da linguagem dart para desenvolver aplicações para várias plataformas, incluindo Android e iOS, a partir do mesmo código. Flutter usa Skia, uma engine de gráficos que, em resumo, dispõe um canvas a ser desenhado pelo usuário. O framework é construído em cima dessa estrutura, e oferece controle total dos pixels exibidos na tela.
Muitas das funcionalidades que fazem o Flutter ser uma ferramenta produtiva e robusta nos dias de hoje ainda não existiam quando o conheci. Em meados de 2017, o framework ainda estava em sua alpha release, e possuía suporte a mapas bem limitado, por exemplo. Mesmo assim, decidi experimentar e utilizá-lo um pouco, e minha experiência foi magnífica.
Pela primeira vez, eu realmente me senti em controle do que estava sendo exibido ao usuário, sobre como todos os Widgets (nome para componentes no Flutter) interagiam entre si e o que a aplicação estava fazendo. Foi também minha primeira experiência com gerenciamento de estado em interfaces de usuário, e um pouco do que eu sofri para entender como isso funcionava me ajudou a lidar com as tecnologias que eu viria a conhecer.
Eu tive essa experiência enquanto desenvolvia uma aplicação para consulta de horários dos ônibus locais oferecidos pela universidade em que estudo. Apesar de não ter lançado o app publicamente, ele me ajudou no meu caminho até o React Native (mesmo não tendo sido o melhor design de aplicativo que eu desenvolvi).
Como o Flutter mostrou que o React Native era uma opção viável
Eu usei esse aplicativo para mostrar, durante uma entrevista, que soluções para desenvolvimento cross-platform já eram, de fato, possíveis. E este era o problema do Flutter naquela época: criar uma solução com o framework era possível, mas não viável. A própria equipe de desenvolvimento da ferramenta não recomendava seu uso em ambientes de produção devido a constante evolução do código e grande quantidade de bugs ainda existentes.
Apesar disso tudo, o Flutter mostrou aos entrevistadores que soluções cross-platform agilizam o desenvolvimento de aplicações e remediam o fato de terem uma equipe pequena, sem muita experiência e em constante mudança. Não só para eles, mas também mostrou para mim que eu era capaz de desenvolver aplicações mobile.
O que o Flutter não mostrou foi, de fato, a estabilidade necessária para desenvolver aplicações em um ambiente em que os desenvolvedores não poderiam lidar com grandes bugs devido ao fato de não possuírem o conhecimento, perícia e tempo (20h semanais) necessários para desenvolver soluções que remediassem esses problemas. Outro grande fator considerado foi a falta de suporte para mapas, já que a aplicação a ser desenvolvida dependeria fortemente em diversos aspectos de geolocalização e navegação.
É aí que entra o React Native
Não precisamos abrir mão de muito para termos a estabilidade e suporte extensivo a mapas que precisávamos: o React Native já era, naquela época, uma ferramenta poderosíssima que permitia construir aplicativos cross-platform utilizando javascript, uma linguagem conhecida por praticamente todo mundo. Além disso, a sintaxe utilizada para criar interfaces de usuário no React, o jsx, é muito similar ao HTML, o que acelerou minha curva de aprendizado.
Mesmo não oferecendo controle na mesma intensidade que o Flutter, o RN atendeu perfeitamente nossa necessidade durante a execução do projeto. Foi possível desenvolver interfaces customizadas e atender as necessidades dos nossos usuários em ambas as plataformas. Sim, enfrentamos dificuldades ao lidar com módulos nativos, mas conseguimos superá-los de maneira simples.
Os responsáveis pelo projeto logo perceberam as inúmeras vantagens de adotar uma solução de desenvolvimento multiplataforma em um ambiente pequeno, onde pequenos bugs podem gerar altos custos, e todas as aplicações mobile subsequentes foram desenvolvidas utilizando React Native. Todos do time que utilizaram o framework ficaram impressionados pela similaridade com a Web e pela performance que ele oferecia. O React Native é amado por todos e utilizado até hoje no Smart Metropolis.
Fast-forward to 2020
Avançando para 2020, tendo desenvolvido duas aplicações com React Native, uma delas sendo o MeuMenu, app de delivery de comida similar ao iFood, fui apresentado a uma novo desafio: agora em um novo projeto da pesquisa, deveríamos escolher entre React Native e Flutter para desenvolver as soluções do projeto. Veja, isso não foi fácil: criei gosto pelo RN durante os dois anos que trabalhei com ele e, ao mesmo tempo, possuía uma experiência magnífica com o Flutter.
Por ter trabalhado por um tempo considerável com o React Native, eu já sabia daquilo que fazia dele um framework bom e um não-tão-bom. Lidar com animações e módulos nativos do celular poderia ser um pesadelo. Apesar de existirem ótimas bibliotecas de UI, muitas vezes os componentes oferecidos por elas não eram visualmente fiéis aos nativos, e eu sabia onde eu poderia encontrar tudo isso. Então, eu revisitei o Flutter.
Por que Flutter em 2020
O Flutter evoluiu em diversos aspectos desde a primeira vez que o utilizei. A extensiva documentação, vídeos explicativos feitos pelos desenvolvedores, a maior participação da comunidade no desenvolvimento de bibliotecas: tudo isso fez o Flutter ficar bem mais atrativo do que era antes. Além disso, durante esse tempo, foram lançadas diversas versões estáveis e adicionaram suporte a mapas 🎉.
Eu fui designado com a tarefa de criar um protótipo para validar as tecnologias que utilizaríamos no novo projeto. Ao revisitar o Flutter, o framework se mostrou ainda melhor do que eu lembrava. O modo como se declara interfaces no Flutter não poderia ser mais diferente do React Native, mas ainda assim, após algumas horas, construir a UI do protótipo pareceu bem natural.
Consegui desenvolver a tela inicial do app em menos de três dias, e ainda consegui adicionar animações aos widgets! Tudo isso sem comprometer a fidelidade entre os componentes nativos de cada plataforma, algo que com certeza exigiria mais tempo pra fazer no React Native. A integração com a API em GraphQL também foi feita sem muita dor de cabeça, e precisei instalar poucas bibliotecas externas para fazer isso tudo acontecer.
Em suma, essa foi a principal vantagem que vimos no Flutter: para nós, uma equipe que não pode arcar com grandes custos gerados por problemas do framework, o suporte que o Google provém à ferramenta é de grande importância. Isso significa que podemos nos preocupar mais com a experiência do usuário do aplicativo e menos com inconsistências de bibliotecas de UI oferecidas por terceiros.
RN vs Flutter? Não é bem assim
Mesmo 4 dos 6 desenvolvedores já tendo utilizado o React Native anteriormente, após analisar os dois protótipos, decidimos seguir com o Flutter. Apesar de sermos um pequeno time, isso diz muito sobre os dois frameworks. O mundo está cheio de pequenos times que precisam fazer as mesmas decisões que fizemos, e isso impacta diretamente na taxa de adoção das ferramentas e quais as prioridades futuras de cada um deles.
Não me entenda errado: o React Native continua sendo uma opção viável e muito interessante. Ambos os frameworks evoluíram muito nos últimos anos, e adição de hooks é uma prova de como a comunidade do React, como um todo, reage rapidamente a mudanças que são benéficas para os usuários. Enquanto isso, a comunidade do Flutter ainda não chegou a uma decisão sobre qual é a melhor estratégia para gerenciamento de estado entre widgets, e eu planejo falar sobre isso no futuro.
Acredito que os frameworks irão se beneficiar mutuamente com a existência um do outro, e espero que os desenvolvedores estejam prontos para reconhecer os pontos fortes de cada um. Eu estou muito feliz com a escolha que fizemos e ficaria igualmente feliz caso tivéssemos escolhido a outra opção. Continuarei postando conteúdo sobre o Flutter e minha experiência com a ferramenta 💻🔜.
