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

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

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

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

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

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

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

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

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

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

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

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

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

एसडीके का नया वर्शन पाना

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

npm i firebase@12.17.1

# OR

yarn add firebase@12.17.1

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

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

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

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

बाद में: कंपैट

// 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 API को कॉल करने के तरीके को रीफ़ैक्टर किया गया है.

पहला उदाहरण: Authentication फ़ंक्शन को रीफ़ैक्टर करना

पहले: कंपैट

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

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

Auth के getRedirectResult तरीके को हैंडल करने के तरीके को अपडेट करना

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

पहले: कंपैट

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 फ़ंक्शन को रीफ़ैक्टर करना

पहले: कंपैट

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

पहले:कंपैट

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

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

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

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

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

पहले: कंपैट

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

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

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

पूरी तरह से मॉड्यूलर एसडीके के, पुराने वर्शन की तुलना में ये फ़ायदे हैं:

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