عزِّز أداء تطبيق الويب من خلال نقل البيانات إلى حزمة تطوير البرامج (SDK) المستندة إلى Firebase JS.

1- قبل البدء

إنّ حزمة تطوير البرامج (SDK) المكوّنة من وحدات لـ Firebase JS هي إعادة كتابة لحزمة تطوير البرامج (SDK) الحالية لـ JS، وسيتم إصدارها كإصدار رئيسي جديد. تتيح هذه الميزة للمطوّرين استبعاد الرموز البرمجية غير المستخدَمة من حزمة تطوير البرامج (SDK) لبرنامج Firebase JS من أجل إنشاء حِزم أصغر وتحقيق أداء أفضل.

يكمن الاختلاف الأكثر وضوحًا في حزمة SDK المكوّنة من وحدات JavaScript في أنّ الميزات يتم تنظيمها الآن في وظائف عائمة حرة ستستوردها، بدلاً من استخدام مساحة اسم firebase واحدة تتضمّن كل شيء. تسمح هذه الطريقة الجديدة لتنظيم الرموز البرمجية بإزالة العناصر غير الضرورية، وسوف تتعرّف على كيفية ترقية أي تطبيق يستخدم حاليًا الإصدار 8 من حزمة تطوير البرامج (SDK) لبرنامج Firebase JavaScript إلى الحزمة الجديدة المكوّنة من وحدات.

لتسهيل عملية الترقية، يتم توفير مجموعة من حِزم التوافق. في هذا الدرس التطبيقي حول الترميز، ستتعرّف على كيفية استخدام حِزم التوافق لنقل التطبيق جزءًا تلو الآخر.

التطبيق الذي ستصممه

في هذا الدليل التعليمي حول الرموز البرمجية، ستنقل تدريجيًا تطبيق ويب حاليًا يتضمّن قائمة مراقبة الأسهم ويستخدم حزمة تطوير البرامج (SDK) لإصدار 8 من JavaScript إلى حزمة تطوير البرامج (SDK) الجديدة والمكوّنة من وحدات لإصدار JavaScript في ثلاث مراحل:

• ترقية التطبيق لاستخدام حِزم التوافق
• ترقية التطبيق من حِزم التوافق إلى واجهة برمجة التطبيقات المُركّبة تدريجيًا
• استخدام Firestore Lite، وهو إصدار خفيف من حزمة تطوير البرامج (SDK) لمنصّة Firestore، لتحسين أداء التطبيق بشكلٍ أكبر

تركّز ورشة رموز البرامج هذه على ترقية حزمة تطوير البرامج (SDK) لمنصّة Firebase. يتمّ التقليل من أهمية المفاهيم الأخرى ووحدات الرموز البرمجية، ويتمّ تقديمها لك لكي تتمكّن من نسخها ولصقها بسهولة.

المتطلبات

• متصفّح من اختيارك، مثل Chrome
• بيئة تطوير البرامج/محرر النصوص المفضّل لديك، مثل WebStorm أو Atom أو Sublime أو VS Code
• أداة إدارة الحِزم npm، التي تأتي عادةً مع Node.js
• نموذج الرمز البرمجي للدرس التطبيقي حول الترميز (اطّلِع على الخطوة التالية من الدرس التطبيقي حول الترميز لمعرفة كيفية الحصول على الرمز).

2- الإعداد

الحصول على الرمز

يمكنك العثور على كل ما تحتاجه لهذا المشروع في مستودع Git. للبدء، عليك الحصول على الرمز وفتحه في بيئة المطوّر المفضّلة لديك.

استنسِخ مستودع Github الخاص ببرنامج التعليم البرمجي من سطر الأوامر:

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

بدلاً من ذلك، إذا لم يكن لديك git مثبّتًا، يمكنك تنزيل المستودع كملف ZIP وفك ضغط ملف ZIP الذي تم تنزيله.

استيراد التطبيق

1. باستخدام بيئة تطوير البرامج المتكاملة، افتح دليل codelab-modular-sdk أو استورِده.
2. شغِّل npm install لتثبيت التبعيات المطلوبة لإنشاء التطبيق وتشغيله على الجهاز.
3. شغِّل npm run build لإنشاء التطبيق.
4. تشغيل npm run serve لبدء خادم الويب
5. افتح علامة تبويب في المتصفّح للانتقال إلى http://localhost:8080.

ملاحظة:إذا كان المنفذ 8080 مشغولاً على جهازك، سيبدأ الخادم باستخدام منفذ مختلف. اطّلِع على وحدة التحكّم واستخدِم رقم المنفذ المعروض هناك.

