Energia híbrida: vantagens e benefícios do Flutter

O Flutter é uma plataforma híbrida de desenvolvimento de aplicativos móveis do Google que atingiu a versão 1.0 no final de 2018. Embora seja um participante mais novo na lista de estruturas de desenvolvimento híbrido, as grandes ideias por trás dele fizeram com que ele se popularizasse rapidamente entre os desenvolvedores.

Meu objetivo neste artigo é explorar essas ideias e escrever sobre minhas experiências com o Flutter e por que sinto que é o futuro do desenvolvimento de aplicativos móveis híbridos.

Embora existam estruturas de aplicativos híbridos mais antigas no mercado, há uma lista crescente de grandes empresas que estão escolhendo o Flutter para seus aplicativos móveis. Embora a página de demonstração do Flutter liste muitos deles, aqui estão alguns aplicativos notáveis ​​que usam o Flutter para todo o aplicativo ou para um recurso significativo:

• O aplicativo Google Ads
• Aplicativo GrabMerchant da GrabFood
• Aplicativo Xianyu do Alibaba Group, que tem mais de 50 milhões de downloads
• Nubank
• O aplicativo eBay Motors

Embora o framework Flutter seja bastante capaz, ainda é relativamente novo. Por uma questão de equilíbrio, também discutirei algumas limitações que você deve conhecer antes de se comprometer com o Flutter.

Minha esperança é que, depois de ler este artigo, você tenha uma boa ideia dos prós e contras do Flutter e tenha informações suficientes para decidir se deve usar o Flutter em seu próximo projeto de aplicativo móvel.

Vantagens do Flutter (de uma perspectiva de desenvolvimento)

Como desenvolvedor, esse é o ponto de vista com o qual estou mais familiarizado e sobre o qual posso compartilhar mais informações.

Curva de Aprendizagem Rápida

A primeira surpresa agradável que o Flutter tem para os desenvolvedores é a rapidez com que começa. Leva menos de 30 minutos para concluir o processo de instalação e configurar um ambiente de desenvolvimento funcional. A partir daí, você está pronto para criar seu primeiro aplicativo Flutter.

Integração de editores populares

O Flutter também possui ótimas integrações de editor. Eu pessoalmente uso o Android Studio, mas há instruções disponíveis para configurar o IntelliJ, VSCode ou Emacs.

Processo de Desenvolvimento Limpo

Comparado à minha experiência anterior com estruturas de aplicativos híbridos, o processo de desenvolvimento também parece mais limpo . Por exemplo, quando usei WebViews para exibir listas com muitos elementos (cerca de 100 ou mais), tive que lidar com alto uso de CPU, especialmente quando o usuário estava rolando a lista. Eu resolvi isso usando elementos de estrutura Ionic feitos especificamente para isso. No Flutter, existe uma maneira aceita de exibir listas, o ListView , que tem um desempenho incrível pronto para uso.

Recarregar ao vivo

Outra coisa que me surpreendeu agradavelmente foi a funcionalidade de recarga ao vivo. Como desenvolvedor full-stack, eu estava acostumado a frameworks como o BrowserWatch fornecendo recarga ao vivo no navegador.

O desenvolvimento nativo não tem isso (mas acho que o SwiftUI da Apple está fazendo algum progresso nessa frente para o desenvolvimento do iOS). Os desenvolvedores de Android e iOS geralmente precisam escrever código e esperar que ele compile e seja carregado no dispositivo ou simulador antes de poder ver as alterações.

O Flutter fornece (à la React Native) um mecanismo de recarga ao vivo, onde o código do aplicativo é recarregado no dispositivo assim que os desenvolvedores clicam em "salvar". Isso dá feedback imediato, tornando o desenvolvimento muito mais rápido.

atuação

O desempenho do aplicativo é outra métrica em que o Flutter está emergindo lentamente como vencedor.

Como o framework Flutter está em desenvolvimento ativo, há muitos lugares onde otimizações de desempenho podem ser feitas. Isso é evidente, por exemplo, no Flutter 1.17, que aumentou o desempenho de renderização em até 50% em dispositivos iOS mais recentes e diminuiu o consumo de memória em até 70% para determinados tipos de cargas de trabalho.

