Ş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:
- Uygulamanıza sürüm 9 kitaplıklarını ve uyumluluk kitaplıklarını ekleyin.
- Kodunuzdaki içe aktarma ifadelerini v9 uyumluluğuna güncelleyin.
- Modüler stile tek bir ürün (örneğin, Kimlik Doğrulama) için yeniden düzenleme kodu.
- İ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.
- 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.
- Başlatma kodunu modüler stile güncelleyin.
- 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.