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

1. Başlamadan önce

Modüler Firebase JS SDK, mevcut JS SDK'nın yeniden yazılmış halidir ve bir sonraki ana sürüm olarak yayınlanacaktır. Bu özellik, 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ını sağlar.

Modüler JS SDK'daki en belirgin fark, özelliklerin artık her şeyi içeren tek bir firebase ad alanı yerine, içe aktaracağınız serbest kayan işlevler halinde düzenlenmiş olmasıdır. Bu yeni kod düzenleme yöntemi, gereksiz kodları kaldırmanıza olanak tanır. Ayrıca, şu anda v8 Firebase JS SDK'sını kullanan 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 sunulur. Bu codelab'de, uyumluluk paketlerini kullanarak uygulamanın bölümlerini tek tek taşımayı öğreneceksiniz.

Ne oluşturacaksınız?

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

  • Uyumluluk paketlerini kullanmak için uygulamayı yükseltin
  • 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.

2d351cb47b604ad7.png

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 paylaşılmıştır.

Gerekenler

  • Chrome gibi istediğiniz bir tarayıcı
  • Seçtiğiniz IDE/metin düzenleyici (ör. WebStorm, Atom, Sublime veya VS Code)
  • Genellikle Node.js ile birlikte gelen paket yöneticisi npm
  • Codelab'in örnek kodu (Kodu nasıl alacağınızla ilgili bilgileri codelab'in sonraki adımında bulabilirsiniz.)

2. Ayarları yapma

Kodu alma

Bu proje için ihtiyacınız olan her şey bir Git deposunda bulunur. Başlamak için kodu alıp en sevdiğiniz geliştirme ortamında açmanız gerekir.

Codelab'in GitHub deposunu komut satırından kopyalayın:

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

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

Uygulamayı içe aktarma

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

71a8a7d47392e8f4.png

3. Temel bir değer belirleme

Başlangıç noktanız neresi?

Başlangıç noktanız, bu codelab için tasarlanmış bir hisse senedi izleme listesi uygulamasıdır. Kod, bu codelab'deki kavramları göstermek için basitleştirilmiştir ve hata işleme özelliği çok azdır. Bu kodun herhangi bir bölümünü üretim uygulamasında yeniden kullanmayı seçerseniz hataları ele aldığınızdan ve tüm kodu tam olarak test ettiğinizden emin olun.

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

  1. Sağ üst köşedeki giriş düğmesini kullanarak anonim olarak giriş yapın.
  2. Giriş yaptıktan sonra Ekle düğmesini tıklayarak, harfleri yazarak ve altta açılan arama sonucu satırını tıklayarak "NFLX", "SBUX" ve "T"yi izleme listesine arayıp ekleyin.
  3. Satırın sonundaki x işaretini tıklayarak izleme listesinden bir hisseyi kaldırın.
  4. Hisse senedi fiyatındaki gerçek zamanlı güncellemeleri izleyin.
  5. Chrome Geliştirici Araçları'nı açın, Ağ sekmesine gidin ve Önbelleği devre dışı bırak ile Geniş istek satırları kullan'ı işaretleyin. Önbelleği devre dışı bırak seçeneği, yenileme işleminden sonra her zaman en son değişiklikleri almamızı sağlar. Geniş istek satırları kullan seçeneği ise satırda bir kaynağın hem iletilen boyutunun hem de kaynak boyutunun gösterilmesini sağlar. Bu kod laboratuvarında, esas olarak main.js boyutunu ele alıyoruz.

48a096debb2aa940.png

  1. Kısıtlama simülasyonunu kullanarak uygulamayı farklı ağ koşullarında yükleyin. Bu codelab'de yükleme süresini ölçmek için Slow 3G'yi kullanacaksınız. Çünkü daha küçük bir paket boyutu en çok bu durumda yardımcı olur.

4397cb2c1327089.png

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

4. Uyumluluk paketlerini kullanma

Uyumluluk paketleri, tüm Firebase kodunu aynı anda değiştirmeden yeni SDK sürümüne yükseltmenize olanak tanır. Bunları kademeli olarak modüler API'ye yükseltebilirsiniz.

Bu adımda, Firebase kitaplığını v8'den yeni sürüme yükseltecek ve kodu uyumluluk paketlerini kullanacak şekilde değiştireceksiniz. Aşağıdaki adımlarda, önce yalnızca Firebase Auth kodunu modüler API'yi kullanacak şekilde yükseltmeyi, ardından Firestore kodunu yükseltmeyi öğreneceksiniz.

Her adımın sonunda, uygulamayı derleyip sorunsuz bir şekilde çalıştırabilmeli ve her ürünü taşıdıkça paket boyutunda azalma görmelisiniz.

Yeni SDK'yı edinme

package.json bölümünde bağımlılıklar bölümünü bulun ve aşağıdakiyle değiştirin:

package.json

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

Bağımlılıkları yeniden yükleyin.

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 komutunu yeniden çalıştırmamız gerekir.

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

