Bu sayfa, Cloud Translation API ile çevrilmiştir.

Modüler Firebase JS SDK'ya geçiş yaparak web uygulamanızı güçlendirin

1. Başlamadan önce

Modüler Firebase JS SDK'sı, mevcut JS SDK'sının yeniden yazılmış halidir ve bir sonraki ana sürüm olarak yayınlanacaktır. Geliştiricilerin daha küçük paketler oluşturmak ve daha iyi performans elde etmek için kullanılmayan kodu Firebase JS SDK'sından hariç tutmasına olanak tanır.

Modüler JS SDK'sındaki en belirgin fark, özelliklerin artık her şeyi içeren tek bir firebase ad alanında değil, içe aktaracağınız serbest yüzen işlevlerde düzenlenmesidir. Kod düzenlemenin bu yeni yolu, ağaç sallamayı mümkün kılar. Ayrıca, şu anda v8 Firebase JS SDK'sını kullanan tüm uygulamaları yeni modüler SDK'ya nasıl yükselteceğinizi öğreneceksiniz.

Sorunsuz bir yükseltme süreci sağlamak için bir dizi uyumluluk paketi sağlanır. Bu codelab'de, uygulamayı parça parça taşımak için uyumluluk paketlerini nasıl kullanacağınızı öğreneceksiniz.

Oluşturacağınız uygulama

Bu codelab'de, v8 JS SDK'sını kullanan mevcut bir hisse senedi izleme listesi web uygulamasını üç aşamada kademeli olarak yeni modüler JS SDK'sına taşıyacaksınız:

Uyumluluk paketlerini kullanacak şekilde uygulamayı yükseltme
Uygulamayı uyumluluk paketlerinden modüler API'ye parça parça yükseltme
Uygulamanın performansını daha da artırmak için Firestore SDK'sının hafif bir uygulaması olan Firestore Lite'ı kullanın.

Bu codelab, Firebase SDK'sını yükseltmeye odaklanmaktadır. Diğer kavramlar ve kod blokları işaretlenmiştir ve yalnızca kopyalayıp yapıştırmanız için kullanımınıza sunulmuştur.

Gerekenler

Chrome gibi tercih ettiğiniz bir tarayıcı
WebStorm, Atom, Sublime veya VS Code gibi tercih ettiğiniz IDE/metin düzenleyici
Genellikle Node.js ile birlikte gelen paket yöneticisi npm
Codelab'in örnek kodu (Kodu nasıl alacağınız için codelab'in sonraki adımına bakın.)

2. Ayarları yapma

Kodu alma

Bu proje için ihtiyacınız olan her şey bir Git deposunda bulunur. Başlamak için kodu indirip favori geliştirici ortamınızda açmanız gerekir.

Komut satırından codelab'in GitHub deposunu kopyalayın:

git clone https://github.com/FirebaseExtended/codelab-modular-sdk.git

Alternatif olarak, git yüklü değilse deposuyu ZIP dosyası olarak indirebilir ve indirilen ZIP dosyasını açabilirsiniz.

Uygulamayı içe aktarma

IDE'nizi kullanarak codelab-modular-sdk dizinini açın veya içe aktarın.
Uygulamayı yerel olarak derlemek ve çalıştırmak için gereken bağımlılıkları yüklemek üzere npm install komutunu çalıştırın.
Uygulamayı derlemek için npm run build'ü çalıştırın.
Web sunucusunu başlatmak için npm run serve'ü çalıştırın
http://localhost:8080 adresine gidecek şekilde bir tarayıcı sekmesi açın.

3. Referans değer belirleme

Başlangıç noktanız neresi?

Başlangıç noktanız, bu codelab için tasarlanmış bir stok izleme listesi uygulamasıdır. Kod, bu kod laboratuvarındaki kavramları göstermek için basitleştirilmiştir ve hata işleme işlemleri çok azdır. Bu koddan herhangi birini üretim uygulamasında yeniden kullanmayı seçerseniz hataları giderdiğinizden ve tüm kodu tamamen test ettiğinizden emin olun.

