Улучшите свое веб-приложение, перейдя на модульный Firebase JS SDK

1. Прежде чем начать

Модульный Firebase JS SDK представляет собой переработанную версию существующего JS SDK и будет выпущен в следующей основной версии. Он позволяет разработчикам исключать неиспользуемый код из Firebase JS SDK для создания более компактных пакетов и повышения производительности.

Самое заметное отличие модульного JS SDK заключается в том, что функции теперь организованы в свободно плавающие функции, которые вы можете импортировать, а не в едином пространстве имён firebase , включающем всё. Этот новый способ организации кода позволяет реализовать Tree Shaking, и вы узнаете, как обновить любое приложение, использующее Firebase JS SDK v8, до нового модульного.

Для обеспечения плавного процесса обновления предоставляется набор пакетов совместимости. В этой лабораторной работе вы узнаете, как использовать пакеты совместимости для поэтапного переноса приложения.

Что вы построите

В этой лабораторной работе вы постепенно перенесете существующее веб-приложение со списком наблюдения за акциями, использующее JS SDK v8, на новый модульный JS SDK в три этапа:

• Обновите приложение, чтобы использовать пакеты совместимости.
• Поэтапное обновление приложения с пакетов совместимости до модульного API.
• Используйте Firestore Lite, облегченную реализацию Firestore SDK, чтобы еще больше повысить производительность приложения.

Эта практическая работа посвящена обновлению Firebase SDK. Другие концепции и блоки кода не рассматриваются и предоставляются для простого копирования и вставки.

Что вам понадобится

• Браузер по вашему выбору, например Chrome
• IDE/текстовый редактор по вашему выбору, например 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. Используя IDE, откройте или импортируйте каталог codelab-modular-sdk .
2. Запустите npm install , чтобы установить зависимости, необходимые для локальной сборки и запуска приложения.
3. Запустите npm run build , чтобы собрать приложение.
4. Выполните npm run serve , чтобы запустить веб-сервер.
5. Откройте вкладку браузера по адресу http://localhost:8080.

3. Установите базовый уровень

Какова ваша отправная точка?

Отправной точкой для этой практической работы станет приложение со списком акций, разработанное для этой практической работы. Код был упрощён для иллюстрации концепций, рассматриваемых в этой практической работе, и содержит лишь минимальную обработку ошибок. Если вы решите повторно использовать этот код в производственном приложении, убедитесь, что вы обрабатываете все ошибки и полностью тестируете весь код.

Убедитесь, что в приложении все работает:

1. Войдите анонимно, используя кнопку входа в правом верхнем углу.
2. После входа в систему найдите и добавьте «NFLX», «SBUX» и «T» в список наблюдения, нажав кнопку «Добавить» , введя буквы и нажав на строку результатов поиска, которая появится ниже.
3. Удалите акцию из списка наблюдения, нажав на крестик в конце строки.
4. Следите за обновлениями цен акций в режиме реального времени.
5. Откройте Chrome DevTools, перейдите на вкладку «Сеть» и установите флажки «Отключить кэш» и «Использовать большие строки запроса» . Если выбран параметр «Отключить кэш», мы всегда будем получать последние изменения после обновления, а «Использовать большие строки запроса» — в строке будут отображаться как переданный размер, так и размер ресурса. В этой лабораторной работе нас в основном интересует размер файла main.js

6. Загрузите приложение при различных сетевых условиях, имитируя ограничение скорости. В этой лабораторной работе для измерения времени загрузки будет использоваться режим Slow 3G, поскольку именно здесь меньший размер пакета наиболее эффективен.

Теперь приступайте к переносу приложения на новый модульный API.

4. Используйте пакеты совместимости

Пакеты совместимости позволяют перейти на новую версию SDK без одновременного изменения всего кода Firebase. Вы можете перейти на модульный API постепенно.

На этом этапе вы обновите библиотеку Firebase с версии 8 до новой и измените код для использования пакетов совместимости. Далее вы узнаете, как сначала обновить только код аутентификации Firebase для использования модульного API, а затем обновить код Firestore.

В конце каждого шага вы сможете скомпилировать и запустить приложение без сбоев, а также увидите уменьшение размера пакета по мере переноса каждого продукта.

Получить новый SDK

Найдите раздел зависимостей в package.json и замените его следующим:

пакет.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. Обновите аутентификацию для использования модульного API.

