DEV Community

Cover image for Flutter ou React Native?
Henrique Pomatti dos Santos
Henrique Pomatti dos Santos

Posted on

1

Flutter ou React Native?

Em primeiro lugar, uma pequena introdução. A maneira mais fácil de tomar uma decisão é olhar para a história. Vamos fazer uma viagem pela estrada da nostalgia. No início de 2000, havia duas estruturas de UI que JAVA tinha. Um era o AWT, que era uma maneira de criar interfaces de usuário para vários sistemas operacionais, mantendo a aparência do sistema operacional.
Cada sistema operacional teria seus próprios componentes que foram mapeados de volta para os componentes AWT criados usando a estrutura AWT.
Java então decidiu criar sua própria biblioteca de componentes de renderização, chamada Swing. O que o Swing fez foi lidar com sua própria renderização de confiar nos componentes subjacentes do sistema operacional. O Swing venceu a batalha e logo o AWT desapareceu da face da terra.

Se você tem acompanhado o debate React Native vs Flutter, isso deve ser familiar para você. Os componentes do React Native são transpilados para os componentes IOS ou Android, enquanto o Flutter renderiza sua própria UI usando seu próprio mecanismo de renderização baseado em um motor de renderização 2D chamado SKIA. (Semelhante a como um motor de jogo faz sua própria renderização). Ele ainda depende de Material design (estilo Android) Widgets e Cupertino (estilo Apple) widgets para imitar a aparência perfeita do pixel da plataforma nativa. Se olharmos para trás para a batalha Swing vs AWT como referência, Flutter provavelmente vencerá aqui.

Round 1: FLUTTER WINS!

Mas, tradicionalmente, o desenvolvimento baseado em sistema operacional tem sido baseado em widget, em comparação com o desenvolvimento baseado em navegador, que depende de ser baseado em modelo e DSL. Embora tenha havido exceções como WPF / Silverlight, que tentaram trazer o mesmo mecanismo de modelos (XAML) para o sistema operacional, eles falharam várias vezes.

Mas o que os desenvolvedores precisam?

O React Native teve uma estratégia brilhante de usar o React por debaixo dos panos, o que permite que você que manja de React, possa também desenvolver React Native. O Flutter usa o Dart, que é uma linguagem da nova era com uma curva de aprendizado mais acentuada, embora seja uma linguagem melhor para o desenvolvimento de UI.
Em tempos de “grande guerra por talentos” e “grande demissão”, isso é mais relevante do que nunca quando você não pode contar com a contratação dos melhores desenvolvedores e mantê-los ocupados para sempre. Faz mais sentido do que nunca manter sua pilha de tecnologia enxuta e não espalhada por diferentes tecnologias.

Round 2: React Native Wins!

E se fosse possível ter um mesmo código para Mobile e Web?

Aha, o Santo Graal. Existem duas maneiras de ver isso. O React Native começou a buscar o aproveitamento dos conjuntos de habilidades do desenvolvedor do React para o desenvolvimento mobile. Existem maneiras fáceis de manter uma única base de código para gerenciamento de estado e comportamento enquanto abstrai as telas e componentes.
A Microsoft também lançou um ótimo projeto que permite usar o React Native para a web.
Flutter, por outro lado, transpila para JS para a web. Qualquer transpilação é ruim pois pode haver vazamentos de código fonte.
(Lembre-se do GWT).
O Flutter também está possivelmente oferecendo a opção de compilar até o Web assembly (WASM), permitindo uma base de código comum em dispositivos móveis e na web. O WASM dará a opção de oferecer suporte a outros idiomas além do javascript no futuro. No momento em que este artigo foi escrito, o WASM ainda sofre de problemas de SEO e desempenho e não está pronto para a produção na web. A Apple está empenhada em apoiar o WASM no Safari. Se a Apple tivesse sido considerada o suficiente para oferecer suporte total para PWA, nunca teríamos que escolher.
Embora o suficiente tenha sido escrito sobre React Native e sua ponte JS causando muitos problemas de desempenho, acredito que isso será resolvido em breve.

Round 3: React Native ainda... Porém quem sabe o Flutter não vem ai em 2022 em...

E sobre popularidade?

GitHub
Flutter 132k de estrelas
React Native 100k de estrelas

Round 4: Não tem como eleger um vencedor :(

E sobre produtividade do desenvolvedor?

Existem duas maneiras de ver isso.
JS está ai há muito tempo. Dart é novo, embora seja uma linguagem melhor. É mais rápido desenvolver com o React Native quem já tem habilidade com React ou qualquer outro framework JS.
Depois de ignorar o tempo de build inicial, o Flutter é mais rápido para o mercado em comparação com o React Native. Embora isso seja discutível, estou dando a palpitação a vantagem por causa da possível otimização de desempenho necessária para cada plataforma.
Resumindo, como o Flutter tem muito da facilidade de uso do desenvolvedor na própria estrutura (implantação, CI / CD, biblioteca de componentes ricos, depuração, suporte IDE), é definitivamente um vencedor aqui. Embora componentes de terceiros, como Expo, React Native Paper e Fastlane facilitem muito essas peças para React Native.

Round 5: Flutter!

Decisão final!

Escolha React Native se quiser utilizar suas habilidades de desenvolvedor existentes em JS. No cenário atual de guerra por talentos, isso é mais verdadeiro do que nunca, quando você nem sempre pode atrair os melhores talentos.

Escolha Flutter se você quiser ser mobile first e não se importar em desenvolver duas vezes um para dispositivos móveis e outro para a web. (Por enquanto) e você não está precisando de desenvolvedores ou dinheiro. Ele está se configurando para ser a escolha de um framework de front-end único para o futuro.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more