Esta página foi traduzida pela API Cloud Translation.

Turbine seu aplicativo da Web migrando para o SDK modular do Firebase JS

1. Antes de começar

O SDK JS modular do Firebase é uma reescrita do SDK JS existente e será lançado como a próxima versão principal. Ele permite que os desenvolvedores excluam código não utilizado do Firebase JS SDK para criar pacotes menores e obter melhor desempenho.

A diferença mais notável no JS SDK modular é que os recursos agora são organizados em funções flutuantes que você importará, em vez de em um único namespace firebase que inclui tudo. Essa nova forma de organização do código é o que permite a agitação da árvore, e você aprenderá como atualizar qualquer aplicativo que atualmente usa o SDK JS do Firebase v8 para o novo modular.

Para fornecer um processo de atualização tranquilo, é fornecido um conjunto de pacotes de compatibilidade. Neste codelab, você aprenderá a usar os pacotes de compatibilidade para portar o app peça por peça.

O que você construirá

Neste codelab, você migrará gradualmente um app da Web de lista de observação de ações existente que usa o SDK JS v8 para o novo SDK JS modular em três etapas:

Atualize o aplicativo para usar os pacotes de compatibilidade
Atualize o aplicativo dos pacotes de compatibilidade para a API modular, peça por peça
Use o Firestore Lite, uma implementação leve do SDK do Firestore, para melhorar ainda mais o desempenho do aplicativo

Este codelab se concentra na atualização do SDK do Firebase. Outros conceitos e blocos de código são encobertos e fornecidos para você simplesmente copiar e colar.

O que você precisará

Um navegador de sua preferência, como o Chrome
O IDE/editor de texto de sua escolha, como WebStorm , Atom , Sublime ou VS Code
O gerenciador de pacotes npm , que normalmente vem com o Node.js
O código de amostra do codelab (veja a próxima etapa do codelab para saber como conseguir o código).

2. Prepare-se

Obtenha o código

Tudo que você precisa para este projeto reside em um repositório Git. Para começar, você precisará pegar o código e abri-lo em seu ambiente de desenvolvimento favorito.

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

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

Alternativamente, se você não tiver o git instalado, você pode baixar o repositório como um arquivo ZIP e descompactar o arquivo zip baixado.

Importe o aplicativo

Usando seu IDE, abra ou importe o diretório codelab-modular-sdk .
Execute npm install para instalar as dependências necessárias para compilar e executar o aplicativo localmente.
Execute npm run build para criar o aplicativo.
Execute npm run serve para iniciar o servidor web
Abra uma guia do navegador para http://localhost:8080

3. Estabeleça uma linha de base

Qual é o seu ponto de partida?

Seu ponto de partida é um aplicativo de lista de ações desenvolvido para este codelab. O código foi simplificado para ilustrar os conceitos deste codelab e tem pouco tratamento de erros. Se você optar por reutilizar qualquer um desses códigos em um aplicativo de produção, certifique-se de lidar com quaisquer erros e testar completamente todo o código.

Certifique-se de que tudo funciona no aplicativo:

Faça login anonimamente usando o botão de login no canto superior direito.
Após fazer login, pesquise e adicione “NFLX”, “SBUX” e “T” à lista de observação clicando no botão Adicionar , digitando as letras e clicando na linha do resultado da pesquisa que aparece abaixo.
Remova uma ação da lista de observação clicando no x no final da linha.
Assista às atualizações em tempo real do preço das ações.
Abra o Chrome DevTools, vá para a guia Rede e marque Disable cache e Use large request rows . Desabilitar o cache garante que sempre obtenhamos as alterações mais recentes após uma atualização e Usar linhas de solicitação grandes faz com que a linha exiba o tamanho transmitido e o tamanho do recurso para um recurso. Neste codelab, estamos interessados principalmente no tamanho de main.js .

Carregue o aplicativo em diferentes condições de rede usando aceleração simulada. Você usará o Slow 3G para medir o tempo de carregamento neste codelab porque é onde um pacote menor ajuda mais.

Agora entre e comece a migrar o aplicativo para a nova API modular.

4. Use os pacotes de compatibilidade

Os pacotes de compatibilidade permitem atualizar para a nova versão do SDK sem alterar todo o código do Firebase de uma só vez. Você pode atualizá-los para a API modular gradualmente.

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

No final de cada etapa, você poderá compilar e executar o aplicativo sem interrupções e observar uma diminuição no tamanho do pacote à medida que migramos cada produto.

Obtenha o novo SDK

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

pacote.json

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

Reinstale as dependências

Como alteramos a versão da dependência, precisamos executar novamente npm install para obter a nova versão da dependência.

Alterar caminhos de importação

Os pacotes de compatibilidade são expostos no submódulo firebase/compat , portanto, atualizaremos os caminhos de importação de acordo:

Vá para o arquivo src/firebase.ts
Substitua as importações existentes pelas seguintes importações:

