মডুলার Firebase JS SDK-এ স্থানান্তর করে আপনার ওয়েব অ্যাপকে সুপারচার্জ করুন

১. শুরু করার আগে

মডুলার ফায়ারবেস জেএস এসডিকে বিদ্যমান জেএস এসডিকে পুনর্লিখন করা হয়েছে এবং পরবর্তী প্রধান সংস্করণ হিসেবে প্রকাশিত হবে। এটি ডেভেলপারদের ছোট বান্ডেল তৈরি করতে এবং আরও ভালো কর্মক্ষমতা অর্জনের জন্য ফায়ারবেস জেএস এসডিকে থেকে অব্যবহৃত কোড বাদ দিতে সক্ষম করে।

মডুলার JS SDK-এর সবচেয়ে লক্ষণীয় পার্থক্য হল, বৈশিষ্ট্যগুলি এখন বিনামূল্যে ভাসমান ফাংশনে সংগঠিত হয় যা আপনি আমদানি করবেন, একটি একক firebase নেমস্পেসে নয় যেখানে সবকিছু অন্তর্ভুক্ত থাকে। কোড সংগঠনের এই নতুন পদ্ধতিটি গাছ কাঁপানোর অনুমতি দেয় এবং আপনি শিখবেন কিভাবে v8 Firebase JS SDK ব্যবহার করে বর্তমানে যেকোনো অ্যাপকে নতুন মডুলারে আপগ্রেড করতে হয়।

একটি মসৃণ আপগ্রেড প্রক্রিয়া প্রদানের জন্য, সামঞ্জস্য প্যাকেজগুলির একটি সেট সরবরাহ করা হয়েছে। এই কোডল্যাবে, আপনি শিখবেন কিভাবে সামঞ্জস্য প্যাকেজগুলি ব্যবহার করে অ্যাপটিকে টুকরো টুকরো করে পোর্ট করতে হয়।

তুমি কী তৈরি করবে

এই কোডল্যাবে, আপনি ধীরে ধীরে তিনটি ধাপে v8 JS SDK ব্যবহার করে এমন একটি বিদ্যমান স্টক ওয়াচলিস্ট ওয়েব অ্যাপকে নতুন মডুলার JS SDK-তে স্থানান্তর করতে যাচ্ছেন:

• সামঞ্জস্যতা প্যাকেজগুলি ব্যবহার করতে অ্যাপটি আপগ্রেড করুন
• সামঞ্জস্য প্যাকেজ থেকে অ্যাপটিকে মডুলার API-তে টুকরো টুকরো করে আপগ্রেড করুন।
• অ্যাপটির কর্মক্ষমতা আরও উন্নত করতে Firestore SDK-এর একটি হালকা বাস্তবায়ন, Firestore Lite ব্যবহার করুন।

এই কোডল্যাবটি Firebase SDK আপগ্রেড করার উপর দৃষ্টি নিবদ্ধ করে। অন্যান্য ধারণা এবং কোড ব্লকগুলিকে গ্লস করা হয়েছে এবং আপনার জন্য কেবল কপি এবং পেস্ট করার জন্য সরবরাহ করা হয়েছে।

তোমার যা লাগবে

• আপনার পছন্দের একটি ব্রাউজার, যেমন Chrome
• আপনার পছন্দের IDE/টেক্সট এডিটর, যেমন WebStorm , Atom , Sublime , অথবা VS Code
• প্যাকেজ ম্যানেজার npm , যা সাধারণত Node.js এর সাথে আসে
• কোডল্যাবের নমুনা কোড (কোডটি কীভাবে পাবেন তার জন্য কোডল্যাবের পরবর্তী ধাপটি দেখুন।)

2. সেট আপ করুন

কোডটি পান

এই প্রকল্পের জন্য আপনার যা কিছু প্রয়োজন তা একটি Git রিপোতে রয়েছে। শুরু করার জন্য, আপনাকে কোডটি সংগ্রহ করে আপনার পছন্দের ডেভেলপার পরিবেশে খুলতে হবে।

কমান্ড লাইন থেকে কোডল্যাবের গিথুব রিপোজিটরি ক্লোন করুন:

git clone https://github.com/FirebaseExtended/codelab-modular-sdk.git

বিকল্পভাবে, যদি আপনার গিট ইনস্টল না থাকে, তাহলে আপনি রিপোজিটরিটি একটি জিপ ফাইল হিসেবে ডাউনলোড করতে পারেন এবং ডাউনলোড করা জিপ ফাইলটি আনপ্যাক করতে পারেন।

অ্যাপটি আমদানি করুন

