Un kit compatto e versatile per lo sviluppo di web app moderne.

Lo sviluppo di applicazioni web moderne con web components può essere un compito davvero interessante, specialmente quando un progetto include l’implementazione di esperienze utente dinamiche e ricche, ma cercando di non aggiungere complessità inutili all’esperienza di sviluppo (“dx”) né troppo peso superfluo al build risultante.

In questo caso ho utilizzato React 18, Vite come tooling, React Suspense API, Valtio come store, Chakra UI per l’interfaccia utente, FormatJS per gestire più lingue e formati in base alla localizzazione, e l’eccellente Convert-Units, una libreria Javascript che consiste in un’enorme quantità di helper per la conversione di unità di misura (tra metriche e imperiali, tra altre convenzioni), sia per grandezze di lunghezza, area, volume, massa, tempo, velocità, coppia, pressione, illuminazione, voltaggio, potenza, energia, forza, e molte altre.

L’obiettivo era generare una calcolatrice di kit di livellamento per l’installazione di piastrelle in porcellana.

In una seconda parte di questa pubblicazione mostrerò l’app. Preferisco aspettare il lancio ufficiale da parte del mio cliente, per mostrarla in modo completo.

L’esperienza di sviluppo è stata altamente soddisfacente e le conoscenze acquisite mi hanno permesso di assemblare un kit compatto e versatile di tecnologie, librerie e strumenti. Senza dubbio sceglierei di nuovo questa combinazione per nuovi progetti.

In questo caso ho lavorato da solo e sono riuscito a completarlo in due settimane¹.

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)

Panoramica del Progetto

La calcolatrice di livellatori per l’installazione di piastrelle in porcellana è un’applicazione web progettata per aiutare professionisti e appassionati nell’installazione di piastrelle in porcellana. L’applicazione permette di calcolare la quantità di clip, cunei e pinze necessarie per garantire un’installazione precisa e livellata. Tra le sue caratteristiche più importanti si includono:

Multi-lingua e multi-locale

L’applicazione supporta diverse lingue e formati locali, adattandosi agli utenti di varie regioni.

Questo include la conversione di unità di misura tra il sistema metrico (metri, centimetri, millimetri) e quello imperiale (piedi e pollici), così come la gestione di diversi separatori per migliaia e decimali.

Caricamento differito degli asset

Utilizzando la React Suspense API, le risorse vengono caricate in modo efficiente, migliorando le prestazioni e l’esperienza dell’utente.

Tecnologie Utilizzate

React

React è una libreria JavaScript ampiamente utilizzata nella costruzione di interfacce utente. La sua capacità di gestire applicazioni a pagina singola (SPA) con componenti riutilizzabili la rende una scelta ideale per questo progetto. React facilita la creazione di interfacce utente interattive e dinamiche mediante l’uso di un DOM virtuale, che permette aggiornamenti efficienti e prestazioni ottimizzate.

La comunità di React è vasta e attiva, e offre un’ampia gamma di librerie e strumenti complementari.

Componenti riutilizzabili

L’architettura basata su componenti di React permette il riutilizzo del codice, accelerando lo sviluppo e facilitando la manutenzione.

Vite

Vite è uno strumento di build di nuova generazione che offre un’esperienza di sviluppo rapida ed efficiente. A differenza degli strumenti tradizionali, Vite sfrutta i moduli ES nativi del browser per fornire una compilazione istantanea e un ricaricamento a caldo ultrarapido (ultra-fast hot reload).

Valtio

Valtio è una libreria di gestione dello stato per React. A differenza di altre soluzioni come Redux, Valtio utilizza proxy JavaScript per tracciare e aggiornare lo stato in modo reattivo ed efficiente.

Confronto con altri gestori di stato (Redux, MobX)

• Semplicità: Valtio è più semplice da usare rispetto a Redux, che richiede una configurazione più complessa.
• Reattività: Simile a MobX, Valtio fornisce una reattività automatica, ma con un’API più semplice.
• Prestazioni: Grazie all’uso dei proxy, Valtio offre prestazioni ottimali evitando aggiornamenti non necessari dello stato.

FormatJS

FormatJS è una collezione di librerie JavaScript per l’internazionalizzazione, che facilita la creazione di applicazioni che supportano più lingue e formati locali. Con FormatJS, è possibile gestire la localizzazione di testi, numeri, date e unità di misura in modo semplice.

