El Mismo Mapa, Tres Formas: SVG, Rust y Flutter

EVnSteven ha alcanzado un lugar cómodo. La plataforma es estable y no necesita mucho mantenimiento, que es exactamente lo que queríamos cuando comenzamos: un sistema pequeño que funcione silenciosamente. Eso deja un poco de espacio para experimentar, y ha dejado a nuestros fundadores tiempo para iniciar algunos otros proyectos, que encontrarás al final.

Así que hicimos un experimento. Tomamos el mapa en nuestra página principal y lo reconstruimos dos veces: una vez en Rust compilado a WebAssembly, y otra vez en Flutter. Este artículo pone los tres en una sola página y los compara.

1. El original: SVG, CSS y un poco de JavaScript

En términos sencillos: este es el mapa en nuestra página principal. Está construido de la misma manera que el resto de una página web: un dibujo hecho de formas que tu navegador ya sabe cómo mostrar y animar. Es el más simple de los tres, y es el que la mayoría de los visitantes ven.

Es un dibujo SVG. El navegador ejecuta la mayoría de las animaciones desde CSS, y un pequeño script maneja el resto.

A su favor: no hay paso de compilación, así que solo necesita una plantilla Hugo. Es vectorial, por lo que se mantiene nítido a cualquier tamaño. Los 44 puntos pueden alcanzarse con el teclado, cada uno con una etiqueta para lectores de pantalla. Y sus pocas palabras están traducidas a todos nuestros idiomas.

El costo es el peso en la página. El marcado del mapa es de aproximadamente 107 KB (unos 30 KB comprimidos), y una vez en ejecución tiene alrededor de 670 elementos y unas 200 animaciones CSS. La lógica también es difícil de probar: el tiempo vive dentro de los keyframes de CSS y un script en la página, por lo que la única prueba es mirarlo.

2. Rust y WebAssembly

En términos simples: Rust es un lenguaje de programación conocido por ser rápido y por detectar muchos errores antes de que un programa se ejecute. Aquí escribimos el “cerebro” del mapa en Rust, lo empaquetamos en una forma compacta que los navegadores pueden ejecutar (llamada WebAssembly), y dejamos que pinte todo el mapa por sí mismo, como un pintor que redibuja un lienzo muchas veces por segundo. Para ti, se ve igual.

Todo el mapa se dibuja en un solo canvas por Rust que ha sido compilado a WebAssembly. El código Rust controla todo el comportamiento del mapa y redibuja todo en cada cuadro.

La parte que nos gustó es que la lógica es Rust puro sin nada del navegador: las matemáticas para dónde van las cosas y cuándo cambian, y el analizador que lee el contorno de la tierra. Tiene 13 pruebas que se ejecutan en una fracción de segundo, y si el tiempo del ciclo es incorrecto, una prueba falla en lugar de que alguien note que se ve extraño. Aproximadamente un tercio de las cerca de 1,070 líneas de Rust son ese núcleo probado (con sus pruebas); el resto dibuja en el canvas y maneja eventos del ratón.

La página termina siendo muy ligera: un solo elemento canvas. Pero la descarga es más grande. El módulo compilado tiene unos 254 KB (unos 92 KB comprimidos) más unos 28 KB de JavaScript de pegamento que genera la herramienta de construcción. Y hay costos que sentimos al trabajar en ello:

• Una cadena de herramientas. La compilación requiere Rust, el objetivo WebAssembly y una herramienta de línea de comandos cuya versión debe coincidir exactamente con la de la biblioteca. Nuestro script de compilación ejecuta primero las pruebas y se detiene si alguna falla.
• Sin acceso por teclado o lector de pantalla a ciudades individuales. Un canvas es una imagen. Los 44 puntos enfocables de la versión SVG han desaparecido.
• Solo en inglés. Las etiquetas están escritas en el programa.
• Desenfoque. El borde de sombra suave usa un filtro de desenfoque de canvas, que no todos los navegadores soportan. No hemos probado Safari, donde el borde puede ser duro.

3. Flutter

En términos sencillos: Flutter es un conjunto de herramientas de Google para construir aplicaciones que funcionan en teléfonos, computadoras y la web a partir de un solo conjunto de código. No usa los propios bloques de construcción de la página web. Dibuja todo por sí mismo. Aquí el mapa es una pequeña aplicación mostrada dentro de esta página, el mismo conjunto de herramientas que impulsa nuestra calculadora de carga.

Pinta el mapa con un pintor personalizado, y se muestra aquí en un marco. Flutter también puede construir aplicaciones para teléfono y escritorio desde el mismo código, que es su principal argumento: escribir el mapa una vez, ejecutarlo en varios lugares.

