O Mesmo Mapa, Três Maneiras: SVG, Rust e Flutter

EVnSteven alcançou um lugar confortável. A plataforma está estável e não precisa de muita manutenção, que é exatamente o que queríamos quando começamos: um sistema pequeno que funciona silenciosamente. Isso deixa um pouco de espaço para experimentar, e deu tempo aos nossos fundadores para iniciar alguns outros projetos, que você encontrará no final.

Então fizemos um experimento. Pegamos o mapa da nossa página inicial e o reconstruímos duas vezes: uma em Rust compilado para WebAssembly, e outra em Flutter. Este artigo coloca os três em uma página e os compara.

1. O original: SVG, CSS e um pouco de JavaScript

Em termos simples: este é o mapa da nossa página inicial. Ele é construído da mesma forma que o resto de uma página web é construído: um desenho feito de formas que seu navegador já sabe como exibir e animar. É o mais simples dos três, e é o que a maioria dos visitantes vê.

É um desenho SVG único. O navegador executa a maioria das animações via CSS, e um pequeno script cuida do resto.

A seu favor: não há etapa de build, então um template Hugo é tudo o que precisa. É vetor, então permanece nítido em qualquer tamanho. Todos os 44 pontos podem ser acessados pelo teclado, cada um com um rótulo para leitores de tela. E suas poucas palavras são traduzidas para todos os nossos idiomas.

O custo é o peso na página. O markup do mapa tem cerca de 107 KB (cerca de 30 KB comprimido), e uma vez rodando possui cerca de 670 elementos e cerca de 200 animações CSS. A lógica também é difícil de testar: o tempo vive dentro dos keyframes CSS e um script na página, então o único teste é olhar para ele.

2. Rust e WebAssembly

Em termos simples: Rust é uma linguagem de programação conhecida por ser rápida e por detectar muitos erros antes mesmo do programa ser executado. Aqui escrevemos o “cérebro” do mapa em Rust, empacotamos em uma forma compacta que os navegadores podem executar (chamada WebAssembly) e deixamos que ele pinte o mapa inteiro sozinho, como um pintor redesenhando uma tela muitas vezes por segundo. Para você, parece o mesmo.

O mapa inteiro é desenhado em uma única tela por Rust que foi compilado para WebAssembly. O código Rust controla todo o comportamento do mapa e redesenha tudo a cada quadro.

A parte que gostamos é que a lógica é Rust puro, sem nada do navegador nela: a matemática para onde as coisas vão e quando mudam, e o parser que lê o contorno da terra. Ele tem 13 testes que rodam em uma fração de segundo, e se o tempo do ciclo estiver errado, um teste falha em vez de alguém perceber que parece estranho. Cerca de um terço das aproximadamente 1.070 linhas de Rust são esse núcleo testado (com seus testes); o restante desenha na tela e lida com eventos do mouse.

A página acaba ficando muito leve: um elemento canvas. Mas o download é maior. O módulo compilado tem cerca de 254 KB (aproximadamente 92 KB comprimidos) mais cerca de 28 KB de JavaScript “cola” que a ferramenta de build gera. E há custos que sentimos ao trabalhar nele:

• Uma cadeia de ferramentas. A construção requer Rust, o alvo WebAssembly e uma ferramenta de linha de comando cuja versão deve corresponder exatamente à da biblioteca. Nosso script de construção executa os testes primeiro e para se algum falhar.
• Sem acesso por teclado ou leitor de tela às cidades individuais. Um canvas é uma imagem. Os 44 pontos focáveis da versão SVG desapareceram.
• Apenas em inglês. Os rótulos estão escritos no programa.
• Desfoque. A borda da sombra suave usa um filtro de desfoque do canvas, que nem todos os navegadores suportam. Não testamos o Safari, onde a borda pode ficar dura.

3. Flutter

Em termos simples: Flutter é um kit de ferramentas do Google para construir aplicativos que rodam em telefones, computadores e na web a partir de um único conjunto de código. Ele não usa os próprios blocos de construção da página web. Ele desenha tudo por conta própria. Aqui o mapa é um pequeno aplicativo exibido dentro desta página, o mesmo kit de ferramentas que alimenta nossa calculadora de carregamento.

Ele pinta o mapa com um pintor personalizado, e é mostrado aqui em um quadro. O Flutter também pode construir aplicativos para telefone e desktop a partir do mesmo código, que é seu principal argumento: escreva o mapa uma vez, execute-o em vários lugares.