Consistência entre plataformas

UIs verdadeiramente consistentes em ambas as plataformas móveis é outro recurso notável do Flutter. Como o Flutter usa seu próprio mecanismo de renderização - mais sobre isso depois - a interface do usuário é exatamente a mesma no iOS e no Android. Os desenvolvedores não precisam mais lidar com problemas de estilo específicos da plataforma para que tudo pareça exatamente com o design: essa garantia faz parte da estrutura.

Linguagem, ferramentas e extensão

Três outros aspectos menores, mas ainda importantes, que acho que deveriam ser mencionados aqui são:

• Dart, a linguagem na qual os aplicativos Flutter são programados, é muito simples de começar. Mas também é uma linguagem bastante poderosa, originalmente planejada pelo Google para substituir o JavaScript. Se os desenvolvedores tiverem alguma experiência com JavaScript ou outras linguagens semelhantes a C, eles não terão problemas para pegar o Dart dentro de um ou dois dias.
• Há um gerenciador de plug-ins robusto (pub) incluído na cadeia de ferramentas padrão e uma enorme biblioteca de plug-ins disponível através do repositório de plug-ins pub.dev.
• Criar plug-ins para aproveitar os recursos da plataforma nativa é bastante fácil, portanto, se os desenvolvedores precisarem de acesso a um recurso da plataforma para o qual nenhum plug-in já existe, codificar um não é muito difícil.

Vantagens do Flutter (de uma perspectiva de negócios)

O maior benefício do Flutter que a maioria das empresas pensa é ter que contratar apenas uma equipe para as plataformas iOS e Android. No entanto, um benefício mais importante que muitas empresas ignoram é o tempo de lançamento no mercado mais rápido . Aproveitando as vantagens de desenvolvimento na seção anterior, uma equipe de desenvolvimento menor pode criar um belo aplicativo com desempenho nativo que fornece a mesma experiência de usuário em ambas as plataformas com muito mais rapidez usando o Flutter.

O Flutter permite que os desenvolvedores construam algumas interfaces de usuário realmente bonitas . Dê uma olhada em um desafio recente do Google e da Lenovo para criar uma bela interface do usuário do relógio para o Lenovo Smart Clock. O vencedor, Particle Clock de Mickel Andersson, não é apenas excepcionalmente elegante, mas também mostra como as animações de desempenho são no Flutter.

Para empresas que consideram o Flutter, mas não têm certeza se é o caminho certo a seguir, o Flutter pode ser aproveitado de forma incremental: aplicativos móveis preexistentes podem integrar o Flutter uma única parte de cada vez. Na verdade, é assim que a maioria das grandes empresas começa com o Flutter, construindo uma pequena parte de seu aplicativo existente no Flutter e, em seguida, substituindo lentamente outras partes assim que perceberem os benefícios.

Limitações a considerar antes de usar o Flutter

Para ser justo, o Flutter, sendo mais novo, não é tão testado em batalha quanto outras estruturas de aplicativos móveis híbridos como React Native – afinal, o alcance do usuário final do React Native abrange os aplicativos móveis do Facebook, Instagram, Skype e Discord.

A resposta padrão para “devo usar Flutter?” é, por enquanto, um sim cauteloso . Isso ocorre porque os gerentes de projeto ainda precisam considerar quais recursos avançados eles precisarão e certificar-se de que esses recursos estejam disponíveis no Flutter antes de se comprometerem a usá-lo. Em particular, vale a pena perguntar quais bibliotecas e plugins uma equipe pode precisar para construir um aplicativo específico. Como uma entrada mais recente em estruturas de aplicativos móveis, o Flutter não possui o amplo escopo de bibliotecas e plug-ins que o React Native possui.

Por exemplo, o suporte da câmera no Flutter ainda não está completo, com zoom e controle de flash ainda não fazem parte do plugin oficial da câmera. Para mim, isso não foi um problema, pois consegui encontrar um plug-in de terceiros quando precisei integrar a funcionalidade de foto/vídeo em um aplicativo que estava construindo.

