Migra al SDK modular de Firebase JS para impulsar tu app web

1. Antes de comenzar

El SDK modular de Firebase JS es una reescritura del SDK de JS existente y se lanzará como la próxima versión principal. Permite a los desarrolladores excluir el código que no se usa del SDK de Firebase JS para crear paquetes más pequeños y lograr un mejor rendimiento.

La diferencia más notable en el SDK modular de JS es que las funciones ahora se organizan en funciones de flotación gratuita que importarás, a diferencia de lo que sucede en un único espacio de nombres firebase que incluye todo. Esta nueva forma de organizar el código es lo que permite eliminar los árboles, y aprenderás a actualizar cualquier app que actualmente use la versión 8 del SDK de Firebase JS a la nueva modular.

Para que el proceso de actualización sea fluido, se proporciona un conjunto de paquetes de compatibilidad. En este codelab, aprenderás a usar los paquetes de compatibilidad para portar la app parte por parte.

Qué compilarás

En este codelab, migrarás gradualmente una app web existente de listas de acciones que usa el SDK de JS v8 al nuevo SDK modular de JS en tres etapas:

  • Actualiza la app para usar los paquetes compatibles
  • Actualiza la app de los paquetes de compatibilidad a la API modular parte por parte.
  • Usa Firestore Lite, una implementación ligera del SDK de Firestore, para mejorar aún más el rendimiento de la app

2d351cb47b604ad7.png

Este codelab se enfoca en actualizar el SDK de Firebase. Otros conceptos y bloques de código se pasan por alto y se proporcionan para que simplemente los copies y pegues.

Requisitos

  • Un navegador de tu elección, como Chrome
  • El IDE o editor de texto que prefieras, como WebStorm, Atom, Sublime o VS Code
  • El administrador de paquetes npm, que generalmente viene con Node.js
  • El código de muestra del codelab (consulta el siguiente paso del codelab para descubrir cómo obtener el código)

2. Prepárate

Obtén el código

Todo lo que necesitas para este proyecto se encuentra en un repositorio de Git. Para comenzar, deberás tomar el código y abrirlo en tu entorno de desarrollo favorito.

Clona el repositorio de GitHub del codelab desde la línea de comandos:

git clone https://github.com/FirebaseExtended/codelab-modular-sdk.git

De manera alternativa, si no tienes Git instalado, puedes descargar el repositorio como archivo ZIP y descomprimir el archivo ZIP descargado.

Importa la app

  1. Con tu IDE, abre o importa el directorio codelab-modular-sdk.
  2. Ejecuta npm install para instalar las dependencias necesarias para compilar y ejecutar la app de manera local.
  3. Ejecuta npm run build para compilar la app.
  4. Ejecuta npm run serve para iniciar el servidor web
  5. Abre una pestaña del navegador en http://localhost:8080

71a8a7d47392e8f4.png

3. Establece un modelo de referencia

¿Cuál es tu punto de partida?

Tu punto de partida es una app de lista de acciones diseñada para este codelab. El código se simplificó para ilustrar los conceptos de este codelab y tiene poco manejo de errores. Si decides volver a usar este código en una app de producción, asegúrate de solucionar los errores y probar todo el código por completo.

Asegúrate de que todo funcione en la app:

  1. Accede de forma anónima con el botón Acceder que se encuentra en la esquina superior derecha.
  2. Después de acceder, busca y agrega "NFLX", "SBUX" y “T” ir a la lista. Para ello, haz clic en el botón Add, escribe las letras y haz clic en la fila del resultado de la búsqueda que aparece a continuación.
  3. Para quitar una acción de la lista, haz clic en la x al final de la fila.
  4. Mira actualizaciones en tiempo real sobre el precio de las acciones.
  5. Abre las Herramientas para desarrolladores de Chrome, ve a la pestaña Red y marca las opciones Inhabilitar caché y Usar filas de solicitud grandes. La opción Inhabilitar caché garantiza que siempre obtengamos los cambios más recientes después de una actualización y Usar filas de solicitud grandes hace que la fila muestre el tamaño transmitido y el tamaño del recurso para un recurso. En este codelab, lo que más nos interesa es el tamaño de main.js.