src/firebase.ts

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

Verifique se o aplicativo funciona

Execute npm run build para reconstruir o aplicativo.
Abra uma guia do navegador em http://localhost:8080 ou atualize a guia existente.
Brinque com o aplicativo. Tudo ainda deveria estar funcionando.

5. Atualize o Auth para usar a API modular

Você pode atualizar os produtos do Firebase em qualquer ordem. Neste codelab, você primeiro atualizará o Auth para aprender os conceitos básicos, porque a API Auth é relativamente simples. Atualizar o Firestore é um pouco mais complicado e você aprenderá como fazer isso a seguir.

Atualizar inicialização do Auth

Vá para o arquivo src/firebase.ts
Adicione a seguinte importação:

src/firebase.ts

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

Exclua import 'firebase/compat/auth'.
Substitua export const firebaseAuth = app.auth(); com:

src/firebase.ts

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

Remover export type User = firebase.User; no final do arquivo. User será exportado diretamente em src/auth.ts , que você alterará a seguir.

Atualizar código de autenticação

Vá para o arquivo src/auth.ts
Adicione as seguintes importações ao início do arquivo:

src/auth.ts

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

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

Como você já viu antes, quando atualizamos a instrução import, os pacotes na versão 9 são organizados em torno de funções que você pode importar, em contraste com as APIs da versão 8, que são baseadas em um namespace e padrão de serviço encadeados por pontos. É essa nova organização de código que permite a organização do código não utilizado, porque permite construir ferramentas para analisar qual código é usado e qual não é.

Na versão 9, os serviços são passados como primeiro argumento para as funções. Serviços são os objetos que você obtém ao inicializar um serviço do Firebase, por exemplo, o objeto retornado de getAuth() ou initializeAuth() . Eles mantêm o estado de um serviço específico do Firebase, e a função usa o estado para executar suas tarefas. Vamos aplicar esse padrão para implementar as seguintes funções:

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

Verifique se o aplicativo funciona

Execute npm run build para reconstruir o aplicativo.
Abra uma guia do navegador em http://localhost:8080 ou atualize a guia existente
Brinque com o aplicativo. Tudo ainda deveria estar funcionando.

Verifique o tamanho do pacote

Abra o Chrome DevTools.
Mude para a guia Rede .
Atualize a página para capturar solicitações de rede.
Procure main.js e verifique seu tamanho. Você reduziu o tamanho do pacote em 100 KB (36 KB compactados com gzip), ou cerca de 22% menor, alterando apenas algumas linhas de código! O site também carrega 0,75s mais rápido em uma conexão 3G lenta.

6. Atualize o Firebase App e o Firestore para usar a API modular

Atualizar inicialização do Firebase

Vá para o arquivo src/firebase.ts.
Substitua import firebase from 'firebase/compat/app'; com:

src/firebase.ts

import { initializeApp } from 'firebase/app';

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

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

Atualizar inicialização do Firestore

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

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

Substitua export const firestore = app.firestore(); com:

src/firebase.ts

export const firestore = getFirestore();

Remova todas as linhas após " export const firestore = ... "

Atualizar importações

Abra o arquivo src/services.ts.
Remova FirestoreFieldPath , FirestoreFieldValue e QuerySnapshot da importação. A importação de './firebase' agora deve ter a seguinte aparência:

src/services.ts

import { firestore } from './firebase';

Importe as funções e tipos que você usará no topo do arquivo:

    **src/services.ts**

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

Atualizar pesquisa()

Crie uma referência para a coleção que contém todos os tickers:

src/services.ts

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

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

src/services.ts

const tickers = await getDocs(tickersCollRef);

Veja search() para o código finalizado.

Atualizar addToWatchList()

Use doc() para criar uma referência de documento para a lista de observação do usuário e, em seguida, adicione um ticker a ela usando setDoc() com 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 });
}

Atualizar deleteFromWatchList()

Da mesma forma, remova um ticker da lista de observação do usuário usando setDoc() com 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 });
}

Atualizar subscribeToTickerChanges()

Use doc() para criar primeiro uma referência de documento para a lista de observação do usuário e, em seguida, ouça as alterações da lista de observação usando onSnapshot() :

src/services.ts

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

Depois de ter os tickers na lista de observação, use query() para criar uma consulta para buscar seus preços e use onSnapshot() para ouvir suas alterações de preços:

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

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

Atualizar subscribeToAllTickerChanges()

Primeiro, você usará collection() para criar uma referência à coleção que contém os preços de todos os tickers e, em seguida, usará onSnapshot() para ouvir as alterações de preço:

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

Verifique se o aplicativo funciona

Execute npm run build para reconstruir o aplicativo.
Abra uma guia do navegador em http://localhost:8080 ou atualize a guia existente
Brinque com o aplicativo. Tudo ainda deveria estar funcionando.

Verifique o tamanho do pacote