1. আপনার IDE ব্যবহার করে, codelab-modular-sdk ডিরেক্টরিটি খুলুন বা আমদানি করুন।
2. স্থানীয়ভাবে অ্যাপটি তৈরি এবং চালানোর জন্য প্রয়োজনীয় নির্ভরতা ইনস্টল করতে npm install চালান।
3. অ্যাপটি তৈরি করতে npm run build চালান।
4. ওয়েব সার্ভার শুরু করতে npm run serve চালান।
5. http://localhost:8080 এ একটি ব্রাউজার ট্যাব খুলুন।

৩. একটি বেসলাইন স্থাপন করুন

তোমার শুরুটা কোথায়?

আপনার শুরুর বিন্দু হল এই কোডল্যাবের জন্য তৈরি একটি স্টক ওয়াচলিস্ট অ্যাপ। এই কোডল্যাবের ধারণাগুলি ব্যাখ্যা করার জন্য কোডটি সরলীকৃত করা হয়েছে এবং এতে খুব কম ত্রুটি পরিচালনা করা হয়েছে। আপনি যদি এই কোডের কোনওটি একটি প্রোডাকশন অ্যাপে পুনরায় ব্যবহার করতে চান, তাহলে নিশ্চিত করুন যে আপনি যে কোনও ত্রুটি পরিচালনা করেছেন এবং সমস্ত কোড সম্পূর্ণরূপে পরীক্ষা করেছেন।

অ্যাপটিতে সবকিছু ঠিকঠাক কাজ করছে কিনা তা নিশ্চিত করুন:

1. উপরের ডান কোণে লগইন বোতামটি ব্যবহার করে বেনামে লগ ইন করুন।
2. লগ ইন করার পর, "NFLX", "SBUX" এবং "T" সার্চ করুন এবং " Add " বোতামে ক্লিক করে, অক্ষরগুলি টাইপ করে এবং নীচে পপ আপ হওয়া অনুসন্ধান ফলাফলের সারিতে ক্লিক করে ওয়াচলিস্টে যোগ করুন।
3. সারির শেষে x চিহ্নে ক্লিক করে ওয়াচলিস্ট থেকে একটি স্টক সরান।
4. স্টকের দামের রিয়েল-টাইম আপডেটগুলি দেখুন।
5. Chrome DevTools খুলুন, Network ট্যাবে যান এবং Disable cache এবং Use large request rows চেক করুন। Disable cache নিশ্চিত করে যে আমরা সর্বদা রিফ্রেশের পরে সর্বশেষ পরিবর্তনগুলি পাই এবং Use large request rows সারিটি ট্রান্সমিটেড আকার এবং রিসোর্সের জন্য রিসোর্সের আকার উভয়ই প্রদর্শন করে। এই কোডল্যাবে, আমরা মূলত main.js এর আকার নিয়ে আগ্রহী।

6. সিমুলেটেড থ্রটলিং ব্যবহার করে বিভিন্ন নেটওয়ার্ক অবস্থার অধীনে অ্যাপটি লোড করুন। এই কোডল্যাবে লোড সময় পরিমাপ করার জন্য আপনি স্লো 3G ব্যবহার করবেন কারণ এটিই হল একটি ছোট বান্ডেল আকার সবচেয়ে বেশি সাহায্য করে।

এখন ঝাঁপিয়ে পড়ুন এবং অ্যাপটিকে নতুন মডুলার API-তে স্থানান্তরিত করা শুরু করুন।

৪. সামঞ্জস্য প্যাকেজ ব্যবহার করুন

সামঞ্জস্য প্যাকেজগুলি আপনাকে একবারে সমস্ত Firebase কোড পরিবর্তন না করেই নতুন SDK সংস্করণে আপগ্রেড করার অনুমতি দেয়। আপনি ধীরে ধীরে মডুলার API-তে আপগ্রেড করতে পারেন।

এই ধাপে, আপনি Firebase লাইব্রেরিটিকে v8 থেকে নতুন সংস্করণে আপগ্রেড করবেন এবং সামঞ্জস্যপূর্ণ প্যাকেজগুলি ব্যবহার করার জন্য কোডটি পরিবর্তন করবেন। নিম্নলিখিত ধাপগুলিতে, আপনি শিখবেন কিভাবে প্রথমে মডুলার API ব্যবহার করার জন্য শুধুমাত্র Firebase Auth কোড আপগ্রেড করতে হয়, তারপর Firestore কোড আপগ্রেড করতে হয়।