48a096debb2aa940.png

  1. Cargar la app en diferentes condiciones de red con una limitación simulada En este codelab, usarás la 3G lenta para medir el tiempo de carga, ya que es cuando un tamaño de paquete más pequeño ayuda más.

4397cb2c1327089.png

Ahora, comienza a migrar la app a la nueva API modular.

4. Cómo usar los paquetes compatibles

Los paquetes de compatibilidad te permiten actualizar a la nueva versión del SDK sin cambiar todo el código de Firebase a la vez. Puedes actualizarlos a la API modular de forma gradual.

En este paso, actualizarás la biblioteca de Firebase de la versión 8 a la nueva versión y cambiarás el código para usar los paquetes de compatibilidad. En los siguientes pasos, aprenderás a actualizar solo el código de Firebase Auth para usar primero la API modular y, luego, actualizar el código de Firestore.

Al final de cada paso, deberías poder compilar y ejecutar la app sin fallas, y ver una disminución en el tamaño del paquete a medida que migramos cada producto.

Obtén el nuevo SDK

Busca la sección de dependencias en package.json y reemplázala por lo siguiente:

package.json

"dependencies": {
    "firebase": "^9.0.0" 
}

Vuelve a instalar las dependencias

Como cambiamos la versión de la dependencia, debemos volver a ejecutar npm install para obtener la versión nueva de la dependencia.

Cambia las rutas de importación

Los paquetes de compatibilidad se exponen en el submódulo firebase/compat, por lo que actualizaremos las rutas de acceso de importación según corresponda:

  1. Ir al archivo src/firebase.ts
  2. Reemplaza las importaciones existentes por las siguientes:

src/firebase.ts

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

Verifica que la app funcione

  1. Ejecuta npm run build para volver a compilar la app.
  2. Abre una pestaña del navegador en http://localhost:8080 o actualiza la pestaña existente.
  3. Diviértete con la app. Todo debería funcionar correctamente.

5. Actualiza Auth para usar la API modular

Puedes actualizar los productos de Firebase en cualquier orden. En este codelab, primero actualizarás Auth para aprender los conceptos básicos, ya que la API de Auth es relativamente simple. La actualización de Firestore es un poco más compleja, y aprenderás a hacerlo a continuación.

Actualizar la inicialización de Auth

  1. Ir al archivo src/firebase.ts
  2. Agrega la siguiente importación:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. Borrar import ‘firebase/compat/auth'.
  2. Reemplaza export const firebaseAuth = app.auth(); por lo siguiente:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Quita export type User = firebase.User; al final del archivo. User se exportará directamente en src/auth.ts, que cambiarás a continuación.

Actualiza el código de Auth

  1. Ir al archivo src/auth.ts
  2. Agrega las siguientes importaciones a la parte superior del archivo:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. Quita User de import { firebaseAuth, User } from './firebase'; porque ya importaste User de ‘firebase/auth'.
  2. Actualiza las funciones para usar la API modular.

Como ya viste cuando actualizamos la sentencia de importación, los paquetes de la versión 9 se organizan en torno a funciones que puedes importar, a diferencia de las APIs de la versión 8, que se basan en un espacio de nombres y un patrón de servicio en cadena de puntos. Esta nueva organización del código es la que habilita la eliminación de código no utilizado porque permite que las herramientas de compilación analicen qué código se usa y qué no.

En la versión 9, los servicios se pasan como el primer argumento a las funciones. Los Services son los objetos que obtienes cuando inicializas un servicio de Firebase, p.ej., el objeto que muestra getAuth() o initializeAuth(). Estas conservan el estado de un servicio de Firebase en particular, y la función lo usa para realizar sus tareas. Apliquemos este patrón para implementar las siguientes funciones:

