मॉड्यूलर Firebase JS SDK पर माइग्रेट करके, अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाएं

1. शुरू करने से पहले

मॉड्यूलर Firebase JS SDK, मौजूदा JS SDK को फिर से लिखा गया है. इसे अगले मेजर वर्शन के तौर पर रिलीज़ किया जाएगा. इससे डेवलपर, Firebase JS SDK से ऐसे कोड को हटाने में मदद मिलती है जिसका इस्तेमाल नहीं किया गया है. इससे छोटे बंडल बनाए जा सकते हैं और बेहतर परफ़ॉर्मेंस हासिल की जा सकती है.

मॉड्यूलर JS SDK में सबसे बड़ा अंतर यह है कि अब सुविधाओं को फ़्री फ़्लोटिंग फ़ंक्शन में व्यवस्थित किया गया है. इन्हें आपको इंपोर्ट करना होगा. इसके बजाय, इन्हें एक ही firebase नेमस्पेस में शामिल किया गया है. कोड को व्यवस्थित करने का यह नया तरीका, ट्री शेकिंग की सुविधा देता है. साथ ही, आपको यह भी पता चलेगा कि v8 Firebase JS SDK का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन को नए मॉड्यूलर SDK पर कैसे अपग्रेड किया जाए.

अपग्रेड की प्रोसेस को आसान बनाने के लिए, कंपैटिबिलिटी पैकेज का एक सेट उपलब्ध कराया जाता है. इस कोडलैब में, ऐप्लिकेशन को एक-एक करके पोर्ट करने के लिए, कंपैटिबिलिटी पैकेज इस्तेमाल करने का तरीका बताया गया है.

आपको क्या बनाने को मिलेगा

इस कोडलैब में, आपको मौजूदा स्टॉक वॉचलिस्ट वेब ऐप्लिकेशन को धीरे-धीरे नए मॉड्यूलर JS SDK पर माइग्रेट करना है. यह ऐप्लिकेशन, v8 JS SDK का इस्तेमाल करता है. यह माइग्रेशन तीन चरणों में होगा:

• कंपैटिबिलिटी पैकेज इस्तेमाल करने के लिए, ऐप्लिकेशन को अपग्रेड करें
• ऐप्लिकेशन को कंपैटिबिलिटी पैकेज से मॉड्यूलर एपीआई में एक-एक करके अपग्रेड करना
• ऐप्लिकेशन की परफ़ॉर्मेंस को और बेहतर बनाने के लिए, Firestore SDK के हल्के वर्शन, Firestore Lite का इस्तेमाल करें

यह कोडलैब, Firebase SDK टूल को अपग्रेड करने पर फ़ोकस करता है. अन्य कॉन्सेप्ट और कोड ब्लॉक के बारे में ज़्यादा जानकारी नहीं दी गई है. इन्हें सिर्फ़ कॉपी और चिपकाने के लिए उपलब्ध कराया गया है.

आपको इन चीज़ों की ज़रूरत होगी

• अपनी पसंद का ब्राउज़र, जैसे कि Chrome
• अपनी पसंद का आईडीई/टेक्स्ट एडिटर, जैसे कि WebStorm, Atom, Sublime या VS Code
• पैकेज मैनेजर npm, जो आम तौर पर Node.js के साथ आता है
• कोडलैब का सैंपल कोड. कोड पाने का तरीका जानने के लिए, कोडलैब का अगला चरण देखें.

2. सेट अप करना

कोड पाएं

इस प्रोजेक्ट के लिए ज़रूरी सभी चीज़ें, Git repo में मौजूद हैं. शुरू करने के लिए, आपको कोड को अपने पसंदीदा डेवलपमेंट एनवायरमेंट में खोलना होगा.

कमांड लाइन से, कोडलैब की GitHub रिपॉज़िटरी को क्लोन करें:

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

इसके अलावा, अगर आपने git इंस्टॉल नहीं किया है, तो रिपॉज़िटरी को ZIP फ़ाइल के तौर पर डाउनलोड करें. इसके बाद, डाउनलोड की गई ZIP फ़ाइल को अनपैक करें.

