Potenzia la tua app web eseguendo la migrazione all'SDK Firebase JS modulare

1. Prima di iniziare

L'SDK Firebase JS modulare è una riscrittura dell'SDK JS esistente e verrà rilasciato come prossima versione principale. Consente agli sviluppatori di escludere il codice inutilizzato dall'SDK Firebase JS per creare bundle più piccoli e ottenere un rendimento migliore.

La differenza più evidente nell'SDK JavaScript modulare è che le funzionalità sono ora organizzate in funzioni indipendenti che importerai, anziché in un singolo spazio dei nomi firebase che include tutto. Questo nuovo modo di organizzare il codice consente l'eliminazione del codice inutilizzato e imparerai ad aggiornare qualsiasi app che attualmente utilizza l'SDK Firebase JS v8 alla nuova versione modulare.

Per garantire una procedura di upgrade senza problemi, viene fornito un insieme di pacchetti di compatibilità. In questo codelab imparerai a utilizzare i pacchetti di compatibilità per eseguire il porting dell'app pezzo per pezzo.

Cosa creerai

In questo codelab, eseguirai la migrazione graduale di un'app web di watchlist azionaria esistente che utilizza l'SDK JS v8 al nuovo SDK JS modulare in tre fasi:

• Esegui l'upgrade dell'app per utilizzare i pacchetti di compatibilità
• Esegui l'upgrade dell'app dai pacchetti di compatibilità all'API modulare pezzo per pezzo
• Utilizza Firestore Lite, un'implementazione leggera dell'SDK Firestore, per migliorare ulteriormente le prestazioni dell'app

Questo codelab si concentra sull'upgrade dell'SDK Firebase. Altri concetti e blocchi di codice sono trattati solo superficialmente e sono forniti solo per operazioni di copia e incolla.

Che cosa ti serve

• Un browser a tua scelta, ad esempio Chrome
• L'IDE/editor di testo che preferisci, ad esempio WebStorm, Atom, Sublime o VS Code
• Il gestore di pacchetti npm, che in genere viene fornito con Node.js
• Il codice campione del codelab (vedi il passaggio successivo del codelab per scoprire come ottenere il codice).

2. Configurazione

Ottieni il codice

Tutto ciò che ti serve per questo progetto si trova in un repository Git. Per iniziare, devi recuperare il codice e aprirlo nel tuo ambiente di sviluppo preferito.

Clona il repository GitHub del codelab dalla riga di comando:

git clone https://github.com/FirebaseExtended/codelab-modular-sdk.git

In alternativa, se non hai installato git, puoi scaricare il repository come file ZIP ed estrarre il file ZIP scaricato.

Importare l'app

1. Utilizzando il tuo IDE, apri o importa la directory codelab-modular-sdk.
2. Esegui npm install per installare le dipendenze necessarie per creare ed eseguire l'app localmente.
3. Esegui npm run build per creare l'app.
4. Esegui npm run serve per avviare il server web
5. Apri una scheda del browser all'indirizzo http://localhost:8080.

3. Stabilire un valore di riferimento

Qual è il tuo punto di partenza?

Il punto di partenza è un'app di watchlist azionaria progettata per questo codelab. Il codice è stato semplificato per illustrare i concetti di questo codelab e la gestione degli errori è minima. Se scegli di riutilizzare parte di questo codice in un'app di produzione, assicurati di gestire eventuali errori e di testare completamente tutto il codice.

Assicurati che tutto funzioni nell'app:

1. Accedi in modalità anonima utilizzando il pulsante Accedi nell'angolo in alto a destra.
2. Dopo aver eseguito l'accesso, cerca e aggiungi "NFLX", "SBUX" e "T" alla watchlist facendo clic sul pulsante Aggiungi, digitando le lettere e facendo clic sulla riga dei risultati di ricerca visualizzata di seguito.
3. Rimuovi un titolo dal watchlist facendo clic sulla x alla fine della riga.
4. Guarda gli aggiornamenti in tempo reale del prezzo delle azioni.
5. Apri Chrome DevTools, vai alla scheda Rete e seleziona Disattiva cache e Usa righe larghe per le richieste. L'opzione Disattiva cache assicura che vengano sempre recuperate le ultime modifiche dopo un aggiornamento, mentre l'opzione Usa righe larghe per le richieste fa sì che la riga mostri sia le dimensioni trasmesse sia le dimensioni della risorsa. In questo codelab, ci interessa principalmente la dimensione di main.js.

