O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Faça upgrade da versão 8 para o Web SDK modular

Os aplicativos que atualmente usam o Firebase Web SDK versão 8 ou anterior devem considerar a migração para a versão 9 usando as instruções neste guia.

Este guia assume que você está familiarizado com a versão 8 e que vai tirar vantagem de um módulo bundler como Webpack ou Rollup para a modernização e a versão em curso 9 desenvolvimento.

O uso de um empacotador de módulo em seu ambiente de desenvolvimento é altamente recomendado. Se você não usar um, não poderá aproveitar as vantagens dos principais benefícios da versão 9 no tamanho reduzido do aplicativo. Você vai precisar de npm ou fio para instalar o SDK.

As etapas de atualização neste guia serão baseadas em um aplicativo da web imaginário que usa os SDKs de autenticação e Cloud Firestore. Ao trabalhar com os exemplos, você pode dominar os conceitos e etapas práticas necessárias para atualizar todos os Firebase Web SDKs compatíveis.

Sobre as bibliotecas compat

Existem dois tipos de bibliotecas disponíveis para o Firebase Web SDK versão 9:

  • Modular - uma superfície nova API projetado para facilitar a agitação árvore (remoção de código não utilizado) para tornar a sua aplicação web tão pequeno e rápido possível.
  • Compat - uma superfície API familiarizado que é totalmente compatível com a versão 8 SDK, permitindo que você atualizar para a versão 9, sem alterar todo o seu código Firebase ao mesmo tempo. Bibliotecas de compatibilidade têm pouco ou nenhum tamanho ou vantagens de desempenho em relação às suas contrapartes da versão 8.

Este guia presume que você aproveitará as vantagens das bibliotecas compat da versão 9 para facilitar sua atualização. Essas bibliotecas permitem que você continue usando o código da versão 8 junto com o código refatorado para a versão 9. Isso significa que você pode compilar e depurar seu aplicativo com mais facilidade à medida que trabalha no processo de atualização.

Para aplicativos com uma exposição muito pequena ao Firebase Web SDK - por exemplo, um aplicativo que faz apenas uma chamada simples para as APIs de autenticação - pode ser prático refatorar o código da versão 8 sem usar as bibliotecas compat da versão 9. Se você estiver atualizando esse aplicativo, pode seguir as instruções neste guia para a "versão 9 modular" sem usar as bibliotecas compat.

Sobre o processo de atualização

Cada etapa do processo de atualização tem o escopo definido para que você possa terminar de editar o código-fonte do seu aplicativo e, em seguida, compilá-lo e executá-lo sem interrupções. Em resumo, aqui está o que você fará para atualizar um aplicativo:

  1. Adicione as bibliotecas da versão 9 e as bibliotecas compat ao seu aplicativo.
  2. Atualize as instruções de importação em seu código para compatibilidade v9.
  3. Refatore o código de um único produto (por exemplo, Autenticação) para o estilo modular.
  4. Opcional: neste ponto, remova a biblioteca de compatibilidade de autenticação e o código de compatibilidade para autenticação a fim de perceber o benefício de tamanho do aplicativo para autenticação antes de continuar.
  5. Refatorar funções para cada produto (por exemplo, Cloud Firestore, FCM, etc.) para o estilo modular, compilando e testando até que todas as áreas sejam concluídas.
  6. Atualize o código de inicialização para o estilo modular.
  7. Remova todas as declarações de compatibilidade da versão 9 restantes e o código de compatibilidade do seu aplicativo.

Obtenha a versão 9 do SDK

Para começar, obtenha as bibliotecas da versão 9 e bibliotecas compat usando npm:

npm i firebase@9.1.0

# OR

yarn add firebase@9.1.0

Atualize as importações para compat v9

Para manter seu código funcionando após atualizar sua dependência de v8 para v9 beta, altere suas instruções de importação para usar a versão "compat" de cada importação. Por exemplo:

Antes: versão 8

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

Depois: versão 9 compat

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

Refatorar para o estilo modular

Enquanto a versão 8 APIs são baseados em um namespace e serviço padrão acorrentado pontos, versão 9 do meio abordagem modular que seu código será organizado principalmente em torno de funções. Na versão 9, o firebase/app pacote e outros pacotes não retornam uma exportação abrangente que contém todos os métodos do pacote. Em vez disso, os pacotes exportam funções individuais.

