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

Mise à niveau de la version 8 vers le SDK Web modulaire

Les applications utilisant actuellement Firebase Web SDK version 8 ou antérieure doivent envisager de migrer vers la version 9 en suivant les instructions de ce guide.

Ce guide suppose que vous connaissez la version 8 et que vous profiterez d'un module Bundler tel que webpack ou Rollup pour la mise à niveau et la version en cours de développement 9.

L'utilisation d'un bundler de modules dans votre environnement de développement est fortement recommandée. Si vous n'en utilisez pas, vous ne pourrez pas profiter des principaux avantages de la version 9 en réduisant la taille de l'application. Vous aurez besoin NPM ou fil pour installer le SDK.

Les étapes de mise à niveau de ce guide seront basées sur une application Web imaginaire qui utilise les SDK d'authentification et Cloud Firestore. En travaillant sur les exemples, vous pouvez maîtriser les concepts et les étapes pratiques nécessaires pour mettre à niveau tous les SDK Web Firebase pris en charge.

À propos des bibliothèques compatibles

Il existe deux types de bibliothèques disponibles pour Firebase Web SDK version 9 :

  • Modulaire - une nouvelle surface API conçue pour faciliter le secouage d' arbre (suppression du code inutilisé) pour rendre votre application web aussi petit et rapide que possible.
  • Compat - une surface API familière qui est entièrement compatible avec la version 8 SDK, vous permettant de passer à la version 9 sans changer tout votre code Firebase à la fois. Les bibliothèques compatibles ont peu ou pas d'avantages en termes de taille ou de performances par rapport à leurs homologues de la version 8.

Ce guide suppose que vous profiterez des bibliothèques compatibles de la version 9 pour faciliter votre mise à niveau. Ces bibliothèques vous permettent de continuer à utiliser le code de la version 8 parallèlement au code remanié pour la version 9. Cela signifie que vous pouvez compiler et déboguer votre application plus facilement tout au long du processus de mise à niveau.

Pour les applications avec une très faible exposition au SDK Web Firebase - par exemple, une application qui ne fait qu'un simple appel aux API d'authentification - il peut être pratique de refactoriser le code de la version 8 sans utiliser les bibliothèques compatibles de la version 9. Si vous mettez à niveau une telle application, vous pouvez suivre les instructions de ce guide pour la "version 9 modulaire" sans utiliser les bibliothèques compatibles.

À propos du processus de mise à niveau

Chaque étape du processus de mise à niveau est définie afin que vous puissiez terminer la modification de la source de votre application, puis la compiler et l'exécuter sans casse. En résumé, voici ce que vous ferez pour mettre à niveau une application :

  1. Ajoutez les bibliothèques version 9 et les bibliothèques compatibles à votre application.
  2. Mettez à jour les instructions d'importation dans votre code vers la compatibilité v9.
  3. Refactorisez le code d'un seul produit (par exemple, l'authentification) vers le style modulaire.
  4. Facultatif : à ce stade, supprimez la bibliothèque de compatibilité d'authentification et le code de compatibilité pour l'authentification afin de profiter de l'avantage de la taille de l'application pour l'authentification avant de continuer.
  5. Refactorisez les fonctions de chaque produit (par exemple, Cloud Firestore, FCM, etc.) vers le style modulaire, en compilant et en testant jusqu'à ce que tous les domaines soient terminés.
  6. Mettez à jour le code d'initialisation vers le style modulaire.
  7. Supprimez toutes les instructions de compatibilité et le code de compatibilité de la version 9 restants de votre application.

Obtenez la version 9 du SDK

Pour commencer, obtenez les bibliothèques de la version 9 et les bibliothèques compatibles à l'aide de npm :

npm i firebase@9.1.3

# OR

yarn add firebase@9.1.3

Mettre à jour les importations vers la compatibilité v9

Afin que votre code continue de fonctionner après la mise à jour de votre dépendance de v8 à v9 bêta, modifiez vos instructions d'importation pour utiliser la version "compat" de chaque importation. Par exemple:

Avant : version 8

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

Après : version 9 compatible

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Refactoriser vers le style modulaire

Alors que la version 8 API sont basées sur un espace de noms de points en série et modèle de service, des moyens d'approche modulaire de la version 9 que votre code seront organisées principalement autour des fonctions. Dans la version 9, le firebase/app package et d' autres paquets ne renvoient pas une exportation complète qui contient toutes les méthodes de l'emballage. Au lieu de cela, les packages exportent des fonctions individuelles.

