با مهاجرت به Firebase JS SDK مدولار، برنامه وب خود را شارژ کنید

1. قبل از شروع

ماژولار Firebase JS SDK بازنویسی شده از JS SDK موجود است و به عنوان نسخه اصلی بعدی منتشر خواهد شد. این برنامه توسعه دهندگان را قادر می سازد تا کدهای استفاده نشده را از Firebase JS SDK حذف کنند تا بسته های کوچکتری ایجاد کنند و عملکرد بهتری داشته باشند.

قابل توجه‌ترین تفاوت در JS SDK ماژولار این است که ویژگی‌ها اکنون در توابع شناور آزاد سازماندهی شده‌اند که شما وارد می‌کنید، نه در یک فضای نام firebase که همه چیز را شامل می‌شود. این روش جدید سازماندهی کد چیزی است که امکان تکان دادن درخت را فراهم می کند، و شما یاد خواهید گرفت که چگونه هر برنامه ای را که در حال حاضر از v8 Firebase JS SDK استفاده می کند به ماژولار جدید ارتقا دهید.

برای ارائه یک فرآیند ارتقاء روان، مجموعه ای از بسته های سازگاری ارائه شده است. در این کد لبه، یاد خواهید گرفت که چگونه از بسته های سازگاری برای پورت کردن برنامه تکه تکه استفاده کنید.

چیزی که خواهی ساخت

در این لبه کد، شما به تدریج یک برنامه وب فهرست پیگیری موجود را که از v8 JS SDK استفاده می کند به JS SDK مدولار جدید در سه مرحله منتقل می کنید:

  • برای استفاده از بسته های سازگاری، برنامه را ارتقا دهید
  • برنامه را تکه تکه از بسته های سازگاری به API مدولار ارتقا دهید
  • از Firestore Lite، یک پیاده سازی سبک از Firestore SDK، برای بهبود بیشتر عملکرد برنامه استفاده کنید.

2d351cb47b604ad7.png

این Codelab بر ارتقای Firebase SDK متمرکز شده است. سایر مفاهیم و بلوک‌های کد محو شده‌اند و برای شما ارائه می‌شوند تا به سادگی کپی و جایگذاری کنید.

آنچه شما نیاز دارید

  • مرورگر دلخواه شما، مانند کروم
  • ویرایشگر IDE/متن انتخابی شما، مانند WebStorm ، Atom ، Sublime یا VS Code
  • مدیر بسته npm ، که معمولاً با Node.js ارائه می شود
  • کد نمونه کد لبه (برای نحوه دریافت کد به مرحله بعدی کد لبه مراجعه کنید.)

2. راه اندازی شوید

کد را دریافت کنید

هر چیزی که برای این پروژه نیاز دارید در یک مخزن Git قرار دارد. برای شروع، باید کد را بگیرید و آن را در محیط برنامه نویس مورد علاقه خود باز کنید.

مخزن Github را از خط فرمان کلون کنید:

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

یا اگر git را نصب نکرده‌اید، می‌توانید مخزن را به‌عنوان یک فایل ZIP دانلود کنید و فایل فشرده دانلود شده را باز کنید.

برنامه را وارد کنید

  1. با استفاده از IDE خود، دایرکتوری codelab-modular-sdk باز یا وارد کنید.
  2. npm install برای نصب وابستگی های مورد نیاز برای ساخت و اجرای برنامه به صورت محلی اجرا کنید.
  3. برای ساخت اپلیکیشن npm run build اجرا کنید.
  4. npm run serve برای راه اندازی وب سرور اجرا کنید
  5. یک برگه مرورگر را به http://localhost:8080 باز کنید

71a8a7d47392e8f4.png

3. یک خط پایه ایجاد کنید

نقطه شروع شما چیست؟

نقطه شروع شما یک برنامه فهرست پیگیری سهام است که برای این کد لبه طراحی شده است. کد برای نشان دادن مفاهیم موجود در این کد لبه ساده شده است و مدیریت خطای کمی دارد. اگر تصمیم به استفاده مجدد از هر یک از این کدها در یک برنامه تولیدی دارید، مطمئن شوید که خطاها را کنترل کرده و همه کدها را به طور کامل آزمایش کنید.