ملاحظة:يجب أن يكون لديك محطتَا طرفية مفتوحتَين طوال فترة استخدام "مختبر الرموز البرمجية"، إحداهما لتشغيل خادم الويب والأخرى لتشغيل npm run build لإعادة إنشاء التطبيق بعد إجراء التغييرات.

3- تحديد مرجع

ما هي نقطة البداية؟

نقطة البداية هي تطبيق قائمة مراقبة الأسهم المصمّم لهذا الدليل التعليمي حول رموز الترميز. تم تبسيط الرمز لشرح المفاهيم الواردة في هذا الدليل التعليمي حول الرموز البرمجية، ولا يتضمّن الكثير من عمليات معالجة الأخطاء. إذا اخترت إعادة استخدام أيّ من هذا الرمز في تطبيق علني، تأكَّد من معالجة أيّ أخطاء واختبار كلّ الرمز البرمجي بالكامل.

تأكَّد من أنّ كل العناصر تعمل في التطبيق:

1. سجِّل الدخول بشكل مجهول باستخدام زر تسجيل الدخول في أعلى يسار الصفحة.
2. بعد تسجيل الدخول، ابحث عن "NFLX" و"SBUX" و "T" وأضِفها إلى قائمة المشاهدة من خلال النقر على الزر إضافة وكتابة الأحرف والنقر على صف نتائج البحث الذي يظهر أدناه.
3. أزِل سهمًا من قائمة المراقبة بالنقر على x في نهاية الصف.
4. اطّلِع على آخر المعلومات في الوقت الفعلي عن سعر السهم.
5. افتح "أدوات مطوّري البرامج في Chrome"، وانتقِل إلى علامة التبويب الشبكة وضَع علامة في المربّع بجانب إيقاف ذاكرة التخزين المؤقت واستخدام صفوف طلبات كبيرة. يضمن خيار إيقاف ذاكرة التخزين المؤقت تلقّي أحدث التغييرات دائمًا بعد التحديث، ويؤدي خيار استخدام صفوف طلبات كبيرة إلى عرض كلّ من الحجم المُرسَل وحجم المرجع لمرجع معيّن. في هذا الدرس التطبيقي حول الترميز، نحن مهتمون بشكل أساسي بحجم main.js.

6. تحميل التطبيق في ظل ظروف شبكة مختلفة باستخدام ميزة "تقييد المحاكاة" ستستخدم شبكة الجيل الثالث (3G) البطيئة لقياس وقت التحميل في هذا الدليل التعليمي لأنّه يُظهر بوضوح مدى أهمية تقليل حجم الحِزمة.

ملاحظة: انقر بزر الماوس الأيمن -> فحص لفتح "أدوات مطوّري البرامج في Chrome".

ملاحظة:ستحتاج إلى إعادة تحميل الصفحة بعد فتح "أدوات مطوّري البرامج في Chrome" للاطّلاع على الإحصاءات.

دوِّن حجم main.js والوقت الذي يستغرقه تحميله. ستلاحظ انخفاضًا تدريجيًا في الحجم ووقت التحميل أثناء نقل بيانات التطبيق إلى واجهة برمجة التطبيقات المُنشَأة من وحدات.

يمكنك الآن البدء في نقل بيانات التطبيق إلى واجهة برمجة التطبيقات الجديدة والمكوّنة من وحدات.

4. استخدام حِزم التوافق

تتيح لك حِزم التوافق الترقية إلى إصدار حزمة تطوير البرامج (SDK) الجديد بدون تغيير كل رمز Firebase دفعةً واحدة. ويمكنك ترقيتها إلى واجهة برمجة التطبيقات المكوّنة من وحدات تدريجيًا.

في هذه الخطوة، ستُجري ترقية لـ مكتبة Firebase من الإصدار 8 إلى الإصدار الجديد وستغيّر الرمز البرمجي لاستخدام حِزم التوافق. في الخطوات التالية، ستتعرّف على كيفية ترقية رمز Firebase Auth فقط لاستخدام واجهة برمجة التطبيقات المكوّنة من وحدات أولاً، ثم ترقية رمز Firestore.

في نهاية كل خطوة، من المفترض أن تتمكّن من تجميع التطبيق وتشغيله بدون حدوث أي مشاكل، كما من المفترض أن تلاحظ انخفاضًا في حجم الحزمة أثناء نقل كل منتج.

تحذير: سيؤدي استخدام أي حزمة توافق إلى إيقاف ميزة "إزالة العناصر غير المُستخدَمة" لهذا المنتج المحدّد. على سبيل المثال، إذا كنت تستخدم حزمة التوافق مع Auth، سيتم تضمين كل رمز Auth في حِزمتك.

