Recurso Flutter Hot Reload: benefícios e desempenho explicados

Flutter Hot Reload é um recurso muito procurado da estrutura do Google, que permite aos desenvolvedores fazer alterações no código e ver os resultados quase imediatamente – sem reiniciar o aplicativo. Esse recurso facilita a iteração rápida e o refinamento do design do aplicativo, a experimentação com diferentes layouts e configurações de UI, a correção de bugs e, o mais importante, a redução significativa do tempo de desenvolvimento. Como resultado, o Hot Reload pode beneficiar muito uma empresa de desenvolvimento de aplicativos Flutter, permitindo alterações de código em tempo real e atualizações instantâneas, tornando o processo de desenvolvimento mais eficiente e colaborativo.

O recurso Flutter Hot Reload permite que os desenvolvedores vejam as alterações feitas no código refletidas no emulador ou dispositivo instantaneamente, sem a necessidade de reiniciar completamente o aplicativo. Este artigo tem como objetivo responder a uma pergunta aparentemente simples: O que significa ‘quase instantâneo’ para Hot Reload? Em outras palavras, com que rapidez esse recurso Flutter funciona em projetos de tamanhos diferentes? O que se deve esperar ao trabalhar em projetos maiores e nos menores? O Hot Reload funciona bem em todos esses cenários? Vamos descobrir!

Compreendendo o Flutter Hot Reload

Vamos começar com o básico e as isenções de responsabilidade necessárias. Ao descrever o recurso Hot Reload, é importante destacar que o Dart VM utiliza o compilador JIT (Just-in-Time) para converter o código em código de máquina nativo, o que ocorre pouco antes da execução do programa. O JIT é baseado na previsão de código porque tem acesso a informações dinâmicas de tempo de execução, o que leva a soluções que economizam tempo, como informar aos desenvolvedores que uma função específica não foi usada em lugar nenhum.

Hot Reload reconstrói a árvore de widgets, mas mantém o estado do aplicativo como estava. Ao usar o recurso Hot Reload, as funções `main()` e `initState()` não são invocadas. Se precisar reconstruir essas funções, você deve usar Hot Restart ou Full Restart:

• Hot Restart: ferramenta que faz com que o código fonte da aplicação do projeto seja compilado novamente, partindo do estado padrão/inicial, onde o estado preservado é destruído. Esta ferramenta é muito mais rápida que o Full Restart, mas leva mais tempo que o Hot Reload.
• Full Restart: ferramenta que constrói o projeto da aplicação do zero, também chamada de “Cold start”.

Além disso, de tempos em tempos, os desenvolvedores devem usar Hot Restart em vez de Hot Reload, por exemplo:

• Se o aplicativo permanecer em segundo plano por muito tempo e/ou for encerrado,
• Se o tipo enumerado no arquivo Dart for alterado para classes normais e vice-versa,
• Se o código nativo for alterado,
• Depois que a declaração do tipo genérico for alterada.

Flutter Hot Reload pode ser executado apenas no modo de depuração. Outros modos de construção, que são: modo de perfil e modo de liberação, não suportam o recurso Hot Reload.

A escala do projeto versus o desempenho do Flutter Hot Reload

Os projetos Flutter variam em tamanho, com base na quantidade de bibliotecas incluídas, arquitetura do aplicativo, arquivos de mídia ou recursos do aplicativo. Até recentemente, o Flutter era considerado uma solução perfeita para MVPs e PoCs. No entanto, à medida que projetos Flutter em grande escala, como Google Pay, eBay, Nubank, Rive ou Maya Bank, com 47 milhões de usuários, estão ganhando impulso, explorar as possibilidades do Flutter para aplicativos complexos também é essencial.

O recurso Hot Reload do Flutter pode ser utilizado tanto para aplicativos de prova de conceito (PoC) quanto para produtos digitais de nível empresarial. No entanto, permanece a questão se o seu desempenho é satisfatório para projetos complexos e se o Flutter para aplicações empresariais é uma escolha viável. Vamos explorar isso ainda mais!

O experimento de desempenho de recarga a quente

Em primeiro lugar, para determinar o desempenho médio aproximado do Hot Reload em diferentes casos de uso, decidi examinar 5 projetos de teste contendo uma determinada quantidade de bibliotecas:

• Projeto de teste 1: 1.000 bibliotecas
• Projeto de teste 2: 5.000 bibliotecas
• Projeto de teste 3: 10.000 bibliotecas
• Projeto de teste 4: 25.000 bibliotecas
• Projeto de teste 5: 50.000 bibliotecas

Entendo que é altamente improvável que um projeto tenha um número tão grande de bibliotecas, mas estamos usando isso como um teste para acompanhar tendências em cinco projetos específicos.

Um experimento foi realizado com as seguintes especificações do dispositivo:

• MacBook Pro, Intel Core i5 de código quádruplo de 2-3 GHz, 16 GB 2133 MHz LPDDR3, Intel Iris Plus Graphics 655 1536 MB,
• Código do Visual Studio, versão: 1.68.1,
• Simulador: Iphone 12 Pro Max – iOS 15.5 (versão Xcode: 13.4.1),
• Flutter SDK (canal estável, 3.7.0).

