En el caso de las apps que usan la versión 8 o una anterior del SDK web de Firebase, te recomendamos migrarlas a la versión 9 siguiendo las instrucciones de esta guía.
En este documento, se supone que conoces la versión 8 y que aprovecharás un agrupador de módulos (como webpack o Rollup) para actualizar y continuar el desarrollo de la versión 9.
Te recomendamos enfáticamente usar un agrupador de módulos en tu entorno de desarrollo. De lo contrario, no podrás aprovechar los beneficios principales de la versión 9 en cuanto a la reducción de tamaño de las apps. Necesitarás npm o yarn para instalar el SDK.
Los pasos de actualización de esta guía se basan en una app web imaginaria que usa los SDK de Authentication y de Cloud Firestore. Siguiendo los ejemplos, podrás dominar los conceptos y pasos prácticos necesarios para actualizar todos los SDK web compatibles de Firebase.
Acerca de las bibliotecas compatibles
Hay dos tipos de bibliotecas disponibles para la versión 9 del SDK web de Firebase:
- Modulares: Son nuevas plataformas de API diseñadas para facilitar la eliminación de código no utilizado a fin de que tu app web sea lo más pequeña y rápida posible.
- Compatibles: Son plataformas de API conocidas que tienen compatibilidad total con la versión 8 del SDK, lo que te permite actualizar a la versión 9 sin necesidad de cambiar todo el código de Firebase de una sola vez. Las bibliotecas compatibles tienen ventajas mínimas o nulas de tamaño o rendimiento en comparación con sus equivalentes de la versión 8.
En esta guía, se supone que aprovecharás las bibliotecas compatibles de la versión 9 para facilitar la actualización. Estas bibliotecas te permiten seguir usando el código de la versión 8 junto con el código refactorizado para la versión 9. Es decir, puedes compilar y depurar tu app con mayor facilidad durante el proceso de actualización.
En el caso de las apps que tienen una exposición muy pequeña al SDK web de Firebase (por ejemplo, una app que realiza solo una llamada simple a las API de Authentication), puede ser práctico refactorizar el código de la versión 8 sin usar las bibliotecas compatibles de la versión 9. Si actualizas una app de este tipo, puedes seguir las instrucciones de “versión 9 modular” de esta guía sin usar las bibliotecas compatibles.
Acerca del proceso de actualización
Cada paso del proceso de actualización está delimitado de manera que puedas terminar de editar el código fuente de tu app y, luego, compilarla y ejecutarla sin fallas. En resumen, la actualización de una app consta de estos pasos:
- Agrega las bibliotecas de la versión 9 y las bibliotecas compatibles a tu app.
- Actualiza las sentencias de importación del código al formato compatible de la v9.
- Refactoriza el código de un solo producto (por ejemplo, Authentication) con el estilo modular.
- Opcional: En este punto, quita la biblioteca y el código compatibles de Authentication para obtener el beneficio de tamaño de la app de Authentication antes de continuar.
- Refactoriza las funciones de cada producto (por ejemplo, Cloud Firestore, FCM, etc.) con el estilo modular. Compila y prueba el código hasta completar todas las áreas.
- Actualiza el código de inicialización con el estilo modular.
- Quita todas las sentencias y el código compatibles de la versión 9 de tu app.
Obtén el SDK de la versión 9
Para comenzar, obtén las bibliotecas modulares y compatibles de la versión 9 con npm:
npm i firebase@9.22.0 # OR yarn add firebase@9.22.0
Actualiza las importaciones a la v9 compatible
Para que tu código siga funcionando después de actualizar la dependencia de la v8 a la v9 beta, cambia las sentencias de importación para que se use 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: Compatible de la versión 9
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Refactoriza con el estilo modular
Si bien las API de la versión 8 se basan en un espacio de nombres y patrón de servicio de cadena de puntos,
el enfoque modular de la versión 9 implica que el código se organizará
principalmente en torno a las funciones. En la versión 9, el paquete firebase/app y
los demás no muestran 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 el primer argumento y, luego, la función usa los detalles del servicio para hacer el resto. Examinemos cómo funciona este enfoque en dos ejemplos que refactorizan las llamadas a las API de Authentication y de Cloud Firestore.
Ejemplo 1: Refactoriza una función de Authentication
Antes: Compatible de la versión 9
El código compatible de la versión 9 es idéntico al código de la versión 8, pero las importaciones cambiaron.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Después: Modular de la versión 9
La función getAuth acepta firebaseApp como primer parámetro.
La función
onAuthStateChanged no se encadena desde la instancia de auth como en
la versión 8. En cambio, es una función
libre que acepta auth como primer parámetro.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Actualiza el manejo del método Auth getRedirectResult
La versión 9 presenta un cambio rotundo en getRedirectResult. Cuando no se llama a ninguna operación de redireccionamiento, la versión 9 muestra null, a diferencia de la versión 8, que muestra un objeto UserCredential con un usuario null.
Antes: Compatible de la versión 9
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Después: Modular de la versión 9
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
Ejemplo 2: Refactoriza una función de Cloud Firestore
Antes: Compatible de la versión 9
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: Modular de la versión 9
La función getFirestore acepta firebaseApp como primer parámetro, que
se mostró desde initializeApp en un ejemplo anterior. Ten en cuenta que
el código para formar una consulta es muy diferente en la versión 9: no hay encadenamiento, y
los métodos como query o where ahora se exponen 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());
});
Actualiza las referencias a Firestore DocumentSnapshot.exists
La versión 9 presenta un cambio rotundo: la propiedad
firestore.DocumentSnapshot.exists se cambió a un método. La
funcionalidad es básicamente la misma (probar si existe un documento),
pero debes refactorizar tu código para usar el método de la versión 9 como se muestra a continuación:
Antes: Compatible de la versión 9
if (snapshot.exists) {
console.log("the document exists");
}
Después: Modular de la versión 9
if (snapshot.exists()) {
console.log("the document exists");
}
Ejemplo 3: Combina los estilos de código de las versiones 8 y 9
Usar las bibliotecas compatibles durante la actualización te permite seguir utilizando el código de la versión 8 junto con el código refactorizado para la versión 9. Por ello, puedes conservar el código existente de la versión 8 de Cloud Firestore mientras refactorizas el código de Authentication o el de cualquier SDK de Firebase con el estilo de la versión 9 y, de todos modos, compilar correctamente tu app con ambos estilos de código. Lo mismo ocurre con el código de las versiones 8 y 9 de un producto como Cloud Firestore. Pueden coexistir los estilos nuevo y antiguo, siempre que importes 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);
Ten en cuenta que, si bien se compilará la app, no obtendrás los beneficios de tamaño de la app que brinda el código modular hasta que quites de ella todas las sentencias y el código compatibles.
Actualiza el código de inicialización
Actualiza el código de inicialización de tu app con la sintaxis de la nueva versión 9 modular. Es
importante que lo hagas después de completar la refactorización de todo el
código de la app, ya que firebase.initializeApp() inicializa el estado global
de las API modulares y las compatibles, mientras que la función modular
initializeApp() inicializa solo el estado de las API modulares.
Antes: Compatible de la versión 9
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Después: Modular de la versión 9
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Quita el código compatible
Si quieres obtener los beneficios de tamaño que brinda el SDK modular de la versión 9, en algún momento, debes
convertir todas las invocaciones al estilo modular que se indicó anteriormente y quitar todas las
sentencias import "firebase/compat/* de tu código. Cuando finalices, no debería
haber más referencias al espacio de nombres global firebase.* ni ningún otro
código con el estilo de SDK de la versión 8.
Usa la biblioteca de compatibilidad desde la ventana
El SDK de la versión 9 está optimizado para funcionar con módulos en lugar de con el objeto window
del navegador. Las versiones anteriores de la biblioteca permitían la carga y
la administración de Firebase con el espacio de nombres window.firebase. Esto no se
recomienda de ahora en adelante, ya que no permite la eliminación de código no utilizado.
Sin embargo, la versión compatible del SDK de JavaScript funciona con window
para los desarrolladores que prefieren no comenzar de inmediato la ruta de actualización modular.
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/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 usa el código modular de la versión 9 de forma interna y proporciona la misma API que el SDK de la versión 8. Esto significa que puedes consultar la referencia de la API de la versión 8 y los fragmentos de código de ella para obtener más detalles. Este método no se recomienda para uso a largo plazo, pero sí como inicio de la actualización a la biblioteca de la versión 9 completamente modular.
Beneficios y limitaciones de la versión 9
La versión 9 totalmente modularizada tiene las siguientes ventajas sobre las versiones anteriores:
- La versión 9 permite disminuir sustancialmente el tamaño de las apps. Adopta el formato moderno de módulos de JavaScript, lo que permite las prácticas de eliminación de código no utilizado, en las que importas solo los artefactos que necesita tu app. Según tu app, la eliminación de código no utilizado con la versión 9 puede reducir hasta en un 80% el tamaño en kilobytes de una app comparable compilada 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 un momento futuro.