Uygulamada her şeyin çalıştığından emin olun:

Sağ üst köşedeki Giriş düğmesini kullanarak anonim olarak giriş yapın.
Giriş yaptıktan sonra Ekle düğmesini tıklayıp harfleri yazıp açılan arama sonucu satırını tıklayarak "NFLX", "SBUX" ve "T"yi arama ve izleme listesine ekleyin.
Satırın sonundaki x simgesini tıklayarak bir hissesi izleme listesinden kaldırın.
Hisse senedi fiyatıyla ilgili gerçek zamanlı güncellemeleri izleyin.
Chrome Geliştirici Araçları'nı açın, Ağ sekmesine gidin ve Önbelleği devre dışı bırak ile Geniş istek satırları kullan seçeneklerini işaretleyin. Önbelleği devre dışı bırak, yenileme işleminden sonra her zaman en son değişiklikleri almamızı sağlar. Geniş istek satırları kullan ise satırda bir kaynağın hem aktarılan boyutunu hem de kaynak boyutunu gösterir. Bu kod laboratuvarında, esas olarak main.js boyutuyla ilgileniyoruz.

Simülasyonlu kısıtlamayı kullanarak uygulamayı farklı ağ koşullarında yükleyin. Bu kod laboratuvarındaki yükleme süresini ölçmek için Yavaş 3G'yi kullanacaksınız. Çünkü daha küçük bir paket boyutunun en çok fayda sağladığı yer burasıdır.

Şimdi uygulamayı yeni modüler API'ye taşımaya başlayın.

4. Uyumluluk paketlerini kullanma

Uyumluluk paketleri, Firebase kodunun tamamını tek seferde değiştirmeden yeni SDK sürümüne geçmenize olanak tanır. Bunları modüler API'ye kademeli olarak yükseltebilirsiniz.

Bu adımda, Firebase kitaplığını 8. sürümden yeni sürüme yükseltir ve kodu uyumluluk paketlerini kullanacak şekilde değiştirirsiniz. Aşağıdaki adımlarda, önce modüler API'yi kullanmak için yalnızca Firebase Auth kodunu, ardından Firestore kodunu nasıl yükselteceğinizi öğreneceksiniz.

Her bir adımın sonunda, uygulamayı kesinti olmadan derleyip çalıştırabilmeniz ve her ürünü taşıdığımızda paket boyutunda düşüş görmeniz gerekir.

Yeni SDK'yı edinme

package.json dosyasında bağımlılıklar bölümünü bulup aşağıdakiyle değiştirin:

package.json

"dependencies": {
    "firebase": "^9.0.0" 
}

Bağımlılıklarını yeniden yükleme

Bağımlılığın sürümünü değiştirdiğimiz için bağımlılığın yeni sürümünü almak üzere npm install'ü yeniden çalıştırmamız gerekiyor.

İçe aktarma yollarını değiştirme

Uyumluluk paketleri firebase/compat alt modülü altında gösterildiğinden içe aktarma yollarını buna göre güncelleyeceğiz:

src/firebase.ts dosyasına gidin
Mevcut içe aktarma işlemlerini aşağıdaki içe aktarma işlemleriyle değiştirin:

src/firebase.ts

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

Uygulamanın çalıştığını doğrulama

Uygulamayı yeniden oluşturmak için npm run build'ü çalıştırın.
http://localhost:8080 adresine gidecek bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.
Uygulamayı kullanmaya devam edin. Her şey çalışmaya devam eder.

5. Modüler API'yi kullanacak şekilde kimlik doğrulamayı yükseltme

Firebase ürünlerini istediğiniz sırayla yükseltebilirsiniz. Bu codelab'de, Auth API nispeten basit olduğu için temel kavramları öğrenmek üzere önce Auth'u yükselteceksiniz. Firestore'u yükseltme işlemi biraz daha karmaşıktır. Bunu nasıl yapacağınızı bir sonraki bölümde öğreneceksiniz.

