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 JS modulare è che le funzionalità ora sono organizzate in funzioni autonome che dovrai importare, anziché in un singolo spazio dei nomi firebase che include tutto. Questo nuovo modo di organizzare il codice consente il tree shaking e scoprirai come eseguire l'upgrade di qualsiasi app che attualmente utilizza l'SDK Firebase JS v8 alla nuova versione modulare.

Per garantire una procedura di upgrade agevole, 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 gradualmente la migrazione di un'app web di monitoraggio degli stock esistente che utilizza l'SDK JS v8 al nuovo SDK JS modulare in tre fasi:

  • Eseguire l'upgrade dell'app per utilizzare i pacchetti di compatibilità
  • Eseguire 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

2d351cb47b604ad7.png

Questo codelab è incentrato 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 dei pacchetti npm, che in genere è incluso in Node.js
  • Il codice di esempio 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 e decomprimerlo.

Importa l'app

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

71a8a7d47392e8f4.png

3. Stabilire un valore di riferimento

Qual è il tuo punto di partenza?

Il punto di partenza è un'app di monitoraggio titoli progettata per questo codelab. Il codice è stato semplificato per illustrare i concetti di questo codelab e presenta una gestione degli errori ridotta. 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 forma 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 lista di titoli facendo clic sul pulsante Aggiungi, digitando le lettere e facendo clic sulla riga del risultato di ricerca visualizzata di seguito.
  3. Per rimuovere una risorsa dalla lista di titoli, fai 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 Utilizza righe larghe per le richieste. L'opzione Disattiva cache ci assicura di ricevere sempre le ultime modifiche dopo un aggiornamento, mentre l'opzione Utilizza righe larghe per le richieste consente di visualizzare nella riga sia le dimensioni trasmesse sia le dimensioni della risorsa. In questo codelab, ci interessano principalmente le dimensioni di main.js.

48a096debb2aa940.png

  1. Carica l'app in condizioni di rete diverse utilizzando la limitazione simulata. In questo codelab utilizzerai la rete 3G lenta per misurare il tempo di caricamento perché è in questo caso che le dimensioni ridotte del bundle sono più utili.

4397cb2c1327089.png

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

4. Utilizzare i pacchetti di compatibilità

I pacchetti di compatibilità ti consentono di eseguire l'upgrade alla nuova versione dell'SDK senza modificare tutto il codice di 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 in modo da utilizzare i pacchetti di compatibilità. Nei passaggi che seguono, scoprirai come eseguire l'upgrade solo del codice di Firebase Auth per utilizzare l'API modulare e poi del codice di 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 durante la migrazione di ciascun prodotto.

Ottenere il nuovo SDK

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

package.json

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

Reinstalla le dipendenze

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

Modificare i percorsi di importazione

I pacchetti di compatibilità sono esposti nel sottomodulo firebase/compat, pertanto 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 il funzionamento dell'app

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente.
  3. Prova l'app. Dovrebbe funzionare tutto.

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

Puoi eseguire l'upgrade dei prodotti Firebase in qualsiasi ordine. In questo codelab, eseguirai prima l'upgrade di Auth per apprendere i concetti di base, in quanto l'API Auth è relativamente semplice. L'upgrade di Firestore è un po' più complesso e di seguito scoprirai come eseguirlo.

Aggiornare 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';
  1. Elimina import ‘firebase/compat/auth'.
  2. Sostituisci export const firebaseAuth = app.auth(); con:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Rimuovi export type User = firebase.User; alla fine del file. User verrà esportato direttamente in src/auth.ts, che modificherai in seguito.

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';
  1. Rimuovi User da import { firebaseAuth, User } from './firebase'; perché hai già importato User da ‘firebase/auth'.
  2. Aggiorna le funzioni per utilizzare l'API modulare.

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

Nella versione 9, i servizi vengono passati come primo argomento alle funzioni. I servizi sono gli oggetti che ottieni dall'inizializzazione di un servizio Firebase, ad esempio l'oggetto restituito da getAuth() o initializeAuth(). Memorizzano lo stato di un determinato servizio Firebase e la funzione utilizza lo stato per eseguire 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';

Verificare il funzionamento dell'app

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente
  3. Prova l'app. Dovrebbe funzionare tutto.

Controllare le dimensioni del pacchetto

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

2e4eafaf66cd829b.png

6. Eseguire l'upgrade dell'app Firebase e di Firestore per utilizzare l'API modulare

Aggiornare 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';
  1. 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"
});