Gestione di diverse lingue, formati numerici e unità di misura

• Internazionalizzazione dei testi: FormatJS permette di definire e gestire stringhe di testo in diverse lingue.
• Formattazione di numeri e date: La libreria fornisce strumenti per formattare numeri e date secondo le convenzioni locali.
• Conversione di unità: L’applicazione può gestire la conversione di unità tra sistemi metrici e imperiali in modo automatico.

ChakraUI

ChakraUI è una libreria di componenti di interfaccia utente per React che offre un set di componenti accessibili e stilizzati. Il suo focus sull’accessibilità e la personalizzazione lo rende un’ottima scelta per il design di interfacce utente moderne e responsive.

• Componenti accessibili: ChakraUI garantisce che tutti i suoi componenti rispettino le linee guida di accessibilità, fornendo una migliore esperienza utente per tutti.
• Personalizzazione semplice: I temi e gli stili di ChakraUI sono facilmente personalizzabili, permettendo di adattare l’aspetto dell’applicazione alle esigenze specifiche del progetto.
• Sviluppo rapido: La libreria offre un’ampia gamma di componenti predefiniti, accelerando lo sviluppo e permettendo di concentrarsi sulla logica di business.

Convert-Units

Convert-units ci offre una semplice API di funzioni che possono essere concatenate, di facile utilizzo e rapida lettura. Può essere configurata con unità di misura built-in o personalizzate.

Un modo semplice per capire come funziona è attraverso alcuni esempi:

// `allMeasures` include tutte le unità di misura predefinite della libreria
import configureMeasurements from 'convert-units';
import allMeasures from 'convert-units/definitions/all';

const convert = configureMeasurements(allMeasures);Code language: JavaScript (javascript)

Conversione tra unità di misura:

convert(1).from('l').to('ml');
// 1000Code language: JavaScript (javascript)

La conversione tra sistemi di unità di misura (metrico e imperiale) è gestita in modo automatico:

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)

Elencare tutte le unità di misura in cui una determinata unità può essere convertita:

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)

---

Ecco la traduzione in italiano:

Sfide e Soluzioni

Durante lo sviluppo di questa applicazione, si sono presentate diverse sfide che hanno richiesto soluzioni creative ed efficienti.

Prestazioni

Una delle principali sfide è stata assicurare che l’applicazione rimanesse veloce e reattiva, anche con il caricamento differito degli asset e l’internazionalizzazione in tempo reale.
La soluzione è stata utilizzare Vite per la build rapida e Valtio per la gestione efficiente dello stato.

Internazionalizzazione Complessa

Un’altra sfida è stata gestire correttamente l’internazionalizzazione e la localizzazione per diverse lingue e formati.
FormatJS è stato fondamentale per semplificare questo processo, ma è stato comunque necessario assicurarsi che tutte le stringhe e i formati fossero coerenti e precisi.

Gestione dello Stato

La gestione dello stato globale in modo efficiente e reattivo ha presentato anche le sue sfide. Valtio ha semplificato questo processo fornendo un’API intuitiva e un aggiornamento automatico dello stato, evitando il sovraccarico di altri gestori di stato più complessi.

Conclusione

Sviluppare questa web app è stata un’esperienza arricchente che ha dimostrato l’efficacia di tecnologie e risorse come React, Vite, Valtio, Chakra UI e FormatJS.
La possibilità di implementare un’applicazione multi-lingua e multi-locale in sole due settimane, da un solo sviluppatore impegnato contemporaneamente in altri temi (come la paternità), ritengo che evidenzi la potenza e l’efficienza di queste tecnologie.
La scelta di ChakraUI per l’interfaccia utente ha permesso di sviluppare rapidamente un’applicazione stilizzata e accessibile, mentre la Suspense API di React ha migliorato significativamente le prestazioni mediante il caricamento differito dei componenti.
In sintesi, questo progetto non solo ha soddisfatto gli obiettivi funzionali e di prestazione, ma ha anche fornito preziose lezioni e migliori pratiche nello sviluppo di applicazioni frontend moderne.

---

1. Ritengo che 2 settimane sia stato un tempo relativamente breve, considerando che in diverse occasioni ho dovuto attendere materiale, feedback e modifiche richieste dal cliente e che, come sviluppatore indipendente per questo progetto, e padre alle prime armi di un bambino di 9 mesi, la mia attenzione è notevolmente frammentata. ↩︎

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