Kimlik doğrulama başlatma işlemini güncelleme

src/firebase.ts dosyasına gidin
Aşağıdaki içe aktarma işlemini ekleyin:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';

import ‘firebase/compat/auth'. kümesini silin
export const firebaseAuth = app.auth(); yerine şunları kullanın:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });

Dosyanın sonundaki export type User = firebase.User; karakterini kaldırın. User, doğrudan src/auth.ts'a aktarılır. Ardından src/auth.ts'u değiştireceksiniz.

Yetkilendirme kodunu güncelleme

src/auth.ts dosyasına gidin
Dosyanın üst kısmına aşağıdaki içe aktarma işlemlerini ekleyin:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';

User'yi ‘firebase/auth'.'den içe aktardığınız için User'yi import { firebaseAuth, User } from './firebase';'den kaldırın
Modüler API'yi kullanacak şekilde işlevleri güncelleyin.

Daha önce içe aktarma ifadesini güncellediğimizde gördüğünüz gibi, 9. sürümdeki paketler, noktayla zincirlenmiş bir ad alanı ve hizmet desenine dayalı 8. sürüm API'lerinin aksine içe aktarabileceğiniz işlevler etrafında düzenlenir. Bu yeni kod düzenlemesi, kullanılmayan kodun ağaç sallamasını sağlar. Bunun nedeni, derleme araçlarının hangi kodun kullanıldığını ve hangilerinin kullanılmadığını analiz etmesine olanak tanımasıdır.

9. sürümde hizmetler, işlevlere ilk bağımsız değişken olarak aktarılır. Hizmetler, bir Firebase hizmetini başlattığınızda aldığınız nesnelerdir (ör. getAuth() veya initializeAuth() tarafından döndürülen nesne). Belirli bir Firebase hizmetinin durumunu tutar ve işlev, görevlerini gerçekleştirmek için bu durumu kullanır. Aşağıdaki işlevleri uygulamak için bu kalıbı uygulayalım:

src/auth.ts

export function firebaseSignInAnonymously() { 
    return signInAnonymously(firebaseAuth); 
} 

export function firebaseSignOut() { 
    return signOut(firebaseAuth); 
} 

export function onUserChange(callback: (user: User | null) => void) { 
    return onAuthStateChanged(firebaseAuth, callback); 
} 

export { User } from 'firebase/auth';

Uygulamanın çalıştığını doğrulama

Uygulamayı yeniden oluşturmak için npm run build'ü çalıştırın.
http://localhost:8080 adresine gidecek bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.
Uygulamayı kullanmaya devam edin. Her şey çalışmaya devam eder.

Paket boyutunu kontrol etme

Chrome Geliştirici Araçları'nı açın.
Ağ sekmesine geçin.
Ağ isteklerini yakalamak için sayfayı yenileyin.
main.js dosyasını bulun ve boyutunu kontrol edin. Yalnızca birkaç satır kod değiştirerek paket boyutunu 100 KB (gzip ile sıkıştırılmış durumda 36 KB) veya yaklaşık% 22 oranında küçülttünüz. Site, yavaş bir 3G bağlantısında da 0,75 saniye daha hızlı yükleniyor.

6. Firebase uygulaması ve Firestore'u modüler API'yi kullanacak şekilde yükseltme

Firebase ilklendirmesini güncelleme

src/firebase.ts. dosyasına gidin
import firebase from ‘firebase/compat/app'; yerine şunları kullanın:

src/firebase.ts

import { initializeApp } from 'firebase/app';

const app = firebase.initializeApp({...}); yerine şunları kullanın:

src/firebase.ts

