Sürüm 8'den modüler Web SDK'ya yükseltme

Şu anda Firebase Web SDK sürüm 8 veya daha eskisini kullanan uygulamalar, bu kılavuzdaki talimatları kullanarak sürüm 9'a geçmeyi düşünmelidir.

Bu kılavuz, sürüm 8'e aşina olduğunuzu ve yükseltme ve devam eden sürüm 9 geliştirme için web paketi veya Rollup gibi bir modül paketleyiciden yararlanacağınızı varsayar.

Geliştirme ortamınızda bir modül paketleyici kullanmanız şiddetle tavsiye edilir. Birini kullanmazsanız, sürüm 9'un küçültülmüş uygulama boyutundaki ana avantajlarından yararlanamazsınız. SDK'yı kurmak için npm veya ipliğe ihtiyacınız olacak.

Bu kılavuzdaki yükseltme adımları, Kimlik Doğrulama ve Cloud Firestore SDK'larını kullanan hayali bir web uygulamasını temel alacaktır. Örnekler üzerinde çalışarak, desteklenen tüm Firebase Web SDK'larını yükseltmek için gereken kavramlar ve pratik adımlar konusunda uzmanlaşabilirsiniz.

Uyumluluk kitaplıkları hakkında

Firebase Web SDK sürüm 9 için iki tür kitaplık mevcuttur:

  • Modüler - web uygulamanızı olabildiğince küçük ve hızlı hale getirmek için ağaç sallamayı (kullanılmayan kodun kaldırılması) kolaylaştırmak için tasarlanmış yeni bir API yüzeyi.
  • Uyumluluk - sürüm 8 SDK ile tam uyumlu, tüm Firebase kodunuzu bir kerede değiştirmeden sürüm 9'a yükseltmenize olanak tanıyan tanıdık bir API yüzeyi. Uyumluluk kitaplıklarının, sürüm 8 muadillerine göre çok az boyut veya performans avantajı vardır veya hiç yoktur.

Bu kılavuz, yükseltmenizi kolaylaştırmak için sürüm 9 uyumlu kitaplıklardan yararlanacağınızı varsaymaktadır. Bu kitaplıklar, sürüm 9 için yeniden düzenlenen kodun yanı sıra sürüm 8 kodunu kullanmaya devam etmenizi sağlar. Bu, yükseltme işlemi boyunca çalışırken uygulamanızı daha kolay derleyip hatalarını ayıklayabileceğiniz anlamına gelir.

Firebase Web SDK'ya çok az maruz kalan uygulamalar için - örneğin, Kimlik Doğrulama API'lerine yalnızca basit bir çağrı yapan bir uygulama - sürüm 8 kodunu sürüm 9 uyumluluk kitaplıklarını kullanmadan yeniden düzenlemek pratik olabilir. Böyle bir uygulamayı yükseltiyorsanız, uyumluluk kitaplıklarını kullanmadan "sürüm 9 modüler" için bu kılavuzdaki talimatları uygulayabilirsiniz.

Yükseltme işlemi hakkında

Yükseltme işleminin her adımı, uygulamanız için kaynağı düzenlemeyi tamamlayabilmeniz ve ardından onu derleyip bozulmadan çalıştırabilmeniz için kapsamlıdır. Özetle, bir uygulamayı yükseltmek için şunları yapacaksınız:

  1. Uygulamanıza sürüm 9 kitaplıklarını ve uyumluluk kitaplıklarını ekleyin.
  2. Kodunuzdaki içe aktarma ifadelerini v9 uyumluluğuna güncelleyin.
  3. Modüler stile tek bir ürün (örneğin, Kimlik Doğrulama) için yeniden düzenleme kodu.
  4. İsteğe bağlı: Bu noktada, devam etmeden önce Kimlik Doğrulama için uygulama boyutu avantajını gerçekleştirmek için Kimlik Doğrulama uyum kitaplığını ve Kimlik Doğrulama için uyumluluk kodunu kaldırın.
  5. Modüler stilde her ürün için yeniden düzenleme işlevleri (örneğin, Cloud Firestore, FCM, vb.), tüm alanlar tamamlanana kadar derleme ve test etme.
  6. Başlatma kodunu modüler stile güncelleyin.
  7. Kalan tüm sürüm 9 uyumluluk ifadelerini ve uyumluluk kodunu uygulamanızdan kaldırın.

