Desenvolvimento de benchmarks para comparação de frameworks mobile

Objetivo

O Framework para o desenvolvimento mobile é um grande fator determinante da velocidade de desenvolvimento, a performance do aplicativo e da experiência do usuário. Tendo isso em mente a equipe de desenvolvimento mobile fez um esforço conjunto para determinar qual seria a melhor stack e framework para o desenvolvimento das próximas aplicações da Szot.

Frameworks e Stacks

Nossa equipe de desenvolvimento, tanto front-end como mobile e também back-end, é bem reduzida ainda e não temos os recursos para desenvolver 2 apps, um para cada plataforma. Por isso optamos por frameworks híbridos. Também delimitamos a não usar Kotlin ou Swift para desenvolvimento híbrido por nossa equipe não ter background em nativo Android ou iOS e também por preferirmos frameworks reativos.

Para delimitar o escopo dos testes optamos por 3 frameworks bem populares capazes de desenvolver para iOS e Android:

• React Native
  • É o framework mais popular para esse tipo de desenvolvimento e deve representar a maioria das experiências dos usuários.
  • A stack utilizada foi a padrão do React Native.
• Flutter
  • Framework bem recente, porém muito popular. Posteriormente descoberto como muito performático e uma opção diferente da maior parte do mercado.
  • A stack utilizada foi a padrão do Flutter.
• Ionic (com Svelte)
  • Ionic já está na quinta versão e muitos dos problemas de performance foram resolvidos na versão 4. É um excelente framework para desenvolver apps para qualquer plataforma usando técnicas de desenvolvimento para websites. Um grande fator de peso para a escolha dele foi querer usar Svelte e a imaturidade do Svelte Native.
  • A stack utilizada foi Ionic Svelte, criada pelo Victor Gris (Cubo). A escolha foi com base na maturidade que Svelte 3 alcançou recentemente e também a facilidade para desenvolver códigos legíveis e rápidos. Infelizmente por ser um par bem incomum, não existem recursos das duas juntas, mas existem bastantes recursos para cada uma e não são difíceis de juntar (um pouco de JS Vanilla resolve qualquer coisa).

Testes

Para a escolha dos testes nos baseamos em priorizar uma boa experiência do usuário e também uma boa experiência de desenvolvimento. Antes de criar os testes, tentamos pesquisar por testes já existentes, porém achamos poucos testes que testem tudo que queríamos. Nessa jornada encontramos um artigo comparando a performance de Flutter, React Native e tecnologias nativas(1) que citou 3 tipos de performance importantes para desenvolvimento mobile:

There are different types of performance, some of them are:

• Interacting with phone API (accessing photos, file system, getting GPS location and so on).
• Rendering speed (animation smoothness, frames per second while UI is changed or some UI effects that take place in time).
• Business logic (the speed of mathematical calculations and memory manipulations. This type of performance is most important for the apps with complex business logic).

Sendo assim decidimos implementar testes para avaliar os 3 tipos de performances.

Interação com API nativa do telefone

Para esse teste selecionamos algumas features importantes para nossos apps:

1. Acesso à camera
2. Acesso à galeria
3. Acesso aos arquivos
4. Compartilhamento
5. Acesso à geolocalização

Performar perfeitamente no acesso da API não é muito importante para a experiência, mas ser incapaz de acessar em tempo hábil é extremamente negativo para o usuário. Portanto só fizemos um teste binário: consegue ou não consegue.

Por conta da grande base de desenvolvedores e popularidade, para React Native e Flutter não desenvolvemos testes desse tipo por assumirmos que a comunidade já teria testado muito o acesso à API.

Velocidade de renderização

O visual e a suavidade das animações são extremante importantes para os usuários mexerem com tranquilidade no aplicativo. Interfaces travadas podem levar usuários a desistirem de usar o app. A falta de animações pode também dificultar o entendimento da interface pelo usuário.

Para esse teste nós observamos 3 parâmetros:

1. Quantidade máxima de objetos simultâneos com animações complexas rodando a mais de 20FPS. Quanto maior o número, melhor.
   • Esse teste é importante, pois animações suaves e bonitas trazem muita satisfação ao usuário e melhorar sua experiência
2. Tempo médio de frame para componentes profundamente aninhados atualizando a tela
   • Esse teste foi feito para avaliar o overhead de atualizar filhos profundos
