Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Tingkatkan dari versi 8 ke Web SDK modular

Aplikasi yang saat ini menggunakan Firebase Web SDK versi 8 atau yang lebih lama harus mempertimbangkan untuk bermigrasi ke versi 9 menggunakan petunjuk dalam panduan ini.

Panduan ini mengasumsikan bahwa Anda sudah familiar dengan versi 8 dan bahwa Anda akan memanfaatkan bundler modul seperti webpack atau Rollup untuk memutakhirkan dan pengembangan versi 9 yang sedang berlangsung.

Menggunakan bundler modul di lingkungan pengembangan Anda sangat disarankan. Jika tidak menggunakannya, Anda tidak akan dapat memanfaatkan manfaat utama versi 9 dalam ukuran aplikasi yang lebih kecil. Anda memerlukan npm atau yarn untuk menginstal SDK.

Langkah-langkah peningkatan dalam panduan ini akan didasarkan pada aplikasi web imajiner yang menggunakan Authentication dan Cloud Firestore SDK. Dengan mempelajari contoh-contohnya, Anda dapat menguasai konsep dan langkah-langkah praktis yang diperlukan untuk mengupgrade semua Firebase Web SDK yang didukung.

Tentang perpustakaan yang kompatibel

Ada dua jenis library yang tersedia untuk Firebase Web SDK versi 9:

  • Modular - permukaan API baru yang dirancang untuk memfasilitasi tree-shaking (penghapusan kode yang tidak digunakan) untuk membuat aplikasi web Anda sekecil dan secepat mungkin.
  • Compat - permukaan API yang sudah dikenal yang sepenuhnya kompatibel dengan SDK versi 8, memungkinkan Anda meningkatkan ke versi 9 tanpa mengubah semua kode Firebase sekaligus. Pustaka compat memiliki sedikit atau tidak ada keunggulan kinerja atau ukuran dibandingkan versi 8 rekan-rekan mereka.

Panduan ini mengasumsikan bahwa Anda akan memanfaatkan perpustakaan kompatibilitas versi 9 untuk memfasilitasi pemutakhiran Anda. Pustaka ini memungkinkan Anda untuk terus menggunakan kode versi 8 bersama kode yang difaktorkan ulang untuk versi 9. Ini berarti Anda dapat mengompilasi dan men-debug aplikasi dengan lebih mudah saat Anda mengerjakan proses pemutakhiran.

Untuk aplikasi dengan eksposur yang sangat kecil ke Firebase Web SDK – misalnya, aplikasi yang hanya membuat panggilan sederhana ke Authentication API – mungkin praktis untuk memfaktorkan ulang kode versi 8 tanpa menggunakan pustaka kompatibilitas versi 9. Jika Anda memutakhirkan aplikasi semacam itu, Anda dapat mengikuti petunjuk dalam panduan ini untuk "modular versi 9" tanpa menggunakan pustaka kompatibilitas.

Tentang proses peningkatan

Setiap langkah proses pemutakhiran dicakup sehingga Anda dapat menyelesaikan pengeditan sumber untuk aplikasi Anda dan kemudian mengompilasi dan menjalankannya tanpa kerusakan. Singkatnya, inilah yang akan Anda lakukan untuk meningkatkan versi aplikasi:

  1. Tambahkan pustaka versi 9 dan pustaka kompatibilitas ke aplikasi Anda.
  2. Perbarui pernyataan impor dalam kode Anda ke v9 compat.
  3. Memfaktorkan ulang kode untuk satu produk (misalnya, Otentikasi) ke gaya modular.
  4. Opsional: pada titik ini, hapus library compat Authentication dan kode compat untuk Authentication guna mewujudkan manfaat ukuran aplikasi untuk Authentication sebelum melanjutkan.
  5. Memfaktorkan ulang fungsi untuk setiap produk (misalnya, Cloud Firestore, FCM, dll.) ke gaya modular, mengompilasi, dan menguji hingga semua area selesai.
  6. Perbarui kode inisialisasi ke gaya modular.
  7. Hapus semua pernyataan kompatibilitas versi 9 yang tersisa dan kode kompatibilitas dari aplikasi Anda.

Dapatkan SDK versi 9

Untuk memulai, dapatkan pustaka versi 9 dan pustaka yang kompatibel menggunakan npm:

npm i firebase@9.9.4

# OR

yarn add firebase@9.9.4

Perbarui impor ke kompatibilitas v9

Agar kode Anda tetap berfungsi setelah memperbarui ketergantungan Anda dari v8 ke v9 beta, ubah pernyataan impor Anda untuk menggunakan versi "compat" dari setiap impor. Sebagai contoh:

Sebelum: versi 8

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

Setelah: versi 9 kompat

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

Refactor ke gaya modular

Sementara API versi 8 didasarkan pada namespace dan pola layanan yang dirantai titik, pendekatan modular versi 9 berarti bahwa kode Anda akan diatur terutama di sekitar fungsi . Di versi 9, paket firebase/app dan paket lainnya tidak mengembalikan ekspor komprehensif yang berisi semua metode dari paket tersebut. Sebagai gantinya, paket mengekspor fungsi individual.

Di versi 9, layanan diteruskan sebagai argumen pertama, dan fungsi kemudian menggunakan detail layanan untuk melakukan sisanya. Mari kita periksa cara kerjanya dalam dua contoh panggilan refactor ke Authentication dan Cloud Firestore API.