6. Carica l'app in diverse condizioni di rete utilizzando la limitazione simulata. In questo codelab utilizzerai Slow 3G per misurare il tempo di caricamento perché è qui che una dimensione del bundle più piccola è più utile.

Ora inizia a eseguire la migrazione dell'app alla nuova API modulare.

4. Utilizzare i pacchetti di compatibilità

I pacchetti di compatibilità consentono di eseguire l'upgrade alla nuova versione dell'SDK senza modificare tutto il codice Firebase contemporaneamente. Puoi eseguire l'upgrade all'API modulare in modo graduale.

In questo passaggio, eseguirai l'upgrade della libreria Firebase dalla versione 8 alla nuova versione e modificherai il codice per utilizzare i pacchetti di compatibilità. Nei passaggi successivi, imparerai ad aggiornare prima solo il codice Firebase Auth per utilizzare l'API modulare, poi aggiornerai il codice Firestore.

Al termine di ogni passaggio, dovresti essere in grado di compilare ed eseguire l'app senza interruzioni e notare una diminuzione delle dimensioni del bundle man mano che eseguiamo la migrazione di ogni prodotto.

Scarica il nuovo SDK

Trova la sezione delle dipendenze in package.json e sostituiscila con quanto segue:

package.json

"dependencies": {
    "firebase": "^9.0.0" 
}

Reinstallare le dipendenze

Poiché abbiamo modificato la versione della dipendenza, dobbiamo eseguire di nuovo npm install per ottenere la nuova versione.

Modificare i percorsi di importazione

I pacchetti di compatibilità sono esposti nel sottomodulo firebase/compat, quindi aggiorneremo i percorsi di importazione di conseguenza:

1. Vai al file src/firebase.ts
2. Sostituisci le importazioni esistenti con le seguenti:

src/firebase.ts

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

Verificare che l'app funzioni

1. Esegui npm run build per ricompilare l'app.
2. Apri una scheda del browser all'indirizzo http://localhost:8080 o aggiorna la scheda esistente.
3. Gioca con l'app. Tutto dovrebbe funzionare ancora.

5. Esegui l'upgrade di Auth per utilizzare l'API modulare

Puoi eseguire l'upgrade dei prodotti Firebase in qualsiasi ordine. In questo codelab, esegui l'upgrade di Auth per primo per apprendere i concetti di base, perché l'API Auth è relativamente semplice. L'upgrade di Firestore è un po' più complesso e imparerai a farlo nella prossima lezione.

Aggiorna l'inizializzazione dell'autenticazione

1. Vai al file src/firebase.ts
2. Aggiungi la seguente importazione:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';

3. Elimina import ‘firebase/compat/auth'.
4. Sostituisci export const firebaseAuth = app.auth(); con:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });

5. Rimuovi export type User = firebase.User; alla fine del file. User verrà esportato direttamente in src/auth.ts, che modificherai in un secondo momento.

Aggiorna il codice di autorizzazione

1. Vai al file src/auth.ts
2. Aggiungi le seguenti importazioni all'inizio del file:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';

3. Rimuovi User da import { firebaseAuth, User } from './firebase';, dato che hai già importato User da ‘firebase/auth'.
4. Aggiorna le funzioni per utilizzare l'API modulare.

Come hai già visto in precedenza quando abbiamo aggiornato l'istruzione di importazione, i pacchetti della versione 9 sono organizzati in base alle funzioni che puoi importare, a differenza delle API della versione 8, che si basano su uno spazio dei nomi e un pattern di servizio concatenati con un punto. È questa nuova organizzazione del codice che consente di eliminare il codice inutilizzato, perché permette agli strumenti di compilazione di analizzare il codice utilizzato e quello non utilizzato.