ऐप्लिकेशन इंपोर्ट करना

1. अपने आईडीई का इस्तेमाल करके, codelab-modular-sdk डायरेक्ट्री खोलें या इंपोर्ट करें.
2. ऐप्लिकेशन को स्थानीय तौर पर बनाने और चलाने के लिए ज़रूरी डिपेंडेंसी इंस्टॉल करने के लिए, npm install चलाएं.
3. ऐप्लिकेशन बनाने के लिए, npm run build चलाएं.
4. वेब सर्वर शुरू करने के लिए, npm run serve चलाएं
5. http://localhost:8080 पर जाने के लिए, ब्राउज़र टैब खोलें

3. बेसलाइन सेट अप करना

आपको कहां से शुरू करना है?

इस कोडलैब के लिए, स्टॉक की वॉचलिस्ट वाला ऐप्लिकेशन बनाया गया है. आपको इसी ऐप्लिकेशन से शुरुआत करनी है. इस कोडलैब में कॉन्सेप्ट को दिखाने के लिए, कोड को आसान बनाया गया है. इसमें गड़बड़ी को ठीक करने की सुविधा कम है. अगर आपको इस कोड का इस्तेमाल किसी प्रोडक्शन ऐप्लिकेशन में करना है, तो पक्का करें कि आपने सभी गड़बड़ियों को ठीक कर लिया हो और पूरे कोड की जांच कर ली हो.

पक्का करें कि ऐप्लिकेशन में सब कुछ काम कर रहा हो:

1. सबसे ऊपर दाएं कोने में मौजूद, login बटन का इस्तेमाल करके, बिना पहचान बताए लॉग इन करें.
2. लॉग इन करने के बाद, "NFLX", "SBUX", और "T" को वॉचलिस्ट में जोड़ें. इसके लिए, जोड़ें बटन पर क्लिक करें, अक्षर टाइप करें, और खोज के नतीजे वाली उस लाइन पर क्लिक करें जो नीचे दिखती है.
3. वेटलिस्ट से किसी स्टॉक को हटाने के लिए, लाइन के आखिर में मौजूद x पर क्लिक करें.
4. शेयर की कीमत में होने वाले रीयल-टाइम बदलावों को देखें.
5. Chrome DevTools खोलें. इसके बाद, नेटवर्क टैब पर जाएं और कैश मेमोरी बंद करें और अनुरोध की बड़ी लाइनों का इस्तेमाल करें को चुनें. कैश मेमोरी बंद करें से यह पक्का होता है कि रीफ़्रेश करने के बाद, हमें हमेशा नए बदलाव दिखें. साथ ही, अनुरोध की बड़ी लाइनों का इस्तेमाल करें से, लाइन में किसी संसाधन के लिए ट्रांसफ़र किया गया साइज़ और संसाधन का साइज़, दोनों दिखते हैं. इस कोडलैब में, हमारी दिलचस्पी मुख्य रूप से main.js के साइज़ में है.

6. सिम्युलेटेड थ्रॉटलिंग का इस्तेमाल करके, नेटवर्क की अलग-अलग स्थितियों में ऐप्लिकेशन लोड करें. इस कोडलैब में, लोड होने में लगने वाले समय का आकलन करने के लिए, Slow 3G का इस्तेमाल किया जाएगा. ऐसा इसलिए, क्योंकि छोटे बंडल साइज़ से सबसे ज़्यादा फ़ायदा इसी में मिलता है.

अब ऐप्लिकेशन को नए मॉड्यूलर एपीआई पर माइग्रेट करना शुरू करें.

4. डिसप्ले के साथ काम करने से जुड़े पैकेज इस्तेमाल करना

कंपैटिबिलिटी पैकेज की मदद से, एक बार में पूरे Firebase कोड को बदले बिना, नए SDK टूल के वर्शन पर अपग्रेड किया जा सकता है. इन्हें मॉड्यूलर एपीआई में धीरे-धीरे अपग्रेड किया जा सकता है.