9 SDK sürümünü edinin

Başlamak için, npm kullanarak sürüm 9 kitaplıklarını ve kitaplıkları uyumlu hale getirin:

npm i firebase@9.22.1

# OR

yarn add firebase@9.22.1

İçe aktarmaları v9 uyumluluğuna güncelleyin

Bağımlılığınızı v8'den v9 beta'ya güncelledikten sonra kodunuzu çalışır durumda tutmak için, içe aktarma ifadelerinizi her içe aktarmanın "uyumlu" sürümünü kullanacak şekilde değiştirin. Örneğin:

Önce: sürüm 8

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

Sonra: sürüm 9 uyumluluğu

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

Modüler stile yeniden düzenleme

Sürüm 8 API'leri nokta zincirli ad alanı ve hizmet modeline dayalıyken, sürüm 9'un modüler yaklaşımı, kodunuzun temel olarak işlevler etrafında organize edileceği anlamına gelir. Sürüm 9'da, firebase/app paketi ve diğer paketler, paketteki tüm yöntemleri içeren kapsamlı bir dışa aktarma döndürmez. Bunun yerine, paketler bireysel işlevleri dışa aktarır.

Sürüm 9'da, hizmetler ilk argüman olarak iletilir ve işlev daha sonra gerisini yapmak için hizmetin ayrıntılarını kullanır. Kimlik Doğrulama ve Cloud Firestore API'lerine çağrıları yeniden düzenleyen iki örnekte bunun nasıl çalıştığını inceleyelim.

Örnek 1: bir Kimlik Doğrulama işlevini yeniden düzenleme

Önce: sürüm 9 uyumluluğu

Sürüm 9 uyumluluk kodu, sürüm 8 koduyla aynıdır, ancak içe aktarmalar değişmiştir.

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

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

Sonra: sürüm 9 modüler

getAuth işlevi, firebaseApp ilk parametresi olarak alır. onAuthStateChanged işlevi, sürüm 8'de olduğu gibi auth örneğinden zincirlenmez; bunun yerine, ilk parametresi olarak auth alan ücretsiz bir işlevdir.

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

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

Auth yönteminin getRedirectResult işlenmesini güncelleyin

Sürüm 9, getRedirectResult içinde bir kırılma değişikliği sunar. Yeniden yönlendirme işlemi çağrılmadığında, Sürüm 9, null bir kullanıcıyla bir UserCredential döndüren Sürüm 8'in aksine null değerini döndürür.

Önce: sürüm 9 uyumluluğu

const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
  return null;
}
return result;

Sonra: sürüm 9 modüler

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;

Örnek 2: bir Cloud Firestore işlevini yeniden düzenleme

Önce: sürüm 9 uyumluluğu

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

Sonra: sürüm 9 modüler

getFirestore işlevi, daha önceki bir örnekte initializeApp öğesinden döndürülen ilk parametresi olarak firebaseApp alır. Bir sorgu oluşturacak kodun sürüm 9'da nasıl çok farklı olduğuna dikkat edin; zincirleme yoktur ve query veya where gibi yöntemler artık ücretsiz işlevler olarak sunulur.

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

Firestore DocumentSnapshot.exists referanslarını güncelleyin

Sürüm 9, firestore.DocumentSnapshot.exists özelliğinin bir yöntemle değiştirildiği bir kırılma değişikliği sunar. İşlevsellik temelde aynıdır (bir belgenin var olup olmadığını test etme) ancak gösterildiği gibi v9 yöntemini kullanmak için kodunuzu yeniden düzenlemeniz gerekir:

Önce: sürüm 9 uyumluluğu

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

Sonra: sürüm 9 modüler

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

