Turbine seu app da Web migrando para o SDK modular do Firebase para JavaScript

1. Antes de começar

O SDK modular do Firebase para JavaScript é uma regravação do SDK existente para JavaScript e será lançado como a próxima versão principal. Com ele, os desenvolvedores podem excluir códigos não utilizados do SDK do Firebase para JavaScript com o objetivo de criar pacotes menores e melhorar o desempenho.

A diferença mais notável no SDK modular do JS é que os recursos agora são organizados em funções flutuantes sem custo financeiro que você vai importar, em vez de em um único namespace firebase que inclui tudo. Essa nova forma de organização do código é o que permite o tree shaking, e você aprenderá a fazer upgrade de qualquer aplicativo que usa o SDK do Firebase para JavaScript v8 para o novo modular.

Para proporcionar um processo de upgrade tranquilo, é fornecido um conjunto de pacotes de compatibilidade. Neste codelab, você vai aprender a usar os pacotes de compatibilidade para transferir o app por partes.

O que você vai criar

Neste codelab, você vai migrar gradualmente um app da Web de lista de interesses de estoque que usa o SDK do JavaScript v8 para o novo SDK modular do JS em três etapas:

• Fazer upgrade do app para usar os pacotes de compatibilidade
• Fazer upgrade do app dos pacotes de compatibilidade para a API modular por parte
• Use o Firestore Lite, uma implementação leve do SDK do Firestore, para melhorar ainda mais o desempenho do app

O foco deste codelab é fazer upgrade do SDK do Firebase. Não abordaremos outros conceitos e blocos de código, que são fornecidos para que você os copie e cole.

O que é necessário

• Um navegador de sua escolha, como o Chrome
• O ambiente de desenvolvimento integrado/editor de texto que você preferir, como WebStorm, Atom, Sublime ou VS Code.
• O npm do gerenciador de pacotes, que normalmente acompanha o Node.js
• O exemplo de código do codelab. Consulte a próxima etapa para saber como acessar o código.

2. Começar a configuração

Buscar o código

Tudo o que você precisa para este projeto está em um repositório Git. Para começar, abra o código no seu ambiente de desenvolvimento favorito.

Clone o repositório do GitHub do codelab na linha de comando:

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

Como alternativa, se você não tiver o git instalado, faça o download do repositório como um arquivo ZIP e descompacte o arquivo ZIP salvo.

Importar o app

1. Usando seu ambiente de desenvolvimento integrado, abra ou importe o diretório codelab-modular-sdk.
2. Execute npm install para instalar as dependências necessárias para criar e executar o app localmente.
3. Execute npm run build para criar o app.
4. Execute npm run serve para iniciar o servidor da Web
5. Abra uma guia do navegador e acesse http://localhost:8080.

3. Estabelecer um valor de referência

Qual é seu ponto de partida?

Seu ponto de partida é um app de lista de interesses criado para este codelab. O código foi simplificado para ilustrar os conceitos deste codelab e tem pouco tratamento de erros. Se você decidir reutilizar qualquer um desses códigos em um app de produção, não deixe de processar todos os erros e testar todo o código.

Verifique se tudo está funcionando no app:

1. Faça login anonimamente usando o botão login no canto superior direito.
2. Depois de fazer login, pesquise e adicione "NFLX", "SBUX" e "T" à lista de sites de interesse clicando no botão Adicionar, digitando as letras e clicando na linha de resultados da pesquisa que aparece abaixo.
3. Remova uma ação da lista de interesses clicando no x no final da linha.
4. Confira as atualizações em tempo real do preço das ações.
5. Abra o Chrome DevTools, acesse a guia Rede e marque Desativar cache e Usar linhas de solicitação grandes. Desative o cache para garantir que sempre recebamos as alterações mais recentes após uma atualização. Já a opção Usar linhas de solicitação grandes faz com que a linha exiba o tamanho transmitido e para um recurso. Neste codelab, nosso principal interesse é o tamanho do main.js.

6. Carregar o app em diferentes condições de rede usando limitação simulada. Você vai usar o 3G lento para medir o tempo de carregamento neste codelab porque é onde um pacote menor ajuda mais.

Agora, comece a migrar o app para a nova API modular.

4. Usar os pacotes de compatibilidade

Com os pacotes de compatibilidade, é possível fazer upgrade para a nova versão do SDK sem alterar todo o código do Firebase de uma só vez. É possível fazer upgrade gradual para a API modular.

