नेमस्पेस वाले एपीआई से मॉड्यूलर ऐप्लिकेशन पर अपग्रेड करना

compat लाइब्रेरी में मौजूद, नेमस्पेस वाले Firebase वेब एपीआई का इस्तेमाल करने वाले ऐप्लिकेशन को, इस गाइड में दिए गए निर्देशों का इस्तेमाल करके मॉड्यूलर एपीआई पर माइग्रेट करना चाहिए. ऐसा इसलिए, क्योंकि नेमस्पेस वाले एपीआई का इस्तेमाल वर्शन 8 या इससे पहले के वर्शन में किया जाता था.

इस गाइड में यह माना गया है कि आपको नेमस्पेस वाले एपीआई के बारे में जानकारी है. साथ ही, आपको यह भी पता है कि अपग्रेड करने और मॉड्यूलर ऐप्लिकेशन को लगातार डेवलप करने के लिए, webpack या Rollup जैसे मॉड्यूल बंडलर का इस्तेमाल किया जाएगा.

हमारा सुझाव है कि आप अपने डेवलपमेंट एनवायरमेंट में मॉड्यूल बंडलर का इस्तेमाल करें. अगर आपने इसका इस्तेमाल नहीं किया, तो आपको ऐप्लिकेशन के साइज़ को कम करने के लिए, मॉड्यूलर एपीआई के मुख्य फ़ायदों का इस्तेमाल करने का मौका नहीं मिलेगा. एसडीके टूल इंस्टॉल करने के लिए, आपको npm या yarn की ज़रूरत होगी.

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

नेमस्पेस वाली (compat) लाइब्रेरी के बारे में जानकारी

Firebase वेब SDK के लिए, दो तरह की लाइब्रेरी उपलब्ध हैं:

• मॉड्यूलर - यह एक नया एपीआई है. इसे ट्री-शेकिंग (इस्तेमाल न होने वाले कोड को हटाना) की सुविधा देने के लिए डिज़ाइन किया गया है, ताकि आपके वेब ऐप्लिकेशन को छोटा और तेज़ बनाया जा सके.
• नेमस्पेस किया गया (compat) - यह एक जाना-पहचाना एपीआई है. यह एसडीके के पुराने वर्शन के साथ पूरी तरह से काम करता है. इससे आपको एक बार में अपने पूरे Firebase कोड को बदले बिना अपग्रेड करने की सुविधा मिलती है. नेमस्पेस वाली लाइब्रेरी की तुलना में, कंपैट लाइब्रेरी के साइज़ या परफ़ॉर्मेंस में कोई खास फ़र्क़ नहीं होता.

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

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

अपग्रेड करने की प्रोसेस के बारे में जानकारी

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

1. अपने ऐप्लिकेशन में मॉड्यूलर लाइब्रेरी और कंपैट लाइब्रेरी जोड़ें.
2. अपने कोड में मौजूद इंपोर्ट स्टेटमेंट को compat में अपडेट करें.
3. किसी एक प्रॉडक्ट (उदाहरण के लिए, Authentication) के कोड को मॉड्यूलर स्टाइल में बदलें.
4. ज़रूरी नहीं: इस चरण में, Authentication के लिए Authentication की कंपैट लाइब्रेरी और कंपैट कोड हटाएं, ताकि आगे बढ़ने से पहले Authentication के लिए ऐप्लिकेशन के साइज़ का फ़ायदा मिल सके.
5. हर प्रॉडक्ट (उदाहरण के लिए, Cloud Firestore, FCM वगैरह) के लिए फ़ंक्शन को मॉड्यूलर स्टाइल में फिर से फ़ैक्टर करें. साथ ही, सभी सेक्शन पूरे होने तक उन्हें कंपाइल और टेस्ट करें.
6. मॉड्यूलर स्टाइल के हिसाब से, शुरू करने के लिए कोड अपडेट करें.
7. अपने ऐप्लिकेशन से, बचे हुए सभी कंपैट स्टेटमेंट और कंपैट कोड हटाएं.

SDK टूल का नया वर्शन पाना

शुरू करने के लिए, npm का इस्तेमाल करके मॉड्यूलर लाइब्रेरी और कंपैट लाइब्रेरी पाएं:

npm i firebase@12.15.0

# OR

yarn add firebase@12.15.0

इंपोर्ट को compat में अपडेट करना