يجب أن يكون استخدام حِزم التوافق حالة مؤقتة لتطبيقك. وهدفك النهائي هو إزالة رمز التوافق والاحتفاظ فقط بالرمز البرمجي على النمط المُركّب في تطبيقك لتفعيل ميزة "تقليل عدد مكونات التطبيق".

الحصول على حزمة 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 لاستخدام واجهة برمجة التطبيقات المكوّنة من وحدات

يمكنك ترقية منتجات Firebase بأي ترتيب. في هذا الدليل التعليمي حول البرمجة، ستُجري ترقية لواجهة برمجة التطبيقات Auth أولاً للتعرّف على المفاهيم الأساسية لأنّ Auth API بسيطة نسبيًا. إنّ ترقية Firestore أكثر تعقيدًا قليلاً، وسنشرح لك كيفية إجراء ذلك في القسم التالي.

ملاحظة:إذا واجهت مشكلة وأردت الاطّلاع على الرمز البرمجي المكتمل، يمكنك الاطّلاع على القسم المكوّن من وحدات:

git checkout auth-modular

تعديل إعداد Auth

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 الذي ستغيّره بعد ذلك.

ملاحظة:يمكن أيضًا استخدام getAuth() لإعداد Firebase Auth. يكمن الاختلاف في أنّ getAuth() يفعّل بعض الوظائف تلقائيًا، مثل تسجيل الدخول باستخدام وسائل التواصل الاجتماعي (مثل تسجيل الدخول باستخدام حساب Google) واستمرارية indexedDB، في حين أنّ initializeAuth() يتطلّب منك تحديد الوظائف التي تريد تفعيلها صراحةً، حتى تتمكّن من إزالة الوظائف التي لا تستخدمها.

في هذا الدليل التعليمي حول الرموز البرمجية، لا نتيح سوى المصادقة المجهولة، لذلك نستخدم initializeAuth() بدلاً من getAuth() لاستبعاد تضمين رمز تسجيل الدخول عبر الشبكات الاجتماعية في الحزمة.

تعديل رمز المصادقة

1. الانتقال إلى الملف src/auth.ts
2. أضِف عمليات الاستيراد التالية إلى أعلى الملف:

src/auth.ts

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

3. إزالة User من import { firebaseAuth, User } from './firebase'; لأنّك سبق أن استوردت User من ‘firebase/auth'.
4. عدِّل الدوالّ لاستخدام واجهة برمجة التطبيقات المكوّنة من وحدات.

كما رأيت سابقًا عند تعديل عبارة الاستيراد، يتم تنظيم الحِزم في الإصدار 9 حول الدوالّ التي يمكنك استيرادها، على عكس واجهات برمجة التطبيقات في الإصدار 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';

ملاحظة:تُعدّ بعض الطرق، مثل signOut وonAuthStateChanged، ضرورية جدًا لدرجة أنّها تظلّ أيضًا في عنصر المصادقة، ولكن لأغراض ورشة إعداد الرمز البرمجي، نستخدم عمليات الاستيراد المُجمَّعة كعرض توضيحي.

التحقّق من عمل التطبيق

1. شغِّل npm run build لإعادة إنشاء التطبيق.
2. افتح علامة تبويب في المتصفّح للانتقال إلى http://localhost:8080 أو أعِد تحميل علامة التبويب الحالية.
3. جرِّب استخدام التطبيق. من المفترض أن يظلّ كل شيء يعمل على ما يرام.

التحقّق من حجم الحِزمة

1. افتح "أدوات مطوّري البرامج في Chrome".
2. انتقِل إلى علامة التبويب الشبكة.
3. يُرجى إعادة تحميل الصفحة لتسجيل طلبات الشبكة.
4. ابحث عن main.js وتحقّق من حجمه. لقد خفضت حجم الحزمة بمقدار 100 كيلوبايت (36 كيلوبايت مضغوط بتنسيق gzip)، أي ما يعادل 22% تقريبًا من خلال تغيير بضعة أسطر من الرمز البرمجي فقط. يتم أيضًا تحميل الموقع الإلكتروني بشكل أسرع بمقدار 0.75 ثانية عند الاتصال بشبكة الجيل الثالث ببطء.

ملاحظة:ينخفض حجم الحِزمة لأنّ أداة تجميع الحِزم يمكنها تحليل التعليمات البرمجية المستخدَمة وغير المستخدَمة واستبعاد التعليمات البرمجية غير المستخدَمة في الحِزمة من خلال استيراد الدوال الفردية.