Aggiornare 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';
  1. Sostituisci export const firestore = app.firestore(); con:

src/firebase.ts

export const firestore = getFirestore();
  1. 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' dovrebbe ora avere il seguente aspetto:

src/services.ts

import { firestore } from './firebase';
  1. Importa le funzioni e i tipi che utilizzerai nella parte superiore del file:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Crea un riferimento alla raccolta contenente tutti i ticker:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Utilizza getDocs() per recuperare tutti i documenti dalla raccolta:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Consulta search() per il codice completo.

Aggiorna addToWatchList()

Utilizza doc() per creare un riferimento a un documento della lista di titoli 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 });
}

Aggiornare deleteFromWatchList()

Analogamente, 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 a un documento per la lista di titoli dell'utente, quindi ascolta le modifiche alla lista di titoli utilizzando onSnapshot():

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. Una volta inseriti i ticker nella lista di titoli, utilizza query() per creare una query per recuperare i relativi prezzi e onSnapshot() per ascoltare le relative 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()

Innanzitutto, utilizza collection() per creare un riferimento alla raccolta che contiene i prezzi di tutti i ticker, quindi 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);
   });
}

Verificare il funzionamento dell'app

  1. Esegui npm run build per ricostruire l'app.
  2. Apri una scheda del browser su http://localhost:8080 o aggiorna la scheda esistente
  3. Prova l'app. Dovrebbe funzionare tutto.

Controllare le dimensioni del pacchetto

  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 inferiore di 1,3 secondi.

7660cdc574ee8571.png

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

Che cos'è Firestore Lite?

L'SDK Firestore offre memorizzazione nella cache complessa, streaming in tempo reale, archiviazione permanente, sincronizzazione offline multi-scheda, tentativi di nuovo invio, concorrenza ottimistica e molto altro ancora, pertanto le sue dimensioni sono piuttosto grandi. Tuttavia, potresti semplicemente voler recuperare i dati una volta, senza dover utilizzare le funzionalità avanzate. Per questi casi, Firestore ha creato una soluzione semplice e leggera, un nuovo pacchetto: Firestore Lite.

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

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

Eseguirai il refactoring del codice per:

  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 la lista di titoli e i prezzi delle azioni.
  3. Utilizza le nuove funzioni di Firestore Lite per recuperare i dati necessari per eseguire il rendering della pagina iniziale, quindi 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 nella parte superiore del nuovo file.

Devi ancora apportare un paio di modifiche:

  1. 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 cambierai in un'istanza Firestore Lite in pochi passaggi, che verrà utilizzata solo per il rendering iniziale della pagina.
  2. In secondo luogo, rimuovi la variabile firstload e il blocco if protetto da questa. Le relative 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';
  1. 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);
}
  1. 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';

Riunire tutti i dati

  1. Apri src/main.ts.
  2. Avrai bisogno delle funzioni appena create per recuperare i dati per il rendering iniziale della pagina e di un paio di funzioni di supporto 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';
  1. 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 seguito per iscriverti agli aggiornamenti in tempo reale.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. 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
});
  1. Ora recupera i dati per eseguire il rendering della pagina iniziale 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   
   }
}
  1. Nel blocco else in cui nessun utente ha eseguito l'accesso, recupera le informazioni sui prezzi di tutti gli stock utilizzando Firestore Lite, visualizza la pagina e poi 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 completo, consulta src/main.ts.

Verificare il funzionamento dell'app

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

Controllare le dimensioni del pacchetto

  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 compressi con gzip). Si tratta di una riduzione del 75% rispetto alle dimensioni del bundle originale, pari a 446 KB(138 KB compressi con gzip). Di conseguenza, il sito si carica più di 2 secondi più velocemente con una connessione 3G, un ottimo miglioramento delle prestazioni e dell'esperienza utente.

9ea7398a8c8ef81b.png

8. Complimenti

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

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

Inoltre, hai ridotto le dimensioni del bundle e migliorato il tempo di caricamento nel corso di questo codelab:

main.js

dimensioni risorsa (kb)

Dimensioni compresse con gzip (kb)

Tempo di caricamento (s) (su rete 3G lenta)

v8

446

138

4,92

v9 compat

429

124

4,65

Autenticazione modulare solo v9

348

102

4.2

v9 completamente modulare

244

74,6

3,66

v9 completamente modulare + Firestore Lite

117

34,9

2,88

32a71bd5a774e035.png

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

Letture aggiuntive

Documentazione di riferimento