Nesta etapa, você vai fazer upgrade da biblioteca do Firebase da v8 para a nova versão e alterar o código para usar os pacotes de compatibilidade. Nas etapas a seguir, você vai aprender a fazer upgrade apenas do código do Firebase Auth para usar a API modular primeiro e, em seguida, fazer upgrade do código do Firestore.

Ao final de cada etapa, você poderá compilar e executar o app sem falhas e notar uma diminuição no tamanho do pacote à medida que migrarmos cada produto.

Instalar o novo SDK

Encontre a seção de dependências no package.json e a substitua pelo seguinte:

package.json

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

Reinstalar as dependências

Como mudamos a versão da dependência, é necessário executar novamente o npm install para acessar a nova versão.

Alterar caminhos de importação

Os pacotes de compatibilidade são expostos no submódulo firebase/compat. Portanto, vamos atualizar os caminhos de importação adequadamente:

1. Acessar o arquivo src/firebase.ts
2. Substitua as importações atuais pelas seguintes importações:

src/firebase.ts (link em inglês)

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

Verificar se o app funciona

1. Execute npm run build para recriar o app.
2. Abra uma guia do navegador para http://localhost:8080 ou atualize a guia atual.
3. Divirta-se com o app. Tudo deve estar funcionando.

5. Fazer upgrade do Auth para usar a API modular

É possível fazer upgrade dos produtos do Firebase em qualquer ordem. Neste codelab, você vai fazer upgrade do Auth primeiro para aprender os conceitos básicos, já que a API Auth é relativamente simples. O upgrade do Firestore é um pouco mais complicado, e você vai aprender a fazer isso a seguir.

Atualizar a inicialização do Auth

1. Acessar o arquivo src/firebase.ts
2. Adicione a seguinte importação:

src/firebase.ts (link em inglês)

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

3. Excluir import ‘firebase/compat/auth'.
4. Substitua export const firebaseAuth = app.auth(); por:

src/firebase.ts (link em inglês)

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

5. Remova export type User = firebase.User; do final do arquivo. User será exportado diretamente em src/auth.ts, que você vai mudar em seguida.

Atualizar o código do Auth

1. Acessar o arquivo src/auth.ts
2. Adicione estas importações à parte de cima do arquivo:

src/auth.ts (link em inglês)

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

3. Remover User de import { firebaseAuth, User } from './firebase'; porque você já importou User de ‘firebase/auth'.
4. Atualizar funções para usar a API modular.

Como você já aprendeu, quando atualizamos a instrução de importação, os pacotes da versão 9 são organizados com base em funções que podem ser importadas, ao contrário das APIs da versão 8, que são baseadas em um namespace encadeado por pontos e em um padrão de serviço. É essa nova organização de código que permite o tree shaking de códigos não utilizados, porque permite que as ferramentas de compilação analisem quais códigos são usados ou não.

Na versão 9, os serviços são transmitidos como o primeiro argumento para as funções. Os serviços são os objetos que você recebe ao inicializar um serviço do Firebase, por exemplo, o objeto retornado de getAuth() ou initializeAuth(). Eles contêm o estado de um determinado serviço do Firebase, e a função usa esse estado para executar as tarefas. Vamos aplicar esse padrão para implementar as seguintes funções:

src/auth.ts (link em inglês)

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';

Verificar se o app funciona

1. Execute npm run build para recriar o app.
2. Abra uma guia do navegador para http://localhost:8080 ou atualize a guia atual
3. Divirta-se com o app. Tudo deve estar funcionando.

Verificar o tamanho do pacote

1. Abra o Chrome DevTools.
2. Alterne para a guia Rede.
3. Atualize a página para capturar solicitações de rede.
4. Procure main.js e verifique o tamanho dele. Você reduziu o tamanho do pacote em 100 KB (36 KB comprimido com gzip) ou cerca de 22% menor ao alterar apenas algumas linhas de código. O site também está carregando 0,75 segundo mais rápido em uma conexão 3G lenta.

6. Fazer upgrade do app do Firebase e do Firestore para usar a API modular

Atualizar a inicialização do Firebase

1. Acessar o arquivo src/firebase.ts.
2. Substitua import firebase from ‘firebase/compat/app'; por:

src/firebase.ts (link em inglês)

import { initializeApp } from 'firebase/app';

3. Substitua const app = firebase.initializeApp({...}); por:

src/firebase.ts (link em inglês)

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.appspot.com", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

