Mengupgrade ke Web SDK modular (v9)

Aplikasi yang saat ini menggunakan Web SDK versi 8 atau yang lebih lama 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 melanjutkan 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.

Tentang library compat

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

  • Modular - platform API baru yang didesain untuk memfasilitasi tree shaking (penghapusan kode yang tidak digunakan) agar aplikasi web Anda menjadi sekecil dan secepat mungkin.
  • Compat - platform API yang tidak asing yang sepenuhnya kompatibel dengan versi 8, sehingga Anda dapat mengupgrade ke versi 9 tanpa mengubah semua kode SDK 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. Artinya, Anda dapat mengompilasi dan men-debug aplikasi dengan lebih mudah saat melakukan proses upgrade.

Untuk aplikasi yang tidak banyak berhubungan dengan Web SDK, 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:

  1. Tambahkan library dan library compat versi 9 ke aplikasi Anda.
  2. Perbarui pernyataan impor dalam kode ke compat v9.
  3. Faktorkan ulang kode ke gaya modular.
  4. Hapus library compat Authentication dan kode compat untuk Authentication guna merealisasikan manfaat ukuran aplikasi.
  5. Perbarui kode inisialisasi menjadi gaya modular.
  6. 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 (versi terbaru https://www.npmjs.com/package/firebase):

npm i firebase@11.0.2

# OR

yarn add firebase@11.0.2

Memperbarui impor ke compat v9

Agar kode tetap berfungsi setelah dependensi diperbarui dari v8 ke v9, 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.

Contoh: memfaktorkan ulang fungsi Authentication sederhana

Sebelum: compat versi 9

Kode compat versi 9 identik dengan kode versi 8, tetapi impor berubah. Dengan menggunakan library compat selama proses upgrade, Anda dapat terus menggunakan kode versi 8 bersama dengan kode yang difaktorkan ulang untuk versi 9.

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 autentikasi 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 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, tidak boleh ada lagi referensi ke namespace global firebase.* atau kode lain dalam gaya SDK versi 8.

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 terus mendapatkan manfaat dari pengembangan fitur yang masih terus berlangsung, sedangkan pengembangan fitur versi 8 akan dihentikan di masa mendatang.