इस चरण में, Firebase लाइब्रेरी को v8 से नए वर्शन में अपग्रेड किया जाएगा. साथ ही, कंपैटिबिलिटी पैकेज का इस्तेमाल करने के लिए कोड में बदलाव किया जाएगा. यहां दिए गए चरणों में, आपको यह तरीका बताया जाएगा कि मॉड्यूलर एपीआई का इस्तेमाल करने के लिए, सिर्फ़ Firebase Auth कोड को कैसे अपग्रेड करें. इसके बाद, Firestore कोड को अपग्रेड करने का तरीका बताया जाएगा.

हर चरण के आखिर में, आपको ऐप्लिकेशन को बिना किसी रुकावट के कंपाइल और चलाने की सुविधा मिलनी चाहिए. साथ ही, हर प्रॉडक्ट को माइग्रेट करने पर, आपको बंडल के साइज़ में कमी दिखनी चाहिए.

नया एसडीके टूल पाना

package.json में जाकर, डिपेंडेंसी सेक्शन ढूंढें और उसे इससे बदलें:

package.json

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

डिपेंडेंसी फिर से इंस्टॉल करना

हमने डिपेंडेंसी का वर्शन बदल दिया है. इसलिए, हमें डिपेंडेंसी का नया वर्शन पाने के लिए, npm install को फिर से चलाना होगा.

इंपोर्ट पाथ बदलना

कंपैटबिलिटी पैकेज, सबमॉड्यूल firebase/compat के तहत दिखाए जाते हैं. इसलिए, हम इंपोर्ट पाथ को इसके हिसाब से अपडेट करेंगे:

1. फ़ाइल src/firebase.ts पर जाएं
2. मौजूदा इंपोर्ट को इन इंपोर्ट से बदलें:

src/firebase.ts

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

पुष्टि करें कि ऐप्लिकेशन काम कर रहा है

1. ऐप्लिकेशन को फिर से बनाने के लिए, npm run build चलाएं.
2. ब्राउज़र टैब में http://localhost:8080 खोलें या मौजूदा टैब को रीफ़्रेश करें.
3. ऐप्लिकेशन का इस्तेमाल करें. अब भी सब कुछ काम करना चाहिए.

5. मॉड्यूलर एपीआई का इस्तेमाल करने के लिए, पुष्टि करने की सुविधा को अपग्रेड करना

Firebase प्रॉडक्ट को किसी भी क्रम में अपग्रेड किया जा सकता है. इस कोडलैब में, आपको Auth API को अपग्रेड करने के बारे में बताया जाएगा. इससे आपको बुनियादी कॉन्सेप्ट समझने में मदद मिलेगी, क्योंकि Auth API का इस्तेमाल करना आसान है. Firestore को अपग्रेड करने की प्रोसेस थोड़ी मुश्किल है. इसके बारे में आपको अगले चरण में बताया जाएगा.

पुष्टि करने की सुविधा शुरू करने से जुड़ी जानकारी अपडेट करें

1. फ़ाइल src/firebase.ts पर जाएं
2. यह इंपोर्ट जोड़ें:

src/firebase.ts

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

3. import ‘firebase/compat/auth'. मिटाएं
4. export const firebaseAuth = app.auth(); को इससे बदलें:

src/firebase.ts

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

5. फ़ाइल के आखिर में मौजूद export type User = firebase.User; हटाएं. User को सीधे src/auth.ts में एक्सपोर्ट किया जाएगा. इसके बाद, आपको इसमें बदलाव करना होगा.

पुष्टि करने वाला कोड अपडेट करें

1. फ़ाइल src/auth.ts पर जाएं
2. फ़ाइल में सबसे ऊपर, ये इंपोर्ट जोड़ें:

src/auth.ts

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

3. import { firebaseAuth, User } from './firebase'; से User हटाएं, क्योंकि आपने पहले ही ‘firebase/auth'. से User इंपोर्ट कर लिया है
4. मॉड्यूलर एपीआई का इस्तेमाल करने के लिए, फ़ंक्शन अपडेट करें.

