Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

Actualice desde la versión 8 al Web SDK modular

Las aplicaciones que actualmente usan Firebase Web SDK versión 8 o anterior deben considerar migrar a la versión 9 siguiendo las instrucciones de esta guía.

Esta guía se supone que está familiarizado con la versión 8 y que va a tomar ventaja de un módulo bundler como webpack o paquete acumulativo para la actualización y la versión en curso de desarrollo 9.

Se recomienda encarecidamente utilizar un paquete de módulos en su entorno de desarrollo. Si no usa uno, no podrá aprovechar los principales beneficios de la versión 9 en el tamaño reducido de la aplicación. Tendrá que NPM o hilo para instalar el SDK.

Los pasos de actualización de esta guía se basarán en una aplicación web imaginaria que utiliza los SDK de autenticación y Cloud Firestore. Al trabajar con los ejemplos, puede dominar los conceptos y los pasos prácticos necesarios para actualizar todos los SDK de Firebase Web compatibles.

Acerca de las bibliotecas compatibles

Hay dos tipos de bibliotecas disponibles para Firebase Web SDK versión 9:

  • Modular - una nueva superficie API diseñada para facilitar sacudidor de árboles (eliminación de código no utilizado) para hacer su aplicación web tan pequeño y tan rápido como sea posible.
  • Compat - una superficie API familiar que es totalmente compatible con la versión 8 SDK, lo que le permite actualizar a la versión 9 sin cambiar todo el código Firebase a la vez. Las bibliotecas de compatibilidad tienen pocas o ninguna ventaja de tamaño o rendimiento sobre sus contrapartes de la versión 8.

Esta guía asume que aprovechará las bibliotecas de compatibilidad de la versión 9 para facilitar su actualización. Estas bibliotecas le permiten continuar usando el código de la versión 8 junto con el código refactorizado para la versión 9. Esto significa que puede compilar y depurar su aplicación más fácilmente mientras trabaja en el proceso de actualización.

Para las aplicaciones con una exposición muy pequeña al SDK de Firebase Web, por ejemplo, una aplicación que solo realiza una simple llamada a las API de autenticación, puede ser práctico refactorizar el código de la versión 8 sin usar las bibliotecas de compatibilidad de la versión 9. Si está actualizando una aplicación de este tipo, puede seguir las instrucciones de esta guía para la "versión 9 modular" sin utilizar las bibliotecas de compatibilidad.

Sobre el proceso de actualización

Cada paso del proceso de actualización tiene un alcance para que pueda terminar de editar el código fuente de su aplicación y luego compilarlo y ejecutarlo sin interrupciones. En resumen, esto es lo que hará para actualizar una aplicación:

  1. Agregue las bibliotecas de la versión 9 y las bibliotecas compatibles a su aplicación.
  2. Actualice las declaraciones de importación en su código a la compatibilidad v9.
  3. Refactorice el código para un solo producto (por ejemplo, autenticación) al estilo modular.
  4. Opcional: en este punto, elimine la biblioteca de compatibilidad de autenticación y el código de compatibilidad para la autenticación a fin de obtener el beneficio del tamaño de la aplicación para la autenticación antes de continuar.
  5. Refactorice las funciones de cada producto (por ejemplo, Cloud Firestore, FCM, etc.) al estilo modular, compilando y probando hasta que todas las áreas estén completas.
  6. Actualice el código de inicialización al estilo modular.
  7. Elimine todas las declaraciones de compatibilidad restantes de la versión 9 y el código de compatibilidad de su aplicación.

Obtenga la versión 9 del SDK

Para comenzar, obtenga las bibliotecas de la versión 9 y las bibliotecas de compatibilidad con npm:

npm i firebase@9.1.3

# OR

yarn add firebase@9.1.3

Actualizar las importaciones a la compatibilidad v9

Para mantener su código funcionando después de actualizar su dependencia de v8 a v9 beta, cambie sus declaraciones de importación para usar la versión "compat" de cada importación. Por ejemplo:

Antes: versión 8

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

Después: versión 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';

Refactorizar al estilo modular

Mientras que la versión 8 API se basan en un espacio de nombres y el servicio de patrón de puntos en cadena, la versión de 9 medios enfoque modular que su código se organizarán principalmente en torno a las funciones. En la versión 9, la firebase/app paquete y otros paquetes no devuelven una exportación completa que contiene todos los métodos del paquete. En cambio, los paquetes exportan funciones individuales.