Outro plugin importante que você pode perder é o Google Maps. Não há plug-ins do Google Maps nativos do Dart e, embora haja um plug-in para permitir a integração do Google Maps em seu código Flutter, ele usa recursos do Flutter (visualizações de plataforma) que ainda estão no status de visualização dos desenvolvedores.

Mais uma coisa que não afetará muitos projetos, mas você deve estar ciente, é que, por enquanto, o Flutter não suporta nenhum recurso 3D. A equipe está se concentrando apenas em 2D por enquanto. Mas a maioria dos aplicativos não usa nenhuma funcionalidade 3D, então isso não deve ser um problema para a maioria dos desenvolvedores.

Alguns conselhos da minha experiência com o Flutter

Tendo lançado três aplicativos Flutter nos últimos dois anos, aprendi várias coisas que gostaria de ter ouvido quando estava começando. Vou listá-los aqui na esperança de que eles o ajudem em sua jornada de desenvolvimento do Flutter.

Flutter é muito fácil de começar. Comecei com um curso maravilhoso na App Brewery. No entanto, depois de concluir os primeiros módulos, pensei que tinha aprendido o suficiente e comecei a construir o primeiro aplicativo que lancei.

Por causa da minha impaciência, pulei vários módulos desse curso que se mostraram importantes, e tive que aprender as lições desses módulos da maneira mais difícil, cometendo erros. Especificamente, eu teria feito um trabalho muito melhor no meu primeiro uso do Flutter para desenvolvimento de aplicativos se tivesse aprendido algumas práticas recomendadas do Flutter:

• Como modularizar e estruturar o código do meu aplicativo Flutter.
• Como funciona a gestão do estado.
• Como autenticar usuários e rastrear o status de autenticação nas diferentes páginas do meu aplicativo Flutter.
• Como integrar notificações usando o pacote Firebase Messaging.

Acabei aprendendo todas essas coisas, mas tive que cometer muitos erros primeiro. Reescrevi partes significativas do primeiro aplicativo que criei. Com meu segundo aplicativo Flutter, no entanto, aprendi com meus erros e acabei fazendo um trabalho melhor e mais rápido.

Existem muitos recursos que você pode encontrar facilmente pesquisando no Google para aprender sobre os conceitos listados acima. Você pode começar olhando os links na página Saiba mais no site do Flutter.

Outra coisa que descobri é que, por causa de quão novo o Flutter é, não há um padrão para estruturar seu aplicativo. Vindo de uma carreira de desenvolvimento principalmente baseada em Django, estou acostumado a saber que MVC é o padrão a ser usado em meus aplicativos Django. O iOS também tem um vencedor claro no padrão MVVM que segue. O Android tem seu conjunto de diretrizes sobre a melhor forma de arquitetar um aplicativo.

O Flutter não possui um padrão de arquitetura que “venceu” sobre as muitas possibilidades. Isso foi algo que me deu um momento difícil inicialmente. No final, tendo desenvolvido vários aplicativos Flutter, acho melhor simplesmente escolher uma arquitetura e ficar com ela.

Eu pessoalmente uso o pacote do provider como uma injeção de dependência e uma estrutura de gerenciamento de mudanças. Meus aplicativos Flutter também são divididos em três linhas:

1. Views , que são os widgets que constroem o aplicativo, incluindo as telas. Eu injeto serviços e modelos usando o widget Consumer do pacote Provider em minhas visualizações para que eu possa construir a interface do usuário com base nos dados disponíveis. O widget Consumer também reconstrói a visualização quando o estado muda, que é como meus aplicativos reagem às mudanças de estado.
2. Models , que são objetos antigos simples que eu uso para armazenar dados estruturados.
3. Serviços/controladores , para onde vai a maior parte da lógica de negócios. As interfaces de API também são codificadas aqui, que podem recuperar e enviar dados para a API. Essas interfaces de API fornecem e aceitam modelos para transmitir dados.

A biblioteca bloc também vale a pena considerar como uma alternativa ao pacote do provider . Ele tem uma arquitetura um pouco diferente e usa fluxos de eventos e estados para conectar visualizações e modelos.