6- ترقية تطبيق Firebase وFirestore لاستخدام واجهة برمجة التطبيقات المكوّنة من وحدات

ملاحظة:إذا واجهت مشكلة وأردت الاطّلاع على الرمز البرمجي المكتمل، يمكنك الاطّلاع على الفرع المكوّن من وحدات:

git checkout modular

تعديل عملية إعداد Firebase

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"
});

تعديل عملية إعداد Firestore

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';

تعديل search()‎

1. أنشئ مرجعًا إلى المجموعة التي تحتوي على جميع الرموز:

src/services.ts

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

2. استخدِم getDocs()لاسترداد جميع المستندات من المجموعة:

src/services.ts

const tickers = await getDocs(tickersCollRef);

اطّلِع على search() للاطّلاع على الرمز المكتمل.

ملاحظة:تحمل العديد من الدوالّ المُجمَّعة الاسم نفسه الذي كانت تحمله في واجهة برمجة التطبيقات القديمة حتى تتمكّن من الاعتماد على ميزة الإكمال التلقائي في IDE للعثور على الدالة الصحيحة لاستيرادها، ولكن هذا ليس هو الحال دائمًا. في هذه الحالة، getDocs() هو الإصدار المكوّن من وحدات من firestore.collection().get().

إذا لم تكن متأكّدًا من الدالة التي يجب استخدامها لاستبدال واجهة برمجة التطبيقات القديمة، يمكنك الاطّلاع على مستند المرجع.

تعديل 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".
2. انتقِل إلى علامة التبويب الشبكة.
3. يُرجى إعادة تحميل الصفحة لتسجيل طلبات الشبكة.
4. ابحث عن main.js وتحقّق من حجمه. قارِن هذا الحجم بحجم الحزمة الأصلي مرة أخرى. لقد خفّضنا حجم الحزمة بأكثر من 200 كيلوبايت (63.8 كيلوبايت مضغوط بتنسيق gzip)، أي بنسبة% 50، ما يُقلّل وقت التحميل بمقدار 1.3 ثانية.

7- استخدام Firestore Lite لتسريع عرض الصفحة الأولي

ما هو Firestore Lite؟

توفّر حزمة تطوير البرامج (SDK) لـ Firestore ميزات معقدة، مثل التخزين المؤقت والبث المباشر في الوقت الفعلي والتخزين الدائم والمزامنة بلا إنترنت في علامات تبويب متعددة وإعادة المحاولة وعمليات المعالجة المتزامنة التوقّعية وغير ذلك الكثير، وبالتالي فإنّ حجمها كبير جدًا. ولكن قد تحتاج إلى الحصول على البيانات مرة واحدة فقط، بدون الحاجة إلى أيّ من الميزات المتقدّمة. في هذه الحالات، أنشأت Firestore حلًا بسيطًا وخفيفًا، وهو حزمة جديدة تمامًا تُعرف باسم Firestore Lite.

من حالات الاستخدام الرائعة لخدمة Firestore Lite هي تحسين أداء عرض الصفحة الأولي، حيث ما عليك سوى معرفة ما إذا كان المستخدم مسجّلاً الدخول أم لا، ثم قراءة بعض البيانات من Firestore لعرضها.

في هذه الخطوة، ستتعرّف على كيفية استخدام Firestore lite لتقليل حجم الحِزمة من أجل تسريع عرض الصفحة الأولي، ثم تحميل حزمة تطوير البرامج (SDK) الرئيسية لـ Firestore ديناميكيًا للاشتراك في التعديلات في الوقت الفعلي.

ملاحظة: ستستخدم الاستيراد الديناميكي، وهو إضافة جديدة في ECMAScript 2020. قد تحتاج إلى تجميعه للمتصفحات التي لا تتوافق معه بعد، مثل IE11.

لمعرفة ما إذا كان المتصفّح يتيح هذه الميزة بشكلٍ تلقائي، يُرجى الانتقال إلى https://caniuse.com/?search=dynamic%20import.

ستعيد صياغة الرمز البرمجي لإجراء ما يلي:

1. نقل الخدمات في الوقت الفعلي إلى ملف منفصل، حتى يمكن تحميلها ديناميكيًا باستخدام الاستيراد الديناميكي
2. أنشئ دوال جديدة لاستخدام Firestore Lite لاسترداد قائمة المراقبة وأسعار الأسهم.
3. استخدِم دوال Firestore Lite الجديدة لاسترداد البيانات لإجراء العرض الأولي للصفحة، ثم حمِّل الخدمات في الوقت الفعلي ديناميكيًا للاستماع إلى آخر المعلومات في الوقت الفعلي.

