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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

npm i firebase@11.3.0

# OR

yarn add firebase@11.3.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 एपीआई के कॉल को रीफ़ैक्टर करने वाले दो उदाहरणों में देखते हैं कि यह कैसे काम करता है.

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

पहले: 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 उपयोगकर्ता के साथ UserCredential दिखता है.

पहले: 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 फ़ंक्शन को फिर से तैयार करना

पहले: 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");
}

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

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

पहले: compat

import firebase from "firebase/compat/app"

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

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

import { initializeApp } from "firebase/app"

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

काम करने वाले कोड को हटाना

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

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

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

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

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

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

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

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