É uma maneira um pouco mais complexa de gerenciar o estado do que usar a biblioteca do provider , mas vale a pena se você tiver um aplicativo complexo em que está fazendo alterações nos mesmos dados de várias fontes e precisa responder a essas alterações de vários lugares.

Se você acabar não usando BLoC ou provider , terá que criar algum método de gerenciamento de estado em seu aplicativo, especialmente no que diz respeito às notificações.

Como o Flutter se compara a outras estruturas híbridas

Reagir nativo

O React Native é de longe a estrutura de aplicativo móvel híbrido mais popular e bem-sucedida até hoje, e com razão. Foi preciso um framework web de front-end popular e bem feito, o React, e permitiu que milhões de desenvolvedores de front-end começassem a escrever aplicativos móveis também. Estou confiante de que muitos dos ótimos aplicativos móveis que temos hoje nunca teriam sido feitos se os desenvolvedores tivessem que encontrar tempo e motivação para aprender os SDKs de desenvolvimento nativos para iOS e Android.

Nesse contexto, estou confiante em dizer que o Flutter acabará vencendo como a principal estrutura de aplicativo móvel híbrida. Há algumas razões para isso.

Os componentes React Native são descritos no código JavaScript e traduzidos em controles nativos. Isso significa que os usuários obtêm uma sensação de interface do usuário diferente nas versões iOS e Android do aplicativo. Se os desenvolvedores estão tentando alcançar uma experiência nativa para seus usuários, isso é ótimo.

No entanto, isso também significa que, se os desenvolvedores desejam ter a mesma interface de usuário consistente em ambas as plataformas móveis, eles precisam trabalhar duro para estilizar os componentes nativos para que tenham a mesma aparência ou usar componentes diferentes que forneçam a mesma aparência em ambas. plataformas.

Compare isso com o Flutter, onde a estrutura fornece seus próprios widgets em todas as plataformas suportadas. Não há tradução acontecendo, porque o Flutter não depende dos controles nativos para pintar a interface do usuário. Em vez disso, ele usa sua própria biblioteca de controles. A biblioteca de widgets do Flutter fornece widgets que parecem controles nativos, mas são completamente opcionais.

Essa abordagem tem seus prós e contras. A maior vantagem é que agora você tem exatamente o mesmo aplicativo em ambas as plataformas. Mas você desiste de algumas coisas para conseguir isso.

Como o Flutter usa seus próprios widgets em vez de usar os nativos, você não pode usar a infinidade de bibliotecas existentes fornecendo controles personalizados como você pode fazer com o mínimo de trabalho no React Native. No React Native, é bem simples escrever um pequeno wrapper em torno de qualquer controle nativo existente e fazê-lo funcionar. É também por isso que, no momento, não há implementação estável do Google Maps para o Flutter.

No entanto, a capacidade de incorporar controles nativos está sendo trabalhada agora e está na visualização do desenvolvedor, o que significa que você pode usá-lo, mas pode ter que lidar com bugs. Uma vez lançado, ele fechará esse buraco bastante grande na funcionalidade do Flutter em comparação com o React Native.

Esse mesmo recurso Flutter - usando sua própria biblioteca de widgets em vez de nativos - oferece um grande benefício também quando você deseja criar um componente totalmente novo. No React Native, você teria que construir um componente nativo da plataforma e importá-lo para seu aplicativo por meio de ligações.

Com o Flutter, você pode criar componentes personalizados diretamente no seu código Dart. Você tem controle total da interface do usuário com widgets como CustomPainter que permite desenhar o que você precisar, e você tem uma biblioteca de widgets disponíveis que permitem implementar animações personalizadas. Você nunca precisa sair da base de código do Dart para criar esses widgets personalizados.

E isso eu acho que é um dos maiores benefícios do Flutter. Você tem controle total de sua interface do usuário a partir do código Dart e não precisa mais se preocupar em aprender o SDK nativo das plataformas para as quais está desenvolvendo.

Apache Cordova

O Apache Cordova não é tanto um framework, mas um wrapper de navegador. Com o Cordova, você cria seu aplicativo usando tecnologias da Web: HTML, CSS e JavaScript. O Cordova oferece uma maneira de executar esse aplicativo da Web em plataformas móveis e expõe APIs de plataforma nativa em JavaScript para que seu aplicativo possa interagir com a plataforma.