প্রতিটি ধাপের শেষে, আপনি কোনও ভাঙন ছাড়াই অ্যাপটি কম্পাইল এবং চালাতে সক্ষম হবেন এবং প্রতিটি পণ্য স্থানান্তরের সাথে সাথে বান্ডেলের আকার হ্রাস পাবে।

নতুন SDK পান

package.json এ dependencies বিভাগটি খুঁজুন এবং এটি নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:

প্যাকেজ.জেসন

"dependencies": {
    "firebase": "^9.0.0" 
}

নির্ভরতাগুলি পুনরায় ইনস্টল করুন

যেহেতু আমরা নির্ভরতার সংস্করণ পরিবর্তন করেছি, তাই নির্ভরতার নতুন সংস্করণ পেতে আমাদের npm install পুনরায় চালাতে হবে।

আমদানির পথ পরিবর্তন করুন

সামঞ্জস্য প্যাকেজগুলি সাবমডিউল firebase/compat এর অধীনে উন্মুক্ত করা হয়েছে, তাই আমরা সেই অনুযায়ী আমদানি পাথগুলি আপডেট করব:

1. src/firebase.ts ফাইলে যান।
2. বিদ্যমান আমদানিগুলি নিম্নলিখিত আমদানিগুলি দিয়ে প্রতিস্থাপন করুন:

src/firebase.ts

import firebase from 'firebase/compat/app'; 
import 'firebase/compat/auth'; 
import 'firebase/compat/firestore';

অ্যাপটি কাজ করছে কিনা তা যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণ করতে npm run build চালান।
2. http://localhost:8080 এ একটি ব্রাউজার ট্যাব খুলুন, অথবা বিদ্যমান ট্যাবটি রিফ্রেশ করুন।
3. অ্যাপটি দিয়ে খেলুন। সবকিছু এখনও কাজ করছে।

৫. মডুলার API ব্যবহার করার জন্য Auth আপগ্রেড করুন

আপনি যেকোনো ক্রমে Firebase পণ্য আপগ্রেড করতে পারেন। এই কোডল্যাবে, আপনাকে প্রথমে Auth আপগ্রেড করতে হবে যাতে আপনি মৌলিক ধারণাগুলি শিখতে পারেন কারণ Auth API তুলনামূলকভাবে সহজ। Firestore আপগ্রেড করা একটু বেশি জড়িত, এবং পরবর্তীতে আপনি এটি কীভাবে করবেন তা শিখবেন।

আপডেট অথেন্টিকেশন ইনিশিয়ালাইজেশন

1. src/firebase.ts ফাইলে যান।
2. নিম্নলিখিত আমদানি যোগ করুন:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';

3. import 'firebase/compat/auth'.
4. export const firebaseAuth = app.auth(); দিয়ে প্রতিস্থাপন করুন:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });

5. ফাইলের শেষে export type User = firebase.User; মুছে ফেলুন। User সরাসরি src/auth.ts এ এক্সপোর্ট করা হবে যা আপনি পরবর্তীতে পরিবর্তন করবেন।

অনুমোদন কোড আপডেট করুন

1. src/auth.ts ফাইলে যান।
2. ফাইলের উপরে নিম্নলিখিত আমদানিগুলি যোগ করুন:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';

3. যেহেতু আপনি ইতিমধ্যেই 'firebase/auth'. থেকে User আমদানি করেছেন, তাই './firebase' থেকে User import { firebaseAuth, User } from './firebase';
4. মডুলার API ব্যবহার করার জন্য ফাংশন আপডেট করুন।

যেমনটি আপনি আগেই দেখেছেন যখন আমরা ইম্পোর্ট স্টেটমেন্ট আপডেট করেছি, ভার্সন ৯-এর প্যাকেজগুলি এমন ফাংশনের চারপাশে সংগঠিত যা আপনি আমদানি করতে পারেন, ভার্সন ৮-এর API-গুলির বিপরীতে যা ডট-চেইনড নেমস্পেস এবং পরিষেবা প্যাটার্নের উপর ভিত্তি করে তৈরি। কোডের এই নতুন সংগঠনটিই অব্যবহৃত কোডকে ট্রি শেকিং সক্ষম করে, কারণ এটি বিল্ড টুলগুলিকে কোন কোড ব্যবহার করা হচ্ছে এবং কোনটি নয় তা বিশ্লেষণ করতে দেয়।