Tenha em mente que os tempos de recarga específicos variam dependendo do seu hardware ou sistema. Um experimento foi realizado com as seguintes especificações do dispositivo. No entanto, a tendência geral e as conclusões devem permanecer as mesmas.

O objetivo do experimento foi mostrar quanto tempo leva para realizar um recurso Hot Reload em cada projeto, onde uma quantidade relevante de bibliotecas é gerada para fins de teste. Cada biblioteca contém uma classe específica. Desta forma a quantidade de bibliotecas corresponde ao número de classes que se espera recarregar. Abaixo está um exemplo do Projeto Teste 3 contendo 10.000 classes. Cada biblioteca, chamada “placeholderX”.dart, contém uma classe simples Stateless Widge “placeholderX, que é um contêiner:

A cor do container é uma variável declarada na biblioteca “constants.dart” na classe “Constants”, que é simplesmente conectada às seguintes bibliotecas “placeholders” geradas para teste.

Resultados do teste de recarga a quente Flutter

Agora que estabelecemos todas as variáveis ​​e objetivos do experimento e explicamos o processo, é hora de resumir os resultados. Vamos ver os efeitos de 5 testes de desempenho do Flutter Hot Reload.

Teste 1: Recarregando 1.000 classes

Teste 2: Recarregando 5.000 classes

Teste 3: Recarregando 10.000 classes

Teste 4: Recarregando 25.000 classes

Teste 5: Recarregando 50.000 classes

O gráfico abaixo compara a duração do tempo de Hot Reload entre diferentes escalas de projetos:

Obviamente, o tempo médio do recurso Hot Reload para uma determinada escala de projeto está aumentando devido a um maior número de bibliotecas (classes).

No entanto, olhando atentamente para o gráfico abaixo e levando em consideração apenas os 3 primeiros testes do projeto, você poderá notar valores detalhados de uso específico do Hot Reload:

Resultados do teste explicados

Os resultados do teste confirmam que o recurso Hot Reload Flutter é eficaz na reconstrução de 1.000 classes de uma vez, onde o tempo médio de duração oscila no limite de 1 segundo, na maioria das vezes nem atingindo esse valor conforme o gráfico. Portanto, na maioria dos casos da vida real, o Hot Reload certamente é uma escolha segura, por exemplo, enquanto:

• recarregando uma única classe,
• realizar reuniões ao vivo com clientes (por exemplo, ao testar novas ideias),
• durante a programação em pares ou brainstorming.

Antes de tirar conclusões precipitadas, quero enfatizar uma coisa. Lembre-se de que recarreguei todas as bibliotecas (classes) listadas de uma vez em meu teste. Durante o processo médio de desenvolvimento, dificilmente é necessário recarregar uma quantidade tão grande de bibliotecas.

Com base na minha experiência de desenvolvedor (e nos resultados do teste), recarregar menos bibliotecas deve permitir evitar problemas de latência. Sem mencionar que recarregar bibliotecas frequentemente minimiza o risco de bugs indesejados ou problemas de código e torna muito mais fácil monitorar as alterações introduzidas em um projeto.

Flutter Hot Reload: desempenho explicado

O recurso Flutter Hot Reload é uma ferramenta poderosa e eficiente que é útil para resolver problemas relacionados à IU durante o estágio de desenvolvimento. Conforme comprovado no experimento acima, na maioria dos casos, o desempenho do Hot Reload é perfeito – com uma única mudança na UI sendo uma questão de menos de um segundo e um tempo médio de recarga de 1.000 classes oscilando em torno de 1 segundo.

Além disso, um experimento provou que o Flutter pode recarregar projetos de grande porte com milhares de classes, onde o tempo médio de Hot Reload é inferior a 8 segundos. Mesmo que o desempenho do Hot Reload possa não ser totalmente satisfatório em projetos gigantes (cenário de 50.000 classes), o Flutter é perfeitamente capaz de lidar com eles.

Sem dúvida, Flutter Hot Reload aumenta a eficiência do trabalho reconstruindo widgets dentro da árvore de widgets do projeto, tornando mais fácil alcançar os resultados desejáveis ​​em um piscar de olhos. Graças ao Hot Reload, os desenvolvedores do Flutter são capazes de lidar com alterações complexas de design (mesmo aquelas que afetam todo o aplicativo) em tempo hábil.

Por último, mas não menos importante, o Hot Reload é apenas um fator que contribui para o desempenho geral da estrutura (constantemente verificado pela comunidade Flutter e melhorado pelo Flutter Dev). Explorar as principais ferramentas de desenvolvimento Flutter é essencial para criar aplicativos móveis multiplataforma de alta qualidade com eficiência. Portanto, recomendo fortemente que você explore o desempenho no Flutter – tanto por meio de experimentos e testes quanto em projetos de clientes comerciais. Isso é o que fazemos na Miquido – aumentando constantemente nosso portfólio de projetos de desenvolvimento de aplicativos PoC e de plataforma cruzada de nível empresarial.