Örnek 3: sürüm 8 ve sürüm 9 kod stillerini birleştirme

Yükseltme sırasında uyumluluk kitaplıklarını kullanmak, sürüm 9 için yeniden düzenlenen kodun yanı sıra sürüm 8 kodunu kullanmaya devam etmenizi sağlar. uygulamanızı her iki kod stiliyle de başarıyla derleyin. Aynısı, Cloud Firestore gibi bir ürün içindeki sürüm 8 ve sürüm 9 kodu için de geçerlidir; uyumluluk paketlerini içe aktardığınız sürece yeni ve eski kod stilleri bir arada bulunabilir:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

Uygulamanız derlenecek olsa da, uygulamanızdan uyumluluk deyimlerini ve kodunu tamamen kaldırana kadar modüler kodun uygulama boyutu avantajlarını elde edemeyeceğinizi unutmayın.

Başlatma kodunu güncelle

Yeni modüler sürüm 9 sözdizimini kullanmak için uygulamanızın başlatma kodunu güncelleyin. Uygulamanızdaki tüm kodu yeniden düzenlemeyi tamamladıktan sonra bu kodu güncellemeniz önemlidir; bunun nedeni, firebase.initializeApp() 'ın hem uyumlu hem de modüler API'ler için genel durumu başlatması, modüler initializeApp() işlevinin ise yalnızca modüler için durumu başlatmasıdır.

Önce: sürüm 9 uyumluluğu

import firebase from "firebase/compat/app"

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

Sonra: sürüm 9 modüler

import { initializeApp } from "firebase/app"

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

Uyumluluk kodunu kaldır

Sürüm 9 modüler SDK'nın boyut avantajlarını gerçekleştirmek için, sonunda tüm çağrıları yukarıda gösterilen modüler stile dönüştürmeli ve tüm import "firebase/compat/* deyimlerini kodunuzdan kaldırmalısınız. firebase.* global ad alanına veya sürüm 8 SDK stilindeki herhangi bir başka koda daha fazla referans.

Pencereden uyumluluk kitaplığını kullanma

Sürüm 9 SDK, tarayıcının window nesnesi yerine modüllerle çalışmak üzere optimize edilmiştir. Kütüphanenin önceki sürümleri, window.firebase ad alanını kullanarak Firebase'in yüklenmesine ve yönetilmesine izin veriyordu. Bu, kullanılmayan kodun ortadan kaldırılmasına izin vermediğinden ileriye dönük olarak önerilmez. Ancak, modüler yükseltme yoluna hemen başlamamayı tercih eden geliştiriciler için JavaScript SDK'sının uyumlu sürümü window birlikte çalışır.

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

Uyumluluk kitaplığı, başlık altındaki modüler sürüm 9 kodunu kullanır ve ona sürüm 8 SDK ile aynı API'yi sağlar; bu, ayrıntılar için sürüm 8 API referansına ve sürüm 8 kod parçacıklarına başvurabileceğiniz anlamına gelir. Bu yöntem, uzun süreli kullanım için değil, tam modüler sürüm 9 kitaplığına yükseltmeye bir başlangıç ​​olarak önerilir.

Sürüm 9'un avantajları ve sınırlamaları

Tamamen modülerleştirilmiş sürüm 9, önceki sürümlere göre şu avantajlara sahiptir:

  • Sürüm 9, önemli ölçüde azaltılmış bir uygulama boyutu sağlar. Yalnızca uygulamanızın ihtiyaç duyduğu yapıları içe aktardığınız "ağaç sallama" uygulamalarına izin veren modern JavaScript Modülü biçimini benimser. Uygulamanıza bağlı olarak, sürüm 9 ile ağaç sallama, sürüm 8 kullanılarak oluşturulmuş karşılaştırılabilir bir uygulamaya göre %80 daha az kilobayt ile sonuçlanabilir.
  • Sürüm 9, devam eden özellik geliştirmeden yararlanmaya devam ederken, sürüm 8 gelecekte bir noktada dondurulacak.