Catch up on everthing we announced at this year's Firebase Summit. Learn more

Tingkatkan dari versi 8 ke SDK Web 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 mengambil keuntungan dari modul bundler seperti Webpack atau Rollup untuk upgrade dan versi yang sedang berlangsung 9 pembangunan.

Menggunakan bundler modul di lingkungan pengembangan Anda sangat disarankan. Jika Anda tidak menggunakannya, Anda tidak akan dapat memanfaatkan manfaat utama versi 9 dalam ukuran aplikasi yang lebih kecil. Anda harus NPM atau benang 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 pohon-gemetar (pengangkatan kode yang tidak terpakai) untuk membuat aplikasi web Anda sebagai kecil dan secepat mungkin.
  • Compat - permukaan API familiar yang sepenuhnya kompatibel dengan versi 8 SDK, memungkinkan Anda untuk meng-upgrade ke versi 9 tanpa mengubah semua kode Firebase Anda 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 pustaka 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. Fungsi pemfaktoran ulang untuk setiap produk (misalnya, Cloud Firestore, FCM, dll.) ke gaya modular, kompilasi dan pengujian 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.5.0

# OR

yarn add firebase@9.5.0

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 versi 8 API didasarkan pada namespace dan layanan pola dot-dirantai, versi 9 ini pendekatan modular berarti bahwa kode Anda akan diselenggarakan terutama di sekitar fungsi. Dalam versi 9, yang firebase/app paket dan paket lainnya tidak kembali ekspor komprehensif yang berisi semua metode dari paket. 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 kompat

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

The getAuth fungsi mengambil firebaseApp sebagai parameter pertama. The onAuthStateChanged fungsi tidak dirantai dari auth contoh seperti itu akan di versi 8; sebaliknya, itu fungsi gratis yang akan membawa auth sebagai parameter pertama.

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 kompat

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

The getFirestore fungsi mengambil firebaseApp sebagai parameter pertama, yang kembali dari initializeApp di contoh sebelumnya. Perhatikan bagaimana kode untuk membentuk kueri sangat berbeda di versi 9; tidak ada chaining, dan metode seperti query atau where sekarang terkena 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());
});

Contoh 3: menggabungkan gaya kode versi 8 dan versi 9

Menggunakan library compat 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 melakukan refactor 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 versi 8 dan versi 9 kode 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. Hal ini penting untuk memperbarui kode ini setelah Anda menyelesaikan refactoring semua kode di aplikasi Anda; ini adalah karena firebase.initializeApp() menginisialisasi negara global untuk kedua compat dan API modular, sedangkan modular initializeApp() fungsi menginisialisasi hanya negara untuk modular.

Sebelum: versi 9 kompat

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 versi 9 SDK modular, Anda harus akhirnya mengkonversi semua doa untuk gaya modular yang ditunjukkan di atas dan menghapus semua import "firebase/compat/* pernyataan dari kode Anda. Ketika Anda selesai, seharusnya tidak ada lebih referensi ke firebase.* namespace global atau kode lainnya dalam gaya versi 8 SDK.

Menggunakan perpustakaan kompat dari jendela

Versi 9 SDK dioptimalkan untuk bekerja dengan modul daripada browser window objek. Versi sebelumnya dari perpustakaan memungkinkan bongkar manajemen Firebase dengan menggunakan window.firebase namespace. Ini tidak disarankan untuk selanjutnya karena tidak memungkinkan penghapusan kode yang tidak digunakan. Namun, versi compat dari SDK JavaScript tidak bekerja dengan window untuk pengembang yang memilih untuk tidak segera memulai jalur upgrade modular.

<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/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 pada versi 8 API referensi dan versi 8 potongan kode untuk rincian. 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.