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