Atualizar a inicialização do Firestore

1. No mesmo arquivo, src/firebase.ts,, substitua import 'firebase/compat/firestore'; por

src/firebase.ts (link em inglês)

import { getFirestore } from 'firebase/firestore';

2. Substitua export const firestore = app.firestore(); por:

src/firebase.ts (link em inglês)

export const firestore = getFirestore();

3. Remover todas as linhas depois de "export const firestore = ..."

Atualizar importações

1. Abrir arquivo src/services.ts.
2. Remova FirestoreFieldPath, FirestoreFieldValue e QuerySnapshot da importação. A importação de './firebase' agora ficará assim:

src/services.ts (link em inglês)

import { firestore } from './firebase';

3. Importe as funções e os tipos que você vai usar na parte de cima do arquivo:

    **src/services.ts**

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

Atualizar search()

1. Crie uma referência para a coleção que contém todos os códigos de ação:

src/services.ts (link em inglês)

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

2. Use getDocs() para buscar todos os documentos da coleção:

src/services.ts (link em inglês)

const tickers = await getDocs(tickersCollRef);

Consulte search() para ver o código finalizado.

Atualizar addToWatchList()

Use doc() para criar uma referência de documento para a lista de interesses do usuário e adicione um mostrador a ela usando setDoc() com arrayUnion():

src/services.ts (link em inglês)

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

Atualizar deleteFromWatchList()

Da mesma forma, remova um mostrador da lista de interesses do usuário usando setDoc() com arrayRemove():

src/services.ts (link em inglês)

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

Atualizar subscriptionToTickerChanges()

1. Use doc() para criar uma referência de documento para a lista de interesses do usuário primeiro e, em seguida, ouça as mudanças na lista de interesses usando onSnapshot():

src/services.ts (link em inglês)

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

2. Quando os códigos estiverem na lista de sites de interesse, use query() para criar uma consulta e buscar os preços deles e use onSnapshot() para detectar as mudanças de preço:

src/services.ts (link em inglês)

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);
  });

Consulte subscribeToTickerChanges() para a implementação completa.

Atualizar subscriptionToAllTickerChanges()

Primeiro, use collection() para criar uma referência à coleção que contém os preços de todos os tickers e, em seguida, use onSnapshot() para detectar as mudanças de preço:

src/services.ts (link em inglês)

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);
   });
}

Verificar se o app funciona

1. Execute npm run build para recriar o app.
2. Abra uma guia do navegador para http://localhost:8080 ou atualize a guia atual
3. Divirta-se com o app. Tudo deve estar funcionando.

Verificar o tamanho do pacote

1. Abra o Chrome DevTools.
2. Alterne para a guia Rede.
3. Atualize a página para capturar solicitações de rede.
4. Procure por main.js e verifique o tamanho dele. Compare com o tamanho do pacote original novamente: reduzimos o tamanho do pacote em mais de 200 KB (63,8 KB comprimido com gzip) ou 50% menor, o que significa um tempo de carregamento 1,3 segundo mais rápido.

7. Usar o Firestore Lite para acelerar a renderização da página inicial

O que é o Firestore Lite?

O SDK do Firestore oferece armazenamento em cache complexo, streaming em tempo real, armazenamento permanente, sincronização off-line de várias guias, novas tentativas, simultaneidade otimista e muito mais, por isso é muito grande. No entanto, talvez você queira apenas receber os dados uma vez, sem precisar de nenhum dos recursos avançados. Para esses casos, o Firestore criou uma solução simples e leve, um pacote totalmente novo: o Firestore Lite.

Um ótimo caso de uso do Firestore Lite é otimizar o desempenho da renderização inicial da página, em que você só precisa saber se um usuário está conectado ou não e ler alguns dados do Firetore para exibir.

Nesta etapa, você vai aprender a usar o Firestore Lite para reduzir o tamanho do pacote a fim de acelerar a renderização da página inicial e, em seguida, carregar o SDK principal do Firestore dinamicamente para se inscrever em atualizações em tempo real.

Você vai refatorar o código para:

1. Mova os serviços em tempo real para um arquivo separado para que eles possam ser carregados dinamicamente usando a importação dinâmica.
2. Crie novas funções para usar o Firestore Lite e recuperar preços de ações e da lista de sites de interesse.
3. Use as novas funções do Firestore Lite para recuperar dados e fazer a renderização inicial da página. Em seguida, carregue dinamicamente os serviços em tempo real para detectar atualizações em tempo real.