const app = initializeApp({
    apiKey: "AIzaSyBnRKitQGBX0u8k4COtDTILYxCJuMf7xzE", 
    authDomain: "exchange-rates-adcf6.firebaseapp.com", 
    databaseURL: "https://exchange-rates-adcf6.firebaseio.com", 
    projectId: "exchange-rates-adcf6", 
    storageBucket: "exchange-rates-adcf6.firebasestorage.app", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

Firestore'u başlatma işlemini güncelleme

Aynı dosyada src/firebase.ts, import 'firebase/compat/firestore'; ile değiştirilir.

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

export const firestore = app.firestore(); yerine şunları kullanın:

src/firebase.ts

export const firestore = getFirestore();

"export const firestore = ..." ifadesinden sonraki tüm satırları kaldır

İçe aktarma işlemlerini güncelleme

src/services.ts. adlı dosyayı aç
FirestoreFieldPath, FirestoreFieldValue ve QuerySnapshot öğelerini içe aktarma işleminden kaldırın. './firebase''ten içe aktarma işlemi artık aşağıdaki gibi görünecektir:

src/services.ts

import { firestore } from './firebase';

Dosyanın üst kısmına, kullanacağınız işlevleri ve türleri içe aktarın:

    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';

search() işlevini güncelleme

Tüm akışları içeren koleksiyona referans oluşturun:

src/services.ts

const tickersCollRef = collection(firestore, 'current');

Koleksiyondaki tüm dokümanları almak için getDocs() simgesini kullanın:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Bitmiş kod için search() bölümüne bakın.

addToWatchList() işlevini güncelleme

Kullanıcının izleme listesine bir doküman referansı oluşturmak için doc()'ü kullanın, ardından arrayUnion() ile setDoc()'ü kullanarak listeye bir akış simgesi ekleyin:

src/services.ts

export function addToWatchList(ticker: string, user: User) {
      const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
      return setDoc(watchlistRef, {
       tickers: arrayUnion(ticker)
   }, { merge: true });
}

deleteFromWatchList() işlevi güncellendi

Benzer şekilde, setDoc() ile arrayRemove() kullanarak bir hisseyi kullanıcının izleme listesinden kaldırabilirsiniz:

src/services.ts

export function deleteFromWatchList(ticker: string, user: User) {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   return setDoc(watchlistRef, {
       tickers: arrayRemove(ticker)
   }, { merge: true });
}

subscribeToTickerChanges() işlevini güncelleme

Önce kullanıcının izleme listesine bir doküman referansı oluşturmak için doc()'ü, ardından onSnapshot()'ü kullanarak izleme listesindeki değişiklikleri dinlemek için:

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});

İzleme listesine eklediğiniz sembollerin fiyatlarını almak için query() ile sorgu oluşturun ve fiyat değişikliklerini dinlemek için onSnapshot() ile dinleyin:

src/services.ts

const priceQuery = query(
    collection(firestore, 'current'),
    where(documentId(), 'in', tickers)
);
unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               if (firstload) {
                   performance && performance.measure("initial-data-load");
                   firstload = false;
                   logPerformance();
               }
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
  });

Uygulamanın tamamı için subscribeToTickerChanges() işlevine bakın.

subscribeToAllTickerChanges() işlevini güncelleme

Öncelikle tüm akışların fiyatlarını içeren koleksiyona referans oluşturmak için collection()'ü, ardından fiyat değişikliklerini dinlemek için onSnapshot()'ü kullanırsınız:

src/services.ts

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       if (firstload) {
           performance && performance.measure("initial-data-load");
           firstload = false;
           logPerformance();
       }
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Uygulamanın çalıştığını doğrulama

Uygulamayı yeniden oluşturmak için npm run build'ü çalıştırın.
http://localhost:8080 adresine gidecek bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.
Uygulamayı kullanmaya devam edin. Her şey çalışmaya devam eder.

Paket boyutunu kontrol etme

Chrome Geliştirici Araçları'nı açın.
Ağ sekmesine geçin.
Ağ isteklerini yakalamak için sayfayı yenileyin.
main.js simgesini bulun ve boyutunu kontrol edin. Bu boyutu tekrar orijinal paket boyutuyla karşılaştırın. Paket boyutunu 200 KB'tan (gzip ile sıkıştırılmış 63,8 KB) fazla veya% 50 oranında küçülttük. Bu da yükleme süresinin 1, 3 saniye daha kısalmasına neden oldu.