3. Tempo médio de frame para componentes irmãos atualizando a tela
   • Esse teste foi feito para avaliar o overhead de atualizar múltiplos componentes simultaneamente

Velocidade de regras de negócio

Considerando que somos voltados para o mercado financeiro, é importante temos boa performance para contas e manipulação de dados. É muito comum lidar com grandes volumes de informação ou ter que fazer contas complexas.

Seguindo a deixa do artigo comparativo de performance(1), nós fizemos testes avaliando 2 fatores:

1. Velocidade de cálculo de pi com algoritmo intensivo no uso de memória
2. Velocidade de cálculo de pi com algoritmo intensivo no uso de processamento

Teste subjetivo de UX

Nós precisávamos também testar a experiência do desenvolvedor num cenário mais real, ver como tudo se integraria e testar a flexibilidade da stack. Sendo assim optamos por criar uma navegação estilo baralho. Um card vai para esquerda ao mesmo tempo que um card embaixo dele cresce. O card contém imagem de fundo e um título.

Com esse teste podemos avaliar a dificuldade de criar algo altamente customizado, além de poder entregar para outras pessoas verem se encontram algum problema de travamento ou de uso.

Compilação

Para testar a performance de forma justa e real, todos os apps serão gerados para produção e instalados em dispositivos reais.

Aparelhos

iOS

1. iPhone 5S - ME301LL/A (iOS 12.5.4 - 16H50)
2. iPhone XR - MH6M3BR/A (iOS 14.6 - 18F72)

Android

1. One Plus 3T - A3010 (Oxygen OS: 9.0.6 / Android: 9)
2. Galaxy S9+ - SM-G9650 (One UI: 2.5 / Android: 10)

Resultados

Interação com API nativa do telefone

Nota: Na hora de testar houve um problema com o benchmark de geolocalização, mas só foi um problema de usar coisas não suportadas pelo safari 12, que é a versão que roda no iOS 12. Isso só reforça a importância de garantir que seu código funciona nos navegadores. Infelizmente o Safari não nos ajudou muito para achar esse problema, mas acredito que usar babel ou testar num safari versão 12 no computador deve nos ajudar a identificar esse tipo de problema rapidamente.

Aqui não se tem nada muito interessante a comentar além de que Ionic Svelte é capaz de acessar as APIs nativas que são importantes para possíveis apps do Grupo Sozo.

Velocidade de renderização

Dados Coletados

Gráficos e Análise

Comparação entre os frameworks testados avaliando a quantidade de quadrados máxima em que a animação não roda a menos de 20 FPS. Quanto maior o número, melhor.

No teste de animação múltipla podemos ver que Ionic Svelte é melhor que React Native, apesar de ser bem próximo. O Flutter, como esperado por ser compilado para binário, é bem mais performático que ambos.

Comparação entre os frameworks testados avaliando o tempo entre frames para atualizar a tela quando existem componentes dentro de outros componentes em um caso extremo. Quanto menor, melhor.

Já no teste de aninhamento profundo nós vemos que Ionic Svelte fica mais equiparado com o Flutter, trocando o ganhador a depender do OS (iOS ou Android). Acredito que a explicação para isso aparecerá nos testes de regras de negócio. O React Native nesse caso ficou bem mal em performance comparado aos outros. Uma coisa a se notar sobre esse teste é que ele teve de ser alterado para 180 de profundidade ao invés de 250 por conta do React Native, já que o app quebrava.

Comparação entre os frameworks testados avaliando o tempo entre frames para atualizar a tela quando existem muitos componentes em um componente. Quanto menor, melhor.

No teste de múltiplos irmãos vemos que segue a mesma tendência do teste anterior. Com isso podemos ver que o Ionic Svelte já tende a ser igual ou até melhor que o React Native em termos objetivos.

Estes testes são muito importantes para o resultado dessa comparação. Isso se deve ao fato de que apps do Grupo Sozo devem ser apelativos visualmente para o público.

Velocidade de regras de negócio

Dados Coletados

Gráficos e Análise

Comparação entre os frameworks testados avaliando o tempo para calcular pi usando um algoritmo que estressa mais a memória. Quanto menor, melhor.