ভার্সন ৯-এ, সার্ভিসেস ফাংশনের প্রথম আর্গুমেন্ট হিসেবে পাস করা হয়। সার্ভিসেস হলো সেই অবজেক্ট যা আপনি একটি ফায়ারবেস সার্ভিস ইনিশিয়ালাইজ করার মাধ্যমে পান, যেমন getAuth() অথবা initializeAuth() থেকে ফিরে আসা অবজেক্ট। তারা একটি নির্দিষ্ট ফায়ারবেস সার্ভিসের অবস্থা ধরে রাখে এবং ফাংশনটি তার কাজ সম্পাদনের জন্য সেই অবস্থা ব্যবহার করে। নিম্নলিখিত ফাংশনগুলি বাস্তবায়নের জন্য এই প্যাটার্নটি প্রয়োগ করা যাক:

src/auth.ts

export function firebaseSignInAnonymously() { 
    return signInAnonymously(firebaseAuth); 
} 

export function firebaseSignOut() { 
    return signOut(firebaseAuth); 
} 

export function onUserChange(callback: (user: User | null) => void) { 
    return onAuthStateChanged(firebaseAuth, callback); 
} 

export { User } from 'firebase/auth';

অ্যাপটি কাজ করছে কিনা তা যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণ করতে npm run build চালান।
2. http://localhost:8080 তে একটি ব্রাউজার ট্যাব খুলুন, অথবা বিদ্যমান ট্যাবটি রিফ্রেশ করুন
3. অ্যাপটি দিয়ে খেলুন। সবকিছু এখনও কাজ করছে।

বান্ডেলের আকার পরীক্ষা করুন

1. Chrome DevTools খুলুন।
2. নেটওয়ার্ক ট্যাবে যান।
3. নেটওয়ার্ক অনুরোধ ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করুন।
4. main.js খুঁজে দেখুন এবং এর আকার পরীক্ষা করুন। আপনি মাত্র কয়েকটি লাইন কোড পরিবর্তন করে বান্ডেলের আকার ১০০KB (৩৬ KB gzipped) কমিয়েছেন, অথবা প্রায় ২২% কমিয়েছেন! ধীর 3G সংযোগেও সাইটটি ০.৭৫ সেকেন্ড দ্রুত লোড হচ্ছে।

৬. মডুলার API ব্যবহার করার জন্য Firebase অ্যাপ এবং Firestore আপগ্রেড করুন।

ফায়ারবেস ইনিশিয়ালাইজেশন আপডেট করুন

1. src/firebase.ts.
2. import firebase from 'firebase/compat/app'; এর সাথে:

src/firebase.ts

import { initializeApp } from 'firebase/app';

3. const app = firebase.initializeApp({...}); দিয়ে প্রতিস্থাপন করুন:

src/firebase.ts

const app = initializeApp({
    apiKey: "AIzaSyBnRKitQGBX0u8k4COtDTILYxCJuMf7xzE", 
    authDomain: "exchange-rates-adcf6.firebaseapp.com", 
    databaseURL: "https://exchange-rates-adcf6.firebaseio.com", 
    projectId: "exchange-rates-adcf6", 
    storageBucket: "exchange-rates-adcf6.firebasestorage.app", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

ফায়ারস্টোর ইনিশিয়ালাইজেশন আপডেট করুন

1. একই ফাইলে src/firebase.ts, import 'firebase/compat/firestore'; দিয়ে প্রতিস্থাপন করুন

src/firebase.ts

import { getFirestore } from 'firebase/firestore';

2. export const firestore = app.firestore(); দিয়ে প্রতিস্থাপন করুন:

src/firebase.ts

export const firestore = getFirestore();

3. " export const firestore = ... " এর পরে সমস্ত লাইন মুছে ফেলুন।

আমদানি আপডেট করুন

1. src/services.ts.
2. আমদানি থেকে FirestoreFieldPath , FirestoreFieldValue এবং QuerySnapshot মুছে ফেলুন। './firebase' থেকে আমদানি এখন নিম্নলিখিতটির মতো দেখাবে:

src/services.ts সম্পর্কে

import { firestore } from './firebase';

3. ফাইলের উপরে আপনি যে ফাংশন এবং প্রকারগুলি ব্যবহার করতে যাচ্ছেন তা আমদানি করুন:

    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';

অনুসন্ধান আপডেট করুন()

1. সমস্ত টিকার ধারণকারী সংগ্রহের একটি রেফারেন্স তৈরি করুন:

src/services.ts সম্পর্কে

const tickersCollRef = collection(firestore, 'current');

2. সংগ্রহ থেকে সমস্ত নথি আনতে getDocs() ব্যবহার করুন:

src/services.ts সম্পর্কে

const tickers = await getDocs(tickersCollRef);

সমাপ্ত কোডের জন্য search() দেখুন।

addToWatchList() আপডেট করুন

ব্যবহারকারীর ওয়াচলিস্টে একটি ডকুমেন্ট রেফারেন্স তৈরি করতে doc() ব্যবহার করুন, তারপর setDoc() ব্যবহার করে arrayUnion() ব্যবহার করে এতে একটি টিকার যোগ করুন:

src/services.ts সম্পর্কে

export function addToWatchList(ticker: string, user: User) {
      const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
      return setDoc(watchlistRef, {
       tickers: arrayUnion(ticker)
   }, { merge: true });
}

আপডেট করুন deleteFromWatchList()

একইভাবে, setDoc() ব্যবহার করে arrayRemove() ব্যবহার করে ব্যবহারকারীর ওয়াচলিস্ট থেকে একটি টিকার সরান:

src/services.ts সম্পর্কে

export function deleteFromWatchList(ticker: string, user: User) {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   return setDoc(watchlistRef, {
       tickers: arrayRemove(ticker)
   }, { merge: true });
}

subscribeToTickerChanges() আপডেট করুন

1. doc() ব্যবহার করে প্রথমে ব্যবহারকারীর ওয়াচলিস্টের একটি ডকুমেন্ট রেফারেন্স তৈরি করুন, তারপর onSnapshot() ব্যবহার করে ওয়াচলিস্টের পরিবর্তনগুলি শুনুন:

src/services.ts সম্পর্কে

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});

