Firebase: Upgrade from version 8 to modular web SDK (v9)
Firebase version 8 to modular web SDK(v 9)
Recently, (i.e., Aug 2021) the Firebase has changed it's version from 8 to modular web SDK (v 9). They had updated all the methods of using firebase databse, firebase firestore, storage etc., which is now in modular approach. So in this blog let us discuss the new approaches of writing, initializing, importing and using firebase version 9.
Two types of libraries available for Firebase version 9:
1. Modular - A new API surface designed to facilitate tree-shaking (removal of unused code) to make your web app as small and fast as possible.
Example:-
import { addDoc, collection, serverTimestamp, updateDoc, doc } from "@firebase/firestore"
import { db, storage, } from "../firebase"
import { ref, getDownloadURL, uploadString } from "@firebase/storage"
2. Compat - A familiar API surface which is fully compatible with the version 8 SDK, allowing you to upgrade to version 9 without changing all of your Firebase code at once. Compat libraries have little to no size or performance advantages over their version 8 counterparts. Example:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Note: The compat libraries are a temporary solution that will be removed completely in a future major SDK version (such as version 10 or version 11). Your ultimate goal is to remove compat code and keep only version 9 modular-style code in your app.
About the upgrade process
Each step of the upgrade process is scoped so that you can finish editing the source for your app and then compile and run it without breakage. In summary, here's what you'll do to upgrade an app:
1.Add the version 9 libraries and the compat libraries to your app.
2.Update import statements in your code to v9 compat.
3.Refactor code for a single product (for example, Authentication) to the modular style.
4.Optional: at this point, remove the Authentication compat library and compat code for Authentication in order to realize the app size benefit for Authentication before continuing.
5.Refactor functions for each product (for example, Cloud Firestore, FCM, etc.) to the modular style, compiling and testing until all areas are complete.
6.Update initialization code to the modular style.
7.Remove all remaining version 9 compat statements and compat code from your app.
Let's get Started
Get the version 9 libraries and compat libraries using npm: npm install firebase
Change your import statements to use the "compat" and "Modular" version of each import. For example:
version 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
version 9 : compat
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
version 9 : modular
import { db, storage, } from "../firebase"
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { ref, getDownloadURL, uploadString } from "@firebase/storage"
A new API surface designed to removal of unused code to make your web app as small and fast as possible. As we can see the difference from version 8 imports to version 9 imports. Where the version 9 imports only usable code which makes web app fast and small.
How does it Works:
Version 9 is a modular approach, means that your code will be organized principally around functions. In version 9, the firebase/app package and other packages do not return a comprehensive export that contains all the methods from the package. Instead, the packages export individual functions.
In version 9, services are passed as the first argument, and the function then uses the details of the service to do the rest.
Update initialization code
Update your app's initialization code to use new modular version 9 syntax.
It is important to update this code after you have completed refactoring all the code in your app, this is because firebase.initializeApp() initializes global state for both the compat and modular APIs,whereas the modular initializeApp() function initializes only the state for modular.
version 8
import firebase from "firebase/app"
firebase.initializeApp({ /* config */ });
version 9
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Refactoring a Cloud Firestore, Storage function
/* in firebase.js */
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = getFirestore();
const storage = getStorage();
const auth = firebaseApp.auth();
export { firebaseApp, db, storage, auth };
/* and import anywhere in .js as */
import { db, storage, } from "../firebase"
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
import { ref, getDownloadURL, uploadString } from "@firebase/storage"
From the above code we understood the imports of firebase in modular approach. In short form the modular approach in version 9 is "We use only what we need".
Few Images from the project which i've developed:
Version 8
Version 9 : Modular
From the above images, The code functionality is same for both the projects but the approach is different and we can witness the modular approach in version 9 and each library is being imported (only needed library) and used. Where as, in the firebase version 8, I had imported as import firebase from 'firebase'; which means all the libraries are loaded into my project, that results in excess space consumption and it might slow down my web app.
Benefits and limitations of version 9
The fully modularized version 9 has these advantages over earlier versions:
Version 9 enables a dramatically reduced app size. It adopts the modern JavaScript Module format, allowing for "tree shaking" practices in which you import only the artifacts your app needs.
Depending on your app, tree-shaking with version 9 can result in 80% less kilobytes than a comparable app built using version 8.
Version 9 will continue to benefit from ongoing feature development, while version 8 will be frozen at a point in the future.