हमने इंपोर्ट स्टेटमेंट को अपडेट करते समय आपको पहले ही बताया था कि वर्शन 9 में पैकेज, उन फ़ंक्शन के हिसाब से व्यवस्थित किए जाते हैं जिन्हें इंपोर्ट किया जा सकता है. इसके उलट, वर्शन 8 के एपीआई, डॉट-चेन वाले नेमस्पेस और सेवा पैटर्न पर आधारित होते हैं. कोड के इस नए संगठन की वजह से, इस्तेमाल न किए गए कोड को हटाया जा सकता है. ऐसा इसलिए, क्योंकि इससे बिल्ड टूल को यह पता चलता है कि कौनसे कोड का इस्तेमाल किया गया है और कौनसे कोड का इस्तेमाल नहीं किया गया है.

वर्शन 9 में, सेवाओं को फ़ंक्शन के पहले आर्ग्युमेंट के तौर पर पास किया जाता है. सेवाएं वे ऑब्जेक्ट होती हैं जो Firebase सेवा को शुरू करने पर मिलती हैं. उदाहरण के लिए, getAuth() या initializeAuth() से मिला ऑब्जेक्ट. ये किसी Firebase सेवा की स्थिति को सेव करते हैं. साथ ही, फ़ंक्शन अपने टास्क पूरे करने के लिए इस स्थिति का इस्तेमाल करता है. आइए, इस पैटर्न को इन फ़ंक्शन को लागू करने के लिए इस्तेमाल करें:

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';

पुष्टि करना कि ऐप्लिकेशन काम कर रहा है

1. ऐप्लिकेशन को फिर से बनाने के लिए, npm run build चलाएं.
2. http://localhost:8080 पर ब्राउज़र टैब खोलें या मौजूदा टैब को रीफ़्रेश करें
3. ऐप्लिकेशन का इस्तेमाल करें. अब भी सब कुछ काम करना चाहिए.

बंडल का साइज़ देखना

1. Chrome DevTools खोलें.
2. नेटवर्क टैब पर स्विच करें.
3. नेटवर्क के अनुरोध कैप्चर करने के लिए, पेज को रीफ़्रेश करें.
4. main.js फ़ाइल ढूंढें और उसका साइज़ देखें. आपने बंडल का साइज़ 100 केबी (36 केबी gzipped) तक कम कर दिया है. इसके अलावा, आपने कोड की कुछ ही लाइनों में बदलाव करके, बंडल का साइज़ करीब 22% तक कम कर दिया है! यह साइट, 3G कनेक्शन पर भी 0.75 सेकंड पहले लोड हो रही है.

6. मॉड्यूलर एपीआई का इस्तेमाल करने के लिए, Firebase ऐप्लिकेशन और Firestore को अपग्रेड करना

Firebase शुरू करने की प्रोसेस अपडेट करना

1. फ़ाइल src/firebase.ts. पर जाएं
2. import firebase from ‘firebase/compat/app'; को इससे बदलें:

src/firebase.ts

import { initializeApp } from 'firebase/app';

3. const app = firebase.initializeApp({...}); को इससे बदलें:

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 को शुरू करने की प्रोसेस अपडेट करना

1. उसी फ़ाइल में src/firebase.ts, को import 'firebase/compat/firestore'; से बदलें

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

2. export const firestore = app.firestore(); को इससे बदलें:

src/firebase.ts

export const firestore = getFirestore();

3. "export const firestore = ..." के बाद की सभी लाइनें हटाएं

इंपोर्ट किए गए डेटा को अपडेट करना

1. src/services.ts. फ़ाइल खोलें
2. इंपोर्ट किए गए डेटा से FirestoreFieldPath, FirestoreFieldValue, और QuerySnapshot हटाएं. './firebase' से इंपोर्ट किया गया डेटा अब ऐसा दिखेगा:

src/services.ts

import { firestore } from './firebase';

3. फ़ाइल में सबसे ऊपर, उन फ़ंक्शन और टाइप को इंपोर्ट करें जिनका आपको इस्तेमाल करना है:

    **src/services.ts**

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

search() को अपडेट करना

1. उस कलेक्शन का रेफ़रंस बनाएं जिसमें सभी टिकर शामिल हों:

