मॉड्यूलर फायरबेस जेएस एसडीके पर माइग्रेट करके अपने वेब ऐप को सुपरचार्ज करें

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

मॉड्यूलर फायरबेस जेएस एसडीके मौजूदा जेएस एसडीके का पुनर्लेखन है और इसे अगले प्रमुख संस्करण के रूप में जारी किया जाएगा। यह डेवलपर्स को छोटे बंडल बनाने और बेहतर प्रदर्शन प्राप्त करने के लिए फायरबेस जेएस एसडीके से अप्रयुक्त कोड को बाहर करने में सक्षम बनाता है।

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

सुचारू अपग्रेड प्रक्रिया प्रदान करने के लिए, संगतता पैकेजों का एक सेट प्रदान किया जाता है। इस कोडलैब में, आप सीखेंगे कि ऐप को टुकड़े-टुकड़े करके पोर्ट करने के लिए संगतता पैकेज का उपयोग कैसे करें।

आप क्या बनाएंगे

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

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

2d351cb47b604ad7.png

यह कोडलैब फायरबेस एसडीके को अपग्रेड करने पर केंद्रित है। अन्य अवधारणाओं और कोड ब्लॉकों को छिपा दिया गया है और आपको केवल कॉपी और पेस्ट करने के लिए प्रदान किया गया है।

आपको किस चीज़ की ज़रूरत पड़ेगी

  • आपकी पसंद का ब्राउज़र, जैसे Chrome
  • आपकी पसंद का आईडीई/टेक्स्ट एडिटर, जैसे वेबस्टॉर्म , एटम , सबलाइम , या वीएस कोड
  • पैकेज मैनेजर npm , जो आम तौर पर Node.js के साथ आता है
  • कोडलैब का नमूना कोड (कोड कैसे प्राप्त करें, इसके लिए कोडलैब का अगला चरण देखें।)

2. स्थापित हो जाओ

कोड प्राप्त करें

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

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

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

वैकल्पिक रूप से, यदि आपके पास गिट स्थापित नहीं है, तो आप रिपॉजिटरी को ज़िप फ़ाइल के रूप में डाउनलोड कर सकते हैं, और डाउनलोड की गई ज़िप फ़ाइल को अनपैक कर सकते हैं।

ऐप आयात करें

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

71a8a7d47392e8f4.png

3. एक आधार रेखा स्थापित करें

आपका शुरुआती बिंदु क्या है?

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

सुनिश्चित करें कि ऐप में सब कुछ काम करता है:

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

48a096debb2aa940.png

  1. सिम्युलेटेड थ्रॉटलिंग का उपयोग करके विभिन्न नेटवर्क स्थितियों के तहत ऐप को लोड करें। आप इस कोडलैब में लोड समय को मापने के लिए स्लो 3जी का उपयोग करेंगे क्योंकि यह वह जगह है जहां छोटे बंडल आकार से सबसे अधिक मदद मिलती है।

4397cb2c1327089.png

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

4. अनुकूलता पैकेज का उपयोग करें

संगतता पैकेज आपको एक बार में सभी फायरबेस कोड को बदले बिना नए एसडीके संस्करण में अपग्रेड करने की अनुमति देते हैं। आप उन्हें धीरे-धीरे मॉड्यूलर एपीआई में अपग्रेड कर सकते हैं।

इस चरण में, आप फायरबेस लाइब्रेरी को v8 से नए संस्करण में अपग्रेड करेंगे और संगतता पैकेज का उपयोग करने के लिए कोड बदल देंगे। निम्नलिखित चरणों में, आप सीखेंगे कि पहले मॉड्यूलर एपीआई का उपयोग करने के लिए केवल फायरबेस ऑथ कोड को कैसे अपग्रेड किया जाए, फिर फायरस्टोर कोड को कैसे अपग्रेड किया जाए।

प्रत्येक चरण के अंत में, आपको ऐप को बिना किसी टूट-फूट के संकलित और चलाने में सक्षम होना चाहिए, और जैसे-जैसे हम प्रत्येक उत्पाद को स्थानांतरित करते हैं, बंडल आकार में कमी देखेंगे।

नया SDK प्राप्त करें

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. मॉड्यूलर एपीआई का उपयोग करने के लिए ऑथ को अपग्रेड करें

आप फायरबेस उत्पादों को किसी भी क्रम में अपग्रेड कर सकते हैं। इस कोडलैब में, आप बुनियादी अवधारणाओं को सीखने के लिए पहले ऑथ को अपग्रेड करेंगे क्योंकि ऑथ एपीआई अपेक्षाकृत सरल है। फायरस्टोर को अपग्रेड करना थोड़ा अधिक शामिल है, और आप आगे सीखेंगे कि यह कैसे करना है।