Existem várias estruturas diferentes criadas para o Cordova. Um dos famosos que usei no passado é o framework Ionic. Ele fornece um conjunto de componentes de interface do usuário que parecem e agem de forma semelhante aos componentes nativos da plataforma. No entanto, esses componentes são implementados usando HTML/CSS/JavaScript.

A experiência de desenvolvimento com Cordova e Ionic é muito boa, e começar é muito rápido se você já for um desenvolvedor web. Como você está criando aplicativos usando tecnologias da Web, você tem todo o ecossistema da Web disponível para você. Pense nas centenas de milhares de pequenos componentes e bibliotecas baseados em HTML/CSS/JavaScript, e você pode usar a maioria – se não todos – deles. Isso significa que a maioria dos “widgets” de que você precisa já está disponível online.

Isso também é uma desvantagem, no entanto. Como você usa tecnologias da Web para criar seus aplicativos, é preciso muito cuidado para garantir que o aplicativo se pareça com um aplicativo móvel, e não apenas um site que foi reduzido para funcionar em dispositivos móveis.

Embora o Cordova seja uma ótima maneira de desenvolver um MVP ou até mesmo as primeiras versões do seu aplicativo, o primeiro aplicativo que construí no Flutter foi uma porta de um aplicativo Ionic. As melhorias de desempenho que obtivemos, especialmente em visualizações que tinham muito conteúdo para rolar, foram perceptíveis desde a primeira interação.

Xamarin

Eu não tenho nenhuma experiência com o Xamarian, então não posso comparar os dois de maneira justa. No entanto, durante minha pesquisa, encontrei um ótimo artigo que faz uma comparação justa.

Embora o artigo termine com um empate entre o Flutter e o Xamarian, posso dizer com confiança que se eu estivesse lendo e tivesse que fazer uma escolha entre os dois frameworks, eu teria escolhido o Flutter porque as coisas em que ele brilha são as coisas que valorizo ​​mais.

Uma visão geral técnica do Flutter

Flutter: o “motor de jogo” dos frameworks de aplicativos híbridos

Entre as estruturas de aplicativos móveis híbridos, o Flutter tem uma abordagem única. Ele não delega a interface do usuário à plataforma nativa nem usa uma visualização da Web. Em vez disso, o Flutter usa seu próprio mecanismo de renderização para pintar a interface do usuário. Isso é semelhante a como os jogos usam um mecanismo de jogo que gera todas as partes de suas interfaces de usuário, em vez de usar controles nativos.

O Flutter usa o mecanismo gráfico Skia de alto desempenho e testado em batalha para desenhar tudo em seu aplicativo móvel. O uso do Skia oferece dois benefícios principais em que posso pensar, embora tenha certeza de que os engenheiros do Google por trás do Flutter tinham muito mais em mente:

1. Seu aplicativo terá a mesma aparência em todas as plataformas sem precisar ser personalizado para cada uma delas.
2. Seu aplicativo terá um ótimo desempenho, semelhante aos aplicativos nativos, pois não há uma camada intermediária que tenha que traduzir seu código em código de plataforma nativa para desenhar os widgets.

Tudo é um widget

Os documentos do Flutter falam sobre o Flutter como uma “estrutura no estilo React”. Isso fica evidente na forma como os aplicativos são criados compondo widgets menores ( componentes na terminologia do React) juntos.

No entanto, o Flutter leva a abordagem de tudo é um widget um passo além de qualquer outra estrutura com a qual trabalhei.

Um exemplo simples é o preenchimento. Com a maioria das estruturas, o preenchimento é um atributo dos elementos da interface do usuário. No Flutter, Padding é um widget que pode envolver outros widgets dentro de si mesmo e adicionar preenchimento ao redor de seu widget filho.

Mais especificamente, o InheritedWidget não tem interface do usuário e não fornece nenhuma interação do usuário. Seu único trabalho é adicionar informações à árvore de widgets para que, em algum ponto da árvore, você possa extrair essas informações.