2. একবার আপনার ওয়াচলিস্টে টিকারগুলি থাকলে, query() ব্যবহার করে একটি কোয়েরি তৈরি করে দাম বের করুন এবং onSnapshot() ব্যবহার করে দামের পরিবর্তনগুলি শুনুন:

src/services.ts সম্পর্কে

const priceQuery = query(
    collection(firestore, 'current'),
    where(documentId(), 'in', tickers)
);
unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               if (firstload) {
                   performance && performance.measure("initial-data-load");
                   firstload = false;
                   logPerformance();
               }
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
  });

সম্পূর্ণ বাস্তবায়নের জন্য subscribeToTickerChanges() দেখুন।

subscribeToAllTickerChanges() আপডেট করুন

প্রথমে আপনি collection() ব্যবহার করে সংগ্রহের একটি রেফারেন্স তৈরি করবেন যেখানে প্রথমে সমস্ত টিকারের দাম থাকবে, তারপর onSnapshot() ব্যবহার করে মূল্য পরিবর্তন শুনতে পারবেন:

src/services.ts সম্পর্কে

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       if (firstload) {
           performance && performance.measure("initial-data-load");
           firstload = false;
           logPerformance();
       }
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

অ্যাপটি কাজ করছে কিনা তা যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণ করতে npm run build চালান।
2. http://localhost:8080 তে একটি ব্রাউজার ট্যাব খুলুন, অথবা বিদ্যমান ট্যাবটি রিফ্রেশ করুন
3. অ্যাপটি দিয়ে খেলুন। সবকিছু এখনও কাজ করছে।

বান্ডেলের আকার পরীক্ষা করুন

1. Chrome DevTools খুলুন।
2. নেটওয়ার্ক ট্যাবে যান।
3. নেটওয়ার্ক অনুরোধ ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করুন।
4. main.js খুঁজে দেখুন এবং এর আকার পরীক্ষা করুন। আবার মূল বান্ডেল আকারের সাথে তুলনা করুন - আমরা বান্ডেল আকার 200KB (63.8 KB gzipped) এর চেয়ে কমিয়েছি, অথবা 50% ছোট করেছি, যার অর্থ হল 1.3 সেকেন্ড দ্রুত লোড সময়!

৭. প্রাথমিক পৃষ্ঠা রেন্ডারিং দ্রুত করতে ফায়ারস্টোর লাইট ব্যবহার করুন

ফায়ারস্টোর লাইট কী?

ফায়ারস্টোর এসডিকে জটিল ক্যাশিং, রিয়েল-টাইম স্ট্রিমিং, স্থায়ী স্টোরেজ, মাল্টি-ট্যাব অফলাইন সিঙ্ক, পুনঃপ্রচেষ্টা, আশাবাদী কনকারেন্সি এবং আরও অনেক কিছু প্রদান করে এবং তাই আকারে বেশ বড়। তবে আপনি কোনও উন্নত বৈশিষ্ট্য ছাড়াই কেবল একবার ডেটা পেতে চাইতে পারেন। এই ক্ষেত্রে, ফায়ারস্টোর একটি সহজ এবং হালকা সমাধান তৈরি করেছে, একটি একেবারে নতুন প্যাকেজ - ফায়ারস্টোর লাইট।

