Fazer upgrade para o SDK modular da Web (v9)

Os apps que atualmente usam o SDK da Web versão 8 ou anterior precisam considerar a migração para versão 9 usando as instruções deste guia.

Este guia pressupõe que você já conhece a versão 8 e que vai usar um bundler de módulo, como webpack ou Rollup (links em inglês), para fazer upgrade e usar a versão 9.

É altamente recomendável usar um bundler de módulos no ambiente de desenvolvimento. Se você não usar um, não será possível aproveitar a funcionalidade principal da versão 9 benefícios com o tamanho reduzido do app. Você vai precisar de npm ou yarn para instalar o SDK.

Sobre as bibliotecas de compatibilidade

Há dois tipos de bibliotecas disponíveis para o SDK da Web versão 9:

  • Modular: uma nova superfície de API projetada para facilitar o tree shaking (remoção de código não utilizado) para deixar seu app da Web o mais pequeno e rápido possível.
  • Compat: uma plataforma de API conhecida que é totalmente compatível com que permitem que você faça upgrade para a versão 9 sem alterar código do SDK de uma só vez. Quase não há diferenças de tamanho ou desempenho entre essas bibliotecas e as usadas na versão 8.

Este guia pressupõe que você aproveitará as bibliotecas de compatibilidade da versão 9 para facilitar seu upgrade. Essas bibliotecas permitem que você continue usando o código da versão 8 com o código refatorado para a versão 9. Isso significa que é possível compilar e depurar o app mais facilmente enquanto trabalha no processo de upgrade.

Para aplicativos com uma exposição muito pequena ao SDK da Web, pode ser prático refatorar o código da versão 8 sem usar as bibliotecas de compatibilidade da versão 9. Se você estiver fazendo upgrade desse app, siga as instruções do guia para a "versão 9 modular" sem usar as bibliotecas de compatibilidade.

Sobre o processo de upgrade

O escopo de cada etapa do upgrade é definido para que você possa terminar de editar o código-fonte do app e, em seguida, compilar e executá-lo sem interrupções. Veja um resumo das etapas do upgrade de um app:

  1. Adicionar as bibliotecas da versão 9 e as bibliotecas de compatibilidade ao app.
  2. Atualizar as instruções de importação no seu código para compatibilidade com a v9.
  3. Refatorar o código para o estilo modular.
  4. Remova a biblioteca de compatibilidade e o código de compatibilidade do Authentication para reduzir o tamanho do app.
  5. Atualizar o código de inicialização para o estilo modular.
  6. Remover do app todos os códigos e instruções de compatibilidade restantes referentes à versão 9.

Obter o SDK da versão 9

Para começar, use o npm para instalar as bibliotecas da versão 9 e as de compatibilidade: (versão mais recente https://www.npmjs.com/package/firebase):

npm i firebase@10.14.0

# OR

yarn add firebase@10.14.0

Atualizar importações para serem compatíveis com a v9

Para que o código continue funcionando depois de atualizar a dependência da v8 para a v9, altere as instruções de importação para usar a versão "compat" de cada importação. Exemplo:

Antes: versão 8

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

Depois: compatibilidade com a versão 9

// 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

As APIs da versão 8 são baseadas em um namespace e padrão de serviço encadeados por pontos. Já com a abordagem modular da versão 9, seu código será organizado principalmente em torno de funções. Na versão 9, o pacote firebase/app e outros pacotes não retornam uma exportação abrangente que contém todos os métodos do pacote. Os pacotes exportam funções individuais.

Na versão 9, os serviços são transmitidos como o primeiro argumento e, em seguida, a função usa os detalhes do serviço para fazer o resto.

Exemplo: refatoração de uma função simples do Authentication

Antes: compatibilidade com a versão 9

O código de compatibilidade da versão 9 é idêntico ao código da versão 8, mas as importações foram alteradas. Usar as bibliotecas de compatibilidade durante o upgrade permite que você continue usando o código da versão 8 com o código refatorado para a versão 9.

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

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

Depois: modular da versão 9

A função getAuth usa firebaseApp como seu primeiro parâmetro. O A função onAuthStateChanged não é encadeada na instância de autenticação como faria estar na versão 8; ela é uma função livre que usa auth como a primeira .

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

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

Atualizar código de inicialização

Atualize o código de inicialização do app para usar a nova sintaxe da versão 9 modular. É importante atualizar esse código depois de concluir a refatoração de todo o código no app, porque firebase.initializeApp() inicializa o estado global das APIs modulares e de compatibilidade, enquanto a função initializeApp() modular inicializa somente o estado para modular.

Antes: compatibilidade com a versão 9

import firebase from "firebase/compat/app"

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

Depois: modular da versão 9

import { initializeApp } from "firebase/app"

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

Remover código de compatibilidade

Para saber os benefícios de tamanho do SDK modular da versão 9, você precisa converter todas as invocações para o estilo modular mostrado acima e remover todas as instruções import "firebase/compat/* do código. Quando terminar, não haverá mais referências ao namespace global firebase.* nem a qualquer outro código no estilo do SDK da versão 8.

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

A versão 9 totalmente modular tem as seguintes vantagens em relação às versões anteriores:

  • A versão 9 oferece um tamanho de app significativamente reduzido. Ele adota o formato moderno de módulo JavaScript, o que permite práticas de tree shaking em que você importa apenas os artefatos necessários para o app. Dependendo do seu app, o "tree shaking" com a versão 9 pode resultar em 80% menos kilobytes do que um app comparável criado com a versão 8.
  • A versão 9 continuará se beneficiando do desenvolvimento contínuo de recursos, enquanto a versão 8 será congelada futuramente.