Por exemplo, a raiz do seu aplicativo - o widget MaterialApp - pode injetar um serviço de autenticação na árvore do widget usando um InheritedWidget . Agora, no fundo da árvore em alguma outra página, como sua página de perfil de usuário, você pode usar um método para extrair esse serviço de autenticação e usá-lo.

Isso tudo é uma abordagem de widget leva algum tempo para se acostumar. Mas uma vez que você está familiarizado com ele, torna-se uma maneira poderosa de construir funcionalidades em seus aplicativos.

Flutter, dart e cavando na fonte

Flutter está intimamente ligado a Dart. Embora o mecanismo de renderização principal seja construído em C/C++, isso é apenas uma pequena parte do Flutter.

A maior parte da base de código do Flutter é escrita em Dart, e há excelentes razões pelas quais a equipe do Flutter a escolheu. Mas o maior benefício para mim foi que eu poderia facilmente olhar para o código-fonte do framework – e todos os diferentes widgets que ele fornece – e aprender com eles.

Esta é uma vantagem mais poderosa do que muitos desenvolvedores imaginam. Eu recomendo que a maioria dos desenvolvedores tente encontrar respostas no código de seus frameworks/bibliotecas, pois isso não apenas os ajuda a entender o que está acontecendo nos bastidores, mas também os expõe a um código de alta qualidade e bem projetado, o que é um caminho certo de crescer como desenvolvedor.

Interoperabilidade de plataforma nativa

Embora o Flutter forneça a camada de interface do usuário e a lógica de negócios seja facilmente manipulada por meio de pacotes Dart puros, para acessar os recursos da plataforma nativa, como geolocalização e controle de câmera, usar os pacotes de terceiros do pub.dev é a estratégia mais fácil.

No entanto, se houver alguma funcionalidade necessária que não esteja disponível por meio de um pacote existente, escrever uma você mesmo não é muito difícil. Eu mesmo não criei nenhum pacote nativo da plataforma, mas examinei o código-fonte de muitos por curiosidade.

Embora eu não seja um desenvolvedor de aplicativos nativo, consegui entender principalmente as partes nativas desses plug-ins e ver como eles se conectavam ao tempo de execução do Dart por meio da passagem de mensagens. Para desenvolvedores de plataformas nativas experientes, criar um novo pacote para alavancar um recurso nativo será muito fácil.

Você deve usar o Flutter em seu próximo projeto?

Felizmente, este artigo forneceu informações suficientes para decidir se você pode usar o Flutter em seu projeto de aplicativo móvel. Tentei dar uma imagem equilibrada do Flutter, listando os prós e os contras.

Embora ninguém possa tomar a decisão por você, posso dar alguns conselhos de despedida sobre como abordar a questão de usar o Flutter no meu próximo aplicativo móvel. Se as vantagens do Flutter puderem fornecer todos os recursos que um aplicativo precisa, eu o escolheria em um piscar de olhos.

Isso porque, além das poucas áreas em que o Flutter está faltando atualmente, todos os outros aspectos dele são aqueles que eu admiro e confio no desenvolvimento e lançamento dos cinco aplicativos Flutter diferentes no ano passado:

• A facilidade de começar do Flutter
• Os ganhos de velocidade que podem ser obtidos ao usar um framework que foi projetado desde o início para focar na velocidade de desenvolvimento
• O rico ecossistema de bibliotecas Dart prontamente disponíveis e pacotes de terceiros
• A maneira diferente, mas extremamente produtiva do Flutter de desenvolver aplicativos usando a abordagem de tudo é um widget

Aqueles que oferecem serviços de desenvolvimento de aplicativos móveis seriam sábios em dar uma olhada séria no Flutter, se ainda não o fizeram.

Vou encerrar observando uma última vantagem do Flutter: ele tem algumas das melhores documentações de qualquer biblioteca ou framework com o qual trabalhei. É raro eu pesquisar no Google uma pergunta do Flutter e não ser respondida por uma página do próprio site do Flutter.

Como Google Cloud Partner, os especialistas certificados pelo Google da Toptal estão disponíveis para empresas sob demanda para seus projetos mais importantes.