src/auth.ts

export function firebaseSignInAnonymously() { 
    return signInAnonymously(firebaseAuth); 
} 

export function firebaseSignOut() { 
    return signOut(firebaseAuth); 
} 

export function onUserChange(callback: (user: User | null) => void) { 
    return onAuthStateChanged(firebaseAuth, callback); 
} 

export { User } from 'firebase/auth';

Verifica que la app funcione

  1. Ejecuta npm run build para volver a compilar la app.
  2. Abre una pestaña del navegador en http://localhost:8080 o actualiza la pestaña existente.
  3. Diviértete con la app. Todo debería funcionar correctamente.

Verifica el tamaño del paquete

  1. Abre las Herramientas para desarrolladores de Chrome.
  2. Cambia a la pestaña Red.
  3. Actualiza la página para captar solicitudes de red.
  4. Busca main.js y comprueba su tamaño. Redujiste el tamaño del paquete en 100 KB (36 KB comprimidos) o alrededor de un 22% más pequeño cambiando solo unas pocas líneas de código. El sitio también se está cargando 0.75 s más rápido en una conexión 3g lenta.

2e4eafaf66cd829b.png

6. Actualiza la app de Firebase y Firestore para usar la API modular

Actualizar la inicialización de Firebase

  1. Ir al archivo src/firebase.ts.
  2. Reemplaza import firebase from ‘firebase/compat/app'; por lo siguiente:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. Reemplaza const app = firebase.initializeApp({...}); por lo siguiente:

src/firebase.ts

const app = initializeApp({
    apiKey: "AIzaSyBnRKitQGBX0u8k4COtDTILYxCJuMf7xzE", 
    authDomain: "exchange-rates-adcf6.firebaseapp.com", 
    databaseURL: "https://exchange-rates-adcf6.firebaseio.com", 
    projectId: "exchange-rates-adcf6", 
    storageBucket: "exchange-rates-adcf6.appspot.com", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

Actualiza la inicialización de Firestore

  1. En el mismo archivo, src/firebase.ts, reemplaza import 'firebase/compat/firestore'; por

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. Reemplaza export const firestore = app.firestore(); por lo siguiente:

src/firebase.ts

export const firestore = getFirestore();
  1. Quitar todas las líneas después de "export const firestore = ..."

Actualiza las importaciones

  1. Abrir el archivo src/services.ts.
  2. Quita FirestoreFieldPath, FirestoreFieldValue y QuerySnapshot de la importación. La importación desde './firebase' debería verse de la siguiente manera:

src/services.ts

import { firestore } from './firebase';
  1. Importa las funciones y los tipos que vas a usar en la parte superior del archivo:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Crea una referencia a la colección que contenga todos los indicadores:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Usa getDocs() para recuperar todos los documentos de la colección:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Consulta search() para ver el código finalizado.

Actualiza addToWatchList()

Usa doc() para crear una referencia de documento a la lista para ver del usuario y, luego, agrégale un visor mediante setDoc() con arrayUnion():

src/services.ts

export function addToWatchList(ticker: string, user: User) {
      const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
      return setDoc(watchlistRef, {
       tickers: arrayUnion(ticker)
   }, { merge: true });
}

Actualiza deleteFromWatchList()

Del mismo modo, quita un visor de la lista para ver del usuario usando setDoc() con arrayRemove():

src/services.ts

export function deleteFromWatchList(ticker: string, user: User) {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   return setDoc(watchlistRef, {
       tickers: arrayRemove(ticker)
   }, { merge: true });
}

Actualiza subscriptionToTickerChanges()

  1. Usa doc() para crear primero una referencia de documento a la lista de monitoreo del usuario y, luego, escucha los cambios de la lista con onSnapshot():

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. Una vez que tengas los visores en la lista, usa query() para crear una consulta que te permita recuperar sus precios y usa onSnapshot() para escuchar los cambios:

src/services.ts

const priceQuery = query(
    collection(firestore, 'current'),
    where(documentId(), 'in', tickers)
);
unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               if (firstload) {
                   performance && performance.measure("initial-data-load");
                   firstload = false;
                   logPerformance();
               }
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
  });