Mover serviços em tempo real para um novo arquivo

1. Crie um novo arquivo com o nome src/services.realtime.ts..
2. Mova as funções subscribeToTickerChanges() e subscribeToAllTickerChanges() de src/services.ts para o novo arquivo.
3. Adicione as importações necessárias à parte de cima do novo arquivo.

Você ainda precisa fazer algumas mudanças aqui:

4. Primeiro, crie uma instância do Firestore a partir do SDK principal do Firestore na parte de cima do arquivo para ser usado nas funções. Não é possível importar a instância do Firestore de firebase.ts aqui porque ela será alterada para uma instância do Firestore Lite em algumas etapas, que será usada apenas para a renderização inicial da página.
5. Depois, remova a variável firstload e o bloco "if" protegido por ela. As funcionalidades serão movidas para novas funções que você vai criar na próxima etapa.

src/services.realtime.ts (link em inglês)

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);
   });
}

Usar o Firestore Lite para buscar dados

1. Abrir src/services.ts.
2. Mude o caminho de importação de ‘firebase/firestore' para ‘firebase/firestore/lite',, adicione getDoc e remova onSnapshot da lista de importação:

src/services.ts (link em inglês)

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. Adicione funções para buscar os dados necessários para a renderização da página inicial usando o Firestore Lite:

src/services.ts (link em inglês)

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. Abra src/firebase.ts e mude o caminho de importação de ‘firebase/firestore' para ‘firebase/firestore/lite':

src/firebase.ts (link em inglês)

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

Reúna tudo isso

1. Abrir src/main.ts.
2. Você vai precisar das funções recém-criadas para buscar dados da renderização inicial da página, além de algumas funções auxiliares para gerenciar o estado do app. Agora atualize as importações:

src/main.ts (link em inglês)

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. Carregue src/services.realtime usando uma importação dinâmica na parte de cima do arquivo. A variável loadRealtimeService é uma promessa que vai ser resolvida com os serviços em tempo real assim que o código for carregado. Você usará essa informação mais tarde para se inscrever nas atualizações em tempo real.

src/main.ts (link em inglês)

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

4. Mude o callback de onUserChange() para uma função async, para que possamos usar await no corpo da função:

src/main.ts (link em inglês)

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

5. Agora, busque os dados para fazer a renderização da página inicial usando as novas funções que criamos na etapa anterior.

No callback onUserChange(), encontre a condição "if" em que um usuário está conectado e copie e cole o código dentro da instrução if:

src/main.ts (link em inglês)

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. No bloco "else" em que nenhum usuário está conectado, busque as informações de preço de todas as ações usando o Firestore Lite, renderize a página e detecte as mudanças de preço assim que os serviços em tempo real forem carregados:

src/main.ts (link em inglês)

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 })
       });
   });
}

Consulte src/main.ts para ver o código finalizado.

Verificar se o app funciona

1. Execute npm run build para recriar o app.
2. Abra uma guia do navegador para http://localhost:8080 ou atualize a guia atual.

Verificar o tamanho do pacote

1. Abra o Chrome Devtools.
2. Alterne para a guia Rede.
3. Atualize a página para capturar solicitações de rede
4. Procure por main.js e verifique o tamanho dele.
5. Agora ele tem apenas 115 KB (34,5 KB comprimido com gzip). Isso é 75% menor do que o tamanho do pacote original, que era de 446 KB(138 KB compactado com gzip). Como resultado, o site está carregando mais de dois segundos mais rápido em conexão 3G, uma ótima melhoria no desempenho e na experiência do usuário.

8. Parabéns

Parabéns! Você fez upgrade do app, e ele ficou menor e mais rápido.

Você usou os pacotes de compatibilidade para fazer upgrade do app por partes, usou o Firestore Lite para acelerar a renderização da página inicial e carregou dinamicamente o Firestore principal para transmitir as mudanças de preço.

Você também reduziu o tamanho do pacote e melhorou o tempo de carregamento ao longo deste codelab:

Agora você conhece as principais etapas necessárias para fazer upgrade de um app da Web que usa o SDK do Firebase para JavaScript v8 para usar o novo SDK modular do JS.

Leia mais

• v8 -> Guia de upgrade para a v9
• Saiba mais sobre a v9
• Começar a usar a v9

Documentos de referência

• https://firebase.google.com/docs/reference/js/v9 (link em inglês)