7. İlk sayfa oluşturma işlemini hızlandırmak için Firestore Lite'ı kullanma

Firestore Lite nedir?

Firestore SDK'sı karmaşık önbelleğe alma, gerçek zamanlı akış, kalıcı depolama, çok sekmeli çevrimdışı senkronizasyon, yeniden deneme, iyimser eşzamanlılık ve daha pek çok özellik sunar. Bu nedenle, boyutu oldukça büyüktür. Ancak ileri seviye özelliklerden hiçbirine ihtiyaç duymadan verileri yalnızca bir kez almak isteyebilirsiniz. Bu tür durumlar için Firestore, basit ve hafif bir çözüm olan yeni bir paket olan Firestore Lite'ı geliştirdi.

Firestore Lite'ın en iyi kullanım alanlarından biri, ilk sayfa oluşturma işleminin performansını optimize etmektir. Bu durumda, yalnızca kullanıcının oturum açıp açmadığını bilmeniz ve ardından görüntülemek için Firestore'dan bazı verileri okumanız gerekir.

Bu adımda, ilk sayfa oluşturma işlemini hızlandırmak için paket boyutunu küçültmek amacıyla Firestore Lite'ı nasıl kullanacağınızı ve ardından gerçek zamanlı güncellemelere abone olmak için ana Firestore SDK'sını dinamik olarak nasıl yükleyeceğinizi öğreneceksiniz.

Kodu aşağıdaki şekilde yeniden yapılandıracaksınız:

Gerçek zamanlı hizmetleri dinamik içe aktarma kullanılarak dinamik olarak yüklenmeleri için ayrı bir dosyaya taşıyın.
İzleme listesi ve hisse senedi fiyatlarını almak için Firestore Lite'ı kullanmak üzere yeni işlevler oluşturun.
İlk sayfayı oluşturmak için veri almak üzere yeni Firestore Lite işlevlerini kullanın, ardından gerçek zamanlı güncellemeleri dinlemek için gerçek zamanlı hizmetleri dinamik olarak yükleyin.

Gerçek zamanlı hizmetleri yeni bir dosyaya taşıma

src/services.realtime.ts. adlı yeni bir dosya oluşturun
subscribeToTickerChanges() ve subscribeToAllTickerChanges() işlevlerini src/services.ts dosyasından yeni dosyaya taşıyın.
Gerekli içe aktarma işlemlerini yeni dosyanın en üstüne ekleyin.

Burada birkaç değişiklik yapmanız gerekiyor:

Öncelikle, işlevlerde kullanılacak ana Firestore SDK'sından dosyanın üst kısmında bir Firestore örneği oluşturun. Firestore örneğini firebase.ts'ten içe aktaramazsınız. Çünkü birkaç adımda Firestore Lite örneğine dönüştüreceksiniz. Bu örnek yalnızca ilk sayfa oluşturma işlemi için kullanılacaktır.
İkinci olarak, firstload değişkeninden ve bu değişken tarafından korunan if bloğundan kurtulun. Bu işlevler, sonraki adımda oluşturacağınız yeni işlevlere taşınır.

src/services.realtime.ts

import { User } from './auth'
import { TickerChange } from './models';
import { collection, doc, onSnapshot, query, where, documentId, getFirestore } from 'firebase/firestore';
import { formatSDKStocks } from './services';

const firestore = getFirestore();
type TickerChangesCallBack = (changes: TickerChange[]) => void

export function subscribeToTickerChanges(user: User, callback: TickerChangesCallBack) {

   let unsubscribePrevTickerChanges: () => void;

   // Subscribe to watchlist changes. We will get an update whenever a ticker is added/deleted to the watchlist
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const unsubscribe = onSnapshot(watchlistRef, snapshot => {
       const doc = snapshot.data();
       const tickers = doc ? doc.tickers : [];

       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }

       if (tickers.length === 0) {
           callback([]);
       } else {
           // Query to get current price for tickers in the watchlist
           const priceQuery = query(
               collection(firestore, 'current'),
               where(documentId(), 'in', tickers)
           );

           // Subscribe to price changes for tickers in the watchlist
           unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
           });
       }
   });
   return () => {
       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }
       unsubscribe();
   };
}

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

