Aplikasi yang saat ini menggunakan Firebase Web SDK versi 8 atau versi sebelumnya harus dipertimbangkan untuk dimigrasikan ke versi 9 menggunakan petunjuk dalam panduan ini.
Panduan ini mengasumsikan bahwa Anda sudah memahami versi 8 dan akan memanfaatkan pemaket modul, seperti webpack atau Rollup, untuk mengupgrade dan meneruskan pengembangan versi 9.
Kami sangat menyarankan penggunaan pemaket modul di lingkungan pengembangan Anda. Jika tidak menggunakannya, Anda tidak akan bisa mendapatkan manfaat utama versi 9 berupa ukuran aplikasi yang lebih kecil. Anda memerlukan npm atau yarn untuk menginstal SDK.
Langkah-langkah upgrade dalam panduan ini akan didasarkan pada aplikasi web fiktif yang menggunakan Authentication dan Cloud Firestore SDK. Dengan mengikuti contoh-contoh di bawah, Anda akan menguasai konsep dan langkah praktis yang diperlukan untuk mengupgrade semua Firebase Web SDK yang didukung.
Tentang library compat
Ada dua jenis library yang tersedia untuk Firebase Web SDK versi 9:
- Modular - permukaan API baru yang didesain untuk memfasilitasi tree-shaking (penghapusan kode yang tidak digunakan) untuk membuat aplikasi web Anda sekecil dan secepat mungkin.
- Compat - permukaan API yang tidak asing yang sepenuhnya kompatibel dengan SDK versi 8, sehingga Anda dapat mengupgrade ke versi 9 tanpa mengubah semua kode Firebase sekaligus. Dibandingkan library compat versi 8, keunggulan library compat versi 9 dalam hal ukuran atau performa tidak berbeda jauh.
Panduan ini mengasumsikan bahwa Anda akan memanfaatkan library compat versi 9 untuk memfasilitasi upgrade. Dengan library ini, Anda dapat terus menggunakan kode versi 8 bersama dengan kode yang difaktorkan ulang untuk versi 9. Ini berarti Anda dapat mengompilasi dan mendebug aplikasi dengan lebih mudah saat melakukan proses upgrade.
Untuk aplikasi yang tidak banyak berhubungan dengan Firebase Web SDK, misalnya aplikasi yang hanya melakukan panggilan sederhana ke Authentication API, mungkin akan lebih praktis untuk melakukan pemfaktoran ulang kode versi 8 tanpa menggunakan library compat versi 9. Jika mengupgrade aplikasi semacam ini, Anda dapat mengikuti petunjuk dalam panduan ini untuk "modular versi 9" tanpa menggunakan library compat.
Tentang proses upgrade
Setiap langkah pada proses upgrade tercakup sedemikian rupa agar Anda dapat menyelesaikan pengeditan sumber untuk aplikasi, lalu mengompilasi dan menjalankannya tanpa menimbulkan kerusakan. Singkatnya, berikut yang akan Anda lakukan untuk mengupgrade aplikasi:
- Tambahkan library dan library compat versi 9 ke aplikasi Anda.
- Perbarui pernyataan impor dalam kode ke compat v9.
- Faktorkan ulang kode untuk satu produk (misalnya, Authentication) ke gaya modular.
- Opsional: pada tahap ini, hapus library compat Authentication dan kode compat untuk Authentication guna merealisasikan manfaat ukuran aplikasi untuk Authentication sebelum melanjutkan.
- Faktorkan ulang fungsi untuk setiap produk (misalnya, Cloud Firestore, FCM, dll.) ke gaya modular, sambil melakukan kompilasi dan pengujian sampai semua area selesai.
- Perbarui kode inisialisasi menjadi gaya modular.
- Hapus semua kode compat dan pernyataan compat versi 9 yang tersisa dari aplikasi Anda.
Mendapatkan SDK versi 9
Untuk memulai, dapatkan library dan library compat versi 9 menggunakan npm:
npm i firebase@9.22.0 # OR yarn add firebase@9.22.0
Memperbarui impor menjadi compat v9
Agar kode tetap berfungsi setelah dependensi diperbarui dari v8 ke v9 beta, ubah pernyataan impor agar menggunakan versi "compat" setiap impor. Contoh:
Sebelum: versi 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Sesudah: compat versi 9
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Memfaktorkan ulang menjadi gaya modular
Meskipun API versi 8 didasarkan pada pola layanan dan namespace menggunakan dot-chaining, pendekatan modular versi 9 berarti bahwa kode Anda akan diatur berdasarkan fungsi. Pada versi 9, paket firebase/app dan paket lainnya tidak menampilkan ekspor komprehensif yang berisi semua metode dari paket tersebut. Sebagai gantinya, paket tersebut mengekspor fungsi satu per satu.
Pada versi 9, layanan diteruskan sebagai argumen pertama. Selanjutnya, fungsi menggunakan detail layanan untuk mengerjakan sisanya. Mari pelajari cara kerjanya di dua contoh yang memfaktorkan ulang panggilan ke Authentication dan Cloud Firestore API.
Contoh 1: memfaktorkan ulang fungsi Authentication
Sebelum: compat versi 9
Kode compat versi 9 identik dengan kode versi 8, tetapi impor berubah.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Sesudah: modular versi 9
Fungsi getAuth menggunakan firebaseApp sebagai parameter pertama.
Fungsi onAuthStateChanged tidak dirantai dari instance auth seperti pada versi 8. Sebaliknya, fungsi tersebut adalah fungsi bebas yang menggunakan auth sebagai parameter pertamanya.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Memperbarui penanganan metode Auth getRedirectResult
Versi 9 memperkenalkan perubahan yang dapat menyebabkan gangguan di getRedirectResult. Jika tidak ada operasi pengalihan yang dipanggil, Versi 9 akan menampilkan null, bukan Versi 8, yang menampilkan UserCredential dengan pengguna null.
Sebelum: compat versi 9
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Sesudah: modular versi 9
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
Contoh 2: memfaktorkan ulang fungsi Cloud Firestore
Sebelum: compat versi 9
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);
});
Sesudah: modular versi 9
Fungsi getFirestore menggunakan firebaseApp sebagai parameter pertamanya, yang ditampilkan dari initializeApp dalam contoh sebelumnya. Perhatikan bahwa kode untuk membentuk kueri sangatlah berbeda dalam versi 9. Tidak ada pembentukan rantai, dan metode seperti query atau where kini diekspos sebagai fungsi bebas.
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());
});
Memperbarui referensi ke DocumentSnapshot.exists Firestore
Versi 9 memperkenalkan perubahan yang dapat menyebabkan gangguan, yaitu properti firestore.DocumentSnapshot.exists telah berubah menjadi metode. Fungsi ini pada dasarnya sama (menguji apakah dokumen ada atau tidak), tetapi Anda harus memfaktorkan ulang kode untuk menggunakan metode v9 seperti yang ditunjukkan di bawah:
Sebelum: compat versi 9
if (snapshot.exists) {
console.log("the document exists");
}
Sesudah: modular versi 9
if (snapshot.exists()) {
console.log("the document exists");
}
Contoh 3: menggabungkan gaya kode versi 8 dan versi 9
Dengan menggunakan library compat selama proses upgrade, Anda dapat terus menggunakan kode versi 8 bersama dengan kode yang difaktorkan ulang untuk versi 9. Ini berarti Anda dapat mempertahankan kode versi 8 yang sudah ada untuk Cloud Firestore sekaligus memfaktorkan ulang kode Authentication atau kode Firebase SDK lainnya menjadi bergaya versi 9, dan tetap dapat mengompilasi aplikasi dengan kedua gaya kode. Hal yang sama berlaku untuk kode versi 8 dan versi 9 dalam produk seperti Cloud Firestore. Gaya kode baru dan lama dapat beroperasi berdampingan, asalkan Anda mengimpor paket compat:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Perlu diingat bahwa, meskipun aplikasi akan tetap dapat dikompilasi, keunggulan ukuran aplikasi yang lebih kecil pada kode modular tidak akan Anda rasakan sebelum kode dan pernyataan compat sepenuhnya dihapus dari aplikasi.
Memperbarui kode inisialisasi
Perbarui kode inisialisasi aplikasi Anda agar menggunakan sintaksis modular versi 9 yang baru. Anda harus memperbarui kode ini setelah menyelesaikan pemfaktoran ulang semua kode di aplikasi, karena firebase.initializeApp() menginisialisasi status global baik untuk API compat maupun modular, sedangkan fungsi initializeApp() modular hanya menginisialisasi status untuk modular.
Sebelum: compat versi 9
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Sesudah: modular versi 9
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Menghapus kode compat
Untuk merealisasikan manfaat ukuran SDK modular versi 9, Anda tetap harus mengonversi semua pemanggilan ke gaya modular yang ditunjukkan di atas dan menghapus semua pernyataan import "firebase/compat/* dari kode Anda. Setelah selesai, seharusnya tidak ada lagi referensi ke namespace global firebase.* atau kode lain dalam gaya SDK versi 8.
Menggunakan library compat dari jendela
SDK versi 9 dioptimalkan untuk berfungsi dengan modul, bukan objek window browser. Versi library sebelumnya memungkinkan pemuatan dan pengelolaan Firebase menggunakan namespace window.firebase. Hal ini tidak direkomendasikan untuk ke depannya karena tidak memungkinkan penghapusan kode yang tidak digunakan.
Namun, versi compat JavaScript SDK dapat berfungsi dengan window
bagi developer yang memilih untuk tidak segera memulai jalur upgrade modular.
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
Pada prinsipnya, library kompatibilitas menggunakan kode modular versi 9 dan menyediakan API yang sama seperti SDK versi 8. Artinya, Anda dapat melihat referensi API versi 8 dan cuplikan kode versi 8 untuk mengetahui detailnya. Metode ini tidak direkomendasikan untuk penggunaan jangka panjang, tetapi sebagai awal untuk mengupgrade ke library versi 9 yang sepenuhnya modular.
Manfaat dan batasan versi 9
Versi 9 yang sepenuhnya modular memiliki keuntungan berikut dibandingkan versi sebelumnya:
- Versi 9 memungkinkan pemangkasan ukuran aplikasi secara drastis. Versi ini mengadopsi format Modul JavaScript modern, sehingga memungkinkan proses "tree shaking" yang mengimpor artefak yang dibutuhkan aplikasi saja. Bergantung pada aplikasi Anda, tree-shaking dengan versi 9 dapat menghasilkan pemangkasan kilobyte hingga 80% dibandingkan aplikasi serupa yang di-build dengan versi 8.
- Versi 9 akan tetap mendapatkan manfaat dari pengembangan fitur yang masih terus berlangsung, sedangkan pengembangan fitur versi 8 akan dihentikan di masa mendatang.