Abra o Chrome DevTools.
Mude para a guia Rede .
Atualize a página para capturar solicitações de rede.
Procure main.js e verifique seu tamanho. Compare-o novamente com o tamanho do pacote original - reduzimos o tamanho do pacote em mais de 200 KB (63,8 KB compactados com gzip), ou 50% menor, o que se traduz em um tempo de carregamento 1,3s mais rápido!

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

O que é Firestore Lite?

O SDK do Firestore oferece cache complexo, streaming em tempo real, armazenamento persistente, sincronização offline com várias guias, novas tentativas, simultaneidade otimista e muito mais e, portanto, é bastante grande. Mas você pode simplesmente querer obter os dados uma vez, sem precisar de nenhum dos recursos avançados. Para esses casos, a Firestore criou uma solução simples e leve, um pacote totalmente novo – Firestore Lite.

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

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

Você refatorará o código para:

Mova serviços em tempo real para um arquivo separado, para que possam ser carregados dinamicamente usando importação dinâmica.
Crie novas funções para usar o Firestore Lite para recuperar listas de observação e preços de ações.
Use as novas funções do Firestore Lite para recuperar dados para fazer a renderização inicial da página e, em seguida, carregar dinamicamente os serviços em tempo real para ouvir atualizações em tempo real.

Mova serviços em tempo real para um novo arquivo

Crie um novo arquivo chamado src/services.realtime.ts.
Mova as funções subscribeToTickerChanges() e subscribeToAllTickerChanges() de src/services.ts para o novo arquivo.
Adicione as importações necessárias ao topo do novo arquivo.

Você ainda precisa fazer algumas alterações aqui:

Primeiro, crie uma instância do Firestore a partir do SDK principal do Firestore na parte superior do arquivo a ser usado nas funções. Você não pode importar a instância do Firestore de firebase.ts aqui porque você irá alterá-la para uma instância do Firestore Lite em algumas etapas, que será usada apenas para a renderização inicial da página.
Segundo, livre-se da variável firstload e do bloco if protegido por ela. Suas funcionalidades serão movidas para novas funções que você criará na próxima etapa.

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

Use o Firestore Lite para buscar dados

Abra src/services.ts.
Altere 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

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

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

Abra src/firebase.ts e altere o caminho de importação de 'firebase/firestore' para 'firebase/firestore/lite':

src/firebase.ts

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

Amarre-os todos juntos

Abra src/main.ts.
Você precisará das funções recém-criadas para buscar dados para a renderização inicial da página e de algumas funções auxiliares para gerenciar o estado do aplicativo. Então agora atualize as importações:

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

Carregue src/services.realtime usando uma importação dinâmica na parte superior do arquivo. A variável loadRealtimeService é uma promessa que será resolvida com os serviços em tempo real assim que o código for carregado. Você o usará mais tarde para assinar atualizações em tempo real.

src/main.ts

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

Altere o retorno de chamada de onUserChange() para uma função async , para que possamos usar await no corpo da função:

src/main.ts

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

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

No retorno de chamada onUserChange() , encontre a condição if em que um usuário está logado e copie e cole o código dentro da instrução 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   
   }
}

No bloco else, onde nenhum usuário está logado, busque informações de preços de todas as ações usando o firestore lite, renderize a página e ouça as alterações de preço assim que os serviços em tempo real forem carregados:

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

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

Verifique se o aplicativo funciona

Execute npm run build para reconstruir o aplicativo.
Abra uma guia do navegador em http://localhost:8080 ou atualize a guia existente.

Verifique o tamanho do pacote

Abra o Chrome Devtools.
Mude para a guia Rede .
Atualize a página para capturar solicitações de rede
Procure main.js e verifique seu tamanho.
Agora são apenas 115 KB (34,5 KB compactados). Isso é 75% menor que o tamanho do pacote original, que era de 446 KB (138 KB compactado)! Como resultado, o site carrega 2s mais rápido na conexão 3G - uma grande melhoria no desempenho e na experiência do usuário!

8. Parabéns

Parabéns, você atualizou o aplicativo com sucesso e o tornou menor e mais rápido!

Você usou os pacotes de compatibilidade para atualizar o aplicativo peça por peça e usou o Firestore Lite para acelerar a renderização inicial da página e, em seguida, carregou dinamicamente o Firestore principal para transmitir as alterações de preço.

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

principal.js	tamanho do recurso (kb)	tamanho compactado (kb)	tempo(s) de carregamento (acima de 3g lento)
v8	446	138	4,92
compatibilidade v9	429	124	4,65
v9 apenas autenticação modular	348	102	4.2
v9 totalmente modular	244	74,6	3,66
v9 totalmente modular + Firestore Lite	117	34,9	2,88

Agora você conhece as principais etapas necessárias para atualizar um aplicativo da Web que usa o SDK JS do Firebase v8 para usar o novo SDK JS modular.

Leitura adicional

Documentos de referência

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