प्रामाणिक आरंभीकरण अद्यतन करें

  1. फ़ाइल src/firebase.ts पर जाएँ
  2. निम्नलिखित आयात जोड़ें:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. import 'firebase/compat/auth'.
  2. export const firebaseAuth = app.auth(); साथ:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. 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';
  1. User import { firebaseAuth, User } from './firebase'; चूँकि आप पहले ही User 'firebase/auth'.
  2. मॉड्यूलर एपीआई का उपयोग करने के लिए फ़ंक्शन अपडेट करें।

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

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

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. क्रोम डेवटूल्स खोलें।
  2. नेटवर्क टैब पर स्विच करें.
  3. नेटवर्क अनुरोधों को कैप्चर करने के लिए पेज को रीफ्रेश करें।
  4. Main.js ढूंढें और उसका आकार जांचें। आपने कोड की केवल कुछ पंक्तियों को बदलकर बंडल का आकार 100KB (36 KB gzipped) या लगभग 22% छोटा कर दिया है! धीमे 3जी कनेक्शन पर भी साइट 0.75 सेकेंड तेजी से लोड हो रही है।

2e4eafaf66cd829b.png

6. मॉड्यूलर एपीआई का उपयोग करने के लिए फायरबेस ऐप और फायरस्टोर को अपग्रेड करें

फायरबेस इनिशियलाइज़ेशन को अपडेट करें

  1. फ़ाइल src/firebase.ts.
  2. import firebase from 'firebase/compat/app'; साथ:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. 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.appspot.com", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

फायरस्टोर आरंभीकरण को अद्यतन करें

  1. उसी फ़ाइल src/firebase.ts, import 'firebase/compat/firestore'; साथ

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. export const firestore = app.firestore(); साथ:

src/firebase.ts

export const firestore = getFirestore();
  1. " export const firestore = ... " के बाद सभी पंक्तियाँ हटाएँ

आयात अद्यतन करें

  1. फ़ाइल खोलें src/services.ts.
  2. आयात से FirestoreFieldPath , FirestoreFieldValue और QuerySnapshot हटाएँ। './firebase' से आयात अब निम्नलिखित जैसा दिखना चाहिए:

src/services.ts

import { firestore } from './firebase';
  1. उन फ़ंक्शंस और प्रकारों को आयात करें जिनका आप फ़ाइल के शीर्ष पर उपयोग करने जा रहे हैं:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. उस संग्रह का एक संदर्भ बनाएं जिसमें सभी टिकर हों:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. संग्रह से सभी दस्तावेज़ लाने के लिए 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() को अपडेट करें

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

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 */
});
  1. एक बार जब आपके पास वॉचलिस्ट में टिकर हों, तो उनकी कीमतें प्राप्त करने के लिए एक क्वेरी बनाने के लिए 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. क्रोम डेवटूल्स खोलें।
  2. नेटवर्क टैब पर स्विच करें.
  3. नेटवर्क अनुरोधों को कैप्चर करने के लिए पेज को रीफ्रेश करें।
  4. main.js ढूंढें और उसका आकार जांचें। इसकी तुलना फिर से मूल बंडल आकार से करें - हमने बंडल आकार को 200KB (63.8 KB gzipped), या 50% छोटा कर दिया है, जिसका अर्थ है 1.3s तेज लोड समय!

7660cdc574ee8571.png

7. आरंभिक पेज रेंडरिंग को तेज़ करने के लिए फायरस्टोर लाइट का उपयोग करें

फायरस्टोर लाइट क्या है?

फायरस्टोर एसडीके जटिल कैशिंग, रीयल-टाइम स्ट्रीमिंग, लगातार स्टोरेज, मल्टी-टैब ऑफ़लाइन सिंक, रिट्रीज़, आशावादी समवर्ती और बहुत कुछ प्रदान करता है, और इसलिए आकार में काफी बड़ा है। लेकिन हो सकता है कि आप बिना किसी उन्नत सुविधाओं की आवश्यकता के केवल एक बार डेटा प्राप्त करना चाहें। उन मामलों के लिए, फायरस्टोर ने एक सरल और हल्का समाधान, एक बिल्कुल नया पैकेज - फायरस्टोर लाइट बनाया।

फायरस्टोर लाइट के लिए एक बढ़िया उपयोग का मामला प्रारंभिक पृष्ठ रेंडरिंग के प्रदर्शन को अनुकूलित करना है, जहां आपको केवल यह जानना होगा कि कोई उपयोगकर्ता लॉग इन है या नहीं, फिर प्रदर्शित करने के लिए फायरटोर से कुछ डेटा पढ़ें।

इस चरण में, आप सीखेंगे कि शुरुआती पेज रेंडरिंग को तेज करने के लिए बंडल आकार को कम करने के लिए फायरस्टोर लाइट का उपयोग कैसे करें, फिर वास्तविक समय अपडेट की सदस्यता के लिए मुख्य फायरस्टोर एसडीके को गतिशील रूप से लोड करें।