مطمئن شوید که همه چیز در برنامه کار می کند:

  1. با استفاده از دکمه ورود به سیستم در گوشه سمت راست بالا به صورت ناشناس وارد شوید.
  2. پس از ورود به سیستم، با کلیک بر روی دکمه افزودن ، تایپ حروف و کلیک کردن روی ردیف نتیجه جستجو که در زیر ظاهر می‌شود، «NFLX»، «SBUX» و «T» را به فهرست تماشا اضافه کنید.
  3. با کلیک بر روی x در انتهای سطر، سهامی را از فهرست پیگیری حذف کنید.
  4. به روز رسانی در زمان واقعی قیمت سهام را تماشا کنید.
  5. Chrome DevTools را باز کنید، به تب Network بروید و Disable cache و Use large request rows را علامت بزنید. غیرفعال کردن حافظه پنهان اطمینان حاصل می کند که ما همیشه آخرین تغییرات را پس از به روزرسانی دریافت می کنیم و استفاده از ردیف های درخواست بزرگ باعث می شود ردیف هم اندازه ارسال شده و هم اندازه منبع را برای یک منبع نمایش دهد. در این کد لبه، ما عمدتا به اندازه main.js علاقه مندیم.

48a096debb2aa940.png

  1. برنامه را تحت شرایط شبکه مختلف با استفاده از دریچه گاز شبیه سازی شده بارگیری کنید. شما از Slow 3G برای اندازه‌گیری زمان بارگذاری در این نرم‌افزار استفاده می‌کنید، زیرا اندازه بسته‌های کوچک‌تر در آنجا بیشترین کمک را به شما می‌کند.

4397cb2c1327089.png

اکنون وارد شوید و شروع به مهاجرت برنامه به API ماژولار جدید کنید.

4. از بسته های سازگاری استفاده کنید

بسته‌های سازگاری به شما امکان می‌دهند بدون تغییر همه کدهای Firebase به یکباره، به نسخه جدید SDK ارتقا دهید. می توانید آنها را به تدریج به API مدولار ارتقا دهید.

در این مرحله کتابخانه Firebase را از v8 به نسخه جدید ارتقا می دهید و کد را برای استفاده از بسته های سازگاری تغییر می دهید. در مراحل زیر، یاد خواهید گرفت که چگونه فقط کد Firebase Auth را برای استفاده از API مدولار ارتقا دهید، سپس کد Firestore را ارتقا دهید.

در پایان هر مرحله، باید بتوانید برنامه را بدون شکستگی کامپایل و اجرا کنید و با انتقال هر محصول شاهد کاهش اندازه باندل باشید.

SDK جدید را دریافت کنید

بخش وابستگی ها را در package.json پیدا کنید و آن را با موارد زیر جایگزین کنید:

package.json

"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. با برنامه بازی کنید همه چیز هنوز باید کار کند.

5. Auth را برای استفاده از API مدولار ارتقا دهید

شما می توانید محصولات Firebase را به هر ترتیبی ارتقا دهید. در این کد، ابتدا Auth را ارتقا می دهید تا مفاهیم اولیه را بیاموزید زیرا Auth API نسبتا ساده است. ارتقا Firestore کمی بیشتر درگیر است و در ادامه نحوه انجام آن را خواهید آموخت.

به روز رسانی اولیه Auth

  1. به فایل src/firebase.ts بروید
  2. واردات زیر را اضافه کنید:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. import 'firebase/compat/auth'.
  2. جایگزین export const firebaseAuth = app.auth(); با:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. حذف export type User = firebase.User; در انتهای فایل User مستقیماً در src/auth.ts صادر می شود که در ادامه آن را تغییر خواهید داد.

کد Auth را به روز کنید

  1. به فایل src/auth.ts بروید
  2. واردات زیر را به بالای فایل اضافه کنید:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. حذف User از import { firebaseAuth, User } from './firebase'; از آنجایی که قبلاً User از 'firebase/auth'.
  2. برای استفاده از API مدولار، توابع را به روز کنید.

همانطور که قبلاً هنگام به‌روزرسانی بیانیه import مشاهده کردید، بسته‌ها در نسخه 9 حول توابعی سازمان‌دهی شده‌اند که می‌توانید آن‌ها را وارد کنید، برخلاف APIهای نسخه 8 که بر اساس فضای نام و الگوی خدمات زنجیره‌ای نقطه‌ای هستند. این سازماندهی جدید کد است که تکان دادن درخت کدهای استفاده نشده را امکان پذیر می کند، زیرا به ابزارهای ساخت اجازه می دهد تا تجزیه و تحلیل کنند که چه کدی استفاده می شود و چه چیزی نیست.

