Projects, Research, Design & Development in pursuit of Innovation, by Gustavo Adrián Salvini.
By Gustavo Salvini Posted in Development, Español, My Projects on July 22, 2024
Copyright ©️ 2024 Gustavo Adrián Salvini
El desarrollo de aplicaciones web modernas con web components puede ser una tarea realmente interesante, especialmente cuando un proyecto incluye la implementación de experiencias de usuario dinámicas y ricas, pero intentando no sumar complejidad innecesarias a la experiencia del desarrollo (“dx”) ni agregar demasiado peso innecesario al build resultante.
Para este caso utilicé React 18, Vite como tooling, React Suspense API, Valtio como store, Chakra UI para la interfaz de usuario, FormatJS para manejar múltiples idiomas y formatos según localización, y la excelente Convert-Units, una biblioteca Javascript que consta de una enorme cantidad de helpers para la conversión de unidades de medida (entre métricas e imperiales, entre otras convenciones), tanto para magnitudes de longitud, área, volumen, masa, tiempo, velocidad, torque, presión, iluminación, voltaje, potencia, energía, fuerza, y muchas más).
El objetivo fue generar una calculadora de kits de nivelación para la instalación de porcelanatos.
En una segunda parte de esta publicación mostraré la app. Prefiero esperar al lanzamiento oficial por parte de mi cliente, para mostrarla de forma completa.
La experiencia de desarrollo me resultó altamente satisfactoria y los conocimientos adquiridos me permitieron ensamblar un kit compacto y versátil de tecnologías, librerías y herramientas. Sin dudas volvería a elegir esta combinación para nuevos proyectos.
En este caso trabajé solo y logré completarlo en dos semanas1.
import { Suspense, useContext, useEffect } from "react";
import { store as calcStore } from "./stores/calcstore";
import { useSnapshot } from "valtio";
import { LocaleContext } from "./i18n/LocaleContext";
import "./fonts/Inter-Regular.ttf";
import "./fonts/Inter-SemiBold.ttf";
import Calculator from "./components/Calculator";
import { useDocL10n } from "./i18n/useDocL10n";
import { Flex, Spinner } from "@chakra-ui/react";
const App = () => {
const sCalcData = useSnapshot(calcStore.data);
// eslint-disable-next-line no-unused-vars
const { locale, setLocale } = useContext(LocaleContext);
useDocL10n();
useEffect(() => {
setLocale(sCalcData.selectedLocaleId);
});
return (
<Suspense
fallback={
<Flex justifyContent="center" alignItems="center" h="100vh" w="full">
<Spinner
color="brand.400"
size="xl"
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
/>
</Flex>
}
>
<Calculator />
</Suspense>
);
};
export default App;
Code language: JavaScript (javascript)
La calculadora de niveladores para la instalación de porcelanatos es una aplicación web diseñada para ayudar a los profesionales y aficionados en la instalación de baldosas de porcelanato. La aplicación permite calcular la cantidad de clips, cuñas y pinzas para asegurar una instalación precisa y nivelada. Entre sus características más destacadas se incluyen:
La aplicación soporta diferentes idiomas y formatos locales, adaptándose a los usuarios de diversas regiones.
Esto incluye la conversión de unidades de medida entre el sistema métrico (metros, centímetros, milímetros) y el imperial (pies y pulgadas), así como el manejo de diferentes separadores para miles y para decimales.
Utilizando la React Suspense API, se cargan los recursos de manera eficiente, mejorando el rendimiento y la experiencia del usuario.
React es una biblioteca de JavaScript ampliamente utilizada en la construcción de interfaces de usuario. Su capacidad para manejar aplicaciones de una sola página (SPA) con componentes reutilizables la convierte en una opción ideal para este proyecto. React facilita la creación de interfaces de usuario interactivas y dinámicas mediante el uso de un DOM virtual, que permite actualizaciones eficientes y un rendimiento optimizado.
La comunidad de React es extensa y activa, y ofrece una amplia gama de bibliotecas y herramientas complementarias.
La arquitectura basada en componentes de React permite la reutilización de código, lo que acelera el desarrollo y facilita el mantenimiento.
Vite es una herramienta de construcción (“build tool”) de nueva generación que ofrece una experiencia de desarrollo rápida y eficiente. A diferencia de las herramientas tradicionales, Vite aprovecha los módulos de ES nativos del navegador para proporcionar una compilación instantánea y una recarga en caliente ultrarrápida (ultra-fast hot reload).
Valtio es una biblioteca de gestión de estado para React. A diferencia de otras soluciones como Redux, Valtio utiliza proxies de JavaScript para rastrear y actualizar el estado de manera reactiva y eficiente.
Comparación con otros manejadores de estado (Redux, MobX)
FormatJS es una colección de bibliotecas de JavaScript para la internacionalización, que facilita la creación de aplicaciones que soporten múltiples idiomas y formatos locales. Con FormatJS, es posible manejar la localización de textos, números, fechas y unidades de medida de manera sencilla.
Manejo de diferentes idiomas, formatos numéricos y unidades de medida
ChakraUI es una biblioteca de componentes de interfaz de usuario para React que ofrece un conjunto de componentes accesibles y estilizados. Su enfoque en la accesibilidad y la personalización lo convierte en una opción excelente para el diseño de interfaces de usuario modernas y responsivas.
Convert-units nos ofrece una API simple de funciones que se pueden encadenar, de fácil uso y rápida lectura. Puede ser configurada con las unidades de medida built-in o custom.
Una forma simple de entender cómo funciona es a través de algunos ejemplos:
// `allMeasures` incluye todas las unidades de medida built-in de la biblioteca
import configureMeasurements from 'convert-units';
import allMeasures from 'convert-units/definitions/all';
const convert = configureMeasurements(allMeasures);
Code language: JavaScript (javascript)
Conversión entre unidades de medida:
convert(1).from('l').to('ml');
// 1000
Code language: JavaScript (javascript)
La conversión entre sistemas de unidades de medida (métrico e imperial) es gestionada de manera automática:
convert(1).from('lb').to('kg');
// 0.4536...
Code language: JavaScript (javascript)
convert().measures();
// [ 'length', 'mass', 'volume', ... ]
const differentConvert = configureMeasurements({
volume,
mass,
length,
area,
});
differentConvert().measures();
// [ 'length', 'mass', 'volume', 'area' ]
Code language: JavaScript (javascript)
Listar todas las unidades de medida a las que una determinada unidad puede ser convertida:
convert().from('l').possibilities();
// [ 'ml', 'l', 'tsp', 'Tbs', 'fl-oz', 'cup', 'pnt', 'qt', 'gal' ]
convert().from('kg').possibilities();
// [ 'mcg', 'mg', 'g', 'kg', 'oz', 'lb' ]
Code language: JavaScript (javascript)
Durante el desarrollo de esta aplicación, se presentaron varios desafíos que requirieron soluciones creativas y eficientes.
Uno de los principales desafíos fue asegurar que la aplicación se mantuviera rápida y responsiva, incluso con la carga diferida de assets y la internacionalización en tiempo real.
La solución fue utilizar Vite para la construcción rápida y Valtio para el manejo eficiente del estado.
Otro desafío fue manejar correctamente la internacionalización y localización para diferentes idiomas y formatos.
FormatJS fue fundamental para simplificar este proceso, pero aún así hubo que asegurarse de que todas las cadenas y formatos fueran consistentes y precisos.
El manejo del estado global de manera eficiente y reactiva también presentó sus desafíos. Valtio simplificó este proceso al proporcionar una API intuitiva y una actualización automática del estado, evitando la sobrecarga de otros manejadores de estado más complejos.
Desarrollar esta web app fue una experiencia enriquecedora que demostró la efectividad de tecnologías y recursos como React, Vite, Valtio, Chakra UI y FormatJS.
La posibilidad de implementar una aplicación multi-idioma y multi-locale en tan solo dos semanas, por un solo desarrollador ocupado en otros temas simultáneos (como la paternidad), considero que resalta la potencia y eficiencia de estas tecnologías.
La elección de ChakraUI para la interfaz de usuario permitió desarrollar una aplicación estilizada y accesible rápidamente, mientras que la Suspense API de React mejoró significativamente el rendimiento mediante la carga diferida de componentes.
En resumen, este proyecto no solo cumplió con los objetivos funcionales y de rendimiento, sino que también proporcionó valiosas lecciones y mejores prácticas en el desarrollo de aplicaciones frontend modernas.
chakraui convert-units ecmascript FormatjS javascript react spanish suspense api valtio vite