Upgrade all'SDK web modulare (v9)

Le app che attualmente utilizzano la versione 8 dell'SDK web o versioni precedenti dovrebbero valutare la migrazione alla versione 9 seguendo le istruzioni in questa guida.

Questa guida presuppone che tu abbia familiarità con la versione 8 e che utilizzerai un bundler di moduli come webpack o Rollup per l'upgrade e lo sviluppo continuo della versione 9.

Ti consigliamo vivamente di utilizzare un bundler di moduli nel tuo ambiente di sviluppo. Se non ne utilizzi uno, non potrai sfruttare i vantaggi principali della versione 9 in termini di dimensioni ridotte dell'app. Per installare l'SDK avrai bisogno di npm o yarn.

Informazioni sulle librerie compatibili

Sono disponibili due tipi di librerie per la versione 9 dell'SDK web:

  • Modulare: una nuova piattaforma API progettata per facilitare l'eliminazione del codice inutilizzato (rimozione del codice inutilizzato) in modo da rendere la tua app web il più piccola e veloce possibile.
  • Compat: una nota piattaforma API completamente compatibile con la versione 8, che ti consente di eseguire l'upgrade alla versione 9 senza modificare tutto il codice SDK contemporaneamente. Le librerie compatibili hanno vantaggi scarsi o nulli in termini di dimensioni o prestazioni rispetto alle controparti della versione 8.

Questa guida presuppone che utilizzerai le librerie compatibili della versione 9 per facilitare l'upgrade. Queste librerie consentono di continuare a utilizzare il codice della versione 8 insieme al codice sottoposto a refactoring per la versione 9. Ciò significa che puoi compilare la tua app ed eseguirne il debug più facilmente mentre esegui il processo di upgrade.

Per le app con un'esposizione molto ridotta all'SDK web, potrebbe essere pratico eseguire il refactoring del codice della versione 8 senza utilizzare le librerie compatibili della versione 9. Se esegui l'upgrade di un'app di questo tipo, puoi seguire le istruzioni di questa guida relative alla "versione 9 modulare" senza utilizzare le librerie compatibili.

Informazioni sul processo di upgrade

L'ambito di ogni passaggio del processo di upgrade è limitato in modo da poter terminare la modifica del codice sorgente per la tua app, per poi compilarla ed eseguirla senza interruzioni. In sintesi, per eseguire l'upgrade di un'app, procedi nel seguente modo:

  1. Aggiungi alla tua app le librerie della versione 9 e le librerie compatibili.
  2. Aggiorna le istruzioni di importazione nel codice alla versione v9.
  3. Esegui il refactoring del codice in stile modulare.
  4. Rimuovi la libreria e il codice compatibili di Authentication per Autenticazione per sfruttare le dimensioni dell'app.
  5. Aggiorna il codice di inizializzazione allo stile modulare.
  6. Rimuovi dall'app tutte le restanti istruzioni compat della versione 9 e il codice compat.

Scarica l'SDK versione 9

Per iniziare, scarica le librerie della versione 9 e le librerie compatibili utilizzando npm (ultima versione https://www.npmjs.com/package/firebase):

npm i firebase@10.12.2

# OR

yarn add firebase@10.12.2

Aggiorna importazioni a v9 compat

Per garantire il funzionamento del codice dopo l'aggiornamento della dipendenza da v8 a v9, modifica le istruzioni di importazione in modo da utilizzare la versione "compat" di ogni importazione. Ad esempio:

Prima: versione 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Dopo: versione 9 compatibile

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Esegui il refactoring allo stile modulare

Mentre le API della versione 8 si basano su uno spazio dei nomi con concatenamento di punti e un pattern di servizio, l'approccio modulare della versione 9 significa che il codice sarà organizzato principalmente in base alle funzioni. Nella versione 9, il pacchetto Firebase/app e gli altri pacchetti non restituiscono un'esportazione completa contenente tutti i metodi del pacchetto. I pacchetti esportano invece singole funzioni.

Nella versione 9, i servizi vengono passati come primo argomento e la funzione utilizza quindi i dettagli del servizio per fare il resto.

Esempio: refactoring di una funzione di autenticazione semplice

Prima: versione 9 - compat

Il codice di compatibilità della versione 9 è identico al codice della versione 8, ma le importazioni sono cambiate. L'uso delle librerie compatibili durante l'upgrade ti consente di continuare a utilizzare il codice della versione 8 insieme al codice sottoposto a refactoring per la versione 9.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => {
  // Check for user status
});

Dopo: versione 9 modulare

La funzione getAuth utilizza firebaseApp come primo parametro. La funzione onAuthStateChanged non è concatenata dall'istanza di autenticazione come sarebbe nella versione 8; è invece una funzione gratuita che prende auth come primo parametro.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Aggiorna codice di inizializzazione

Aggiorna il codice di inizializzazione dell'app per usare la nuova sintassi modulare 9. È importante aggiornare questo codice dopo aver completato il refactoring di tutto il codice nell'app; questo perché firebase.initializeApp() inizializza lo stato globale sia per le API compatibili che per quelle modulari, mentre la funzione initializeApp() modulare inizializza solo lo stato per modulare.

Prima: versione 9 - compat

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

Dopo: versione 9 modulare

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

Rimuovi codice di compatibilità

Per usufruire dei vantaggi in termini di dimensioni dell'SDK modulare versione 9, alla fine devi convertire tutte le chiamate nello stile modulare mostrato sopra e rimuovere tutte le istruzioni import "firebase/compat/* dal codice. Al termine, non ci dovrebbero più essere riferimenti allo spazio dei nomi globale firebase.* o a qualsiasi altro codice nello stile dell'SDK versione 8.

Vantaggi e limitazioni della versione 9

La versione 9 completamente modularizzata presenta i seguenti vantaggi rispetto alle versioni precedenti:

  • La versione 9 consente di ridurre drasticamente le dimensioni dell'app. Adotta il moderno formato del modulo JavaScript, consentendo l'applicazione di pratiche di "tree shaking" (scuotimento ad albero), in cui si importano solo gli artefatti necessari alla propria app. A seconda dell'app, con la versione 9 di "tree-shaing" puoi ottenere l'80% di kilobyte in meno rispetto a un'app paragonabile creata con la versione 8.
  • La versione 9 continuerà a trarre vantaggio dal continuo sviluppo delle funzionalità, mentre la versione 8 verrà bloccata in futuro.