src/services.ts

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

2. कलेक्शन के सभी दस्तावेज़ों को फ़ेच करने के लिए, getDocs() का इस्तेमाल करें:

src/services.ts

const tickers = await getDocs(tickersCollRef);

पूरा कोड देखने के लिए, search() देखें.

addToWatchList() को अपडेट करना

उपयोगकर्ता की वॉचलिस्ट के लिए दस्तावेज़ का रेफ़रंस बनाने के लिए, doc() का इस्तेमाल करें. इसके बाद, arrayUnion() के साथ setDoc() का इस्तेमाल करके, इसमें एक टिकर जोड़ें:

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() को अपडेट करना

इसी तरह, setDoc() के साथ arrayRemove() का इस्तेमाल करके, उपयोगकर्ता की वॉचलिस्ट से कोई शेयर हटाएं:

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() को अपडेट करें

1. उपयोगकर्ता की वॉचलिस्ट का दस्तावेज़ रेफ़रंस बनाने के लिए, पहले doc() का इस्तेमाल करें. इसके बाद, onSnapshot() का इस्तेमाल करके, वॉचलिस्ट में हुए बदलावों को सुनें:

src/services.ts

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

2. वॉचलिस्ट में टिकट जोड़ने के बाद, query() का इस्तेमाल करके क्वेरी बनाएं, ताकि उनकी कीमतें मिल सकें. साथ ही, onSnapshot() का इस्तेमाल करके, उनकी कीमतों में होने वाले बदलावों के बारे में सुना जा सके:

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

इसे पूरी तरह से लागू करने के लिए, subscribeToTickerChanges() देखें.

subscribeToAllTickerChanges() को अपडेट करें

सबसे पहले, collection() का इस्तेमाल करके, उस कलेक्शन का रेफ़रंस बनाएं जिसमें सभी टिकटों की कीमतें शामिल हों. इसके बाद, onSnapshot() का इस्तेमाल करके, कीमतों में होने वाले बदलावों के बारे में सूचना पाएं:

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

पुष्टि करना कि ऐप्लिकेशन काम कर रहा है

1. ऐप्लिकेशन को फिर से बनाने के लिए, npm run build चलाएं.
2. http://localhost:8080 पर ब्राउज़र टैब खोलें या मौजूदा टैब को रीफ़्रेश करें
3. ऐप्लिकेशन का इस्तेमाल करें. अब भी सब कुछ काम करना चाहिए.

बंडल का साइज़ देखना

1. Chrome DevTools खोलें.
2. नेटवर्क टैब पर स्विच करें.
3. नेटवर्क के अनुरोध कैप्चर करने के लिए, पेज को रीफ़्रेश करें.
4. main.js ढूंढें और उसका साइज़ देखें. इसे ओरिजनल बंडल साइज़ से फिर से तुलना करें - हमने बंडल साइज़ को 200 केबी (63.8 केबी gzipped) से ज़्यादा या 50% कम कर दिया है. इसका मतलब है कि लोड होने में 1.3 सेकंड कम समय लगेगा!

7. पेज को तेज़ी से रेंडर करने के लिए, Firestore Lite का इस्तेमाल करना

Firestore Lite क्या है?

Firestore SDK में कॉम्प्लेक्स कैश मेमोरी, रीयल-टाइम स्ट्रीमिंग, परसिस्टेंट स्टोरेज, एक से ज़्यादा टैब में ऑफ़लाइन सिंक करने की सुविधा, फिर से कोशिश करने की सुविधा, ऑप्टिमिस्टिक कंकरेंसी, और कई अन्य सुविधाएं मिलती हैं. इसलिए, इसका साइज़ काफ़ी बड़ा होता है. हालांकि, ऐसा हो सकता है कि आपको सिर्फ़ एक बार डेटा चाहिए हो और आपको किसी भी ऐडवांस सुविधा की ज़रूरत न हो. ऐसे मामलों के लिए, Firestore ने एक आसान और हल्का समाधान बनाया है. यह एक बिलकुल नया पैकेज है — Firestore Lite.