Consulta subscribeToTickerChanges() para ver la implementación completa.

Cómo actualizar subscriptionToAllTickerChanges()

Primero, usarás collection() para crear una referencia a la colección que contiene los precios de todos los visores y, luego, usarás onSnapshot() para escuchar los cambios de precio:

src/services.ts

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       if (firstload) {
           performance && performance.measure("initial-data-load");
           firstload = false;
           logPerformance();
       }
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Verifica que la app funcione

  1. Ejecuta npm run build para volver a compilar la app.
  2. Abre una pestaña del navegador en http://localhost:8080 o actualiza la pestaña existente.
  3. Diviértete con la app. Todo debería funcionar correctamente.

Verifica el tamaño del paquete

  1. Abre las Herramientas para desarrolladores de Chrome.
  2. Cambia a la pestaña Red.
  3. Actualiza la página para captar solicitudes de red.
  4. Busca main.js y comprueba su tamaño. Compáralo nuevamente con el tamaño original del paquete: redujimos el tamaño del paquete en más de 200 KB (63.8 KB en formato gzip) o un 50% más pequeño, lo que se traduce en un tiempo de carga 1.3 s más rápido.

7660cdc574ee8571.png

7. Usa Firestore Lite para acelerar el procesamiento de la página inicial

¿Qué es Firestore Lite?

El SDK de Firestore ofrece almacenamiento en caché complejo, transmisión en tiempo real, almacenamiento continuo, sincronización sin conexión con varias pestañas, reintentos, simultaneidad optimista y mucho más. Por lo tanto, es de tamaño bastante grande. Pero es posible que solo quieras obtener los datos una vez, sin necesidad de usar ninguna de las funciones avanzadas. Para esos casos, Firestore creó una solución simple y ligera, un paquete completamente nuevo: Firestore Lite.

Un gran caso de uso de Firestore Lite es optimizar el rendimiento de la renderización inicial de la página, donde solo debes saber si un usuario accedió o no y, luego, leer algunos datos de Firetore para mostrarlos.

En este paso, aprenderás a usar Firestore Lite para reducir el tamaño del paquete y acelerar la renderización inicial de la página. Luego, cargarás el SDK principal de Firestore de forma dinámica para suscribirte a actualizaciones en tiempo real.

Refactorizarás el código de la siguiente manera:

  1. Traslada los servicios en tiempo real a un archivo separado para que se puedan cargar de forma dinámica con la importación dinámica.
  2. Crea funciones nuevas para usar Firestore Lite y recuperar la lista de monitoreo y los precios de las acciones.
  3. Usa las nuevas funciones de Firestore Lite para recuperar datos y realizar la renderización inicial de la página. Luego, carga de forma dinámica los servicios en tiempo real para escuchar actualizaciones en tiempo real.

Mueve servicios en tiempo real a un archivo nuevo

  1. Crea un archivo nuevo llamado src/services.realtime.ts..
  2. Mueve las funciones subscribeToTickerChanges() y subscribeToAllTickerChanges() de src/services.ts al archivo nuevo.
  3. Agrega las importaciones necesarias a la parte superior del archivo nuevo.

Aún debes realizar algunos cambios aquí:

  1. Primero, crea una instancia de Firestore desde el SDK principal de Firestore en la parte superior del archivo que se usará en las funciones. No puedes importar la instancia de Firestore desde firebase.ts aquí porque la cambiarás a una instancia de Firestore Lite en unos pocos pasos, que solo se usará para el procesamiento inicial de la página.
  2. En segundo lugar, deshazte de la variable firstload y del bloque "if" protegido por él. Sus funcionalidades se trasladarán a nuevas funciones que crearás en el siguiente paso.

src/services.realtime.ts