Uyumluluk paketleri firebase/compat alt modülünde kullanıma sunulduğundan içe aktarma yollarını buna göre güncelleyeceğiz:

  1. src/firebase.ts dosyasına git
  2. Mevcut içe aktarmaları aşağıdaki içe aktarmalarla 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

  1. Uygulamayı yeniden oluşturmak için npm run build komutunu çalıştırın.
  2. http://localhost:8080 adresine giden bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.
  3. Uygulamayı kullanın. Her şeyin çalışmaya devam etmesi gerekir.

5. Modüler API'yi kullanmak için Auth'u yükseltme

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

Update Auth initialization

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

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. import ‘firebase/compat/auth'. kümesini silin
  2. export const firebaseAuth = app.auth(); yerine aşağıdakileri girin:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Dosyanın sonundaki export type User = firebase.User; simgesini kaldırın. User, bir sonraki adımda değiştireceğiniz src/auth.ts içine doğrudan aktarılacak.

Yetkilendirme kodunu güncelleme

  1. src/auth.ts dosyasına git
  2. Dosyanın en üstüne aşağıdaki içe aktarma işlemlerini ekleyin:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. User öğesini ‘firebase/auth'. öğesinden zaten içe aktardığınız için User öğesini import { firebaseAuth, User } from './firebase'; öğesinden kaldırın.
  2. Modüler API'yi kullanmak için işlevleri güncelleyin.

İçe aktarma ifadesini güncellerken daha önce gördüğünüz gibi, 9. sürümdeki paketler, nokta ile zincirlenmiş bir ad alanı ve hizmet düzenine dayalı olan 8. sürüm API'lerinin aksine, içe aktarabileceğiniz işlevler etrafında düzenlenir. Bu yeni kod düzeni, oluşturma araçlarının hangi kodun kullanıldığını ve hangisinin kullanılmadığını analiz etmesine olanak tanıdığından kullanılmayan kodların temizlenmesini sağlar.

9. sürümde hizmetler, işlevlere ilk bağımsız değişken olarak aktarılır. Hizmetler, bir Firebase hizmetini başlatarak elde ettiğiniz nesnelerdir. Örneğin, getAuth() veya initializeAuth() işlevinden 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ı kullanalı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

  1. Uygulamayı yeniden oluşturmak için npm run build komutunu çalıştırın.
  2. http://localhost:8080 adresinde bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.
  3. Uygulamayı kullanın. Her şeyin çalışmaya devam etmesi gerekir.

Paket boyutunu kontrol etme

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

2e4eafaf66cd829b.png

6. Modüler API'yi kullanmak için Firebase uygulamasını ve Firestore'u yükseltme

Firebase başlatma işlemini güncelleme

  1. src/firebase.ts. dosyasına git
  2. import firebase from ‘firebase/compat/app'; yerine aşağıdakileri girin:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. const app = firebase.initializeApp({...}); yerine aşağıdakileri girin:

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 başlatma işlemini güncelleme

  1. Aynı dosyada src/firebase.ts, yerine import 'firebase/compat/firestore'; yazın.

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. export const firestore = app.firestore(); yerine aşağıdakileri girin:

src/firebase.ts

export const firestore = getFirestore();
  1. "export const firestore = ..."dan sonraki tüm satırları kaldırın.

İçe aktarma işlemlerini güncelleme

  1. src/services.ts. adlı dosyayı aç
  2. İçe aktarma işleminden FirestoreFieldPath, FirestoreFieldValue ve QuerySnapshot öğelerini kaldırın. './firebase' kaynağından yapılan içe aktarma işlemi artık aşağıdaki gibi görünmelidir:

src/services.ts

import { firestore } from './firebase';
  1. Kullanacağınız işlevleri ve türleri dosyanın en üstüne aktarın:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Tüm borsa sembollerini içeren koleksiyona bir referans oluşturun:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Koleksiyondaki tüm dokümanları getirmek için getDocs() simgesini kullanın:

src/services.ts

const tickers = await getDocs(tickersCollRef);

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

addToWatchList() işlevini güncelleme

Kullanıcının izleme listesine doküman referansı oluşturmak için doc() simgesini kullanın, ardından setDoc() ile arrayUnion() simgesini kullanarak izleme listesine bir borsa sembolü 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şlevini güncelleme

Benzer şekilde, setDoc() ile arrayRemove() kullanarak kullanıcının izleme listesinden bir borsa sembolünü kaldırın:

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üncelleyin

  1. Önce kullanıcının izleme listesine 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 */
});
  1. Takip listesinde semboller bulunduktan sonra, fiyatlarını getirmek için sorgu oluşturmak üzere query() simgesini, fiyat değişikliklerini dinlemek için onSnapshot() simgesini kullanın:

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

Tam uygulama için subscribeToTickerChanges()'e bakın.

subscribeToAllTickerChanges() işlevini güncelleyin

Öncelikle collection() kullanarak tüm borsa sembollerinin fiyatlarını içeren koleksiyona bir referans oluşturacak, ardından onSnapshot() kullanarak fiyat değişikliklerini dinleyeceksiniz:

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

  1. Uygulamayı yeniden oluşturmak için npm run build komutunu çalıştırın.
  2. http://localhost:8080 adresinde bir tarayıcı sekmesi açın veya mevcut sekmeyi yenileyin.
  3. Uygulamayı kullanın. Her şeyin çalışmaya devam etmesi gerekir.