Na versão 9, os serviços são passados ​​como o primeiro argumento e a função usa os detalhes do serviço para fazer o resto. Vamos examinar como isso funciona em dois exemplos que refatoram chamadas para as APIs de autenticação e Cloud Firestore.

Exemplo 1: refatorando uma função de autenticação

Antes: versão 9 compat

O código de compatibilidade da versão 9 é idêntico ao código da versão 8, mas as importações foram alteradas.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

Depois: versão 9 modular

O getAuth função toma firebaseApp como seu primeiro parâmetro. O onAuthStateChanged função não está presa a partir da auth exemplo, como seria em versão 8; Ao contrário, é uma função livre que leva auth como seu primeiro parâmetro.

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

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

Exemplo 2: refatoração de uma função do Cloud Firestore

Antes: versão 9 compat

import "firebase/compat/firestore"

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

Depois: versão 9 modular

O getFirestore função toma firebaseApp como seu primeiro parâmetro, que foi devolvido a partir initializeApp em um exemplo anterior. Observe como o código para formar uma consulta é muito diferente na versão 9; não há nenhum encadeamento, e os métodos tal como query ou where estão agora expostas como funções livres.

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

const db = getFirestore(firebaseApp);

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

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

Exemplo 3: combinação dos estilos de código da versão 8 e da versão 9

Usar as bibliotecas de compatibilidade durante o upgrade permite que você continue usando o código da versão 8 junto com o código refatorado para a versão 9. Isso significa que você pode manter o código da versão 8 existente para o Cloud Firestore enquanto refatora a autenticação ou outro código do Firebase SDK para o estilo da versão 9, e ainda compilar com sucesso seu aplicativo com os dois estilos de código. O mesmo é verdade para a versão 8 e 9 versão de código dentro de um produto, tais como Nuvem Firestore; estilos de código novos e antigos podem coexistir, desde que você importe os pacotes compat:

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

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

Lembre-se de que, embora seu aplicativo seja compilado, você não obterá os benefícios de tamanho de aplicativo do código modular até que remova totalmente as instruções compat e o código de seu aplicativo.

Atualizar o código de inicialização

Atualize o código de inicialização do seu aplicativo para usar a nova sintaxe modular da versão 9. É importante atualizar este código depois de ter concluído refatoração todo o código em seu aplicativo; isso é porque firebase.initializeApp() inicializa o estado global, tanto para o compat e APIs modulares, enquanto que a modular initializeApp() função inicializa apenas o estado para modular.

Antes: versão 9 compat

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

Depois: versão 9 modular

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

Remova o código compat

Para perceber os benefícios do tamanho do SDK modular versão 9, você deve, eventualmente, converter todas as invocações ao estilo modular mostrado acima e remover todo o import "firebase/compat/* declarações do seu código. Quando você é feito, há não deve ser mais referências ao firebase.* namespace global ou qualquer outro código no estilo SDK versão 8.

Usando a biblioteca compat da janela

O SDK versão 9 é otimizado para trabalhar com módulos, em vez de do navegador window objeto. As versões anteriores da biblioteca permitiu o carregamento e gestão de Firebase usando a window.firebase namespace. Isso não é recomendado daqui para frente, pois não permite a eliminação de código não utilizado. No entanto, a versão compat do JavaScript SDK funciona com a window para os desenvolvedores que preferem não começar imediatamente o caminho de atualização modular.

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

A biblioteca de compatibilidade usa o código modular da versão 9 sob o capô e fornece a mesma API do SDK da versão 8; isso significa que você pode consultar a referência API versão 8 e versão 8 trechos de código para mais detalhes. Este método não é recomendado para uso a longo prazo, mas como um início para atualizar para a biblioteca totalmente modular da versão 9.

Benefícios e limitações da versão 9

A versão 9 totalmente modularizada tem estas vantagens em relação às versões anteriores:

  • A versão 9 permite um tamanho de aplicativo drasticamente reduzido. Ele adota o formato de módulo JavaScript moderno, permitindo práticas de "agitação de árvore" nas quais você importa apenas os artefatos de que seu aplicativo precisa. Dependendo do seu aplicativo, o tremor de árvore com a versão 9 pode resultar em 80% menos kilobytes do que um aplicativo comparável construído com a versão 8.
  • A versão 9 continuará a se beneficiar do desenvolvimento contínuo de recursos, enquanto a versão 8 será congelada em um ponto no futuro.