Ad alanlı API'den modüler API'ye yükseltme

Şu anda compat kitaplıklarından sürüm 8'e veya önceki sürümlere kadar herhangi bir ad alanlı Firebase Web API'sini kullanan uygulamalar, bu kılavuzdaki talimatları kullanarak modüler API'ye geçmeyi düşünmelidir.

Bu kılavuz, ad alanlı API'ye aşina olduğunuzu ve yükseltme ve devam eden modüler uygulama geliştirme için webpack veya Rollup gibi bir modül paketleyicisinden yararlanacağınızı varsayar.

Geliştirme ortamınızda bir modül paketleyici kullanılması önemle tavsiye edilir. Birini kullanmazsanız, uygulama boyutunun küçültülmesiyle modüler API'nin temel avantajlarından yararlanamazsınız. SDK'yı yüklemek için npm'ye 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 kavramlarda ve pratik adımlarda uzmanlaşabilirsiniz.

Ad alanlı ( compat ) kitaplıklar hakkında

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

  • Modüler - web uygulamanızı mümkün olduğunca küçük ve hızlı hale getirmek için ağaç sallamayı (kullanılmayan kodun kaldırılmasını) kolaylaştırmak üzere tasarlanmış yeni bir API yüzeyi.
  • Namespaced ( compat ) - SDK'nın önceki sürümleriyle tamamen uyumlu olan ve Firebase kodunuzun tamamını aynı anda değiştirmeden yükseltme yapmanıza olanak tanıyan tanıdık bir API yüzeyi. Uyumluluk kitaplıklarının, ad alanlı benzerlerine göre çok az boyutu veya performans avantajı vardır veya hiç yoktur.

Bu kılavuz, yükseltmenizi kolaylaştırmak için uyumluluk kitaplıklarından yararlanacağınızı varsaymaktadır. Bu kitaplıklar, modüler API için yeniden düzenlenen kodun yanı sıra ad alanlı kodu kullanmaya devam etmenize olanak tanır. Bu, yükseltme sürecinde çalışırken uygulamanızı daha kolay derleyip hata 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), uyumluluk kitaplıklarını kullanmadan eski ad alanlı kodu yeniden düzenlemek pratik olabilir. Böyle bir uygulamayı yükseltiyorsanız, uyumluluk kitaplıklarını kullanmadan bu kılavuzdaki "modüler API" talimatlarını takip edebilirsiniz.

Yükseltme işlemi hakkında

Yükseltme işleminin her adımının kapsamı, uygulamanızın kaynağını düzenlemeyi tamamlayıp ardından onu kesintisiz olarak derleyip çalıştırabilmenizi sağlayacak şekilde düzenlenmiştir. Özetle, bir uygulamayı yükseltmek için şunları yapacaksınız:

  1. Modüler kitaplıkları ve uyumluluk kitaplıklarını uygulamanıza ekleyin.
  2. Uyumluluk için kodunuzdaki içe aktarma ifadelerini güncelleyin.
  3. Tek bir ürünün kodunu (örneğin, Kimlik Doğrulama) modüler stile yeniden düzenleyin.
  4. İsteğe bağlı: Bu noktada, devam etmeden önce Kimlik Doğrulama için uygulama boyutu avantajından yararlanmak amacıyla Kimlik Doğrulama uyumluluk kitaplığını ve Kimlik Doğrulama uyumluluk kodunu kaldırın.
  5. Her ürün için (örneğin, Cloud Firestore, FCM, vb.) işlevleri modüler tarzda yeniden düzenleyin, tüm alanlar tamamlanana kadar derleyin ve test edin.
  6. Başlatma kodunu modüler stile güncelleyin.
  7. Geriye kalan tüm uyumluluk bildirimlerini ve uyumluluk kodunu uygulamanızdan kaldırın.

SDK'nın en son sürümünü edinin

Başlamak için npm'yi kullanarak modüler kitaplıkları ve uyumlu kitaplıkları edinin:

npm i firebase@10.9.0

# OR

yarn add firebase@10.9.0

İçe aktarma işlemlerini uyumlu olacak şekilde güncelleyin

Bağımlılıklarınızı güncelledikten sonra kodunuzun çalışmaya devam etmesini sağlamak için, içe aktarma ifadelerinizi her içe aktarma işleminin "uyumlu" sürümünü kullanacak şekilde değiştirin. Örneğin:

Öncesi: sürüm 8 veya öncesi

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

Sonra: uyumlu

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

Modüler stile yeniden düzenleme

Ad alanlı API'ler nokta zincirli bir ad alanı ve hizmet modelini temel alırken, modüler yaklaşım, kodunuzun esas olarak işlevler etrafında organize edileceği anlamına gelir. Modüler API'de 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.

Modüler API'de 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: Kimlik Doğrulama işlevini yeniden düzenleme

Önce: uyumlu

