Animalendar - Calculadora científica de edad de mascotas en Rust y WebAssembly

Los dueños de mascotas de todo el mundo se hacen la misma pregunta: “¿Qué edad tiene mi compañero en años humanos?” Aunque persisten respuestas tradicionales como “multiplica por 7”, la ciencia veterinaria moderna revela una realidad mucho más compleja. Animalendar convierte esa investigación en una aplicación web interactiva: da la edad de un perro o un gato en años humanos, su esperanza de vida y su etapa vital, en español y en inglés.

Diseñamos y desarrollamos esta calculadora científica de edad de mascotas desde cero utilizando Rust, Leptos y WebAssembly. Los cálculos se hacen en tiempo real en el navegador, y toda la aplicación se sirve desde un solo sitio en dos idiomas: www.animalendar.com.

El desafío: ciencia y experiencia de usuario

Las calculadoras tradicionales de edad de mascotas utilizan fórmulas excesivamente simplificadas que ignoran factores biológicos cruciales. La investigación veterinaria demuestra que la progresión de edad varía drásticamente según la especie, el tamaño de raza y las características individuales, pero presentar esta complejidad sin abrumar a los usuarios requiere un diseño cuidadoso.

Los dueños de mascotas necesitan:

• Cálculos científicamente precisos de edad basados en investigación veterinaria moderna, no en mitos obsoletos.
• Datos específicos por raza que tengan en cuenta los distintos tamaños y esperanzas de vida de las razas de perros y gatos.
• Resultados en tiempo real con interacciones suaves y responsivas que se sientan instantáneas.
• Comprensión visual mediante gráficos interactivos que muestren la progresión de edad a lo largo del tiempo.
• Información accesible en su idioma nativo (inglés/español) con optimización SEO adecuada.

El desafío técnico:

Construir un sistema que combine precisión científica con una buena experiencia de usuario implicaba resolver varios problemas a la vez: algoritmos que se ejecuten al instante, una interfaz que se actualice en tiempo real y dos versiones completas del sitio, una por idioma, que vayan siempre a la par y se indexen cada una en su idioma.

La solución: cálculos reactivos impulsados por Rust

Al aprovechar el rendimiento de Rust combinado con el framework reactivo de Leptos y la velocidad casi nativa de WebAssembly, creamos una plataforma donde los cálculos ocurren al instante con cada cambio de parámetro. El sistema unificado de enrutamiento Axum garantiza un comportamiento SEO predecible, y las traducciones y los datos de razas compilados en el binario mantienen las dos versiones de idioma a la par sin base de datos.

Arquitectura y stack tecnológico

La plataforma está construida sobre renderizado en el servidor con hidratación selectiva: cada página llega como HTML completo y solo la calculadora se vuelve interactiva en el navegador.

Componentes clave:

Componente	Tecnología	Propósito
Framework frontend	Leptos 0.8.2 (Rust)	UI completamente reactiva con seguridad de tipos e hidratación selectiva
Motor de cálculo	Rust + WebAssembly	Cálculos científicos ejecutados del lado del cliente
Servidor backend	Axum (Rust)	Sistema de enrutamiento unificado con renderizado del lado del servidor
Datos de razas	Tablas en Rust compiladas en el binario	Más de 300 razas de perros y más de 80 de gatos, cada una con la fuente de sus cifras
Estilos	Tailwind CSS + Font Awesome	Interfaz moderna y responsiva con soporte de modo oscuro
Sistema SEO	hreflang en cada página	Cada página enlaza su versión en español y en inglés en el mismo dominio

Por qué Rust + Leptos + WebAssembly

Rust fue la elección natural por su rendimiento excepcional, seguridad de memoria y garantías en tiempo de compilación. El framework Leptos proporciona una experiencia de desarrollo nivel React con una reactividad de grano fino que solo actualiza lo que cambia.

Beneficios clave:

• Cálculos instantáneos: los algoritmos se ejecutan en el navegador con latencia casi cero.
• Estado reactivo type-safe: el compilador detecta bugs antes de que lleguen a los usuarios.
• Un mismo código en los dos lados: los mismos componentes en Rust se renderizan en el servidor y se ejecutan en el navegador.
• Cero overhead runtime: sin pausas de recolección de basura durante los cálculos.

Renderizado en el servidor con hidratación selectiva

