Come lavori con i moduli nelle applicazioni a pagina…

Quando si lavora con i moduli in SPA, utilizzo componenti controllati o non controllati.

Componenti controllati: Il valore del campo del modulo viene memorizzato nello stato del componente e aggiornato tramite setState.

// Esempio di componente controllato in React
import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Inviato:', name);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nome:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">Invia</button>
    </form>
  );
}

Vantaggi dei componenti controllati:

È più facile controllare e validare l'input.
È più semplice implementare logiche condizionali di visualizzazione dei campi.
È facile integrarli con librerie di gestione dello stato (Redux, Vuex).

Componenti non controllati: Il valore del campo del modulo viene memorizzato direttamente nell'elemento DOM, accessibile tramite ref.

// Esempio di componente non controllato in React
import React, { useRef } from 'react';

function MyUncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Inviato:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Nome:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Invia</button>
    </form>
  );
}

Vantaggi dei componenti non controllati:

Sono più semplici per moduli semplici senza logica complessa.
Richiedono meno codice per una implementazione di base.

Approcci generali nel lavorare con i moduli in SPA:

Validazione:
- Sul lato client (JavaScript) per feedback immediato.
- Sul lato server per garantire l'integrità dei dati.
- Uso di librerie di validazione (Yup, Zod, VeeValidate, Vuelidate).
Gestione dell'invio:
- Prevenire il comportamento predefinito (event.preventDefault()).
- Inviare i dati al server (Fetch API, Axios, XHR).
- Mostrare lo stato dell'invio (caricamento, successo, errore).
Gestione dello stato:
- Uso dello stato locale del componente.
- Uso di gestori di stato (Redux, Vuex, Pinia) per moduli complessi o che vengono usati in altre parti dell'applicazione.
Feedback all'utente:
- Indicatori di caricamento.
- Messaggi di errore di validazione.
- Messaggi di successo/errore dell'invio.
Accessibilità (A11y):
- Uso di elementi HTML semantici (<form>, <label>, <input>, <button>).
- Associare <label> ai campi di input corrispondenti (attributo for o nidificazione).
- Uso di attributi WAI-ARIA se necessario.
Performance:
- Debounce o throttling degli eventi onChange per campi con frequenti modifiche.
- Ottimizzazione del rendering al cambiare lo stato del modulo.
Test:
- Test unitari per la logica del modulo e la validazione.
- Test di integrazione per l'interazione del modulo con l'API.

La scelta tra componenti controllati e non controllati dipende dalla complessità del modulo e dai requisiti di gestione dello stato e validazione. Per la maggior parte dei moduli, specialmente quelli complessi, i componenti controllati offrono maggiore flessibilità e controllo.

Come lavori con i moduli nelle applicazioni a pagina singola (SPA)?