Actualizar al SDK web modular (versión 9)
Las aplicaciones que actualmente usan la versión 8 o una anterior del SDK web deberían migrar a la versión 9 siguiendo las instrucciones de esta guía.
En esta guía se da por hecho que conoces la versión 8 y que vas a usar una herramienta de creación de bundles, como webpack o Rollup, para actualizar a la versión 9 y seguir desarrollando en ella.
Te recomendamos encarecidamente que uses un paquete de módulos en tu entorno de desarrollo. Si no usas una, no podrás aprovechar las principales ventajas de la versión 9, como el tamaño reducido de las aplicaciones. Necesitarás npm o yarn para instalar el SDK.
Acerca de las bibliotecas de compatibilidad
Hay dos tipos de bibliotecas disponibles para la versión 9 del SDK web:
- Modular: una nueva superficie de API diseñada para facilitar la eliminación de código no utilizado (tree-shaking) y hacer que tu aplicación web sea lo más pequeña y rápida posible.
- Compat una superficie de API familiar que es totalmente compatible con la versión 8, lo que te permite actualizar a la versión 9 sin cambiar todo el código del SDK a la vez. Las bibliotecas de compatibilidad tienen pocas o ninguna ventaja en cuanto a tamaño o rendimiento con respecto a sus equivalentes de la versión 8.
En esta guía se da por hecho que aprovecharás las bibliotecas de compatibilidad de la versión 9 para facilitar la actualización. Estas bibliotecas te permiten seguir usando código de la versión 8 junto con código refactorizado para la versión 9. Esto significa que puedes compilar y depurar tu aplicación más fácilmente a medida que avanzas en el proceso de actualización.
En el caso de las aplicaciones con una exposición muy pequeña al SDK web, 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 vas a actualizar una aplicación de este tipo, puedes seguir las instrucciones de esta guía para la versión 9 modular sin usar las bibliotecas de compatibilidad.
Información sobre el proceso de actualización
Cada paso del proceso de actualización se ha diseñado para que puedas terminar de editar el código fuente de tu aplicación y, a continuación, compilarlo y ejecutarlo sin que se produzcan errores. En resumen, para actualizar una aplicación, debes hacer lo siguiente:
- Añade las bibliotecas de la versión 9 y las bibliotecas de compatibilidad a tu aplicación.
- Actualiza las instrucciones de importación de tu código a la versión 9.
- Refactoriza el código al estilo modular.
- Quita la biblioteca de compatibilidad de autenticación y el código de compatibilidad de autenticación para reducir el tamaño de la aplicación.
- Actualiza el código de inicialización al estilo modular.
- Elimina todas las instrucciones y el código de compatibilidad de la versión 9 que queden de tu aplicación.
Obtener el SDK de la versión 9
Para empezar, obtén las bibliotecas de la versión 9 y las bibliotecas de compatibilidad mediante npm (versión más reciente: https://www.npmjs.com/package/firebase):
npm i firebase@12.2.1
# OR
yarn add firebase@12.2.1
Actualizar las importaciones para que sean compatibles con la versión 9
Para que tu código siga funcionando después de actualizar tu dependencia de la versión 8 a la 9, cambia tus instrucciones 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: compatibilidad con 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';
Refactorizar al estilo modular
Mientras que las APIs de la versión 8 se basan en un espacio de nombres y un servicio encadenados por puntos, el enfoque modular de la versión 9 implica que tu código se organizará principalmente en torno a funciones. En la versión 9, el paquete firebase/app y otros paquetes no devuelven una exportación completa que contenga todos los métodos del paquete. En su lugar, los paquetes exportan funciones individuales.
En la versión 9, los servicios se transfieren como primer argumento y, a continuación, la función usa los detalles del servicio para hacer el resto.
Ejemplo: refactorización de una función de autenticación sencilla
Antes: compatibilidad con la versión 9
El código de compatibilidad de la versión 9 es idéntico al de la versión 8, pero las importaciones han cambiado. Si usas las bibliotecas de compatibilidad durante la actualización, podrás seguir usando el código de la versión 8 junto con el código refactorizado para la versión 9.
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
La función getAuth usa firebaseApp como primer parámetro. La función onAuthStateChanged no se encadena desde la instancia de autenticación como en la versión 8, sino que es una función libre que toma auth como primer parámetro.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Actualizar el código de inicialización
Actualiza el código de inicialización de tu aplicación para usar la nueva sintaxis modular de la versión 9. Es importante actualizar este código después de refactorizar todo el código de tu aplicación, ya que firebase.initializeApp() inicializa el estado global de las APIs de compatibilidad y modulares, mientras que la función modular initializeApp() solo inicializa el estado de las APIs modulares.
Antes: compatibilidad con la versión 9
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Después: versión 9 modular
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Eliminar código de compatibilidad
Para disfrutar de las ventajas de tamaño del SDK modular de la versión 9, debes convertir todas las invocaciones al estilo modular que se muestra arriba y eliminar todas las instrucciones import "firebase/compat/* de tu código. Cuando hayas terminado, no debería haber más referencias al espacio de nombres global firebase.* ni a ningún otro código con el estilo del SDK de la versión 8.
Ventajas y limitaciones de la versión 9
La versión 9, totalmente modularizada, ofrece las siguientes ventajas con respecto a las versiones anteriores:
- La versión 9 permite reducir drásticamente el tamaño de la aplicación. Adopta el formato de módulo de JavaScript moderno, lo que permite usar la técnica de "tree shaking", en la que solo se importan los artefactos que necesita tu aplicación. En función de tu aplicación, la eliminación de código innecesario con la versión 9 puede dar como resultado un 80% menos de kilobytes que una aplicación comparable creada 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 determinado en el futuro.