Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Actualizar al SDK web modular (v9)

En el caso de las apps que actualmente usan la versión 8 o una anterior del SDK web, debes considerar migrar a la versión 9 con las instrucciones de esta guía.

En esta guía, se supone que estás familiarizado con la versión 8 y que aprovecharás un agrupador de módulos como webpack o Rollup para la actualización y el desarrollo continuo de la versión 9.

Se recomienda usar un agrupador de módulos en tu entorno de desarrollo. Si no usas uno, no podrás aprovechar los beneficios principales de la versión 9 en el tamaño reducido de la app. Necesitarás npm o yarn para instalar el SDK.

Acerca de las bibliotecas compatibles

Hay dos tipos de bibliotecas disponibles para la versión 9 del SDK web:

  • Modular: Es una plataforma nueva de API diseñada para facilitar la eliminación de código no utilizado (eliminación de código que no se usa) y hacer que tu app web sea lo más pequeña y rápida posible.
  • Compat: Es una plataforma de API conocida 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 de tu SDK a la vez. Las bibliotecas de compatibilidad tienen muy pocas ventajas de tamaño o de rendimiento, en comparación con sus versiones 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. Esto significa que puedes compilar y depurar tu app más fácilmente mientras trabajas en el proceso de actualización.

En el caso de las apps 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 compatibles de la versión 9. Si actualizas una app de este tipo, puedes seguir las instrucciones de la “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:

  1. Agrega las bibliotecas de la versión 9 y las bibliotecas compatibles a tu app.
  2. Actualiza las sentencias de importación del código al formato compatible de la v9.
  3. Refactoriza el código con el estilo modular.
  4. Quita la biblioteca y el código compatibles de Authentication para obtener el beneficio de tamaño de la app.
  5. Actualiza el código de inicialización con el estilo modular.
  6. 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 de la versión 9 y las de compatibilidad mediante npm (versión más reciente https://www.npmjs.com/package/firebase):

npm i firebase@9.16.0

# OR

yarn add firebase@9.16.0

Actualiza las importaciones a la v9 compatible

Para que tu código siga funcionando después de actualizar tu dependencia de la v8 a la v9, cambia las instrucciones de importación para que usen 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 de Firebase/app y otros paquetes 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.

Ejemplo: Refactoriza una función simple 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. El uso de las bibliotecas compatibles durante la actualización te permite 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: Modular de la versión 9

La función getAuth acepta firebaseApp como primer parámetro. La función onAuthStateChanged no está encadenada desde la instancia de Auth como en la versión 8. En cambio, es una función gratuita que toma auth como su primer parámetro.

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

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

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.

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 del módulo de JavaScript, lo que permite las prácticas de eliminación de código no utilizado en las que se importan 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 posterior.