É a mesma lógica do map do Rust, portada para Dart, com 11 testes. Cerca de 1.100 linhas incluindo testes. O Flutter entrega cada cidade para leitores de tela como um botão rotulado, o que a versão canvas não tem (não verificamos quão bem funciona com um leitor de tela real). Também é o maior download: o app tem cerca de 1,8 MB (cerca de 535 KB comprimido). O motor de desenho do Flutter é um download adicional, mas o site já compartilha uma cópia com a calculadora, então um visitante que abriu a calculadora não o baixa novamente. Seu texto está configurado na fonte do site, Merriweather, que o navegador busca em tempo de execução.

O que encontramos

Mais uma nota sobre velocidade. Em nossa verificação, o mapa SVG e o mapa Rust rodaram ambos na taxa de atualização da tela (cerca de 120 quadros por segundo no display de teste), então a taxa de quadros não os diferenciou. Não medimos a taxa de quadros do Flutter, nem medimos uso de bateria ou CPU, então não podemos dizer qual é mais leve em um telefone.

Coisas que nos surpreenderam

Alguns detalhes são fáceis de errar. Nossos primeiros clones desenhavam a chave e os relógios em uma fração fixa do mapa, então eles encolhiam em telas pequenas e pareciam minúsculos em comparação com o original. O original os dimensiona na unidade de fonte da própria página (rem, que muda com a largura da tela). Os clones agora leem esse tamanho da página. Os relógios também diferem: os ponteiros do original se movem em passos de 15 minutos, enquanto nas versões Rust e Flutter eles giram continuamente.

Fusos horários não foram incorporados. Nem o Rust compilado para WebAssembly nem o Dart possuem um banco de dados de fusos horários que conheça “Asia/Dubai”. Ambos consultam o navegador, por meio do serviço embutido Intl, que também trata corretamente o horário de verão.

Os três compartilham suas entradas. Os mapas Rust e Flutter leem a lista de cidades e o contorno da terra da página em que estão, os mesmos dados usados pelo mapa SVG. Mude uma cidade, e os três mudam. Isso também significa que os mapas só podem rodar em uma página que os forneça.

Flutter web lembra. O Flutter web instala seu próprio cache, então depois de reconstruir continuávamos vendo a versão antiga até que o limpamos.

Nossa conclusão

O mapa SVG permanece na página inicial. Para um desenho desse tamanho, ele é o mais leve, acessível, traduzido e não precisa de nada para ser construído. Rust é o concorrente mais interessante: se alguma vez precisarmos que a lógica do mapa seja comprovadamente correta, ou precisarmos fazer computação pesada no navegador, um núcleo Rust testado é uma boa forma de fazer isso. Flutter faz sentido se o mapa precisar viver dentro de um app Flutter.

Um experimento não precisa mudar o produto para valer a pena ser realizado. Terminamos com uma imagem mais clara do custo de cada abordagem, uma descrição testada de como o mapa se comporta, e uma página onde você pode ver os três por si mesmo.

O que nossos fundadores estão construindo a seguir

Uma plataforma estável deixa tempo para outras ideias. Além do EVnSteven, nossos fundadores estão trabalhando nestes projetos:

Serviço de transporte por aplicativo, lançamento em breve Kimem ↗ (opens in a new tab) Um serviço de transporte por aplicativo para Bahir Dar, Etiópia, do fundador Mekonnen Alemu. Os passageiros veem uma estimativa da tarifa antes de reservar, acompanham o motorista mais próximo se aproximando no mapa e pagam a tarifa medida em dinheiro no final da viagem.

Sem fins lucrativos, código aberto StrayCats ↗ (opens in a new tab) Um projeto de David para ajudar pessoas que cuidam de gatos de rua, gatos abandonados ou qualquer gato, mesmo que esse gato seja um cachorro. Ainda está na fase de ideia, sem aplicativo ainda, e David adoraria suas ideias e feedback. Dedicado a Saibo, 2010–2026.

Controle de dinheiro em espécie, gratuito, lançamento em breve Effectivo ↗ (opens in a new tab) Contabilidade imperfeita com um diferencial, para quem usa dinheiro em espécie. Registre uma compra em poucos toques, conte o que está na sua carteira e veja o que valeu a pena. O diferencial é que todos que continuam usando dinheiro em espécie ajudam a mantê-lo disponível para todos os outros. Gratuito e sem anúncios, chegando para Android e iPhone, com uma versão beta e uma demonstração web já em funcionamento.