Вы можете обновлять продукты Firebase в любом порядке. В этой практической работе вы сначала обновите Auth, чтобы изучить основные принципы, поскольку API Auth относительно прост. Обновление 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. Удалите User из import { firebaseAuth, User } from './firebase'; поскольку вы уже импортировали User из 'firebase/auth'.
4. Обновите функции для использования модульного API.

Как вы уже видели ранее, когда мы обновили оператор импорта, пакеты в версии 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. Перейдите на вкладку Сеть .
3. Обновите страницу, чтобы захватить сетевые запросы.
4. Найдите файл main.js и проверьте его размер. Вы уменьшили размер пакета на 100 КБ (36 КБ в сжатом виде), или примерно на 22%, изменив всего несколько строк кода! Сайт также загружается на 0,75 с быстрее при медленном 3G-соединении.

6. Обновите приложение Firebase и Firestore для использования модульного API.

Обновление инициализации 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';

Обновление поиска()

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 и проверьте его размер. Сравните его с размером исходного пакета ещё раз — мы уменьшили размер пакета более чем на 200 КБ (63,8 КБ в сжатом виде), то есть на 50%, что означает ускорение загрузки на 1,3 секунды!

7. Используйте Firestore Lite для ускорения первоначальной отрисовки страницы.

Что такое Firestore Lite?

Firestore SDK предлагает комплексное кэширование, потоковую передачу в реальном времени, постоянное хранилище, офлайн-синхронизацию нескольких вкладок, повторные попытки, оптимистичный параллелизм и многое другое, поэтому он довольно большой. Но вам может понадобиться получить данные всего один раз, без необходимости использования дополнительных функций. Для таких случаев Firestore разработала простое и лёгкое решение — совершенно новый пакет — Firestore Lite.

Одним из замечательных вариантов использования Firestore Lite является оптимизация производительности первоначального отображения страницы, когда вам нужно только узнать, вошел ли пользователь в систему, а затем прочитать некоторые данные из Firestore для отображения.

На этом этапе вы узнаете, как использовать Firestore lite для уменьшения размера пакета с целью ускорения первоначальной отрисовки страницы, а затем динамически загружать основной Firestore SDK для подписки на обновления в режиме реального времени.

Вам предстоит реорганизовать код следующим образом:

1. Переместите службы реального времени в отдельный файл, чтобы их можно было динамически загружать с помощью динамического импорта.
2. Создайте новые функции для использования Firestore Lite для извлечения списков наблюдения и цен на акции.
3. Используйте новые функции Firestore Lite для извлечения данных с целью первоначального отображения страницы, а затем динамически загружайте службы реального времени для прослушивания обновлений в реальном времени.

Переместить службы реального времени в новый файл

1. Создайте новый файл с именем src/services.realtime.ts.
2. Переместите функции subscribeToTickerChanges() и subscribeToAllTickerChanges() из src/services.ts в новый файл.
3. Добавьте необходимые импорты в начало нового файла.

Здесь вам все еще нужно внести пару изменений:

4. Сначала создайте экземпляр Firestore из основного Firestore SDK в начале файла, который будет использоваться в функциях. Импортировать экземпляр 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 Devtools.
2. Перейдите на вкладку Сеть .
3. Обновите страницу, чтобы захватить сетевые запросы.
4. Найдите main.js и проверьте его размер.
5. Теперь он весит всего 115 КБ (34,5 КБ в сжатом виде). ​​Это на 75% меньше исходного размера пакета, который составлял 446 КБ (138 КБ в сжатом виде)! В результате сайт загружается более чем на 2 секунды быстрее при использовании 3G-соединения — значительное улучшение производительности и удобства использования!

8. Поздравления

Поздравляем, вы успешно обновили приложение и сделали его меньше и быстрее!

Вы использовали пакеты совместимости для поэтапного обновления приложения и Firestore Lite для ускорения первоначального отображения страницы, а затем динамически загружали основной Firestore для потоковой передачи изменений цен.

В ходе этой лабораторной работы вы также уменьшили размер пакета и улучшили время его загрузки:

Теперь вы знаете основные шаги, необходимые для обновления веб-приложения, использующего Firebase JS SDK v8, для использования нового модульного JS SDK.

Дальнейшее чтение

• руководство по обновлению v8 -> v9
• Узнайте больше о v9
• Начните с версии 9

Справочные документы

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