No teste de gerenciamento de memória nós temos um comportamento interessante. O Flutter foi péssimo no teste comparado às outras plataformas, provavelmente por algum overhead para gerenciar a memória. Esse comportamento explica como o Ionic Svelte e Flutter ficaram equiparados nos testes de aninhamento e de irmãos. Os dispositivos com menos memória (e talvez até mais lenta) e com OSs menos eficientes (iOS é mais eficiente com a memória) trouxeram problemas maiores para o Flutter que para o Ionic Svelte. Além disso é possível ver que o React Native não tem problemas em gerenciar memória e que o Ionic Svelte perde para ele nesse quesito.

Comparação entre os frameworks testados avaliando o tempo para calcular pi usando um algoritmo que estressa mais o processador. Quanto menor, melhor.

Já no teste de processamento vemos que o React Native perde para Flutter e Ionic Svelte. Aparentemente existe mais overhead para o React Native e possivelmente foi isso que influenciou os resultados ruins nos testes de aninhamento e irmãos. Ionic Svelte e Flutter ficaram num mesmo nível nesse teste.

Considerando que regras de negócio não serão o ponto mais importante do app e sim o visual, não existe muito problema em haver ineficiências nas stacks de desenvolvimento aqui. Sendo assim esse quesito terá menos peso nas decisões.

Teste UX

Dados Coletados

Gráficos e Análise

Comparação entre os frameworks testados avaliando a experiência média dos usuários em cada um envolvendo a suavidade das animações e a qualidade dos gestos. Quanto maior, melhor.

Aqui vemos que Flutter traz a melhor experiência, provavelmente por ser o mais performático entre os 3. Por outro lado vemos que a experiência do Ionic Svelte e React Native é bem similar.

Este fator é muito importante para a escolha do framework, já que a experiência do usuário é o mais importante para manter o usuário dentro do app.

Experiência do Desenvolvedor

Não é exatamente um teste, mas é um fator importante para a escolha, tendo em vista que afeta a velocidade de desenvolvimento. Do meu ponto de vista o React Native e o Ionic Svelte oferecem experiências excelentes para quem já sabe usar frameworks que usam componentes, como React, Vue e Angular. Flutter por outro lado é bem diferente e por ser bem novo é mais complicado achar um padrão bom de organização do projeto e de escrever o código, isso ainda está se consolidando.

Comparando o Ionic Svelte e o React Native eu diria que o Ionic Svelte seria melhor que o React Native especialmente por conta do Svelte, que é um framework extremamente organizado e com pouquíssimo boilerplate. O Ionic do Ionic Svelte também ajuda ao fazer o app ser executado numa webview, ou seja, todo o conhecimento de web é transferível para o Ionic Svelte. React Native é uma experiência bem padrão, já que React é o padrão de mercado na web.

Conclusão

Dentre as 3 tecnologias o Ionic Svelte seria a melhor tecnologia para criar apps de forma rápida sem prejudicar a experiência. Ionic já caminhou muito para trazer apps rápidos e comparáveis ao React Native. O Svelte também trouxe muito valor para o desenvolvimento por ser extremamente organizado e simples de escrever. Além disso podemos ver que o Flutter é altamente performático e poderá ser um possível passo intermediário antes de desenvolver um app nativo para cada OS.

Agradecimentos

Obrigado ao José Luiz na equipe de desenvolvimento por me ajudar a escolher o que testar e ao Fernando Melo por fazer o app de React Native.

TL;DR

Testamos a performance de Ionic Svelte, React Native e Flutter, comparamos os resultados e vimos que:

• Ionic Svelte se equipara e chega a ser até melhor que React Native
• Flutter é altamente performático, apesar de ser mais difícil de desenvolver
• Ionic Svelte é melhor para desenvolver no caso do Grupo Sozo
• Flutter é um possível passo intermediário antes de fazer apps nativos

Referências

1. https://inveritasoft.com/blog/flutter-vs-native-vs-react-native-examining-performance

Veja também

1. Framework Híbrido em Kotlin: https://kotlinlang.org/lp/mobile/
2. Framework Híbrido em Swift: https://www.scade.io/
3. React Native: https://reactnative.dev/
4. Flutter: https://flutter.dev/
5. Ionic: https://ionicframework.com/
6. Svelte: https://svelte.dev/
7. Svelte Native: https://svelte-native.technology/