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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

npm i firebase@12.0.0

# OR

yarn add firebase@12.0.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
});

After: modular

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;

After: modular

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

After: modular

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

After: modular

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

After: modular

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

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

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

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

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