import { User } from './auth'
import { TickerChange } from './models';
import { collection, doc, onSnapshot, query, where, documentId, getFirestore } from 'firebase/firestore';
import { formatSDKStocks } from './services';

const firestore = getFirestore();
type TickerChangesCallBack = (changes: TickerChange[]) => void

export function subscribeToTickerChanges(user: User, callback: TickerChangesCallBack) {

   let unsubscribePrevTickerChanges: () => void;

   // Subscribe to watchlist changes. We will get an update whenever a ticker is added/deleted to the watchlist
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const unsubscribe = onSnapshot(watchlistRef, snapshot => {
       const doc = snapshot.data();
       const tickers = doc ? doc.tickers : [];

       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }

       if (tickers.length === 0) {
           callback([]);
       } else {
           // Query to get current price for tickers in the watchlist
           const priceQuery = query(
               collection(firestore, 'current'),
               where(documentId(), 'in', tickers)
           );

           // Subscribe to price changes for tickers in the watchlist
           unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
           });
       }
   });
   return () => {
       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }
       unsubscribe();
   };
}

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Usa Firestore Lite para recuperar datos

  1. Abrir src/services.ts.
  2. Cambia la ruta de importación de ‘firebase/firestore' a ‘firebase/firestore/lite',, agrega getDoc y quita onSnapshot de la lista de importaciones:

src/services.ts

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove,
//  onSnapshot, // firestore lite doesn't support realtime updates
    query, 
    where, 
    documentId, 
    QuerySnapshot, 
    getDoc // add this import
} from 'firebase/firestore/lite';
  1. Agrega funciones para recuperar los datos necesarios para la renderización inicial de la página con Firestore Lite:

src/services.ts