Firestore Lite का एक बेहतरीन इस्तेमाल, शुरुआती पेज रेंडरिंग की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना है. इसमें आपको सिर्फ़ यह जानना होता है कि उपयोगकर्ता ने लॉगिन किया है या नहीं. इसके बाद, आपको दिखाने के लिए Firestore से कुछ डेटा पढ़ना होता है.

इस चरण में, आपको बंडल के साइज़ को कम करने के लिए Firestore lite का इस्तेमाल करने का तरीका बताया जाएगा. इससे शुरुआती पेज को तेज़ी से रेंडर किया जा सकेगा. इसके बाद, रीयल-टाइम अपडेट पाने के लिए, मुख्य Firestore SDK को डाइनैमिक तरीके से लोड किया जा सकेगा.

आपको कोड को इस तरह से फिर से लिखना है:

1. रीयल-टाइम सेवाओं को किसी दूसरी फ़ाइल में ले जाएं, ताकि उन्हें डाइनैमिक इंपोर्ट का इस्तेमाल करके डाइनैमिक तरीके से लोड किया जा सके.
2. वॉचलिस्ट और शेयर की कीमतें वापस पाने के लिए, Firestore Lite का इस्तेमाल करने वाले नए फ़ंक्शन बनाएं.
3. पेज को रेंडर करने के लिए, Firestore Lite के नए फ़ंक्शन का इस्तेमाल करके डेटा पाएं. इसके बाद, रीयल-टाइम अपडेट पाने के लिए, रीयल-टाइम सेवाओं को डाइनैमिक तौर पर लोड करें.

रीयल-टाइम सेवाओं को नई फ़ाइल में ले जाना

1. src/services.realtime.ts. नाम की नई फ़ाइल बनाएं
2. src/services.ts से subscribeToTickerChanges() और subscribeToAllTickerChanges() फ़ंक्शन को नई फ़ाइल में ले जाएं.
3. नई फ़ाइल में सबसे ऊपर ज़रूरी इंपोर्ट जोड़ें.

आपको अब भी यहां कुछ बदलाव करने होंगे:

4. सबसे पहले, फ़ंक्शन में इस्तेमाल करने के लिए, फ़ाइल में सबसे ऊपर मौजूद मुख्य Firestore SDK से एक Firestore इंस्टेंस बनाएं. यहां firebase.ts से Firestore इंस्टेंस इंपोर्ट नहीं किया जा सकता, क्योंकि कुछ ही चरणों में इसे Firestore Lite इंस्टेंस में बदला जाएगा. इसका इस्तेमाल सिर्फ़ शुरुआती पेज रेंडरिंग के लिए किया जाएगा.
5. दूसरा, firstload वैरिएबल और उससे सुरक्षित किए गए if ब्लॉक को हटा दें. इनकी सुविधाओं को उन नए फ़ंक्शन में ट्रांसफ़र कर दिया जाएगा जिन्हें आपको अगले चरण में बनाना होगा.

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

डेटा फ़ेच करने के लिए Firestore lite का इस्तेमाल करना

1. src/services.ts. खोलें
2. इंपोर्ट पाथ को ‘firebase/firestore' से बदलकर ‘firebase/firestore/lite', करें, इंपोर्ट सूची में getDoc जोड़ें, और onSnapshot हटाएं:

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';

3. Firestore Lite का इस्तेमाल करके, पेज को शुरुआती तौर पर रेंडर करने के लिए ज़रूरी डेटा फ़ेच करने वाले फ़ंक्शन जोड़ें:

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

4. src/firebase.ts खोलें और इंपोर्ट पाथ को ‘firebase/firestore' से बदलकर ‘firebase/firestore/lite': करें

src/firebase.ts

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

सभी को एक साथ जोड़ना

1. src/main.ts. खोलें
2. आपको शुरुआती पेज रेंडरिंग के लिए, नए बनाए गए फ़ंक्शन की ज़रूरत होगी. साथ ही, ऐप्लिकेशन की स्थिति को मैनेज करने के लिए, कुछ हेल्पर फ़ंक्शन की ज़रूरत होगी. इसलिए, अब इंपोर्ट अपडेट करें:

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';