Dans la version 9, les services sont passés en premier argument, et la fonction utilise ensuite les détails du service pour faire le reste. Examinons comment cela fonctionne dans deux exemples qui refactorisent les appels aux API Authentication et Cloud Firestore.

Exemple 1 : refactorisation d'une fonction d'authentification

Avant : version 9 compatible

Le code de compatibilité de la version 9 est identique au code de la version 8, mais les importations ont changé.

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

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

Après : version 9 modulaire

La getAuth fonction prend firebaseApp comme premier paramètre. La onAuthStateChanged fonction n'est pas enchaînée de l' auth par exemple , car il serait dans la version 8; à la place, il est une fonction libre qui prend auth comme premier paramètre.

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

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

Exemple 2 : refactoriser une fonction Cloud Firestore

Avant : version 9 compatible

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

Après : version 9 modulaire

La getFirestore fonction prend firebaseApp comme premier paramètre, qui a été renvoyé par initializeApp dans un exemple précédent. Notez à quel point le code pour former une requête est très différent dans la version 9 ; il n'y a pas Enchaînement, et des méthodes telles que la query ou where sont maintenant exposés comme des fonctions 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());
});

Exemple 3 : combinaison des styles de code version 8 et version 9

L'utilisation des bibliothèques de compatibilité pendant la mise à niveau vous permet de continuer à utiliser le code de la version 8 avec le code refactorisé pour la version 9. Cela signifie que vous pouvez conserver le code de la version 8 existant pour Cloud Firestore pendant que vous refactorisez l'authentification ou un autre code du SDK Firebase au style de la version 9, et toujours compilez avec succès votre application avec les deux styles de code. La même chose est vrai pour la version 8 du code et la version 9 dans un produit comme le Cloud Firestore; les nouveaux et les anciens styles de code peuvent coexister, tant que vous importez les packages compatibles :

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

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

Gardez à l'esprit que, bien que votre application soit compilée, vous n'obtiendrez pas les avantages de la taille de l'application du code modulaire tant que vous n'aurez pas complètement supprimé les instructions et le code de compatibilité de votre application.

Mettre à jour le code d'initialisation

Mettez à jour le code d'initialisation de votre application pour utiliser la nouvelle syntaxe modulaire de la version 9. Il est important de mettre à jour ce code après avoir terminé refactorisation tout le code dans votre application; c'est parce que firebase.initializeApp() initialise état global pour les deux compat et les API modulaires, alors que le modulaire initializeApp() Initialise que l'état de modulaire.

Avant : version 9 compatible

import firebase from "firebase/compat/app"

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

Après : version 9 modulaire

import { initializeApp } from "firebase/app"

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

Supprimer le code de compatibilité

Pour réaliser les avantages de la taille de la version 9 SDK modulaire, vous devez éventuellement convertir toutes les invocations au style modulaire illustré ci - dessus et de supprimer tous les import "firebase/compat/* déclarations de votre code. Lorsque vous avez terminé, il ne faut pas références à l' firebase.* espace de noms global ou tout autre code dans la version 8 style SDK.

Utilisation de la bibliothèque compat depuis la fenêtre

La version 9 SDK est optimisé pour fonctionner avec des modules , plutôt que du navigateur window de l' objet. Les versions précédentes de la bibliothèque a permis le chargement et la gestion des Firebase en utilisant le window.firebase espace de noms. Cela n'est pas recommandé à l'avenir car cela ne permet pas d'éliminer le code inutilisé. Cependant, la version compat du SDK JavaScript fonctionne avec la window pour les développeurs qui préfèrent ne pas commencer immédiatement le chemin de mise à niveau modulaire.

<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 bibliothèque de compatibilité utilise le code modulaire de la version 9 sous le capot et lui fournit la même API que la version 8 SDK ; cela signifie que vous pouvez vous référer à la version 8 référence API et la version 8 extraits de code pour plus de détails. Cette méthode n'est pas recommandée pour une utilisation à long terme, mais comme un début de mise à niveau vers la bibliothèque entièrement modulaire de la version 9.

Avantages et limites de la version 9

La version 9 entièrement modularisée présente les avantages suivants par rapport aux versions précédentes :

  • La version 9 permet une taille d'application considérablement réduite. Il adopte le format de module JavaScript moderne, permettant des pratiques de « secouage d'arbres » dans lesquelles vous n'importez que les artefacts dont votre application a besoin. Selon votre application, le tree-shaking avec la version 9 peut entraîner 80 % de kilo-octets en moins qu'une application comparable créée à l'aide de la version 8.
  • La version 9 continuera à bénéficier du développement continu des fonctionnalités, tandis que la version 8 sera gelée à un moment donné dans le futur.