Há algum tempo eu venho procurando soluções mobile híbridas, sem que precisasse aprender Android (Java) ou iOS (Objective-C). Como desenvolvedor backend, queria uma solução prática, com uma documentação agradável e com uma curva de aprendizado relativamente baixa. E é por isso que decidi aprender Flutter.

Como não sou muito fã de criar componentes do zero, procurava também por um conjunto de componentes prontos e altamente configuráveis e, por fim, que fossem também performáticos. Não era pedir muito, certo? O que eu procurava é algo que todo e qualquer programador quer quando vai conhecer algo novo.

O grande problema é que todas as soluções que encontrei pelo caminho resolviam apenas parcialmente os requisitos. Num geral, as soluções sempre traziam algum ponto fraco em relação à performance e à experiência nativa (como foi o caso de opções como WebView ou Bridges).

O desafio estava lançado e eu estava animado com as descobertas que faria no processo. E sim, é claro que eu pensei em React Native! Ainda vou retomar esse ponto, mas quero te contar melhor sobre todo o meu caminho para aprender Flutter neste post:

O encontro com Flutter

Quando conheci o Flutter ele já tinha 1 ano de Beta, mas sem uma versão 1.0.

Fiquei surpreso ao identificar que, mesmo no Beta, já existiam alguns apps em produção. Eram poucos, claro, mas já possuíam diversas animações e features que são imprescindíveis para um grande app em produção.

Se você ainda não sabe, o Flutter é apoiado pela Google. Essa ligação me fez sentir firmeza (“esse veio pra ficar”), principalmente depois da Google investir pesado em marketing, tutoriais e na equipe de desenvolvimento próprio do Flutter.

Outro ponto curioso do Flutter é o uso da linguagem Dart, que é uma linguagem criada pela própria Google em 2011. Naquela época grande parte dos programadores nunca tinha ouvido falar em Dart — e eu me incluo nessa lista.

Essa tal de linguagem Dart foi meu primeiro obstáculo na hora de aprender Flutter. De qualquer maneira, resolvi me aprofundar e seguir. Vale compartilhar contigo o que eu aprendi.

A linguagem Dart

Devo confessar que no início tive uma certa resistência à Dart e a sua tipagem. Eu vim de PHP, então sempre tentava tipar tudo o que podia e mesmo assim essa era uma barreira com Dart.

Porém, não desisti e logo aceitei essa ideia. Juntamente com uma IDE, comecei a produzir. Vale ressaltar que, mesmo no início, eu já consegui produzir algo. Isso só me confirmou que eu teria, ao aprender Flutter, a tal da baixa curva de aprendizado que procurava. É claro, digo isto pois já programava em outra linguagem.

O que era uma barreira no início, se tornou algo positivo. Afinal notei que, por Dart ser tipada, eu cometia menos Runtime Errors ou Erros de Sintaxe, uma vez que a IDE sempre me mostrava o método correto e já que existia uma indexação em cima dos Objetos do Dart. Se comparado com Javascript ou Ruby, por exemplo, é muito mais simples.

Além disso o que torna Dart a linguagem perfeita para Flutter é o suporte a JIT (Just-in-time), facilitando na hora do desenvolvimento (Hot reload), e a AOT (Ahead-of-time), que é altamente performático em produção.

Por que o Flutter prendeu a minha atenção?

Depois de entender a linguagem Dart, pude focar minha atenção ao Flutter.

O que mais me chamou atenção é que ele foi pensado em resolver um problema: duplicidade de código no mundo mobile. Só por ter esse único objetivo, já me fez criar mais confiança de que seria uma ferramenta poderosa.

Outra peculiaridade que percebi ao aprender Flutter é que ele é um framework UI, ou seja, criado para possibilitar o controle da UI do seu aplicativo. Em outras palavras, podemos dizer que os processos são criados para esse tipo de otimização e performance.

Uma vez que ele é construído para UI, nada mais justo já vir com muitos (mas muitos mesmo!) componentes prontos para serem utilizados. E é exatamente isso que o framework entrega nativamente, te dando assim a certeza que aquele componente ou widget será renderizado da forma mais performática possível.

E falando em performance, o que a possibilita é que o Flutter não possui bridge alguma e renderiza os widgets diretamente no sistema, usando Skia Engine para isso, gerando assim menos problemas e gargalos que o uso de bridges apresenta.

Como Flutter renderiza seus widgets

Como a arquitetura do Flutter funciona