3. फ़ाइल के सबसे ऊपर, डाइनैमिक इंपोर्ट का इस्तेमाल करके src/services.realtime लोड करें. वैरिएबल loadRealtimeService एक प्रॉमिस है. कोड लोड होने के बाद, यह रीयल-टाइम सेवाओं के साथ रिज़ॉल्व हो जाएगा. इसका इस्तेमाल बाद में, रीयल-टाइम अपडेट पाने के लिए किया जाएगा.

src/main.ts

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

4. onUserChange() के कॉलबैक को async फ़ंक्शन में बदलें, ताकि हम फ़ंक्शन बॉडी में await का इस्तेमाल कर सकें:

src/main.ts

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

5. अब डेटा फ़ेच करें, ताकि पहले चरण में बनाए गए नए फ़ंक्शन का इस्तेमाल करके पेज को रेंडर किया जा सके.

onUserChange() कॉलबैक में, वह if शर्त ढूंढें जहां उपयोगकर्ता लॉग इन है. इसके बाद, if स्टेटमेंट में मौजूद कोड को कॉपी करके चिपकाएं:

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

6. else ब्लॉक में, जहां कोई उपयोगकर्ता लॉग इन नहीं है, firestore lite का इस्तेमाल करके सभी स्टॉक के लिए कीमत की जानकारी फ़ेच करें. इसके बाद, पेज रेंडर करें. इसके बाद, रीयल-टाइम सेवाएं लोड होने के बाद, कीमत में होने वाले बदलावों को सुनें:

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

पूरा कोड देखने के लिए, src/main.ts देखें.

पुष्टि करना कि ऐप्लिकेशन काम कर रहा है

1. ऐप्लिकेशन को फिर से बनाने के लिए, npm run build चलाएं.
2. ब्राउज़र टैब में http://localhost:8080 खोलें या मौजूदा टैब को रीफ़्रेश करें.

बंडल का साइज़ देखना

1. Chrome DevTools खोलें.
2. नेटवर्क टैब पर स्विच करें.
3. नेटवर्क के अनुरोध कैप्चर करने के लिए, पेज को रीफ़्रेश करें
4. main.js ढूंढें और उसका साइज़ देखें.
5. अब यह सिर्फ़ 115 केबी का है (gzip फ़ॉर्मैट में 34.5 केबी). यह ओरिजनल बंडल के साइज़ से 75% कम है. ओरिजनल बंडल का साइज़ 446 केबी था(gzip किए गए बंडल का साइज़ 138 केबी था)! इस वजह से, 3G कनेक्शन पर साइट दो सेकंड से भी कम समय में लोड हो रही है. यह परफ़ॉर्मेंस और उपयोगकर्ता अनुभव के लिहाज़ से बहुत अच्छा है!

8. बधाई

बधाई हो, आपने ऐप्लिकेशन को अपग्रेड कर दिया है. साथ ही, इसे छोटा और तेज़ बना दिया है!

आपने ऐप्लिकेशन को एक-एक करके अपग्रेड करने के लिए, कंपैट पैकेज का इस्तेमाल किया. साथ ही, आपने पेज को तेज़ी से रेंडर करने के लिए Firestore Lite का इस्तेमाल किया. इसके बाद, कीमत में हुए बदलावों को स्ट्रीम करने के लिए, मुख्य Firestore को डाइनैमिक तरीके से लोड किया.

आपने इस कोडलैब के दौरान, बंडल के साइज़ को कम किया और उसके लोड होने के समय को बेहतर बनाया:

अब आपको उन मुख्य चरणों के बारे में पता चल गया है जिनकी मदद से, v8 Firebase JS SDK का इस्तेमाल करने वाले वेब ऐप्लिकेशन को नए मॉड्यूलर JS SDK पर अपग्रेड किया जा सकता है.

इस बारे में और पढ़ें

• v8 -> v9 अपग्रेड करने से जुड़ी गाइड
• v9 के बारे में ज़्यादा जानें
• v9 का इस्तेमाल शुरू करना

रेफ़रंस दस्तावेज़

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