שדרוג ל-Web SDK מודולרי (גרסה 9)

מפתחי אפליקציות שמשתמשים כרגע בגרסה 8 או בגרסאות קודמות של Web SDK צריכים לשקול מעבר לגרסה 9 באמצעות ההוראות במדריך הזה.

המדריך הזה מיועד למי שמכיר את גרסה 8 ורוצה להשתמש בכלי לאריזת מודולים כמו webpack או Rollup כדי לשדרג ולפתח את גרסה 9.

מומלץ מאוד להשתמש בכלי לאיגוד מודולים בסביבת הפיתוח. אם לא משתמשים באחת מהן, לא ניתן ליהנות מהיתרונות העיקריים של גרסה 9, שהם הקטנת גודל האפליקציה. כדי להתקין את ה-SDK, תצטרכו npm או yarn.

מידע על ספריות התאימות

יש שני סוגים של ספריות שזמינות בגרסה 9 של Web SDK:

  • מודולרי – ממשק API חדש שנועד להקל על הסרת קוד שלא נמצא בשימוש (tree-shaking) כדי שהאפליקציה האינטרנטית תהיה קטנה ומהירה ככל האפשר.
  • ‫Compat – ממשק API מוכר שתואם באופן מלא לגרסה 8, ומאפשר לכם לשדרג לגרסה 9 בלי לשנות את כל קוד ה-SDK בבת אחת. לספריות תאימות אין יתרונות משמעותיים בגודל או בביצועים בהשוואה למקבילות שלהן בגרסה 8.

במדריך הזה אנחנו מניחים שתשתמשו בספריות התאימות לגרסה 9 כדי להקל על השדרוג. הספריות האלה מאפשרות לכם להמשיך להשתמש בקוד של גרסה 8 לצד קוד שעבר רפקטורינג לגרסה 9. המשמעות היא שתוכלו לקמפל את האפליקציה ולנפות בה באגים בקלות רבה יותר במהלך תהליך השדרוג.

באפליקציות עם חשיפה קטנה מאוד ל-Web SDK, יכול להיות שיהיה מעשי לבצע refactoring של קוד גרסה 8 בלי להשתמש בספריות התאימות של גרסה 9. אם אתם משדרגים אפליקציה כזו, אתם יכולים לפעול לפי ההוראות במדריך הזה בנושא 'גרסה 9 מודולרית' בלי להשתמש בספריות התאימות.

מידע על תהליך השדרוג

כל שלב בתהליך השדרוג מוגדר כך שתוכלו לסיים את העריכה של קוד המקור של האפליקציה, ואז לקמפל ולהריץ אותה בלי שהיא תיפגע. לסיכום, כך משדרגים אפליקציה:

  1. מוסיפים לאפליקציה את ספריות גרסה 9 ואת ספריות התאימות.
  2. צריך לעדכן את הצהרות הייבוא בקוד כדי שיתאימו לגרסה 9.
  3. לארגן את הקוד מחדש לסגנון מודולרי.
  4. כדי ליהנות מהיתרון של הקטנת גודל האפליקציה, צריך להסיר את ספריית התאימות של האימות ואת קוד התאימות של האימות.
  5. עדכון קוד האתחול לסגנון מודולרי.
  6. מסירים מהאפליקציה את כל הצהרות התאימות וקוד התאימות שנותרו בגרסה 9.

קבלת SDK גרסה 9

כדי להתחיל, מורידים את ספריות גרסה 9 ואת ספריות התאימות באמצעות npm (הגרסה העדכנית https://www.npmjs.com/package/firebase):

npm i firebase@12.15.0

# OR

yarn add firebase@12.15.0

עדכון הייבוא כדי שיתאים לגרסה 9

כדי שהקוד ימשיך לפעול אחרי עדכון התלות מגרסה 8 לגרסה 9, צריך לשנות את הצהרות הייבוא כך שישתמשו בגרסת ה-compat של כל ייבוא. לדוגמה:

לפני: גרסה 8

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

אחרי: תאימות לגרסה 9

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

שינוי מבנה הקוד לסגנון מודולרי

ממשקי API בגרסה 8 מבוססים על מרחב שמות ועל תבנית שירות עם נקודות, אבל הגישה המודולרית בגרסה 9 מאפשרת לארגן את הקוד בעיקר סביב פונקציות. בגרסה 9, חבילת firebase/app וחבילות אחרות לא מחזירות ייצוא מקיף שמכיל את כל השיטות מהחבילה. במקום זאת, החבילות מייצאות פונקציות נפרדות.

בגרסה 9, השירותים מועברים כארגומנט הראשון, ואז הפונקציה משתמשת בפרטי השירות כדי לבצע את השאר.

דוגמה: שיפור של פונקציית אימות פשוטה

לפני: תאימות לגרסה 9

קוד התאימות לגרסה 9 זהה לקוד של גרסה 8, אבל יש שינויים בייבוא. השימוש בספריות התאימות במהלך השדרוג מאפשר לכם להמשיך להשתמש בקוד של גרסה 8 לצד קוד שעבר רפקטורינג לגרסה 9.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => {
  // Check for user status
});

אחרי: גרסה 9 מודולרית

הפונקציה getAuth מקבלת את firebaseApp כפרמטר הראשון שלה. הפונקציה onAuthStateChanged לא משורשרת ממופע האימות כמו בגרסה 8, אלא היא פונקציה חופשית שמקבלת את auth כפרמטר הראשון שלה.

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

עדכון קוד האתחול

צריך לעדכן את קוד האתחול של האפליקציה כדי להשתמש בתחביר החדש של גרסה 9 המודולרית. חשוב לעדכן את הקוד הזה אחרי שמסיימים את הארגון מחדש של כל הקוד באפליקציה, כי הפונקציה firebase.initializeApp() מאתחלת את המצב הגלובלי גם עבור ממשקי ה-API של התאימות וגם עבור ממשקי ה-API המודולריים, ואילו הפונקציה המודולרית initializeApp() מאתחלת רק את המצב של המודול.

לפני: תאימות לגרסה 9

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

אחרי: גרסה 9 מודולרית

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

הסרת קוד התאימות

כדי ליהנות מהיתרונות של גרסה 9 של ה-SDK המודולרי מבחינת גודל, בסופו של דבר צריך להמיר את כל הקריאות לסגנון המודולרי שמוצג למעלה ולהסיר את כל ההצהרות import "firebase/compat/* מהקוד. בסיום, לא אמורות להיות יותר הפניות למרחב השמות הגלובלי firebase.* או לקוד אחר בסגנון SDK מגרסה 8.

היתרונות והמגבלות של גרסה 9

לגרסה 9 המודולרית לחלוטין יש יתרונות לעומת גרסאות קודמות:

  • גרסה 9 מאפשרת להקטין באופן משמעותי את גודל האפליקציה. הוא משתמש בפורמט מודול JavaScript מודרני, שמאפשר שימוש בטכניקות של 'tree shaking', שבהן מייבאים רק את הארטיפקטים שהאפליקציה צריכה. בהתאם לאפליקציה, שימוש ב-tree-shaking בגרסה 9 יכול להקטין את גודל האפליקציה ב-80% בהשוואה לאפליקציה דומה שנבנתה באמצעות גרסה 8.
  • גרסה 9 תמשיך ליהנות מפיתוח תכונות שוטף, בעוד שגרסה 8 תוקפא בשלב מסוים בעתיד.