Paket boyutunu kontrol etme

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

7660cdc574ee8571.png

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

Firestore Lite nedir?

Firestore SDK; karmaşık önbelleğe alma, gerçek zamanlı akış, kalıcı depolama, çok sekmeli çevrimdışı senkronizasyon, yeniden deneme, iyimser eşzamanlılık gibi birçok özellik sunduğu için oldukça büyüktür. Ancak gelişmiş özelliklere ihtiyacınız olmadan verileri yalnızca bir kez almak isteyebilirsiniz. Bu gibi durumlarda Firestore, basit ve hafif bir çözüm olan Firestore Lite adlı yepyeni bir paket oluşturdu.

Firestore Lite'ın harika bir kullanım alanı, yalnızca kullanıcının oturumunun açık olup olmadığını bilmeniz ve ardından görüntülemek için Firestore'dan bazı verileri okumanız gereken ilk sayfa oluşturma performansını optimize etmektir.

Bu adımda, ilk sayfa oluşturma işlemini hızlandırmak için paket boyutunu küçültmek üzere Firestore Lite'ı nasıl kullanacağınızı, 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 yeniden düzenleyerek şunları yapacaksınız:

  1. Gerçek zamanlı hizmetleri ayrı bir dosyaya taşıyın. Böylece, dinamik içe aktarma kullanılarak dinamik olarak yüklenebilirler.
  2. İzleme listesini ve hisse senedi fiyatlarını almak için Firestore Lite'ı kullanacak yeni işlevler oluşturun.
  3. İlk sayfa oluşturma işlemini yapmak için verileri 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.

Anlık hizmetleri yeni bir dosyaya taşıma

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

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

  1. Öncelikle, işlevlerde kullanılacak dosyanın en üstünde bulunan ana Firestore SDK'sından bir Firestore örneği oluşturun. Birkaç adımda Firestore Lite örneğine dönüştüreceğiniz ve yalnızca ilk sayfa oluşturma için kullanılacak olan Firestore örneğini buradan firebase.ts içe aktaramazsınız.
  2. İkinci olarak, firstload değişkenini ve bununla korunan if bloğunu kaldırın. Bu işlevlerin özellikleri, 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 getirmek için Firestore Lite'ı kullanma

  1. src/services.ts. oyununu aç
  2. İçe aktarma yolunu ‘firebase/firestore' olarak değiştirin, ‘firebase/firestore/lite', ekleyin, getDoc ve onSnapshot öğelerini 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';
  1. Firestore Lite'ı kullanarak ilk sayfa oluşturma için gereken verileri getirecek 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);
}
  1. src/firebase.ts uygulamasını açın ve içe aktarma yolunu ‘firebase/firestore' olarak değiştirin.‘firebase/firestore/lite':

src/firebase.ts

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

Hepsini bir araya getirin

  1. src/main.ts. oyununu aç
  2. İlk sayfa oluşturma için veri getirmek üzere yeni oluşturulan işlevlere ve uygulama durumunu yönetmek için birkaç yardımcı işleve ihtiyacınız olacak. Ş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';
  1. Dosyanın üst kısmında dinamik içe aktarma kullanarak src/services.realtime yükleyin. loadRealtimeService değişkeni, kod yüklendikten sonra anlık hizmetlerle çözümlenecek bir sözdür. Bu e-posta adresini 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);
});
  1. onUserChange() geri çağırmasını async işlevi olarak değiştirin. Böylece işlev gövdesinde await kullanabiliriz:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. Şimdi, önceki adımda oluşturduğumuz yeni işlevleri kullanarak ilk sayfa oluşturma işlemini yapmak için verileri getirin.

onUserChange() geri çağırmasında, kullanıcının oturum açtığı if koşulunu bulun ve if ifadesinin içindeki kodu 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   
   }
}
  1. Kullanıcının oturum açmadığı else bloğunda, Firestore Lite'ı kullanarak tüm stokların fiyat bilgilerini getirin, sayfayı oluşturun ve 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 })
       });
   });
}

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

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

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

Paket boyutunu kontrol etme

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

9ea7398a8c8ef81b.png

8. Tebrikler

Tebrikler, uygulamayı başarıyla yükselttiniz, boyutunu küçülttünüz ve hızını artırdınız.

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

Bu codelab boyunca paket boyutunu da küçülttünüz ve yükleme süresini iyileştirdiniz:

main.js

kaynak boyutu (kb)

gzip ile sıkıştırılmış boyut (kb)

yükleme süresi (sn) (yavaş 3G üzerinden)

v8

446

138

4,92

v9 compat

429

124

4,65

Yalnızca v9 modüler Auth

348

102

4.2

v9 tamamen modüler

244

74,6

3,66

v9 tamamen modüler + Firestore Lite

117

34,9

2,88

32a71bd5a774e035.png

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

Daha fazla bilgi

Referans belgeleri