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

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

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

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

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

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

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

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

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

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

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

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

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

SDK टूल का नया वर्शन डाउनलोड करना

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

npm i firebase@13.2.0

# OR

yarn add firebase@13.2.0

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

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

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

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

इसके बाद: 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 फ़ंक्शन को रीफ़ैक्टर करना

पहले: साथ काम करने की सुविधा

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

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 इंस्टेंस से चेन नहीं किया गया है, जैसा कि namespaced API में होता है. इसके बजाय, यह एक फ़्री फ़ंक्शन है, जो auth को अपने पहले पैरामीटर के तौर पर लेता है.

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

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

पुष्टि करने के तरीके getRedirectResult को मैनेज करने की प्रोसेस अपडेट करें

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

पहले: साथ काम करने की सुविधा

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;

उदाहरण 2: Cloud Firestore फ़ंक्शन को रीफ़ैक्टर करना

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

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.* ग्लोबल नेमस्पेस या namespaced API स्टाइल में मौजूद किसी अन्य कोड का कोई रेफ़रंस नहीं होना चाहिए.

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

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

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

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

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

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

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