Catch up on everthing we announced at this year's Firebase Summit. Learn more

Aggiornamento dalla versione 8 al Web SDK modulare

Le app che attualmente utilizzano Firebase Web SDK versione 8 o precedenti dovrebbero prendere in considerazione la migrazione alla versione 9 seguendo le istruzioni in questa guida.

Questa guida presuppone che si ha familiarità con la versione 8 e che potrete approfittare di un modulo bundler come webpack o Rollup per l'aggiornamento e la versione in corso di sviluppo 9.

Si consiglia vivamente di utilizzare un bundler di moduli nel proprio ambiente di sviluppo. Se non ne usi uno, non sarai in grado di sfruttare i principali vantaggi della versione 9 in dimensioni ridotte dell'app. Avrete bisogno di NPM o filo per installare l'SDK.

I passaggi di aggiornamento in questa guida si baseranno su un'app Web immaginaria che utilizza gli SDK di autenticazione e Cloud Firestore. Scorrendo gli esempi, puoi padroneggiare i concetti e i passaggi pratici necessari per aggiornare tutti gli SDK Web Firebase supportati.

Informazioni sulle librerie compatibili

Sono disponibili due tipi di librerie per Firebase Web SDK versione 9:

  • Modulare - una nuova superficie API progettato per facilitare albero tremare (rimozione di codice non utilizzato) per rendere il vostro web app più piccolo e veloce possibile.
  • Compat - una superficie API familiare che è pienamente compatibile con la versione 8 SDK, che consente di eseguire l'aggiornamento alla versione 9 senza cambiare tutto il codice Firebase in una sola volta. Le librerie di compatibilità hanno pochi o nessun vantaggio in termini di dimensioni o prestazioni rispetto alle loro controparti della versione 8.

Questa guida presuppone che utilizzerai le librerie compatibili della versione 9 per facilitare l'aggiornamento. Queste librerie ti 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 ed eseguire il debug della tua app più facilmente durante il processo di aggiornamento.

Per le app con un'esposizione molto ridotta all'SDK Web Firebase, ad esempio un'app che effettua solo una semplice chiamata alle API di autenticazione, può essere pratico eseguire il refactoring del codice della versione 8 senza utilizzare le librerie compatibili della versione 9. Se stai aggiornando un'app di questo tipo, puoi seguire le istruzioni in questa guida per "versione 9 modulare" senza utilizzare le librerie compatibili.

Informazioni sul processo di aggiornamento

Ogni passaggio del processo di aggiornamento ha l'ambito in modo che tu possa completare la modifica dell'origine per la tua app e quindi compilarla ed eseguirla senza interruzioni. In sintesi, ecco cosa farai per aggiornare un'app:

  1. Aggiungi le librerie della versione 9 e le librerie compatibili alla tua app.
  2. Aggiorna le istruzioni di importazione nel tuo codice a v9 compat.
  3. Refactoring del codice per un singolo prodotto (ad esempio Autenticazione) allo stile modulare.
  4. Facoltativo: a questo punto, prima di continuare, rimuovere la libreria di compatibilità dell'autenticazione e il codice di compatibilità per l'autenticazione per ottenere il vantaggio delle dimensioni dell'app per l'autenticazione.
  5. Refactoring delle funzioni per ogni prodotto (ad esempio, Cloud Firestore, FCM, ecc.) allo stile modulare, compilazione e test fino al completamento di tutte le aree.
  6. Aggiorna il codice di inizializzazione allo stile modulare.
  7. Rimuovi tutte le restanti istruzioni compat della versione 9 e il codice compat dalla tua app.

Ottieni la versione 9 SDK

Per iniziare, ottieni le librerie della versione 9 e le librerie compatibili usando npm:

npm i firebase@9.6.0

# OR

yarn add firebase@9.6.0

Aggiorna le importazioni alla compatibilità v9

Per mantenere il tuo codice funzionante dopo aver aggiornato la tua dipendenza da v8 a v9 beta, modifica le istruzioni di importazione per utilizzare la versione "compat" di ogni importazione. Per esempio:

Prima: versione 8

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

Dopo: versione 9 compat

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

Refactoring allo stile modulare

Mentre la versione 8 API sono basate su uno spazio dei nomi e il servizio modello di puntino a catena, la versione 9 di mezzi approccio modulare che il codice saranno organizzati principalmente intorno alle funzioni. Nella versione 9, l' firebase/app pacchetto e altri pacchetti non restituiscono un'esportazione completa che contiene tutti i metodi del pacchetto. Invece, i pacchetti esportano 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. Esaminiamo come funziona in due esempi che effettuano il refactoring delle chiamate alle API di autenticazione e Cloud Firestore.

