compat लाइब्रेरी से लेकर वर्शन 8 या इससे पहले के वर्शन तक, फ़िलहाल किसी भी नेमस्पेस किए गए Firebase वेब एपीआई का इस्तेमाल कर रहे ऐप्लिकेशन को, इस गाइड में दिए गए निर्देशों का इस्तेमाल करके मॉड्यूलर एपीआई पर माइग्रेट करने के बारे में सोचना चाहिए.
इस गाइड में यह माना गया है कि आपको नेमस्पेस वाले एपीआई के बारे में जानकारी है. साथ ही, आपको मॉड्यूल बंडलर जैसे मॉड्यूल बंडलर का इस्तेमाल करने पर फ़ायदा होगा. जैसे, webpack या Rollup. इससे मॉड्यूलर ऐप्लिकेशन को अपग्रेड करने और उसका डेवलपमेंट जारी रखने में मदद मिलेगी.
हमारा सुझाव है कि आप अपने डेवलपमेंट एनवायरमेंट में मॉड्यूल बंडलर का इस्तेमाल करने का सुझाव दें. अगर इस एपीआई का इस्तेमाल नहीं किया जाता है, तो आपको ऐप्लिकेशन के कम साइज़ में मॉड्यूलर एपीआई के मुख्य फ़ायदों का फ़ायदा नहीं मिल पाएगा. SDK टूल इंस्टॉल करने के लिए, आपको एनपीएम या यार्न की ज़रूरत होगी.
इस गाइड में अपग्रेड करने के चरण, ऐसे काल्पनिक वेब ऐप्लिकेशन के हिसाब से होंगे जो पुष्टि करने और Cloud Firestore SDK का इस्तेमाल करता है. उदाहरणों पर काम करके, आप उन सिद्धांतों और व्यावहारिक चरणों में महारत हासिल कर सकते हैं, जो काम करने वाले सभी Firebase वेब SDK टूल को अपग्रेड करने के लिए ज़रूरी हैं.
नेमस्पेस की गई (compat) लाइब्रेरी के बारे में जानकारी
Firebase वेब SDK टूल के लिए दो तरह की लाइब्रेरी उपलब्ध हैं:
- मॉड्यूल - एक नया एपीआई प्लैटफ़ॉर्म, जिसे पेड़ों के झटकों (इस्तेमाल नहीं किया गया कोड को हटाना) की सुविधा देने के लिए डिज़ाइन किया गया है. इसका मकसद आपके वेब ऐप्लिकेशन को ज़्यादा से ज़्यादा छोटा और तेज़ी से बनाना है.
- Namespaced (
compat) - एक जाना-पहचाना एपीआई प्लैटफ़ॉर्म, जो SDK टूल के नए वर्शन के साथ पूरी तरह से काम करता है. इसकी मदद से, सभी Firebase कोड में एक साथ बदलाव किए बिना अपग्रेड किया जा सकता है. कॉम्पट लाइब्रेरी का साइज़ या परफ़ॉर्मेंस, दूसरे नेमस्पेस के मुकाबले कम फ़ायदा होता है.
इस गाइड में यह माना गया है कि आपको अपग्रेड की सुविधा के लिए, कॉम्पट लाइब्रेरी का फ़ायदा मिलेगा. ये लाइब्रेरी आपको मॉड्यूलर एपीआई के लिए, रीफ़ैक्टरिंग की सुविधा के साथ-साथ नेमस्पेस किए गए कोड का इस्तेमाल जारी रखने की अनुमति देती हैं. इसका मतलब है कि अपग्रेड प्रोसेस को पूरा करते समय, आपके पास अपने ऐप्लिकेशन को कंपाइल और डीबग करने की सुविधा होगी.
Firebase वेब SDK टूल के बहुत कम एक्सपोज़र वाले ऐप्लिकेशन—उदाहरण के लिए, ऐसा ऐप्लिकेशन जो पुष्टि करने वाले एपीआई को आसानी से कॉल करता है—कंपैट लाइब्रेरी का इस्तेमाल किए बिना, पुराने नेमस्पेस वाले कोड को रीफ़ैक्टर करना आसान हो सकता है. अगर ऐसे किसी ऐप्लिकेशन को अपग्रेड किया जा रहा है, तो कंपैट लाइब्रेरी का इस्तेमाल किए बिना "मॉड्युलर एपीआई" के लिए इस गाइड में दिए गए निर्देशों का पालन करें.
अपग्रेड की प्रोसेस के बारे में जानकारी
अपग्रेड करने की प्रोसेस के हर चरण का दायरा सीमित है, ताकि आप अपने ऐप्लिकेशन के सोर्स में बदलाव करने की प्रक्रिया पूरी कर सकें. इसके बाद, उसे बिना किसी रुकावट के कंपाइल करके चला सकें. सारांश में, यहां बताया गया है कि ऐप्लिकेशन को अपग्रेड करने के लिए आप क्या करेंगे:
- अपने ऐप्लिकेशन में मॉड्यूलर लाइब्रेरी और कंपेट लाइब्रेरी जोड़ें.
- शर्तों का पालन करने के लिए, अपने कोड में इंपोर्ट स्टेटमेंट अपडेट करें.
- किसी एक प्रॉडक्ट (जैसे कि पुष्टि) के लिए, मॉड्यूलर स्टाइल के हिसाब से कोड को रीफ़ैक्टर करें.
- ज़रूरी नहीं: अब आगे बढ़ने से पहले, पुष्टि करने की सुविधा से जुड़ी कंपैट लाइब्रेरी और कंपैट कोड हटाएं, ताकि पुष्टि करने की सुविधा के लिए ऐप्लिकेशन के साइज़ का फ़ायदा मिल सके.
- हर प्रॉडक्ट (उदाहरण के लिए, Cloud Firestore, FCM वगैरह) के फ़ंक्शन को मॉड्यूलर स्टाइल के हिसाब से रीफ़ैक्टर करके, उसे तब तक कंपाइल और टेस्ट किया जाता है, जब तक सभी एरिया पूरे नहीं हो जाते.
- शुरुआती कोड को मॉड्यूलर स्टाइल में अपडेट करें.
- अपने ऐप्लिकेशन से बाकी बचे सभी कॉम्पैट स्टेटमेंट और कोड हटाएं.
SDK टूल का सबसे नया वर्शन डाउनलोड करें
शुरुआत करने के लिए, एनपीएम का इस्तेमाल करके मॉड्यूलर लाइब्रेरी और कंपेट लाइब्रेरी पाएं:
npm i firebase@10.12.2 # OR yarn add firebase@10.12.2
इंपोर्ट को कॉम्पैट में अपडेट करें
अपनी डिपेंडेंसी अपडेट करने के बाद भी आपका कोड काम करता रहे, इसके लिए हर इंपोर्ट के "कंपैट" वर्शन का इस्तेमाल करने के लिए अपने इंपोर्ट स्टेटमेंट बदलें. उदाहरण के लिए:
पहले: वर्शन 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 पैकेज और अन्य पैकेज, पूरी जानकारी वाला एक्सपोर्ट नहीं दिखाते. इसमें पैकेज के सभी तरीके शामिल होते हैं. इसके बजाय, पैकेज अलग-अलग फ़ंक्शन को एक्सपोर्ट करते हैं.
मॉड्यूलर एपीआई में, सेवाओं को पहले आर्ग्युमेंट के तौर पर पास किया जाता है. इसके बाद, बाकी काम करने के लिए फ़ंक्शन, सेवा की जानकारी का इस्तेमाल करता है. ऑथेंटिकेशन और Cloud Firestore एपीआई के कॉल का रीफ़ैक्टर करने वाले दो उदाहरणों में, यह देखते हैं कि यह कैसे काम करता है.
पहला उदाहरण: पुष्टि करने वाले किसी फ़ंक्शन को फिर से बनाने के लिए
पहले: कंपैट
कॉम्पैट कोड, नेमस्पेस किए गए कोड की तरह ही है, लेकिन इंपोर्ट की प्रोसेस में बदलाव हुआ है.
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 दिखता है.
पहले: कंपैट
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 प्रॉपर्टी को तरीका में बदल दिया गया है. फ़ंक्शन एक जैसा ही है (इसकी जांच की जा रही है कि कोई दस्तावेज़ मौजूद है या नहीं)
लेकिन आपको नया तरीका इस्तेमाल करने के लिए, अपने कोड को रीफ़ैक्टर करना होगा, जैसा कि यहां दिखाया गया है:
before:compat
if (snapshot.exists) {
console.log("the document exists");
}
बाद में: मॉड्यूलर
if (snapshot.exists()) {
console.log("the document exists");
}
तीसरा उदाहरण: नेमस्पेस और मॉड्यूलर कोड स्टाइल को एक साथ मिलाना
अपग्रेड के दौरान, कंपैट लाइब्रेरी का इस्तेमाल करने से आपको मॉड्यूलर एपीआई के लिए रीफ़ैक्टर किए गए कोड के साथ-साथ, नेमस्पेस किए गए कोड का इस्तेमाल जारी रखने की सुविधा मिलती है. इसका मतलब है कि आप मॉड्युलर स्टाइल के हिसाब से पुष्टि या दूसरे 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/10.12.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.12.2/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
कंपैटबिलिटी लाइब्रेरी में, हुड के तहत मॉड्यूलर कोड का इस्तेमाल किया जाता है और उसे नेमस्पेस किए गए एपीआई के जैसा ही एपीआई मिलता है. इसका मतलब है कि ज़्यादा जानकारी के लिए, namespaced API का रेफ़रंस और नेमस्पेस किए गए कोड स्निपेट देखे जा सकते हैं. लंबे समय तक इस्तेमाल करने के लिए, इस तरीके का सुझाव नहीं दिया जाता. हालांकि, इसे पूरी तरह मॉड्यूलर लाइब्रेरी में अपग्रेड करने की शुरुआत करने के लिए, ऐसा करने का सुझाव दिया जाता है.
मॉड्यूलर SDK टूल के फ़ायदे और सीमाएं
पुराने वर्शन की तुलना में, पूरी तरह से मॉड्यूलराइज़ किए गए SDK टूल के ये फ़ायदे हैं:
- मॉड्यूलर SDK टूल की मदद से, ऐप्लिकेशन के साइज़ को बहुत कम किया जा सकता है. यह आधुनिक JavaScript मॉड्यूल फ़ॉर्मैट अपनाता है, जिससे "पेड़ झटका देने" के तरीकों को अपनाया जा सकता है. इसमें सिर्फ़ वे आर्टफ़ैक्ट इंपोर्ट किए जाते हैं जिनकी आपके ऐप्लिकेशन की ज़रूरत होती है. आपके ऐप्लिकेशन के आधार पर, मॉड्यूलर SDK टूल की मदद से पेड़ हिलाने पर, नेमस्पेस किए गए एपीआई का इस्तेमाल करके बनाए गए तुलना किए जा सकने वाले ऐप्लिकेशन के मुकाबले 80% कम किलोबाइट मिल सकते हैं.
- मॉड्यूलर SDK टूल को, लगातार हो रही सुविधा के डेवलपमेंट का फ़ायदा मिलता रहेगा, जबकि नेमस्पेस किए गए एपीआई को ऐसा नहीं मिलेगा.