O Flutter não vem com uma arquitetura padrão ou recomendada. Para alguns isso pode ser considerado um ponto ruim, mas na minha opinião esse é um ponto positivo. Afinal, dessa maneira, é possível criar conforme for desejado e assim moldar a solução ao problema…

Eu já havia visto algo assim em Vue. E ao trabalhar com Vue me senti livre para criar a arquitetura que iria se adequar especificamente para meu projeto.

Outro ponto importante que vale ser comentado é a “Gerência de Estado no Flutter”. Mesmo após algum tempo utilizando o Flutter eu ainda não consegui me decidir sobre qual tipo de Gerência de Estado eu prefiro. Hoje existem algumas opções como SetState (nativo), Mobx, Bloc, Provider, Redux, entre outros, cada um com sua particularidade e sua popularidade.

Pra quem está começando, Provider é uma ótima opção, já que SetState é penoso para a aplicação. Já Bloc, apesar de ser um do mais usados, é mais complexo, denso e precisa de certo estudo antes da prática.

Como Provider é bem parecido com outros Gerenciadores de Estado que aprendi em frontend, ele é a minha escolha hoje para as arquiteturas que crio.

Google Fuschia: o novo sistema operacional que utiliza Flutter

O Fuschia é um novo sistema operacional da Google que está vindo para competir diretamente com o Android (que também é da Google). Sim, é isso mesmo.

O interessante desse sistema operacional é que ele também é escrito em Dart e utiliza Flutter como SDK de interface gráfica.

Vale ressaltar que inicialmente as aplicações desenvolvidas para Fuschia rodarão em cima de Flutter, logo no lançamento do Google Fuschia. Então, quem souber Flutter certamente estará à frente no mercado.

No Flutter nem tudo são flores

Como em todo framework, a perfeição não existe. E no Flutter não seria diferente. Hoje ainda existem certos problemas. Compartilho alguns:

• A linguagem Dart - Como já comentei neste artigo, o uso da linguagem Dart é um grande impedimento para muitos desenvolvedores e empresas na hora da escolha do framework;

• A comunidade - Para quem vem de Javascript, por exemplo, vai sentir a diferença na participação da comunidade. Como em toda nova ferramenta, este processo de construção de comunidade demora um pouco a crescer. Conseguimos visualizar isso de forma clara através do Google Trends e do StackOverflow.

Número de perguntas no StackOverflow

Resultado de pesquisas no Google Trends

Mesmo com essa diferença, sempre obtive respostas para minhas perguntas em Flutter, seja por StackOverflow, Medium ou Google. Outra dica para é ficar atento ao Flutterando, que é a maior comunidade de Flutter no Brasil.

Mas enfim, por que eu escolhi Flutter e não React Native?

É normal que quando se pense em framework para desenvolvimento mobile o React Native seja o primeiro nome a surgir na sua mente. Afinal, ele é escrito em JavaScript e utiliza bridges para renderizar os componentes.

De fato, o React Native já é bem consolidado no mercado e para um novo programador que está à procura de um emprego, a Stack JS é sempre uma ótima opção. Porém, por mais que tenhamos muitos apps em produção com React Native, ainda assim há uma grande diferença de performance entre React Native e Flutter.

O que é interessante é que em alguns casos Flutter é até mais performático que Swift em CPU.

Além da performance, vale ressaltar que em React Native é preciso utilizar pacotes de terceiros na maior parte do tempo - o que a meu ver cria dependência de pacotes que podem ser descontinuados a qualquer momento.

Logo, encontrei no Flutter uma ótima ferramenta para desenhar UI, com uma ótima performance, sendo quase equiparada ao de um nativo. É possível assim construir Apps com experiência nativa para Android e iOS com apenas um código.

Ainda: usando Dart como linguagem base, o Flutter tem suporte a JIT (Just-in-time), que facilita muito na hora do desenvolvimento, e a AOT (Ahead-of-time), que ajuda muito na performance na hora de rodar em produção.

A comunidade está em crescimento e já supre em boa parte as necessidades dos projetos. E por ser sustentado pela Google existem boas garantias de que o Flutter veio mesmo para ficar.

Acho importante ressaltar que não condeno React Native e nenhum outro framework ou linguagem! Eu mesmo utilizo outras opções em alguns casos, até porque uma coisa é certa: uma tecnologia não exclui a outra. Basta utilizar a melhor opção olhando para o problema específico que precisa ser resolvido.

E você, ficou instigado para aprender Flutter?

Referências

• The Engine architecture of Flutter
• Fluter Docs