डिपेंडेंसी अपडेट करने के बाद, अपने कोड को चालू रखने के लिए, अपने इंपोर्ट स्टेटमेंट में बदलाव करें, ताकि हर इंपोर्ट के "compat" वर्शन का इस्तेमाल किया जा सके. उदाहरण के लिए:

इससे पहले: वर्शन 8 या इससे पहले का वर्शन

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

After: compat

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

मॉड्यूलर स्टाइल में फिर से फ़ैक्टर करना

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

मॉड्यूलर एपीआई में, सेवाओं को पहले आर्ग्युमेंट के तौर पर पास किया जाता है. इसके बाद, फ़ंक्शन बाकी काम करने के लिए सेवा की जानकारी का इस्तेमाल करता है. आइए, दो ऐसे उदाहरणों से समझते हैं कि यह कैसे काम करता है जिनमें Authentication और Cloud Firestore एपीआई को कॉल करने के लिए रीफ़ैक्टर किया गया है.

उदाहरण 1: Authentication फ़ंक्शन को फिर से व्यवस्थित करना

Before: compat

कंपैट कोड, नेमस्पेस वाले कोड जैसा ही होता है. हालांकि, इंपोर्ट बदल गए हैं.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

मॉड्यूलर के बाद:

getAuth फ़ंक्शन, firebaseApp को पहले पैरामीटर के तौर पर लेता है. onAuthStateChanged फ़ंक्शन को auth इंस्टेंस से चेन नहीं किया जाता, क्योंकि यह नेमस्पेस वाले एपीआई में होता है. इसके बजाय, यह एक फ़्री फ़ंक्शन है, जो auth को अपने पहले पैरामीटर के तौर पर लेता है.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

पुष्टि करने के तरीके getRedirectResult को हैंडल करने का तरीका अपडेट किया गया

मॉड्यूलर एपीआई, getRedirectResult में एक बड़ा बदलाव करता है. जब कोई रीडायरेक्ट ऑपरेशन कॉल नहीं किया जाता है, तो नेमस्पेस वाले एपीआई के बजाय मॉड्यूलर एपीआई, null दिखाता है. नेमस्पेस वाला एपीआई, null उपयोगकर्ता के साथ null दिखाता था.UserCredential

Before: compat

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

मॉड्यूलर के बाद:

const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
  return null;
}
return result;

दूसरा उदाहरण: Cloud Firestore फ़ंक्शन को फिर से फ़ैक्टर करना

Before: compat

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

मॉड्यूलर के बाद:

getFirestore फ़ंक्शन, firebaseApp को पहले पैरामीटर के तौर पर लेता है. यह firebaseApp, पिछले उदाहरण में initializeApp से मिला था. ध्यान दें कि मॉड्यूलर एपीआई में क्वेरी बनाने का कोड, पुराने एपीआई से काफ़ी अलग है. इसमें कोई चेनिंग नहीं है. साथ ही, query या where जैसे तरीकों को अब फ़्री फ़ंक्शन के तौर पर दिखाया जाता है.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Firestore DocumentSnapshot.exists के रेफ़रंस अपडेट करें

मॉड्यूलर एपीआई में एक ऐसा बदलाव किया गया है जिससे मौजूदा कोड पर असर पड़ेगा. इसमें प्रॉपर्टी firestore.DocumentSnapshot.exists को तरीके में बदल दिया गया है. दोनों फ़ंक्शन का काम एक जैसा है (यह जांचना कि कोई दस्तावेज़ मौजूद है या नहीं). हालांकि, आपको अपने कोड को फिर से फ़ैक्टर करना होगा, ताकि नए तरीके का इस्तेमाल किया जा सके. इसके लिए, यहां दिया गया तरीका अपनाएं:

Before:compat

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

मॉड्यूलर के बाद:

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

उदाहरण 3: नेमस्पेस और मॉड्यूलर कोड स्टाइल को एक साथ इस्तेमाल करना