در نسخه 9، سرویس ها به عنوان اولین آرگومان به توابع ارسال می شوند. سرویس‌ها اشیایی هستند که از مقداردهی اولیه یک سرویس Firebase دریافت می‌کنید، به عنوان مثال شی‌ای که از getAuth() یا initializeAuth() برگردانده می‌شود. آنها وضعیت یک سرویس Firebase خاص را نگه می دارند و تابع از وضعیت برای انجام وظایف خود استفاده می کند. بیایید این الگو را برای اجرای توابع زیر اعمال کنیم:

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. به تب Network بروید.
  3. برای دریافت درخواست های شبکه، صفحه را بازخوانی کنید.
  4. به دنبال main.js بگردید و اندازه آن را بررسی کنید. شما اندازه بسته را 100 کیلوبایت کاهش داده اید (36 کیلوبایت گیگزیپ شده)، یا حدود 22٪ کوچکتر با تغییر تنها چند خط کد! سایت همچنین با اتصال 3g کند 0.75 ثانیه سریعتر بارگذاری می شود.

2e4eafaf66cd829b.png

6. برای استفاده از API مدولار، برنامه Firebase و Firestore را ارتقا دهید

به روز رسانی اولیه Firebase

  1. به فایل src/firebase.ts.
  2. جایگزینی import firebase from 'firebase/compat/app'; با:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. جایگزین 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.appspot.com", 
    messagingSenderId: "875614679042", 
    appId: "1:875614679042:web:5813c3e70a33e91ba0371b"
});

به روز رسانی اولیه Firestore

  1. در همان فایل src/firebase.ts, import 'firebase/compat/firestore'; با

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. جایگزین export const firestore = app.firestore(); با:

src/firebase.ts

export const firestore = getFirestore();
  1. حذف تمام خطوط بعد از " export const firestore = ... "

واردات را به روز کنید

  1. فایل src/services.ts.
  2. FirestoreFieldPath ، FirestoreFieldValue و QuerySnapshot از واردات حذف کنید. واردات از './firebase' اکنون باید به شکل زیر باشد:

src/services.ts

import { firestore } from './firebase';
  1. توابع و انواعی را که قرار است در بالای فایل استفاده کنید وارد کنید:
    **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');
  1. از 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 */
});
  1. هنگامی که تیک‌ها را در فهرست تماشا دارید، از 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. به تب Network بروید.
  3. برای دریافت درخواست های شبکه، صفحه را بازخوانی کنید.
  4. به دنبال main.js بگردید و اندازه آن را بررسی کنید. دوباره آن را با اندازه باندل اصلی مقایسه کنید - ما حجم بسته را بیش از 200 کیلوبایت (63.8 کیلوبایت گیگزیپ) یا 50٪ کوچکتر کاهش داده ایم که به معنی زمان بارگذاری 1.3 ثانیه سریعتر است!

7660cdc574ee8571.png

7. از Firestore Lite برای سرعت بخشیدن به رندر صفحه اولیه استفاده کنید

Firestore Lite چیست؟

Firestore SDK ذخیره سازی پیچیده، جریان بیدرنگ، ذخیره سازی دائمی، همگام سازی آفلاین چند برگه، تکرار، همزمانی خوش بینانه و موارد دیگر را ارائه می دهد و بنابراین از نظر اندازه بسیار بزرگ است. اما ممکن است بخواهید یک بار بدون نیاز به هیچ یک از ویژگی های پیشرفته، داده ها را دریافت کنید. برای آن موارد، Firestore یک راه حل ساده و سبک، یک بسته کاملاً جدید - Firestore Lite ایجاد کرد.

یکی از موارد استفاده عالی برای Firestore Lite بهینه سازی عملکرد رندر صفحه اولیه است، جایی که شما فقط باید بدانید که آیا کاربر وارد شده است یا خیر، سپس برخی از داده ها را از Firetore برای نمایش بخوانید.

در این مرحله، یاد خواهید گرفت که چگونه از Firestore lite برای کاهش اندازه باندل برای سرعت بخشیدن به رندر صفحه اولیه استفاده کنید، سپس Firestore SDK اصلی را به صورت پویا بارگیری کنید تا در به روز رسانی های بلادرنگ مشترک شوید.