आप इस कोड को दोबारा क्रियान्वित करेंगे:

  1. रीयल-टाइम सेवाओं को एक अलग फ़ाइल में ले जाएं, ताकि उन्हें गतिशील आयात का उपयोग करके गतिशील रूप से लोड किया जा सके।
  2. वॉचलिस्ट और स्टॉक की कीमतों को पुनः प्राप्त करने के लिए फायरस्टोर लाइट का उपयोग करने के लिए नए फ़ंक्शन बनाएं।
  3. प्रारंभिक पृष्ठ रेंडरिंग बनाने के लिए डेटा पुनर्प्राप्त करने के लिए नए फायरस्टोर लाइट फ़ंक्शन का उपयोग करें, फिर वास्तविक समय अपडेट सुनने के लिए वास्तविक समय सेवाओं को गतिशील रूप से लोड करें।

वास्तविक समय सेवाओं को एक नई फ़ाइल में ले जाएँ

  1. src/services.realtime.ts.
  2. फ़ंक्शन subscribeToTickerChanges() और subscribeToAllTickerChanges() src/services.ts से नई फ़ाइल में ले जाएं।
  3. नई फ़ाइल के शीर्ष पर आवश्यक आयात जोड़ें।

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

  1. सबसे पहले, फ़ंक्शंस में उपयोग किए जाने वाले फ़ाइल के शीर्ष पर मुख्य फायरस्टोर एसडीके से एक फायरस्टोर इंस्टेंस बनाएं। आप यहां firebase.ts से फायरस्टोर इंस्टेंस आयात नहीं कर सकते क्योंकि आप इसे कुछ चरणों में फायरस्टोर लाइट इंस्टेंस में बदलने जा रहे हैं, जिसका उपयोग केवल प्रारंभिक पेज रेंडरिंग के लिए किया जाएगा।
  2. दूसरा, 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);
   });
}

डेटा लाने के लिए फायरस्टोर लाइट का उपयोग करें

  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';
  1. फायरस्टोर लाइट का उपयोग करके प्रारंभिक पृष्ठ रेंडरिंग के लिए आवश्यक डेटा लाने के लिए फ़ंक्शन जोड़ें:

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 खोलें, और आयात पथ को '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';
  1. फ़ाइल के शीर्ष पर डायनामिक आयात का उपयोग करके src/services.realtime लोड करें। वेरिएबल loadRealtimeService एक वादा है जो कोड लोड होने के बाद वास्तविक समय सेवाओं के साथ हल हो जाएगा। आप इसका उपयोग बाद में रीयल-टाइम अपडेट की सदस्यता लेने के लिए करेंगे।

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. onUserChange() के कॉलबैक को async फ़ंक्शन में बदलें, ताकि हम फ़ंक्शन बॉडी में await उपयोग कर सकें:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. अब पिछले चरण में हमारे द्वारा बनाए गए नए फ़ंक्शंस का उपयोग करके प्रारंभिक पृष्ठ रेंडरिंग बनाने के लिए डेटा प्राप्त करें।

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   
   }
}
  1. अन्य ब्लॉक में जहां कोई उपयोगकर्ता लॉग इन नहीं है, फायरस्टोर लाइट का उपयोग करके सभी शेयरों के लिए मूल्य की जानकारी प्राप्त करें, पेज को रेंडर करें, फिर वास्तविक समय सेवाएं लोड होने के बाद मूल्य परिवर्तन सुनें:

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. क्रोम डेवटूल्स खोलें।
  2. नेटवर्क टैब पर स्विच करें.
  3. नेटवर्क अनुरोधों को कैप्चर करने के लिए पेज को रीफ्रेश करें
  4. main.js ढूंढें और उसका आकार जांचें।
  5. अब यह केवल 115KB (34.5KB gzipped) है। यह मूल बंडल आकार से 75% छोटा है जो 446KB (138KB gzipped) था! परिणामस्वरूप, साइट 3G कनेक्शन पर 2s से अधिक तेजी से लोड हो रही है - एक शानदार प्रदर्शन और उपयोगकर्ता अनुभव में सुधार!

9ea7398a8c8ef81b.png

8. बधाई हो

बधाई हो, आपने ऐप को सफलतापूर्वक अपग्रेड किया और इसे छोटा और तेज़ बना दिया!

आपने ऐप को टुकड़े-टुकड़े करके अपग्रेड करने के लिए कंपैट पैकेज का उपयोग किया, और आपने शुरुआती पेज रेंडरिंग को तेज करने के लिए फायरस्टोर लाइट का उपयोग किया, फिर मूल्य परिवर्तनों को स्ट्रीम करने के लिए मुख्य फायरस्टोर को गतिशील रूप से लोड किया।

आपने इस कोडलैब के दौरान बंडल का आकार भी कम कर दिया और इसके लोड समय में सुधार किया:

मुख्य.जे.एस

संसाधन का आकार (केबी)

जीज़िप आकार (केबी)

लोड समय (धीमे 3जी से अधिक)

वी 8

446

138

4.92

v9 कॉम्पैट

429

124

4.65

v9 केवल मॉड्यूलर प्रामाणिक

348

102

4.2

v9 पूरी तरह से मॉड्यूलर

244

74.6

3.66

v9 पूरी तरह से मॉड्यूलर + फायरस्टोर लाइट

117

34.9

2.88

32a71bd5a774e035.png

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

अग्रिम पठन

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