ফায়ারস্টোর লাইটের জন্য একটি দুর্দান্ত ব্যবহারের উদাহরণ হল প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের কর্মক্ষমতা অপ্টিমাইজ করা, যেখানে আপনাকে কেবল জানতে হবে যে কোনও ব্যবহারকারী লগ ইন করেছেন কিনা, তারপর প্রদর্শনের জন্য ফায়ারটোর থেকে কিছু ডেটা পড়ুন।

এই ধাপে, আপনি শিখবেন কিভাবে ফায়ারস্টোর লাইট ব্যবহার করে বান্ডেলের আকার কমিয়ে প্রাথমিক পৃষ্ঠা রেন্ডারিং দ্রুত করতে হয়, তারপর রিয়েল-টাইম আপডেটগুলিতে সাবস্ক্রাইব করার জন্য প্রধান ফায়ারস্টোর SDK গতিশীলভাবে লোড করতে হয়।

আপনি কোডটি এতে রিফ্যাক্টর করবেন:

1. রিয়েল-টাইম পরিষেবাগুলিকে একটি পৃথক ফাইলে সরান, যাতে সেগুলি গতিশীল আমদানি ব্যবহার করে গতিশীলভাবে লোড করা যায়।
2. ফায়ারস্টোর লাইট ব্যবহার করে ওয়াচলিস্ট এবং স্টকের দাম পুনরুদ্ধার করার জন্য নতুন ফাংশন তৈরি করুন।
3. প্রাথমিক পৃষ্ঠা রেন্ডারিং করার জন্য ডেটা পুনরুদ্ধার করতে নতুন ফায়ারস্টোর লাইট ফাংশন ব্যবহার করুন, তারপর রিয়েল-টাইম আপডেটগুলি শোনার জন্য রিয়েল-টাইম পরিষেবাগুলি গতিশীলভাবে লোড করুন।

রিয়েল-টাইম পরিষেবাগুলিকে একটি নতুন ফাইলে সরান

1. src/services.realtime.ts.
2. src/services.ts থেকে subscribeToTickerChanges() এবং subscribeToAllTickerChanges() ফাংশন দুটি নতুন ফাইলে সরান।
3. নতুন ফাইলের উপরে প্রয়োজনীয় আমদানি যোগ করুন।

আপনাকে এখনও এখানে কয়েকটি পরিবর্তন করতে হবে:

4. প্রথমে, ফাংশনগুলিতে ব্যবহার করার জন্য ফাইলের উপরে থাকা প্রধান Firestore SDK থেকে একটি Firestore ইনস্ট্যান্স তৈরি করুন। আপনি এখানে firebase.ts থেকে Firestore ইনস্ট্যান্স আমদানি করতে পারবেন না কারণ আপনি এটিকে কয়েকটি ধাপে Firestore Lite ইনস্ট্যান্সে পরিবর্তন করতে যাচ্ছেন, যা শুধুমাত্র প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য ব্যবহার করা হবে।
5. দ্বিতীয়ত, firstload ভেরিয়েবল এবং এর দ্বারা সুরক্ষিত if ব্লকটি সরিয়ে ফেলুন। তাদের কার্যকারিতা পরবর্তী ধাপে আপনার তৈরি করা নতুন ফাংশনে স্থানান্তরিত হবে।

src/services.realtime.ts সম্পর্কে

import { User } from './auth'
import { TickerChange } from './models';
import { collection, doc, onSnapshot, query, where, documentId, getFirestore } from 'firebase/firestore';
import { formatSDKStocks } from './services';

const firestore = getFirestore();
type TickerChangesCallBack = (changes: TickerChange[]) => void

export function subscribeToTickerChanges(user: User, callback: TickerChangesCallBack) {

   let unsubscribePrevTickerChanges: () => void;

   // Subscribe to watchlist changes. We will get an update whenever a ticker is added/deleted to the watchlist
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const unsubscribe = onSnapshot(watchlistRef, snapshot => {
       const doc = snapshot.data();
       const tickers = doc ? doc.tickers : [];

       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }

       if (tickers.length === 0) {
           callback([]);
       } else {
           // Query to get current price for tickers in the watchlist
           const priceQuery = query(
               collection(firestore, 'current'),
               where(documentId(), 'in', tickers)
           );

           // Subscribe to price changes for tickers in the watchlist
           unsubscribePrevTickerChanges = onSnapshot(priceQuery, snapshot => {
               const stocks = formatSDKStocks(snapshot);
               callback(stocks);
           });
       }
   });
   return () => {
       if (unsubscribePrevTickerChanges) {
           unsubscribePrevTickerChanges();
       }
       unsubscribe();
   };
}