अपग्रेड के दौरान कंपैट लाइब्रेरी का इस्तेमाल करने पर, नेमस्पेस किए गए कोड का इस्तेमाल जारी रखा जा सकता है. साथ ही, मॉड्यूलर एपीआई के लिए रिफ़ैक्टर किए गए कोड का इस्तेमाल भी किया जा सकता है. इसका मतलब है कि Cloud Firestore के लिए, नेमस्पेस वाले मौजूदा कोड को बनाए रखा जा सकता है. साथ ही, Authentication या Firebase SDK के अन्य कोड को मॉड्यूलर स्टाइल में बदला जा सकता है. इसके बावजूद, दोनों कोड स्टाइल के साथ अपने ऐप्लिकेशन को कंपाइल किया जा सकता है. नेमस्पेस और मॉड्यूलर एपीआई कोड के लिए भी यही बात लागू होती है. जैसे, Cloud Firestore में; नई और पुरानी कोड स्टाइल एक साथ इस्तेमाल की जा सकती हैं. हालांकि, इसके लिए आपको कंपैट पैकेज इंपोर्ट करने होंगे:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

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

शुरू करने के लिए कोड अपडेट करना

मॉड्यूलर सिंटैक्स का इस्तेमाल करने के लिए, अपने ऐप्लिकेशन के इनिशियलाइज़ेशन कोड को अपडेट करें. अपने ऐप्लिकेशन में मौजूद सभी कोड को फिर से व्यवस्थित करने के बाद, इस कोड को अपडेट करना ज़रूरी है. ऐसा इसलिए, क्योंकि firebase.initializeApp(), कंपैटिबिलिटी और मॉड्यूलर एपीआई, दोनों के लिए ग्लोबल स्टेट शुरू करता है. वहीं, मॉड्यूलर initializeApp() फ़ंक्शन सिर्फ़ मॉड्यूलर के लिए स्टेट शुरू करता है.

Before: compat

import firebase from "firebase/compat/app"

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

मॉड्यूलर के बाद:

import { initializeApp } from "firebase/app"

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

कंपैट कोड हटाना

मॉड्यूलर एपीआई के साइज़ के फ़ायदों को पाने के लिए, आपको आखिर में सभी इनवोकेशन को ऊपर दिखाई गई मॉड्यूलर स्टाइल में बदलना होगा. साथ ही, अपने कोड से सभी import "firebase/compat/* स्टेटमेंट हटाने होंगे. जब यह प्रोसेस पूरी हो जाए, तो firebase.* ग्लोबल नेमस्पेस या नेमस्पेस किए गए एपीआई स्टाइल में लिखे गए किसी अन्य कोड का कोई रेफ़रंस नहीं होना चाहिए.

विंडो से कंपैट लाइब्रेरी का इस्तेमाल करना

मॉड्यूलर एपीआई को, ब्राउज़र के window ऑब्जेक्ट के बजाय मॉड्यूल के साथ काम करने के लिए ऑप्टिमाइज़ किया गया है. लाइब्रेरी के पिछले वर्शन में, window.firebase नेमस्पेस का इस्तेमाल करके Firebase को लोड और मैनेज किया जा सकता था. हमारा सुझाव है कि आगे से इसका इस्तेमाल न करें, क्योंकि इससे इस्तेमाल न किए गए कोड को हटाने की अनुमति नहीं मिलती है. हालांकि, JavaScript SDK का कंपैट वर्शन, window के साथ काम करता है. यह उन डेवलपर के लिए है जो मॉड्यूलर अपग्रेड पाथ को तुरंत शुरू नहीं करना चाहते.

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

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

मॉड्यूलर एसडीके के फ़ायदे और सीमाएं

पूरी तरह से मॉड्यूलर किए गए एसडीके के ये फ़ायदे हैं:

• मॉड्यूलर एसडीके की मदद से, ऐप्लिकेशन का साइज़ काफ़ी कम हो जाता है. यह JavaScript के नए मॉड्यूल फ़ॉर्मैट का इस्तेमाल करता है. इससे "ट्री शेकिंग" की सुविधा मिलती है. इसमें सिर्फ़ उन आर्टफ़ैक्ट को इंपोर्ट किया जाता है जिनकी आपके ऐप्लिकेशन को ज़रूरत होती है. आपके ऐप्लिकेशन के हिसाब से, मॉड्यूलर एसडीके के साथ ट्री-शेकिंग करने पर, नेमस्पेस वाले एपीआई का इस्तेमाल करके बनाए गए मिलते-जुलते ऐप्लिकेशन की तुलना में, 80% कम किलोबाइट का इस्तेमाल हो सकता है.
• मॉड्यूलर एसडीके टूल को, नई सुविधाओं को डेवलप करने का फ़ायदा मिलता रहेगा. हालांकि, नेमस्पेस वाले एपीआई को यह फ़ायदा नहीं मिलेगा.