Veri almak için Firestore Lite'ı kullanma

src/services.ts. oyununu aç
İçe aktarma yolunu ‘firebase/firestore' yerine ‘firebase/firestore/lite', olarak değiştirin, getDoc ekleyin ve onSnapshot'ı içe aktarma listesinden kaldırın:

src/services.ts

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove,
//  onSnapshot, // firestore lite doesn't support realtime updates
    query, 
    where, 
    documentId, 
    QuerySnapshot, 
    getDoc // add this import
} from 'firebase/firestore/lite';

Firestore Lite'ı kullanarak ilk sayfa oluşturma işlemi için gereken verileri almak üzere işlevler ekleyin:

src/services.ts

export async function getTickerChanges(tickers: string[]): Promise<TickerChange[]> {

   if (tickers.length === 0) {
       return [];
   }

   const priceQuery = query(
       collection(firestore, 'current'),
       where(documentId(), 'in', tickers)
   );
   const snapshot = await getDocs(priceQuery);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

export async function getTickers(user: User): Promise<string[]> {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const data =  (await getDoc(watchlistRef)).data();

   return data ? data.tickers : [];
}

export async function getAllTickerChanges(): Promise<TickerChange[]> {
   const tickersCollRef = collection(firestore, 'current');
   const snapshot = await getDocs(tickersCollRef);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

src/firebase.ts dosyasını açın ve içe aktarma yolunu ‘firebase/firestore' yerine ‘firebase/firestore/lite': olarak değiştirin.

src/firebase.ts

import { getFirestore } from 'firebase/firestore/lite';

Hepsini bir araya getirin

src/main.ts. oyununu aç
İlk sayfa oluşturma işlemi için veri almak üzere yeni oluşturulan işlevlere ve uygulama durumunu yönetmek için birkaç yardımcı işleve ihtiyacınız olacaktır. Şimdi içe aktarma işlemlerini güncelleyin:

src/main.ts

import { renderLoginPage, renderUserPage } from './renderer';
import { getAllTickerChanges, getTickerChanges, getTickers } from './services';
import { onUserChange } from './auth';
import { getState, setRealtimeServicesLoaded, setUser } from './state';
import './styles.scss';

Dosyanın üst kısmında dinamik içe aktarma kullanarak src/services.realtime dosyasını yükleyin. loadRealtimeService değişkeni, kod yüklendikten sonra gerçek zamanlı hizmetlerle çözülecek bir sözdür. Bu kimliği daha sonra anlık güncellemelere abone olmak için kullanacaksınız.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});

İşlev gövdesinde await kullanabilmemiz için onUserChange() geri çağırma işlevini async işlevine değiştirin:

src/main.ts

onUserChange(async user => {
 // callback body
});

Şimdi, önceki adımda oluşturduğumuz yeni işlevleri kullanarak ilk sayfayı oluşturmak için verileri getirin.

onUserChange() geri çağırma işlevinde, kullanıcının oturum açtığı if koşulunu bulun ve kodu if ifadesinin içine kopyalayıp yapıştırın:

src/main.ts