export async function getTickerChanges(tickers: string[]): Promise<TickerChange[]> {

   if (tickers.length === 0) {
       return [];
   }

   const priceQuery = query(
       collection(firestore, 'current'),
       where(documentId(), 'in', tickers)
   );
   const snapshot = await getDocs(priceQuery);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

export async function getTickers(user: User): Promise<string[]> {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const data =  (await getDoc(watchlistRef)).data();

   return data ? data.tickers : [];
}

export async function getAllTickerChanges(): Promise<TickerChange[]> {
   const tickersCollRef = collection(firestore, 'current');
   const snapshot = await getDocs(tickersCollRef);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}
  1. Abre src/firebase.ts y cambia la ruta de importación de ‘firebase/firestore' a ‘firebase/firestore/lite':

src/firebase.ts

import { getFirestore } from 'firebase/firestore/lite';

Reúnelos todos

  1. Abrir src/main.ts.
  2. Necesitarás las funciones recién creadas con el objetivo de recuperar datos para la renderización inicial de la página y un par de funciones auxiliares para administrar el estado de la app. Ahora, actualiza las importaciones:

src/main.ts

import { renderLoginPage, renderUserPage } from './renderer';
import { getAllTickerChanges, getTickerChanges, getTickers } from './services';
import { onUserChange } from './auth';
import { getState, setRealtimeServicesLoaded, setUser } from './state';
import './styles.scss';
  1. Carga src/services.realtime con una importación dinámica en la parte superior del archivo. La variable loadRealtimeService es una promesa que se resolverá con los servicios en tiempo real una vez que se cargue el código. La usarás más adelante para suscribirte a actualizaciones en tiempo real.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. Cambia la devolución de llamada de onUserChange() a una función async para que podamos usar await en el cuerpo de la función:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. Ahora recupera los datos para renderizar la página inicial usando las nuevas funciones que creamos en el paso anterior.

En la devolución de llamada onUserChange(), busca la condición if en la que un usuario accedió y copia & pega el código dentro de la sentencia if:

src/main.ts

onUserChange(async user => {
      // LEAVE THE EXISTING CODE UNCHANGED HERE
      ...

      if (user) {
       // REPLACE THESE LINES

       // user page
       setUser(user);

       // show loading screen in 500ms
       const timeoutId = setTimeout(() => {
           renderUserPage(user, {
               loading: true,
               tableData: []
           });
       }, 500);

       // get data once if realtime services haven't been loaded
       if (!getState().realtimeServicesLoaded) {
           const tickers = await getTickers(user);
           const tickerData = await getTickerChanges(tickers);
           clearTimeout(timeoutId);
           renderUserPage(user, { tableData: tickerData });
       }

       // subscribe to realtime updates once realtime services are loaded
       loadRealtimeService.then(({ subscribeToTickerChanges }) => {
           unsubscribeTickerChanges = subscribeToTickerChanges(user, stockData => {
               clearTimeout(timeoutId);
               renderUserPage(user, { tableData: stockData })
           });
       });
   } else {
     // DON'T EDIT THIS PART, YET   
   }
}
  1. En el bloque else en el que ningún usuario accedió, recupera la información del precio de todas las acciones con Firestore Lite, renderiza la página y escucha los cambios de precio una vez que se carguen los servicios en tiempo real:

src/main.ts

if (user) {
   // DON'T EDIT THIS PART, WHICH WE JUST CHANGED ABOVE
   ...
} else {
   // REPLACE THESE LINES

   // login page
   setUser(null);

   // show loading screen in 500ms
   const timeoutId = setTimeout(() => {
       renderLoginPage('Landing page', {
           loading: true,
           tableData: []
       });
   }, 500);

   // get data once if realtime services haven't been loaded
   if (!getState().realtimeServicesLoaded) {
       const tickerData = await getAllTickerChanges();
       clearTimeout(timeoutId);
       renderLoginPage('Landing page', { tableData: tickerData });
   }

   // subscribe to realtime updates once realtime services are loaded
   loadRealtimeService.then(({ subscribeToAllTickerChanges }) => {
       unsubscribeAllTickerChanges = subscribeToAllTickerChanges(stockData => {
           clearTimeout(timeoutId);
           renderLoginPage('Landing page', { tableData: stockData })
       });
   });
}

Consulta src/main.ts para obtener el código terminado.

Verifica que la app funcione

  1. Ejecuta npm run build para volver a compilar la app.
  2. Abre una pestaña del navegador en http://localhost:8080 o actualiza la pestaña existente.

Verifica el tamaño del paquete

  1. Abre Herramientas para desarrolladores de Chrome.
  2. Cambia a la pestaña Red.
  3. Actualiza la página para captar solicitudes de red
  4. Busca main.js y comprueba su tamaño.
  5. Ahora solo pesa 115 KB (34.5 KB comprimidos). Es un 75% más pequeño que el tamaño del paquete original, que era 446 KB(138 KB comprimidos). Como resultado, el sitio se carga más de 2 s más rápido con una conexión 3G, lo que supone una gran mejora en el rendimiento y la experiencia del usuario.

9ea7398a8c8ef81b.png

8. Felicitaciones

¡Felicitaciones! Actualizaste la app correctamente y la hiciste más pequeña y rápida.

Usaste los paquetes de compatibilidad para actualizar la app parte por parte, usaste Firestore Lite para acelerar la renderización inicial de la página y, luego, cargaste de forma dinámica el Firestore principal para transmitir los cambios de precio.

También redujiste el tamaño del paquete y mejoraste su tiempo de carga a lo largo de este codelab:

main.js

tamaño del recurso (KB)

tamaño comprimido (KB)

tiempo de carga (s) (más de 3 g lento)

v8

446

138

4,92

Compatible con v9

429

124

4.65

Autenticación modular solo para v9

348

102

4.2

v9 completamente modular

244

74,6

3.66

v9 completamente modular + Firestore lite

117

34,9

2,88

32a71bd5a774e035.png

Ahora conoces los pasos clave necesarios para actualizar una app web que usa la versión 8 del SDK de Firebase JS para usar el nuevo SDK modular de JS.

Lecturas adicionales

Documentos de referencia