export function subscribeToAllTickerChanges(callback: TickerChangesCallBack) {
   const tickersCollRef = collection(firestore, 'current');
   return onSnapshot(tickersCollRef, snapshot => {
       const stocks = formatSDKStocks(snapshot);
       callback(stocks);
   });
}

ডেটা আনতে ফায়ারস্টোর লাইট ব্যবহার করুন

1. src/services.ts.
2. 'firebase/firestore' থেকে 'firebase/firestore/lite', getDoc যোগ করুন এবং আমদানি তালিকা থেকে onSnapshot সরিয়ে দিন :

src/services.ts সম্পর্কে

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove,
//  onSnapshot, // firestore lite doesn't support realtime updates
    query, 
    where, 
    documentId, 
    QuerySnapshot, 
    getDoc // add this import
} from 'firebase/firestore/lite';

3. ফায়ারস্টোর লাইট ব্যবহার করে প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য প্রয়োজনীয় ডেটা আনতে ফাংশন যোগ করুন:

src/services.ts সম্পর্কে

export async function getTickerChanges(tickers: string[]): Promise<TickerChange[]> {

   if (tickers.length === 0) {
       return [];
   }

   const priceQuery = query(
       collection(firestore, 'current'),
       where(documentId(), 'in', tickers)
   );
   const snapshot = await getDocs(priceQuery);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

export async function getTickers(user: User): Promise<string[]> {
   const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
   const data =  (await getDoc(watchlistRef)).data();

   return data ? data.tickers : [];
}

export async function getAllTickerChanges(): Promise<TickerChange[]> {
   const tickersCollRef = collection(firestore, 'current');
   const snapshot = await getDocs(tickersCollRef);
   performance && performance.measure("initial-data-load");
   logPerformance();
   return formatSDKStocks(snapshot);
}

4. src/firebase.ts খুলুন, এবং আমদানি পথ 'firebase/firestore' থেকে 'firebase/firestore/lite':

src/firebase.ts

import { getFirestore } from 'firebase/firestore/lite';

সব একসাথে বেঁধে ফেলো।

1. src/main.ts.
2. প্রাথমিক পৃষ্ঠা রেন্ডারিংয়ের জন্য ডেটা আনতে আপনার নতুন তৈরি ফাংশনগুলির প্রয়োজন হবে এবং অ্যাপের অবস্থা পরিচালনা করার জন্য কয়েকটি সহায়ক ফাংশনের প্রয়োজন হবে। তাই এখন আমদানিগুলি আপডেট করুন:

src/main.ts

import { renderLoginPage, renderUserPage } from './renderer';
import { getAllTickerChanges, getTickerChanges, getTickers } from './services';
import { onUserChange } from './auth';
import { getState, setRealtimeServicesLoaded, setUser } from './state';
import './styles.scss';

3. ফাইলের উপরে একটি ডাইনামিক ইম্পোর্ট ব্যবহার করে src/services.realtime লোড করুন। ভেরিয়েবল loadRealtimeService হল একটি প্রতিশ্রুতি যা কোড লোড হওয়ার পরে রিয়েল-টাইম পরিষেবাগুলির সাথে সমাধান হবে। আপনি পরে রিয়েল-টাইম আপডেটগুলিতে সাবস্ক্রাইব করার জন্য এটি ব্যবহার করবেন।

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});

4. onUserChange() এর কলব্যাককে একটি async ফাংশনে পরিবর্তন করুন, যাতে আমরা ফাংশন বডিতে await ব্যবহার করতে পারি:

src/main.ts

onUserChange(async user => {
 // callback body
});

5. এখন আগের ধাপে তৈরি করা নতুন ফাংশন ব্যবহার করে প্রাথমিক পৃষ্ঠা রেন্ডারিং করার জন্য ডেটা আনুন।

onUserChange() কলব্যাকে, ব্যবহারকারী লগ ইন করার জন্য if শর্তটি খুঁজুন এবং if স্টেটমেন্টের ভিতরে কোডটি কপি করে পেস্ট করুন:

src/main.ts