onUserChange(async user => {
      // LEAVE THE EXISTING CODE UNCHANGED HERE
      ...

      if (user) {
       // REPLACE THESE LINES

       // user page
       setUser(user);

       // show loading screen in 500ms
       const timeoutId = setTimeout(() => {
           renderUserPage(user, {
               loading: true,
               tableData: []
           });
       }, 500);

       // get data once if realtime services haven't been loaded
       if (!getState().realtimeServicesLoaded) {
           const tickers = await getTickers(user);
           const tickerData = await getTickerChanges(tickers);
           clearTimeout(timeoutId);
           renderUserPage(user, { tableData: tickerData });
       }

       // subscribe to realtime updates once realtime services are loaded
       loadRealtimeService.then(({ subscribeToTickerChanges }) => {
           unsubscribeTickerChanges = subscribeToTickerChanges(user, stockData => {
               clearTimeout(timeoutId);
               renderUserPage(user, { tableData: stockData })
           });
       });
   } else {
     // DON'T EDIT THIS PART, YET   
   }
}

Hiçbir kullanıcının oturum açmadığı else bloğunda, firestore lite'ı kullanarak tüm hisse senetlerinin fiyat bilgilerini alın, sayfayı oluşturun ve ardından gerçek zamanlı hizmetler yüklendikten sonra fiyat değişikliklerini dinleyin:

src/main.ts

if (user) {
   // DON'T EDIT THIS PART, WHICH WE JUST CHANGED ABOVE
   ...
} else {
   // REPLACE THESE LINES

   // login page
   setUser(null);

   // show loading screen in 500ms
   const timeoutId = setTimeout(() => {
       renderLoginPage('Landing page', {
           loading: true,
           tableData: []
       });
   }, 500);

   // get data once if realtime services haven't been loaded
   if (!getState().realtimeServicesLoaded) {
       const tickerData = await getAllTickerChanges();
       clearTimeout(timeoutId);
       renderLoginPage('Landing page', { tableData: tickerData });
   }

   // subscribe to realtime updates once realtime services are loaded
   loadRealtimeService.then(({ subscribeToAllTickerChanges }) => {
       unsubscribeAllTickerChanges = subscribeToAllTickerChanges(stockData => {
           clearTimeout(timeoutId);
           renderLoginPage('Landing page', { tableData: stockData })
       });
   });
}

Bitmiş kod için src/main.ts dosyasına bakın.

Uygulamanın çalıştığını doğrulama

Uygulamayı yeniden oluşturmak için npm run build'ü çalıştırın.
http://localhost:8080 adresine gidecek bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.

Paket boyutunu kontrol etme

Chrome Geliştirici Araçları'nı açın.
Ağ sekmesine geçin.
Ağ isteklerini yakalamak için sayfayı yenileyin
main.js simgesini bulun ve boyutunu kontrol edin.
Artık yalnızca 115 KB (gzip ile sıkıştırılmış 34,5 KB) boyutunda. Bu, 446 KB(gzip ile sıkıştırılmış 138 KB) olan orijinal paket boyutundan% 75 daha küçüktür. Sonuç olarak site, 3G bağlantısında 2 saniyeden fazla daha hızlı yükleniyor. Bu, performans ve kullanıcı deneyimi açısından mükemmel bir gelişme.

8. Tebrikler

Tebrikler, uygulamayı başarıyla yükselterek daha küçük ve daha hızlı hale getirdiniz.

Uygulamayı parça parça yükseltmek için uyumluluk paketlerini, ilk sayfa oluşturma işlemini hızlandırmak için Firestore Lite'ı ve fiyat değişikliklerini yayınlamak için ana Firestore'u dinamik olarak yüklemek için Firestore'u kullandınız.

Ayrıca bu kod laboratuvarının ilerleyen aşamalarında paket boyutunu küçülttünüz ve yükleme süresini iyileştirdiniz:

main.js	kaynak boyutu (kb)	sıkıştırılmış boyut (kb)	yükleme süresi (sn) (yavaş 3G üzerinden)
v8	446	138	4,92
v9 uyumlu	429	124	4,65
Yalnızca modüler Auth v9	348	102	4.2
v9 tamamen modüler	244	74,6	3,66
v9 tamamen modüler + Firestore lite	117	34,9	2,88

Artık v8 Firebase JS SDK'sını kullanan bir web uygulamasını yeni modüler JS SDK'sını kullanacak şekilde yükseltmek için gereken temel adımları biliyorsunuz.

Daha fazla bilgi

Referans dokümanları

https://firebase.google.com/docs/reference/js/v9