ملاحظة: باستخدام الاستيراد الديناميكي، نقسم التطبيق إلى ملفي JavaScript (أو قسمَين). يحتوي أحد المقتطفَين على الرمز المطلوب لعرض الصفحة الأولي، ويحتوي الآخر على رمز الخدمات في الوقت الفعلي. ما عليك سوى تحميل الجزء الأول لعرض الصفحة الأولى، ما يجعل عرض الصفحة الأولي أسرع.

كما ترى، على الرغم من أنّنا لا نُجري تغييرات على حجم التطبيق بشكل عام، إلا أنّنا نُجري تغييرات على الرمز البرمجي المطلوب لتقليل حجم العرض المبدئي للصفحة باستخدام Firestore lite.

ملاحظة: إذا واجهت مشكلة وأردت الاطّلاع على الرمز البرمجي المكتمل، يمكنك الاطّلاع على الفرع الديناميكي المكوّن من وحدات: git checkout modular-dynamic

نقل الخدمات في الوقت الفعلي إلى ملف جديد

1. أنشئ ملفًا جديدًا باسم src/services.realtime.ts..
2. انقل الدالتَين subscribeToTickerChanges() وsubscribeToAllTickerChanges() من src/services.ts إلى الملف الجديد.
3. أضِف عمليات الاستيراد اللازمة إلى أعلى الملف الجديد.

لا يزال عليك إجراء بعض التغييرات هنا:

4. أولاً، أنشئ مثيلًا لخدمة Firestore من حزمة تطوير البرامج الرئيسية لخدمة Firestore في أعلى الملف لاستخدامه في الدوالّ. لا يمكنك استيراد مثيل Firestore من firebase.ts هنا لأنّك ستغيّره إلى مثيل 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);
   });
}

استخدام 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';

3. أضِف دوالّ لجلب البيانات اللازمة لعرض الصفحة الأوّلي باستخدام 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);
}

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. في العبارة 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".
2. انتقِل إلى علامة التبويب الشبكة.
3. يُرجى إعادة تحميل الصفحة لتسجيل طلبات الشبكة.
4. ابحث عن main.js وتحقّق من حجمه.
5. والآن أصبح حجمه 115 كيلوبايت فقط (34.5 كيلوبايت مضغوط بتنسيق gzip). وهذا أصغر بنسبة% 75 من حجم الحزمة الأصلي الذي كان 446 كيلوبايت(138 كيلوبايت مضغوط بتنسيق gzip). نتيجةً لذلك، يتم تحميل الموقع الإلكتروني بسرعة أكبر بأكثر من ثانيتَين عند الاتصال بشبكة الجيل الثالث، ما يشكّل تحسُّنًا كبيرًا في الأداء وتجربة المستخدم.

8- تهانينا

مبروك، لقد نجحت في ترقية التطبيق وجعله أصغر حجمًا وأسرع.

لقد استخدمت حِزم التوافق لترقية التطبيق جزءًا تلو الآخر، وكنت تستخدم Firestore Lite لتسريع عرض الصفحة الأولي، ثم تحمّل Firestore الرئيسي ديناميكيًا لبثّ تغييرات الأسعار.

لقد خفضت أيضًا حجم الحزمة وحسّنت مدة تحميلها على مدار هذا الدليل التعليمي حول الرموز البرمجية:

main.js	حجم المورد (بالكيلوبايت)	حجم الملف المضغوَط بتنسيق gzip (بالكيلوبايت)	مدّة التحميل (بالثواني) (عبر شبكة الجيل الثالث البطيئة)
v8	446	138	4.92
التوافق مع الإصدار 9	429	124	4.65
المصادقة المُركّبة في الإصدار 9 فقط	348	102	4.2
الإصدار 9 من الوحدات بالكامل	244	74.6	3.66
الإصدار 9 من الوحدات بالكامل + Firestore lite	117	34.9	2.88

تعرّفت الآن على الخطوات الرئيسية المطلوبة لترقية تطبيق ويب يستخدم الإصدار 8 من حزمة تطوير البرامج (SDK) لبرنامج Firebase JavaScript لاستخدام حزمة تطوير البرامج (SDK) الجديدة والمكوّنة من وحدات لبرنامج JavaScript.

مراجع إضافية

• دليل الترقية من الإصدار 8 إلى الإصدار 9
• مزيد من المعلومات حول الإصدار 9
• بدء استخدام الإصدار 9

مستندات المرجع

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