Nella versione 9, i servizi vengono passati come primo argomento alle funzioni. I servizi sono gli oggetti ottenuti inizializzando un servizio Firebase, ad esempio l'oggetto restituito da getAuth() o initializeAuth(). Contengono lo stato di un determinato servizio Firebase e la funzione utilizza lo stato per svolgere le sue attività. Applichiamo questo pattern per implementare le seguenti funzioni:

src/auth.ts

export function firebaseSignInAnonymously() { 
    return signInAnonymously(firebaseAuth); 
} 

export function firebaseSignOut() { 
    return signOut(firebaseAuth); 
} 

export function onUserChange(callback: (user: User | null) => void) { 
    return onAuthStateChanged(firebaseAuth, callback); 
} 

export { User } from 'firebase/auth';

Verifica che l'app funzioni

1. Esegui npm run build per ricompilare l'app.
2. Apri una scheda del browser all'indirizzo http://localhost:8080 o aggiorna la scheda esistente.
3. Gioca con l'app. Tutto dovrebbe funzionare ancora.

Controllare le dimensioni del bundle

1. Apri Chrome DevTools.
2. Passa alla scheda Rete.
3. Aggiorna la pagina per acquisire le richieste di rete.
4. Cerca main.js e controlla le sue dimensioni. Hai ridotto le dimensioni del bundle di 100 kB (36 kB con compressione gzip), ovvero di circa il 22%, modificando solo poche righe di codice. Il sito viene caricato anche 0,75 secondi più velocemente su una connessione 3G lenta.

6. Aggiornare l'app Firebase e Firestore per utilizzare l'API modulare

Aggiorna l'inizializzazione di Firebase

1. Vai al file src/firebase.ts.
2. Sostituisci import firebase from ‘firebase/compat/app'; con:

src/firebase.ts

import { initializeApp } from 'firebase/app';

3. Sostituisci const app = firebase.initializeApp({...}); con:

src/firebase.ts

const app = initializeApp({
    apiKey: "AIzaSyBnRKitQGBX0u8k4COtDTILYxCJuMf7xzE", 
    authDomain: "exchange-rates-adcf6.firebaseapp.com", 
    databaseURL: "https://exchange-rates-adcf6.firebaseio.com", 
    projectId: "exchange-rates-adcf6", 
    storageBucket: "exchange-rates-adcf6.firebasestorage.app", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

Aggiorna l'inizializzazione di Firestore

1. Nello stesso file src/firebase.ts, sostituisci import 'firebase/compat/firestore'; con

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

2. Sostituisci export const firestore = app.firestore(); con:

src/firebase.ts

export const firestore = getFirestore();

3. Rimuovi tutte le righe dopo "export const firestore = ..."

Aggiornare le importazioni

1. Apri il file src/services.ts.
2. Rimuovi FirestoreFieldPath, FirestoreFieldValue e QuerySnapshot dall'importazione. L'importazione da './firebase' ora dovrebbe essere simile alla seguente:

src/services.ts

import { firestore } from './firebase';

3. Importa le funzioni e i tipi che utilizzerai all'inizio del file:

    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';

Aggiornare search()

1. Crea un riferimento alla raccolta che contiene tutti i ticker:

src/services.ts

const tickersCollRef = collection(firestore, 'current');

2. Utilizza getDocs() per recuperare tutti i documenti dalla raccolta:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Per il codice finito, vedi search().

Aggiorna addToWatchList()

Utilizza doc() per creare un riferimento al documento alla watchlist dell'utente, quindi aggiungi un ticker utilizzando setDoc() con arrayUnion():

src/services.ts

export function addToWatchList(ticker: string, user: User) {
      const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
      return setDoc(watchlistRef, {
       tickers: arrayUnion(ticker)
   }, { merge: true });
}

Aggiorna deleteFromWatchList()

Allo stesso modo, rimuovi un ticker dalla lista di titoli dell'utente utilizzando setDoc() con arrayRemove():

src/services.ts

export function deleteFromWatchList(ticker: string, user: User) {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   return setDoc(watchlistRef, {
       tickers: arrayRemove(ticker)
   }, { merge: true });
}

Aggiorna subscribeToTickerChanges()

1. Utilizza doc() per creare prima un riferimento al documento all'elenco osservati dell'utente, quindi ascolta le modifiche all'elenco osservati utilizzando onSnapshot():

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});