onUserChange(async user => {
      // LEAVE THE EXISTING CODE UNCHANGED HERE
      ...

      if (user) {
       // REPLACE THESE LINES

       // user page
       setUser(user);

       // show loading screen in 500ms
       const timeoutId = setTimeout(() => {
           renderUserPage(user, {
               loading: true,
               tableData: []
           });
       }, 500);

       // get data once if realtime services haven't been loaded
       if (!getState().realtimeServicesLoaded) {
           const tickers = await getTickers(user);
           const tickerData = await getTickerChanges(tickers);
           clearTimeout(timeoutId);
           renderUserPage(user, { tableData: tickerData });
       }

       // subscribe to realtime updates once realtime services are loaded
       loadRealtimeService.then(({ subscribeToTickerChanges }) => {
           unsubscribeTickerChanges = subscribeToTickerChanges(user, stockData => {
               clearTimeout(timeoutId);
               renderUserPage(user, { tableData: stockData })
           });
       });
   } else {
     // DON'T EDIT THIS PART, YET   
   }
}

6. অন্য ব্লকে যেখানে কোনও ব্যবহারকারী লগ ইন করেননি, সেখানে ফায়ারস্টোর লাইট ব্যবহার করে সমস্ত স্টকের দামের তথ্য আনুন, পৃষ্ঠাটি রেন্ডার করুন, তারপর রিয়েল-টাইম পরিষেবাগুলি লোড হয়ে গেলে দামের পরিবর্তনগুলি শুনুন:

src/main.ts

if (user) {
   // DON'T EDIT THIS PART, WHICH WE JUST CHANGED ABOVE
   ...
} else {
   // REPLACE THESE LINES

   // login page
   setUser(null);

   // show loading screen in 500ms
   const timeoutId = setTimeout(() => {
       renderLoginPage('Landing page', {
           loading: true,
           tableData: []
       });
   }, 500);

   // get data once if realtime services haven't been loaded
   if (!getState().realtimeServicesLoaded) {
       const tickerData = await getAllTickerChanges();
       clearTimeout(timeoutId);
       renderLoginPage('Landing page', { tableData: tickerData });
   }

   // subscribe to realtime updates once realtime services are loaded
   loadRealtimeService.then(({ subscribeToAllTickerChanges }) => {
       unsubscribeAllTickerChanges = subscribeToAllTickerChanges(stockData => {
           clearTimeout(timeoutId);
           renderLoginPage('Landing page', { tableData: stockData })
       });
   });
}

সমাপ্ত কোডের জন্য src/main.ts দেখুন।

অ্যাপটি কাজ করছে কিনা তা যাচাই করুন

1. অ্যাপটি পুনর্নির্মাণ করতে npm run build চালান।
2. http://localhost:8080 এ একটি ব্রাউজার ট্যাব খুলুন, অথবা বিদ্যমান ট্যাবটি রিফ্রেশ করুন।

বান্ডেলের আকার পরীক্ষা করুন

1. Chrome Devtools খুলুন।
2. নেটওয়ার্ক ট্যাবে যান।
3. নেটওয়ার্ক অনুরোধ ক্যাপচার করতে পৃষ্ঠাটি রিফ্রেশ করুন
4. main.js খুঁজে দেখুন এবং এর আকার পরীক্ষা করুন।
5. এখন এটি মাত্র ১১৫KB (৩৪.৫KB gzipped)। এটি মূল বান্ডেল সাইজের চেয়ে ৭৫% ছোট, যা ছিল ৪৪৬KB (১৩৮KB gzipped)! ফলস্বরূপ, সাইটটি 3G সংযোগে ২ সেকেন্ডেরও বেশি দ্রুত লোড হচ্ছে - একটি দুর্দান্ত পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতার উন্নতি!

৮. অভিনন্দন

অভিনন্দন, আপনি অ্যাপটি সফলভাবে আপগ্রেড করেছেন এবং এটিকে আরও ছোট এবং দ্রুত করেছেন!

আপনি কম্প্যাট প্যাকেজ ব্যবহার করে অ্যাপটি টুকরো টুকরো করে আপগ্রেড করেছেন, এবং আপনি ফায়ারস্টোর লাইট ব্যবহার করেছেন প্রাথমিক পৃষ্ঠা রেন্ডারিং দ্রুত করার জন্য, তারপর দামের পরিবর্তনগুলি স্ট্রিম করার জন্য প্রধান ফায়ারস্টোরটি গতিশীলভাবে লোড করেছেন।

এই কোডল্যাবের সময় আপনি বান্ডেলের আকারও কমিয়েছেন এবং এর লোড টাইমও উন্নত করেছেন:

v8 Firebase JS SDK ব্যবহার করে এমন একটি ওয়েব অ্যাপ আপগ্রেড করার জন্য নতুন মডুলার JS SDK ব্যবহার করার জন্য প্রয়োজনীয় মূল পদক্ষেপগুলি এখন আপনি জানেন।

আরও পড়া

• v8 -> v9 আপগ্রেড গাইড
• v9 সম্পর্কে আরও জানুন
• v9 দিয়ে শুরু করুন

রেফারেন্স ডক্স

• https://firebase.google.com/docs/reference/js/v9