Esempio 1: refactoring di una funzione di autenticazione

Prima: versione 9 compat

Il codice compatibile della versione 9 è identico al codice della versione 8, ma le importazioni sono cambiate.

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 getAuth funzione accetta firebaseApp come primo parametro. La onAuthStateChanged funzione non è incatenato dalla auth istanza come sarebbe in versione 8; invece, è una funzione libera che prende auth come primo parametro.

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

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

Esempio 2: refactoring di una funzione Cloud Firestore

Prima: versione 9 compat

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

Dopo: versione 9 modulare

La getFirestore funzione accetta firebaseApp come primo parametro, restituito dal initializeApp in un esempio precedente. Nota come il codice per formare una query è molto diverso nella versione 9; non c'è concatenazione, e metodi come query o where sono ora esposti come funzioni libere.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Esempio 3: combinazione di stili di codice versione 8 e versione 9

L'utilizzo delle librerie di compatibilità durante l'aggiornamento ti consente di continuare a utilizzare il codice della versione 8 insieme al codice sottoposto a refactoring per la versione 9. Ciò significa che puoi mantenere il codice della versione 8 esistente per Cloud Firestore mentre esegui il refactoring dell'autenticazione o di altro codice dell'SDK Firebase allo stile della versione 9, e ancora compila correttamente la tua app con entrambi gli stili di codice. Lo stesso vale per la versione 8 e versione 9 codice all'interno di un prodotto come il cloud Firestore; nuovi e vecchi stili di codice possono coesistere, purché si importino i pacchetti compat:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

Tieni presente che, anche se la tua app verrà compilata, non otterrai i vantaggi delle dimensioni dell'app del codice modulare finché non rimuovi completamente le istruzioni compat e il codice dalla tua app.

Aggiorna il codice di inizializzazione

Aggiorna il codice di inizializzazione della tua app per usare la nuova sintassi della versione modulare 9. E 'importante aggiornare il codice dopo aver completato il refactoring tutto il codice nella vostra applicazione; questo perché firebase.initializeApp() inizializza stato globale sia per la compat e API modulari, mentre il modulare initializeApp() funzione 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 il codice compatibile

Per realizzare i vantaggi dimensionali del SDK modulare versione 9, si dovrebbe finalmente convertire tutte le invocazioni allo stile modulare mostrata sopra e rimuovere tutti i import "firebase/compat/* dichiarazioni dal codice. Quando hai finito, non dovrebbe essere più riferimenti alla firebase.* namespace globale o qualsiasi altro codice in stile SDK versione 8.

Utilizzo della libreria compat dalla finestra

La versione 9 SDK è ottimizzato per lavorare con moduli anziché del browser window dell'oggetto. Le versioni precedenti della libreria consentito il caricamento e la gestione dei Firebase utilizzando il window.firebase namespace. Questo non è raccomandato in futuro in quanto non consente l'eliminazione del codice inutilizzato. Tuttavia, la versione compat del SDK JavaScript funziona con la window per gli sviluppatori che preferiscono non iniziare immediatamente il percorso di aggiornamento modulare.

<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

La libreria di compatibilità utilizza il codice modulare della versione 9 sotto il cofano e gli fornisce la stessa API dell'SDK della versione 8; questo significa che è possibile fare riferimento al riferimento API versione 8 e la versione 8 frammenti di codice per i dettagli. Questo metodo non è consigliato per l'uso a lungo termine, ma come inizio per l'aggiornamento alla libreria versione 9 completamente modulare.

Vantaggi e limitazioni della versione 9

La versione completamente modulare 9 presenta questi vantaggi rispetto alle versioni precedenti:

  • La versione 9 consente una dimensione dell'app notevolmente ridotta. Adotta il moderno formato JavaScript Module, consentendo pratiche di "scuotimento dell'albero" in cui importi solo gli artefatti di cui la tua app ha bisogno. A seconda della tua app, lo scuotimento degli alberi con la versione 9 può comportare l'80% in meno di kilobyte rispetto a un'app comparabile creata con la versione 8.
  • La versione 9 continuerà a beneficiare dello sviluppo di funzionalità in corso, mentre la versione 8 verrà bloccata in futuro.