2. Una volta inseriti i ticker nel watchlist, utilizza query() per creare una query per recuperare i prezzi e onSnapshot() per ascoltare le variazioni di prezzo:

src/services.ts

const priceQuery = query(
    collection(firestore, 'current'),
    where(documentId(), 'in', tickers)
);
unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               if (firstload) {
                   performance && performance.measure("initial-data-load");
                   firstload = false;
                   logPerformance();
               }
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
  });

Per l'implementazione completa, consulta subscribeToTickerChanges().

Aggiorna subscribeToAllTickerChanges()

Per prima cosa, utilizza collection() per creare un riferimento alla raccolta che contiene i prezzi di tutti i ticker, poi utilizza onSnapshot() per ascoltare le variazioni di prezzo:

src/services.ts

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       if (firstload) {
           performance && performance.measure("initial-data-load");
           firstload = false;
           logPerformance();
       }
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Verifica che l'app funzioni

1. Esegui npm run build per ricompilare l'app.
2. Apri una scheda del browser all'indirizzo http://localhost:8080 o aggiorna la scheda esistente.
3. Gioca con l'app. Tutto dovrebbe funzionare ancora.

Controllare le dimensioni del bundle

1. Apri Chrome DevTools.
2. Passa alla scheda Rete.
3. Aggiorna la pagina per acquisire le richieste di rete.
4. Cerca main.js e controlla le dimensioni. Confrontalo di nuovo con le dimensioni del bundle originale: abbiamo ridotto le dimensioni del bundle di oltre 200 KB (63,8 KB con compressione gzip), ovvero del 50%, il che si traduce in un tempo di caricamento più rapido di 1,3 secondi.

7. Utilizzare Firestore Lite per velocizzare il rendering iniziale della pagina

Che cos'è Firestore Lite?

L'SDK Firestore offre funzionalità complesse di memorizzazione nella cache, streaming in tempo reale, archiviazione permanente, sincronizzazione offline multi-scheda, tentativi, concorrenza ottimistica e molto altro ancora, pertanto è piuttosto grande. Tuttavia, potresti semplicemente voler ottenere i dati una sola volta, senza bisogno di funzionalità avanzate. Per questi casi, Firestore ha creato una soluzione semplice e leggera, un pacchetto nuovo di zecca: Firestore Lite.

Un ottimo caso d'uso per Firestore Lite è l'ottimizzazione del rendimento del rendering iniziale della pagina, in cui devi solo sapere se un utente ha eseguito l'accesso, quindi leggere alcuni dati da Firestore da visualizzare.

In questo passaggio, imparerai a utilizzare Firestore Lite per ridurre le dimensioni del bundle e velocizzare il rendering iniziale della pagina, quindi a caricare dinamicamente l'SDK Firestore principale per abbonarti agli aggiornamenti in tempo reale.

Refactor the code to:

1. Sposta i servizi in tempo reale in un file separato, in modo che possano essere caricati dinamicamente utilizzando l'importazione dinamica.
2. Crea nuove funzioni per utilizzare Firestore Lite per recuperare l'elenco di titoli e i prezzi delle azioni.
3. Utilizza le nuove funzioni di Firestore Lite per recuperare i dati per il rendering iniziale della pagina, poi carica dinamicamente i servizi in tempo reale per ascoltare gli aggiornamenti in tempo reale.

Spostare i servizi in tempo reale in un nuovo file

1. Crea un nuovo file denominato src/services.realtime.ts.
2. Sposta le funzioni subscribeToTickerChanges() e subscribeToAllTickerChanges() da src/services.ts nel nuovo file.
3. Aggiungi le importazioni necessarie all'inizio del nuovo file.

Devi ancora apportare un paio di modifiche qui:

4. Innanzitutto, crea un'istanza Firestore dall'SDK Firestore principale nella parte superiore del file da utilizzare nelle funzioni. Non puoi importare l'istanza Firestore da firebase.ts qui perché la modificherai in un'istanza Firestore Lite in pochi passaggi, che verrà utilizzata solo per il rendering iniziale della pagina.
5. Secondo, elimina la variabile firstload e il blocco if protetto. Le loro funzionalità verranno spostate nelle nuove funzioni che creerai nel passaggio successivo.