La aplicación renderiza cada página en el servidor e hidrata solo la calculadora con WebAssembly:

Impacto en el rendimiento:

• Tiempo de interacción más rápido: el contenido estático se renderiza inmediatamente desde SSR.
• Payload inicial más pequeño: solo el componente calculadora incluye WASM.
• Mejor SEO: los motores de búsqueda ven HTML completamente renderizado.
• Mejora progresiva: el sitio funciona sin JavaScript, la calculadora mejora cuando se carga.

Características principales

1. Algoritmos de cálculo de edad científicos

Cada cifra que usa la calculadora sale de una fuente publicada: un estándar de raza, una tabla veterinaria o un estudio de cohortes.

Cálculo de edad de perros:

• Los dos primeros años siguen la tabla del AKC, que cita a la AVMA. El grupo de tamaño sale del peso adulto ideal de la raza.
• Después de los dos años, los años humanos que faltan hasta 80 se reparten a lo largo de la esperanza de vida ajustada del perro. Un perro que llega a su esperanza de vida tiene 80 años humanos.
• La esperanza de vida es la mediana de vida de la raza en atención primaria del Reino Unido (McMillan et al., 2024) cuando el estudio tiene suficientes perros de esa raza, y si no, la página de la raza en el AKC. Se ajusta por sexo y castración (Teng et al., 2022) y por condición corporal (Montoya et al., 2023).

Grupo de tamaño (peso adulto ideal)	Al año	A los 2 años	Fuente
Pequeño, mediano y grande (hasta 45,4 kg)	15 años humanos	24 años humanos	Tabla del AKC, que cita a la AVMA
Gigante (más de 45,4 kg)	12 años humanos	22 años humanos	Tabla del AKC, que cita a la AVMA

Cálculo de edad de gatos:

• Los dos primeros años siguen las Feline Life Stage Guidelines de AAFP y AAHA de 2010: 15 años humanos al año y 24 a los dos, sea cual sea el tamaño.
• La esperanza de vida de la raza es la mediana de vida en atención primaria de Inglaterra (O’Neill et al., 2015) cuando la raza tiene suficientes gatos, y si no, la página de la raza en el GCCF.
• La castración y la condición corporal la ajustan, según Teng et al. (2024) y Montoya et al. (2023).

Implementación técnica:

• Motor de cálculo basado en Rust: compilado a WebAssembly para máximo rendimiento.
• Datos de razas compilados en el binario: más de 300 razas de perros y más de 80 de gatos. Cada fila indica de dónde salen sus pesos y su esperanza de vida, y un test lo comprueba.
• Recálculo en tiempo real: cada cambio de parámetro dispara actualizaciones instantáneas.
• Animaciones suaves: retroalimentación visual usando transiciones CSS y reactividad Leptos.

2. Interfaz de usuario completamente reactiva

Construida con la reactividad de grano fino de Leptos, la UI se actualiza instantáneamente sin manipulación manual del DOM:

Componentes interactivos:

• Selector de raza con búsqueda: autocompletado busca entre cientos de razas.
• Deslizador de edad con control de precisión: soporta granularidad a nivel de mes.
• Gráfico visual de progresión de edad: gráfico interactivo mostrando equivalente de vida.
• Indicadores de esperanza de vida: muestra porcentaje de vida vivida y restante.

Reactividad en acción:

// Ejemplo simplificado mostrando reactividad Leptos
let (edad, set_edad) = signal(3.0);
let (raza, set_raza) = signal(Raza::MestizaMediana);

// La edad humana se recalcula automáticamente cuando cambian las señales
let edad_humana = Memo::new(move |_| {
    calcular_edad_humana(edad.get(), raza.get())
});

Cada cambio de señal se propaga automáticamente a través del grafo de computación, disparando solo los componentes afectados para re-renderizar con precisión quirúrgica.

3. Un solo sitio en dos idiomas

La plataforma sirve los dos idiomas desde un único dominio:

• Español: www.animalendar.com/es/, con sus propias rutas en español.
• Inglés: www.animalendar.com/en/

SEO multilingüe:

• hreflang en cada página: cada página indica su versión en el otro idioma.
• Traducciones compiladas en el binario: los dos idiomas salen en la misma compilación.
• URLs optimizadas para SEO: rutas limpias y descriptivas en ambos idiomas.
• Elección de idioma en el servidor: la dirección de inicio lleva a cada visitante al idioma que leyó la última vez o, si no, al que prefiere su navegador.