Es la misma lógica que el mapa en Rust, adaptada a Dart, con 11 pruebas. Unas 1,100 líneas incluyendo las pruebas. Flutter presenta cada ciudad a los lectores de pantalla como un botón etiquetado, lo que la versión en canvas no tiene (no hemos comprobado qué tan bien funciona con un lector de pantalla real). También es la descarga más grande: la aplicación pesa alrededor de 1.8 MB (aproximadamente 535 KB comprimida). El motor de dibujo de Flutter es una descarga adicional, pero el sitio ya comparte una copia con la calculadora, por lo que un visitante que haya abierto la calculadora no la descarga de nuevo. Su texto está configurado en la fuente del sitio, Merriweather, que el navegador descarga en tiempo de ejecución.

Lo que encontramos

Una nota más sobre la velocidad. En nuestra prueba, tanto el mapa SVG como el mapa Rust funcionaron a la tasa de refresco de la pantalla (alrededor de 120 cuadros por segundo en la pantalla de prueba), por lo que la tasa de cuadros no los diferenciaba. No medimos la tasa de cuadros de Flutter, ni el uso de batería o CPU, por lo que no podemos decir cuál es más liviano en un teléfono.

Cosas que nos sorprendieron

Algunos detalles son fáciles de equivocarse. Nuestros primeros clones dibujaban la llave y los relojes en una proporción fija del mapa, por lo que se encogían en pantallas pequeñas y se veían diminutos junto al original. El original los dimensiona en la unidad de fuente propia de la página (rem, que cambia con el ancho de la pantalla). Los clones ahora leen ese tamaño desde la página. Los relojes también difieren: las manecillas del original se mueven en pasos de 15 minutos, mientras que en las versiones de Rust y Flutter giran continuamente.

Las zonas horarias no estaban integradas. Ni Rust compilado a WebAssembly ni Dart llevan una base de datos de zonas horarias que conozca “Asia/Dubai”. Ambos preguntan al navegador en su lugar, a través de su servicio incorporado Intl, que también maneja correctamente el horario de verano.

Los tres comparten sus entradas. Los mapas de Rust y Flutter leen la lista de ciudades y el contorno terrestre de la página en la que están, los mismos datos que usa el mapa SVG. Cambia una ciudad, y los tres cambian. También significa que los mapas solo pueden ejecutarse en una página que los proporcione.

Flutter web recuerda. Flutter web instala su propia caché, así que después de reconstruirla seguimos viendo la versión antigua hasta que la limpiamos.

Nuestra conclusión

El mapa SVG permanece en la página principal. Para un dibujo de este tamaño es el más ligero, es accesible, está traducido y no necesita nada para construirse. Rust es el segundo lugar más interesante: si alguna vez necesitamos que la lógica del mapa sea demostrablemente correcta, o necesitamos hacer cálculos pesados en el navegador, un núcleo Rust probado es una buena manera de hacerlo. Flutter tiene sentido si el mapa alguna vez necesita vivir dentro de una aplicación Flutter.

Un experimento no necesita cambiar el producto para valer la pena ejecutarlo. Terminamos con una imagen más clara de lo que cuesta cada enfoque, una descripción probada de cómo se comporta el mapa y una página donde puedes ver los tres por ti mismo.

Lo que nuestros fundadores están construyendo a continuación

Una plataforma estable deja tiempo para otras ideas. Además de EVnSteven, nuestros fundadores están trabajando en estos proyectos:

Servicio de transporte, lanzamiento muy pronto Kimem ↗ (opens in a new tab) Un servicio de transporte para Bahir Dar, Etiopía, del fundador Mekonnen Alemu. Los pasajeros ven una estimación de tarifa antes de reservar, observan al conductor más cercano acercarse en un mapa y pagan la tarifa medida en efectivo al final del viaje.

Sin fines de lucro, código abierto StrayCats ↗ (opens in a new tab) Un proyecto de David para ayudar a personas que cuidan gatos callejeros, gatos perdidos o cualquier gato, incluso si ese gato resulta ser un perro. Todavía está en etapa de idea, sin aplicación aún, y a David le encantarían tus ideas y comentarios. Dedicado a Saibo, 2010–2026.

Seguimiento de efectivo, gratis, lanzamiento pronto Effectivo ↗ (opens in a new tab) Contabilidad imperfecta con un giro, para quienes usan efectivo. Registra una compra en unos pocos toques, cuenta lo que tienes en tu billetera y revisa lo que valió la pena. El giro es que todos los que siguen usando efectivo ayudan a mantenerlo disponible para los demás. Gratis y sin anuncios, próximamente en Android y iPhone, con una beta y una demo web disponibles ahora.