Contoh 1: refactoring fungsi Otentikasi

Sebelum: versi 9 kompatibel

Kode kompatibilitas versi 9 identik dengan kode versi 8, tetapi impor telah berubah.

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

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

Setelah: versi 9 modular

Fungsi getAuth menggunakan firebaseApp sebagai parameter pertamanya. Fungsi onAuthStateChanged tidak dirantai dari instance auth seperti yang ada di versi 8; sebagai gantinya, ini adalah fungsi gratis yang menggunakan auth sebagai parameter pertamanya.

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

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

Contoh 2: memfaktorkan ulang fungsi Cloud Firestore

Sebelum: versi 9 kompatibel

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

Setelah: versi 9 modular

Fungsi getFirestore menggunakan firebaseApp sebagai parameter pertamanya, yang dikembalikan dari initializeApp dalam contoh sebelumnya. Perhatikan bagaimana kode untuk membentuk kueri sangat berbeda di versi 9; tidak ada rantai, dan metode seperti query atau where sekarang diekspos sebagai fungsi gratis.

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

Perbarui referensi ke Firestore DocumentSnapshot.exists

Versi 9 memperkenalkan perubahan yang melanggar di mana properti firestore.DocumentSnapshot.exists telah diubah menjadi metode . Fungsionalitasnya pada dasarnya sama (menguji apakah dokumen ada) tetapi Anda harus memfaktorkan ulang kode Anda untuk menggunakan metode v9 seperti yang ditunjukkan:

Sebelum: versi 9 kompatibel

if (snapshot.exists) {
  console.log("the document exists");
}

Setelah: versi 9 modular

if (snapshot.exists()) {
  console.log("the document exists");
}

Contoh 3: menggabungkan gaya kode versi 8 dan versi 9

Menggunakan compat library selama pemutakhiran memungkinkan Anda untuk terus menggunakan kode versi 8 bersama kode yang difaktorkan ulang untuk versi 9. Ini berarti Anda dapat menyimpan kode versi 8 yang ada untuk Cloud Firestore saat Anda memfaktorkan ulang Authentication atau kode Firebase SDK lainnya ke gaya versi 9, dan masih berhasil mengompilasi aplikasi Anda 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 hidup berdampingan, selama 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);

Ingatlah bahwa, meskipun aplikasi Anda akan dikompilasi, Anda tidak akan mendapatkan manfaat ukuran aplikasi dari kode modular sampai Anda sepenuhnya menghapus pernyataan dan kode compat dari aplikasi Anda.

Perbarui kode inisialisasi

Perbarui kode inisialisasi aplikasi Anda untuk menggunakan sintaks versi 9 modular baru. Penting untuk memperbarui kode ini setelah Anda menyelesaikan pemfaktoran ulang semua kode di aplikasi Anda; ini karena firebase.initializeApp() menginisialisasi status global untuk API compat dan modular, sedangkan fungsi modular initializeApp() hanya menginisialisasi status untuk modular.

Sebelum: versi 9 kompatibel

import firebase from "firebase/compat/app"

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

Setelah: versi 9 modular

import { initializeApp } from "firebase/app"

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

Hapus kode kompat

Untuk menyadari manfaat ukuran SDK modular versi 9, Anda harus mengonversi semua pemanggilan ke gaya modular yang ditunjukkan di atas dan menghapus semua pernyataan import "firebase/compat/* dari kode Anda. Setelah selesai, tidak boleh ada lebih banyak referensi ke firebase.* namespace global atau kode lain apa pun dalam gaya SDK versi 8.

Menggunakan perpustakaan kompat dari jendela

SDK versi 9 dioptimalkan untuk bekerja dengan modul daripada objek window browser. Versi library sebelumnya mengizinkan pemuatan dan pengelolaan Firebase dengan menggunakan namespace window.firebase . Ini tidak disarankan untuk selanjutnya karena tidak memungkinkan penghapusan kode yang tidak digunakan. Namun, versi kompatibel dari SDK JavaScript berfungsi dengan window untuk pengembang yang memilih untuk tidak segera memulai jalur peningkatan modular.

<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

Pustaka kompatibilitas menggunakan kode versi 9 modular di bawah tenda dan menyediakannya dengan API yang sama dengan SDK versi 8; ini berarti Anda dapat merujuk ke referensi API versi 8 dan cuplikan kode versi 8 untuk detailnya. Metode ini tidak disarankan untuk penggunaan jangka panjang, tetapi sebagai awal untuk meningkatkan ke pustaka versi 9 sepenuhnya modular.

Manfaat dan batasan versi 9

Versi 9 yang sepenuhnya termodulasi memiliki keunggulan ini dibandingkan versi sebelumnya:

  • Versi 9 memungkinkan ukuran aplikasi yang dikurangi secara dramatis. Ini mengadopsi format Modul JavaScript modern, memungkinkan praktik "mengguncang pohon" di mana Anda hanya mengimpor artefak yang dibutuhkan aplikasi Anda. Bergantung pada aplikasi Anda, pengocokan pohon dengan versi 9 dapat menghasilkan kilobyte 80% lebih sedikit daripada aplikasi serupa yang dibuat menggunakan versi 8.
  • Versi 9 akan terus mendapat manfaat dari pengembangan fitur yang sedang berlangsung, sementara versi 8 akan dibekukan di masa mendatang.