menu Menu

Un kit compacto y versátil para desarrollo de web apps modernas

React, Suspense API, Vite, Valtio, Chakra UI, FormatJS y Convert-Units

React, Suspense API, Vite, Valtio, Chakra UI, FormatJS y Convert-Units

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.

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)

Visión General del Proyecto

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:

Multi-idioma y multi-locale

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.

Carga diferida de assets

Utilizando la React Suspense API, se cargan los recursos de manera eficiente, mejorando el rendimiento y la experiencia del usuario.

Tecnologías Utilizadas

React

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.

Componentes reutilizables

La arquitectura basada en componentes de React permite la reutilización de código, lo que acelera el desarrollo y facilita el mantenimiento.

Vite

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

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)

  • Simplicidad: Valtio es más simple de usar en comparación con Redux, que requiere una configuración más compleja.
  • Reactividad: Similar a MobX, Valtio proporciona una reactividad automática, pero con una API más sencilla.
  • Rendimiento: Gracias al uso de proxies, Valtio ofrece un rendimiento óptimo al evitar actualizaciones innecesarias del estado.

FormatJS

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

  • Internacionalización de textos: FormatJS permite definir y gestionar cadenas de texto en diferentes idiomas.
  • Formateo de números y fechas: La biblioteca proporciona herramientas para formatear números y fechas según las convenciones locales.
  • Conversión de unidades: La aplicación puede manejar la conversión de unidades entre sistemas métricos e imperiales de manera automática.

ChakraUI

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.

  • Componentes accesibles: ChakraUI garantiza que todos sus componentes cumplan con las pautas de accesibilidad, proporcionando una mejor experiencia de usuario para todos.
  • Personalización sencilla: Los temas y estilos de ChakraUI son fácilmente personalizables, lo que permite adaptar la apariencia de la aplicación a las necesidades específicas del proyecto.
  • Desarrollo rápido: La biblioteca ofrece una amplia gama de componentes predefinidos, acelerando el desarrollo y permitiendo centrarse en la lógica de negocio.

Convert-Units

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');
// 1000Code 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)

Desafíos y Soluciones

Durante el desarrollo de esta aplicación, se presentaron varios desafíos que requirieron soluciones creativas y eficientes.

Rendimiento

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.

Internacionalización Compleja

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.

Gestión del Estado

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.

Conclusión

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.


  1. Considero que 2 semanas fue un tiempo relativamente corto, teniendo en cuenta que en varias oportunidades tuve que esperar material, feedback y cambios solicitados por el cliente y que como desarrollador independiente para este proyecto, y padre primerizo de un bebé de 9 meses, mi atención está sensiblemente fragmentada. ↩︎

chakraui convert-units ecmascript FormatjS javascript react spanish suspense api valtio vite


Previous Next

Leave a Reply

Your email address will not be published. Required fields are marked *

Cancel Post Comment

keyboard_arrow_up