Check out what’s new from Firebase at Google I/O 2022. Learn more

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 tamamen 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 benzerlerine 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'sına ç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 9 uyumluluk kitaplıklarını kullanmadan sürüm 8 kodunu 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ın kaynağını düzenlemeyi tamamlayabilmeniz ve ardından onu derlemeden ve kesinti olmadan ç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 uyumlu 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.8.1

# OR

yarn add firebase@9.8.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. Bunun, Kimlik Doğrulama ve Cloud Firestore API'lerine çağrıları yeniden düzenleyen iki örnekte 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
});

Ö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 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.8.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.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 tavsiye edilir.

Sürüm 9'un faydaları 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. Modern JavaScript Modülü biçimini benimser ve yalnızca uygulamanızın ihtiyaç duyduğu yapıları içe aktardığınız "ağaç sallama" uygulamalarına izin verir. 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.