src/services.realtime.ts

import { User } from './auth'
import { TickerChange } from './models';
import { collection, doc, onSnapshot, query, where, documentId, getFirestore } from 'firebase/firestore';
import { formatSDKStocks } from './services';

const firestore = getFirestore();
type TickerChangesCallBack = (changes: TickerChange[]) => void

export function subscribeToTickerChanges(user: User, callback: TickerChangesCallBack) {

   let unsubscribePrevTickerChanges: () => void;

   // Subscribe to watchlist changes. We will get an update whenever a ticker is added/deleted to the watchlist
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const unsubscribe = onSnapshot(watchlistRef, snapshot => {
       const doc = snapshot.data();
       const tickers = doc ? doc.tickers : [];

       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }

       if (tickers.length === 0) {
           callback([]);
       } else {
           // Query to get current price for tickers in the watchlist
           const priceQuery = query(
               collection(firestore, 'current'),
               where(documentId(), 'in', tickers)
           );

           // Subscribe to price changes for tickers in the watchlist
           unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
           });
       }
   });
   return () => {
       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }
       unsubscribe();
   };
}

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Utilizzare Firestore Lite per recuperare i dati

1. Apri src/services.ts.
2. Modifica il percorso di importazione da ‘firebase/firestore' a ‘firebase/firestore/lite', aggiungi getDoc e rimuovi onSnapshot dall'elenco di importazione:

src/services.ts

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove,
//  onSnapshot, // firestore lite doesn't support realtime updates
    query, 
    where, 
    documentId, 
    QuerySnapshot, 
    getDoc // add this import
} from 'firebase/firestore/lite';

3. Aggiungi funzioni per recuperare i dati necessari per il rendering della pagina iniziale utilizzando Firestore Lite:

src/services.ts