شما کد را مجدداً به شکل زیر تغییر می دهید:

  1. سرویس‌های بلادرنگ را به یک فایل جداگانه منتقل کنید، تا بتوان آنها را به صورت پویا با استفاده از واردات پویا بارگیری کرد.
  2. برای استفاده از Firestore Lite برای بازیابی لیست پیگیری و قیمت سهام، عملکردهای جدیدی ایجاد کنید.
  3. از توابع جدید Firestore Lite برای بازیابی داده ها برای ایجاد رندر صفحه اولیه استفاده کنید، سپس به صورت پویا خدمات بلادرنگ را برای گوش دادن به به روز رسانی های بلادرنگ بارگیری کنید.

سرویس های بلادرنگ را به یک فایل جدید منتقل کنید

  1. یک فایل جدید به نام src/services.realtime.ts.
  2. توابع subscribeToTickerChanges() و subscribeToAllTickerChanges() از src/services.ts به فایل جدید منتقل کنید.
  3. وارد کردن های لازم را به بالای فایل جدید اضافه کنید.

در اینجا هنوز باید چند تغییر ایجاد کنید:

  1. ابتدا یک نمونه Firestore از Firestore SDK اصلی در بالای فایل ایجاد کنید تا در توابع استفاده شود. شما نمی توانید نمونه Firestore را از firebase.ts در اینجا وارد کنید زیرا می خواهید آن را در چند مرحله به یک نمونه Firestore Lite تغییر دهید، که فقط برای رندر صفحه اولیه استفاده می شود.
  2. دوم، از شر متغیر 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);
   });
}

از Firestore lite برای واکشی داده ها استفاده کنید

  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';
  1. اضافه کردن توابع برای واکشی داده های مورد نیاز برای رندر صفحه اولیه با استفاده از Firestore Lite:

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);
}
  1. 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';
  1. src/services.realtime را با استفاده از یک import پویا در بالای فایل بارگیری کنید. متغیر loadRealtimeService وعده ای است که پس از بارگیری کد با سرویس های بلادرنگ حل می شود. بعداً از آن برای اشتراک در به‌روزرسانی‌های هم‌زمان استفاده خواهید کرد.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. پاسخ تماس onUserChange() را به یک تابع async تغییر دهید تا بتوانیم await در بدنه تابع استفاده کنیم:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. اکنون داده ها را واکشی کنید تا با استفاده از توابع جدیدی که در مرحله قبل ایجاد کردیم، رندر صفحه اولیه را انجام دهید.

در callback 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   
   }
}
  1. در بلوک else که هیچ کاربری وارد نشده است، اطلاعات قیمت همه سهام را با استفاده از firestore lite واکشی کنید، صفحه را رندر کنید، سپس پس از بارگیری خدمات بلادرنگ، به تغییرات قیمت گوش دهید:

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. به تب Network بروید.
  3. برای دریافت درخواست های شبکه، صفحه را بازخوانی کنید
  4. به دنبال main.js بگردید و اندازه آن را بررسی کنید.
  5. اکنون فقط 115 کیلوبایت (34.5 کیلوبایت gzip شده) است. این 75٪ کوچکتر از اندازه باندل اصلی است که 446 کیلوبایت (138 کیلوبایت gzipped) بود! در نتیجه، سایت بیش از 2 ثانیه سریعتر در اتصال 3G بارگیری می شود - عملکرد عالی و بهبود تجربه کاربر!

9ea7398a8c8ef81b.png

8. تبریک می گویم

تبریک می گویم، شما با موفقیت برنامه را ارتقا دادید و آن را کوچکتر و سریعتر کردید!

شما از بسته‌های compat برای ارتقاء تکه تکه برنامه استفاده کردید، و از Firestore Lite برای سرعت بخشیدن به رندر صفحه اولیه استفاده کردید، سپس به صورت پویا Firestore اصلی را بارگیری کردید تا تغییرات قیمت را پخش کنید.

شما همچنین اندازه بسته را کاهش دادید و زمان بارگذاری آن را در طول این کد لبه بهبود دادید:

main.js

اندازه منبع (کیلوبایت)

اندازه gzipped (کیلو بایت)

زمان بارگذاری (ها) (بیش از 3 گرم کند)

v8

446

138

4.92

v9 compat

429

124

4.65

v9 فقط ماژولار Auth

348

102

4.2

v9 کاملا ماژولار

244

74.6

3.66

v9 کاملا ماژولار + Firestore lite

117

34.9

2.88

32a71bd5a774e035.png

اکنون مراحل کلیدی مورد نیاز برای ارتقاء یک برنامه وب را که از v8 Firebase JS SDK برای استفاده از JS SDK مدولار جدید استفاده می کند، می دانید.

بیشتر خواندن

اسناد مرجع