Rive

A Rive reescreveu sua poderosa ferramenta de animação inteiramente em Flutter para permitir que desenvolvedores criem belas ilustrações multiplataforma.

Objetivo

A Rive permite que desenvolvedores criem e publiquem belas animações interativas em qualquer plataforma. Seus runtimes de código aberto tornam possível animar uma vez e, então, publicar em qualquer plataforma que desejarem.

No entanto, nem sempre foi assim. No início, a equipe passava grande parte do tempo gerenciando o ciclo de desenvolvimento: mantendo diferentes pacotes web do lado do cliente para boa parte das funcionalidades de interface, um processo de build personalizado, dev ops personalizado, testes personalizados, linting, language servers e muito mais — tudo a partir de pacotes separados que precisavam de manutenção e atualização constantes.

Em vez disso, a equipe queria um framework que englobasse todas essas coisas, garantindo compatibilidade entre esses aspectos do fluxo de trabalho, para que pudessem se concentrar mais no desenvolvimento e menos na manutenção. E, para dar suporte à sua robusta interface de usuário com animações sem falhas em tempo real, a Rive precisava de uma ferramenta capaz de lidar com renderização gráfica pesada em vários navegadores e plataformas. Foi então que recorreram ao Flutter.

Por que Flutter?

A primeira versão da Rive foi escrita inteiramente com JavaScript ES5 e DOM, o que funcionava muito bem para web, mas não muito além disso. Então, em seguida, eles testaram React com ES6. Usaram webpack e uma versão inicial do CanvasKit, mas exigia um esforço significativo manter todas as diferentes plataformas.

Por volta da mesma época, a Rive estava trabalhando com a equipe do Flutter no evento Flutter Interact. Quanto mais aprendiam sobre o Flutter, mais ele parecia se encaixar na Rive. Ele oferecia uma plataforma coesa com excelente ferramental, uma linguagem de programação fortemente tipada e fortes ferramentas de análise de linguagem, incluindo um formatador padronizado, linting integrado, language servers para ambientes de edição populares e a capacidade de testar diretamente a partir dos ambientes de edição.

A solução deles

A equipe decidiu dar uma chance ao Flutter. Eles construíram um protótipo com o CanvasKit em Flutter e imediatamente perceberam uma melhoria. Além de oferecer uma verdadeira solução multiplataforma, também ficou muito mais fácil integrar novos engenheiros. Eles também gostaram bastante dos recursos de teste integrados, que tornaram muito mais fácil manter a qualidade e a estabilidade do aplicativo.

Resultados

A Rive lançou seu editor construído inteiramente em Flutter. Sua base de código agora é muito mais fácil de manter e permite que engenheiros se integrem e comecem a escrever código imediatamente.

Eles também descobriram que é muito fácil adicionar elementos personalizados no Flutter. Construir recursos é mais fácil e divertido, e os designers conseguem experimentar e criar protótipos com muito mais facilidade. Isso lhes permitiu desenvolver experiências muito mais ricas na Rive, incluindo animações, gráficos interativos e layouts fluidos e reativos.

A estabilidade geral do aplicativo também melhorou. Graças aos recursos de teste integrados, eles agora executam milhares de testes por build, o que lhes deu a confiança para adotar um ciclo de lançamento diário.

Com base em seu sucesso, a equipe agora está trabalhando no lançamento de um aplicativo desktop para macOS. Para esse lançamento, a equipe diz que nem precisa fazer muita personalização, já que a abstração já foi feita. Eles também descobriram que é muito fácil adicionar elementos personalizados no Flutter. Construir recursos é mais fácil e divertido, e os designers conseguem experimentar e criar protótipos com muito mais facilidade. Isso lhes permitiu desenvolver experiências muito mais ricas na Rive, incluindo animações, gráficos interativos e layouts fluidos e reativos.