export async function getTickerChanges(tickers: string[]): Promise<TickerChange[]> {

   if (tickers.length === 0) {
       return [];
   }

   const priceQuery = query(
       collection(firestore, 'current'),
       where(documentId(), 'in', tickers)
   );
   const snapshot = await getDocs(priceQuery);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

export async function getTickers(user: User): Promise<string[]> {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const data =  (await getDoc(watchlistRef)).data();

   return data ? data.tickers : [];
}

export async function getAllTickerChanges(): Promise<TickerChange[]> {
   const tickersCollRef = collection(firestore, 'current');
   const snapshot = await getDocs(tickersCollRef);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

4. Apri src/firebase.ts e modifica il percorso di importazione da ‘firebase/firestore' a ‘firebase/firestore/lite':

src/firebase.ts

import { getFirestore } from 'firebase/firestore/lite';

Mettere tutto insieme

1. Apri src/main.ts.
2. Avrai bisogno delle funzioni appena create per recuperare i dati per il rendering della pagina iniziale e di un paio di funzioni helper per gestire lo stato dell'app. Ora aggiorna le importazioni:

src/main.ts

import { renderLoginPage, renderUserPage } from './renderer';
import { getAllTickerChanges, getTickerChanges, getTickers } from './services';
import { onUserChange } from './auth';
import { getState, setRealtimeServicesLoaded, setUser } from './state';
import './styles.scss';

3. Carica src/services.realtime utilizzando un'importazione dinamica nella parte superiore del file. La variabile loadRealtimeService è una promessa che verrà risolta con i servizi in tempo reale una volta caricato il codice. Lo utilizzerai in un secondo momento per iscriverti agli aggiornamenti in tempo reale.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});

4. Modifica il callback di onUserChange() in una funzione async, in modo da poter utilizzare await nel corpo della funzione:

src/main.ts

onUserChange(async user => {
 // callback body
});

5. Ora recupera i dati per eseguire il rendering iniziale della pagina utilizzando le nuove funzioni create nel passaggio precedente.

Nel callback onUserChange(), trova la condizione if in cui un utente ha eseguito l'accesso e copia e incolla il codice all'interno dell'istruzione if:

src/main.ts

onUserChange(async user => {
      // LEAVE THE EXISTING CODE UNCHANGED HERE
      ...

      if (user) {
       // REPLACE THESE LINES

       // user page
       setUser(user);

       // show loading screen in 500ms
       const timeoutId = setTimeout(() => {
           renderUserPage(user, {
               loading: true,
               tableData: []
           });
       }, 500);

       // get data once if realtime services haven't been loaded
       if (!getState().realtimeServicesLoaded) {
           const tickers = await getTickers(user);
           const tickerData = await getTickerChanges(tickers);
           clearTimeout(timeoutId);
           renderUserPage(user, { tableData: tickerData });
       }

       // subscribe to realtime updates once realtime services are loaded
       loadRealtimeService.then(({ subscribeToTickerChanges }) => {
           unsubscribeTickerChanges = subscribeToTickerChanges(user, stockData => {
               clearTimeout(timeoutId);
               renderUserPage(user, { tableData: stockData })
           });
       });
   } else {
     // DON'T EDIT THIS PART, YET   
   }
}

6. Nel blocco else in cui non è stato eseguito l'accesso, recupera le informazioni sui prezzi per tutte le azioni utilizzando Firestore Lite, esegui il rendering della pagina, quindi ascolta le variazioni di prezzo una volta caricati i servizi in tempo reale:

src/main.ts

if (user) {
   // DON'T EDIT THIS PART, WHICH WE JUST CHANGED ABOVE
   ...
} else {
   // REPLACE THESE LINES

   // login page
   setUser(null);

   // show loading screen in 500ms
   const timeoutId = setTimeout(() => {
       renderLoginPage('Landing page', {
           loading: true,
           tableData: []
       });
   }, 500);

   // get data once if realtime services haven't been loaded
   if (!getState().realtimeServicesLoaded) {
       const tickerData = await getAllTickerChanges();
       clearTimeout(timeoutId);
       renderLoginPage('Landing page', { tableData: tickerData });
   }

   // subscribe to realtime updates once realtime services are loaded
   loadRealtimeService.then(({ subscribeToAllTickerChanges }) => {
       unsubscribeAllTickerChanges = subscribeToAllTickerChanges(stockData => {
           clearTimeout(timeoutId);
           renderLoginPage('Landing page', { tableData: stockData })
       });
   });
}

Per il codice finito, consulta src/main.ts.

Verifica che l'app funzioni

1. Esegui npm run build per ricompilare l'app.
2. Apri una scheda del browser all'indirizzo http://localhost:8080 o aggiorna la scheda esistente.

Controllare le dimensioni del bundle

1. Apri Chrome DevTools.
2. Passa alla scheda Rete.
3. Aggiorna la pagina per acquisire le richieste di rete
4. Cerca main.js e controlla le dimensioni.
5. Ora è di soli 115 KB (34,5 KB con compressione gzip). Si tratta di una riduzione del 75% rispetto alle dimensioni originali del bundle, che erano di 446 KB(138 KB compressi con gzip). Di conseguenza, il sito viene caricato oltre 2 secondi più velocemente con una connessione 3G, un ottimo miglioramento delle prestazioni e dell'esperienza utente.

8. Complimenti

Congratulazioni, hai eseguito l'upgrade dell'app e l'hai resa più piccola e veloce.

Hai utilizzato i pacchetti di compatibilità per eseguire l'upgrade dell'app parte per parte e Firestore Lite per velocizzare il rendering iniziale della pagina, quindi hai caricato dinamicamente Firestore principale per trasmettere in streaming le variazioni di prezzo.

Nel corso di questo codelab hai anche ridotto le dimensioni del bundle e migliorato il tempo di caricamento:

Ora conosci i passaggi chiave necessari per eseguire l'upgrade di un'app web che utilizza l'SDK Firebase JS v8 per utilizzare il nuovo SDK JS modulare.

Further reading

• Guida all'upgrade dalla versione 8 alla 9
• Scopri di più sulla versione 9
• Guida introduttiva alla versione 9

Documenti di riferimento

• https://firebase.google.com/docs/reference/js/v9