Uyumluluk kodu, ad alanı 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: modüler

getAuth işlevi firebaseApp ilk parametresi olarak alır. onAuthStateChanged işlevi, ad alanlı API'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
});

Kimlik doğrulama yöntemi getRedirectResult işlenmesini güncelleyin

Modüler API, getRedirectResult çığır açan bir değişiklik getiriyor. Hiçbir yönlendirme işlemi çağrılmadığı zaman, modüler API, null bir kullanıcıya sahip bir UserCredential döndüren ad alanlı API'nin aksine, null döndürür.

Önce: uyumlu

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

Sonra: 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: Cloud Firestore işlevini yeniden düzenleme

Önce: uyumlu

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: modüler

getFirestore işlevi, daha önceki bir örnekte initializeApp döndürülen firebaseApp ilk parametresi olarak alır. Modüler API'de sorgu oluşturma kodunun ne kadar farklı olduğuna dikkat edin; Zincirleme yok ve query veya where gibi yöntemler artık ücretsiz işlevler olarak sunuluyor.

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

Modüler API, firestore.DocumentSnapshot.exists özelliğinin bir yönteme dönüştürüldüğü son derece önemli bir değişiklik getiriyor. İşlevsellik esasen aynıdır (bir belgenin mevcut olup olmadığının test edilmesi), ancak gösterildiği gibi daha yeni yöntemi kullanmak için kodunuzu yeniden düzenlemeniz gerekir:

Önce:uyumluluk

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

Sonra: modüler

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

Örnek 3: ad alanlı ve modüler kod stillerini birleştirme

Yükseltme sırasında uyumluluk kitaplıklarını kullanmak, modüler API için yeniden düzenlenen kodun yanı sıra ad alanlı kodu kullanmaya devam etmenize olanak tanır. Bu, Authentication'ı veya diğer Firebase SDK kodunu modüler stilde yeniden düzenlerken Cloud Firestore için mevcut ad alanlı kodu koruyabileceğiniz ve yine de uygulamanızı her iki kod stiliyle başarıyla derleyebileceğiniz anlamına gelir. Aynı durum Cloud Firestore gibi bir ürün içindeki ad alanlı ve modüler API 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, uyumluluk bildirimlerini ve kodu uygulamanızdan tamamen kaldırıncaya kadar modüler kodun uygulama boyutu avantajlarından yararlanamayacağınızı unutmayın.

Başlatma kodunu güncelle

Modüler 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() hem uyumlu hem de modüler API'ler için genel durumu başlatması, oysa modüler initializeApp() işlevinin yalnızca modüler API'ler için durumu başlatmasıdır.

Önce: uyumlu

import firebase from "firebase/compat/app"

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

Sonra: modüler

import { initializeApp } from "firebase/app"

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

Uyumluluk kodunu kaldır

Modüler API'nin 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/* ifadelerini kodunuzdan kaldırmalısınız. İşiniz bittiğinde, daha fazla referans olmamalıdır. firebase.* global ad alanına veya ad alanlı API stilindeki başka herhangi bir koda.

Uyumluluk kitaplığını pencereden kullanma

Modüler API, tarayıcının window nesnesi yerine modüllerle çalışacak şekilde optimize edilmiştir. Kütüphanenin önceki sürümleri, window.firebase ad alanı kullanılarak Firebase'in yüklenmesine ve yönetimine izin veriyordu. Kullanılmayan kodun ortadan kaldırılmasına izin vermediğinden bunun ileriye dönük olarak yapılması önerilmez. Ancak, modüler yükseltme yoluna hemen başlamayı tercih etmeyen geliştiriciler için JavaScript SDK'nın uyumlu sürümü window birlikte çalışır.

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

Uyumluluk kitaplığı, modüler kodu kullanır ve ona ad alanlı API ile aynı API'yi sağlar; bu, ayrıntılar için ad alanlı API referansına ve ad alanlı kod parçacıklarına başvurabileceğiniz anlamına gelir. Bu yöntem uzun süreli kullanım için önerilmez, ancak tam modüler kitaplığa yükseltmeye başlangıç ​​olarak önerilir.

Modüler SDK'nın avantajları ve sınırlamaları

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

  • Modüler SDK, uygulama boyutunun önemli ölçüde küçültülmesine olanak tanır. Yalnızca uygulamanızın ihtiyaç duyduğu yapıtları içe aktardığınız "ağaç sallama" uygulamalarına olanak tanıyan modern JavaScript Modülü formatını benimser. Uygulamanıza bağlı olarak, modüler SDK ile ağaç sallama, ad alanlı API kullanılarak oluşturulan benzer bir uygulamaya kıyasla %80 daha az kilobaytla sonuçlanabilir.
  • Modüler SDK, devam eden özellik geliştirmeden yararlanmaya devam ederken, ad alanlı API bundan faydalanmayacaktır.