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