En la versión 9, los servicios se pasan como primer argumento y la función luego usa los detalles del servicio para hacer el resto. Examinemos cómo funciona esto en dos ejemplos que refactorizan las llamadas a las API de autenticación y Cloud Firestore.

Ejemplo 1: refactorización de una función de autenticación

Antes: versión 9 compat

El código de compatibilidad de la versión 9 es idéntico al código de la versión 8, pero las importaciones han cambiado.

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

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

Después: versión 9 modular

El getAuth función toma firebaseApp como primer parámetro. El onAuthStateChanged función no está encadenada desde el auth ejemplo como lo sería en la versión 8; en cambio, es una función gratuita que lleva auth como primer parámetro.

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

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

Ejemplo 2: refactorización de una función de Cloud Firestore

Antes: versión 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);
    });

Después: versión 9 modular

El getFirestore función toma firebaseApp como primer parámetro, que se volvió de initializeApp en un ejemplo anterior. Tenga en cuenta que el código para formar una consulta es muy diferente en la versión 9; no hay encadenamiento, y métodos tales como la query o where están ahora expuestas como funciones libres.

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

Ejemplo 3: combinación de estilos de código de la versión 8 y la versión 9

El uso de las bibliotecas de compatibilidad durante la actualización le permite continuar usando el código de la versión 8 junto con el código refactorizado para la versión 9. Esto significa que puede mantener el código de la versión 8 existente para Cloud Firestore mientras refactoriza la autenticación u otro código del SDK de Firebase al estilo de la versión 9, y aún así compile correctamente su aplicación con ambos estilos de código. Lo mismo es cierto para la versión 8 y la versión 9 código dentro de un producto tal como la nube Firestore; Los estilos de código nuevos y antiguos pueden coexistir, siempre que esté importando los paquetes compatibles:

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

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

Tenga en cuenta que, aunque su aplicación se compilará, no obtendrá los beneficios del tamaño de la aplicación del código modular hasta que elimine por completo las declaraciones de compatibilidad y el código de su aplicación.

Actualizar el código de inicialización

Actualice el código de inicialización de su aplicación para usar la nueva sintaxis modular de la versión 9. Es importante actualizar el código después de haber completado la refactorización todo el código en su aplicación; esto se debe a firebase.initializeApp() inicializa el estado global tanto para el compat y las API modulares, mientras que el modular initializeApp() función inicializa sólo el estado de modular.

Antes: versión 9 compat

import firebase from "firebase/compat/app"

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

Después: versión 9 modular

import { initializeApp } from "firebase/app"

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

Quitar el código de compatibilidad

Para obtener los beneficios del tamaño de la versión 9 SDK modular, que finalmente debe convertir todas las invocaciones al estilo modular mostrado arriba y eliminar toda la import "firebase/compat/* declaraciones de su código. Cuando haya terminado, no debe sin estar más referencias a la firebase.* espacio de nombres global o cualquier otro código en el estilo SDK versión 8.

Usando la biblioteca compat desde la ventana

El SDK versión 9 está optimizado para trabajar con módulos, más que del navegador window objeto. Las versiones anteriores de la biblioteca permite la carga y gestión de Firebase utilizando el window.firebase espacio de nombres. Esto no se recomienda en el futuro, ya que no permite la eliminación de código no utilizado. Sin embargo, la versión del SDK compat JavaScript funciona con la window para los desarrolladores que prefieren no iniciar inmediatamente el proceso de actualización modular.

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

La biblioteca de compatibilidad utiliza el código modular de la versión 9 bajo el capó y le proporciona la misma API que la versión 8 SDK; esto significa que usted puede consultar la referencia de la API versión 8 y la versión 8 fragmentos de código para más detalles. Este método no se recomienda para un uso a largo plazo, sino como un comienzo para actualizar a la biblioteca de la versión 9 completamente modular.

Beneficios y limitaciones de la versión 9

La versión 9 completamente modular tiene estas ventajas sobre las versiones anteriores:

  • La versión 9 permite un tamaño de aplicación drásticamente reducido. Adopta el formato de módulo JavaScript moderno, lo que permite prácticas de "agitación de árboles" en las que importa solo los artefactos que necesita su aplicación. Dependiendo de su aplicación, agitar los árboles con la versión 9 puede resultar en un 80% menos de kilobytes que una aplicación comparable construida con la versión 8.
  • La versión 9 seguirá beneficiándose del desarrollo continuo de funciones, mientras que la versión 8 se congelará en el futuro.