Beneficios:

• Una marca, un dominio: quien habla español y quien habla inglés encuentran el mismo producto con el mismo nombre.
• Mejor experiencia de usuario: cada visitante llega a su idioma.
• Crecimiento flexible: otro idioma es otro prefijo de ruta y otro módulo de traducciones.

4. Características avanzadas de UI/UX

Soporte de modo oscuro:

• Detección de tema del lado del servidor: sin flash de contenido sin estilo.
• Persistencia basada en cookies: la preferencia sobrevive recargas de página.
• Transiciones suaves: cambio de tema animado.

Accesibilidad:

• Navegación por teclado: soporte completo de teclado para todas las interacciones.
• Optimizado para lectores de pantalla: HTML semántico y etiquetas ARIA.
• Diseñado para WCAG 2.2 AA: según declara la declaración de accesibilidad del sitio.

Optimizaciones de rendimiento:

• Lazy loading: imágenes y assets no críticos se cargan bajo demanda.
• Minificación de assets: CSS, JavaScript y HTML comprimidos.
• Listo para CDN: assets estáticos optimizados para entrega en edge.

5. Modo avanzado: cálculos personalizados en profundidad

Para quien quiere afinar el perfil de su mascota con más precisión, Animalendar ofrece un modo avanzado que desbloquea campos adicionales e indicadores de salud detallados.

Campos adicionales del modo avanzado:

• Fecha de nacimiento precisa: introduce la fecha exacta de nacimiento para cálculos al día.
• Control de peso: ajusta el peso específico con control deslizante para considerar variaciones respecto al peso medio de raza.
• Sexo: macho o hembra, que cambia la esperanza de vida.
• Estado de castración: tiene en cuenta el efecto de la castración en la esperanza de vida.

Indicadores adicionales en modo avanzado:

• Progresión de etapas de vida: visualiza en qué etapa se encuentra tu mascota (cachorro, adolescente, joven, maduro, senior) con rangos de edad para cada etapa.
• Descripción de la etapa actual: información sobre la fase de desarrollo en la que está la mascota.
• Esperanza de vida: años de vida esperados según la raza, el sexo, la castración y la condición corporal.
• Años para el arcoíris: años restantes estimados (esperanza de vida menos edad actual).
• Porcentaje de vida vivida y por vivir: representación visual del progreso de la vida.
• Índice de salud: una puntuación de 0 a 100 que tiene en cuenta la edad, el peso respecto al rango de la raza, el sexo y la castración, con mensajes de valoración.
• Rango seguro de temperaturas: muestra temperaturas ideales y peligrosas específicas para la especie y la raza, con gráfico visual del rango de confort.

Implementación técnica:

• Renderizado condicional: los campos avanzados solo aparecen al activar el modo con un interruptor.
• Recálculo reactivo: todos los indicadores adicionales se actualizan al instante cuando se ajusta cualquier parámetro.
• Retroalimentación visual: indicadores por colores (verde para salud excelente, amarillo o naranja para buena, rojo para problemas).
• Visualización de temperatura: indicador horizontal con las zonas seguras, ideales y de peligro.

Esta funcionalidad avanzada da a veterinarios, criadores y dueños comprometidos la información detallada que necesitan, mientras el interruptor opcional mantiene la interfaz limpia y accesible para un uso ocasional.

Resultados e impacto

Logros de rendimiento

Impacto empresarial

Logros técnicos

Conclusión

Animalendar combina rigor científico y tecnología web moderna. Con Rust, Leptos y WebAssembly construimos una plataforma que hace sus cálculos al instante en el navegador y sirve los dos idiomas desde un solo sitio.

La decisión de renderizar cada página en el servidor e hidratar solo la calculadora da al sitio cargas iniciales rápidas e interactividad instantánea donde más importa.

Conclusiones clave para proyectos similares

1. La hidratación selectiva limita WebAssembly al único componente que lo necesita.
2. Rust + WebAssembly ofrece velocidad de cálculo de clase escritorio en navegadores.
3. La reactividad de grano fino proporciona UX suave sin overhead de framework.
4. Los datos compilados en el binario evitan la base de datos cuando el contenido solo cambia con cada versión.
5. El full stack type-safe previene clases enteras de bugs en tiempo de compilación.

---