Tăng hiệu quả cho ứng dụng web của bạn bằng cách di chuyển sang Firebase JS SDK mô-đun

1. Trước khi bắt đầu

SDK Firebase JS mô-đun là bản viết lại của SDK JS hiện có và sẽ được phát hành dưới dạng phiên bản chính tiếp theo. Tính năng này cho phép nhà phát triển loại trừ mã không sử dụng khỏi SDK JS Firebase để tạo các gói nhỏ hơn và đạt được hiệu suất tốt hơn.

Điểm khác biệt đáng chú ý nhất trong SDK JS mô-đun là các tính năng hiện được sắp xếp trong các hàm nổi tự do mà bạn sẽ nhập, thay vì trong một không gian tên firebase duy nhất bao gồm mọi thứ. Cách sắp xếp mã mới này cho phép loại bỏ mã không dùng đến. Bạn sẽ tìm hiểu cách nâng cấp mọi ứng dụng hiện đang sử dụng SDK JS Firebase v8 lên SDK mô-đun mới.

Để đảm bảo quá trình nâng cấp diễn ra suôn sẻ, chúng tôi cung cấp một bộ gói tương thích. Trong lớp học lập trình này, bạn sẽ tìm hiểu cách sử dụng các gói tương thích để chuyển từng phần của ứng dụng.

Sản phẩm bạn sẽ tạo ra

Trong lớp học lập trình này, bạn sẽ dần dần di chuyển một ứng dụng web danh sách theo dõi cổ phiếu hiện có sử dụng SDK JS v8 sang SDK JS mô-đun mới theo 3 giai đoạn:

  • Nâng cấp ứng dụng để sử dụng các gói tương thích
  • Nâng cấp ứng dụng từ các gói tương thích lên từng phần API mô-đun
  • Sử dụng Firestore Lite, một cách triển khai nhẹ của SDK Firestore, để cải thiện hơn nữa hiệu suất của ứng dụng

2d351cb47b604ad7.png

Lớp học lập trình này tập trung vào việc nâng cấp SDK Firebase. Các khái niệm và khối mã khác được tinh chỉnh và cung cấp cho bạn, chỉ cần sao chép và dán.

Những gì bạn cần

  • Một trình duyệt mà bạn chọn, chẳng hạn như Chrome
  • IDE/trình soạn thảo văn bản mà bạn chọn, chẳng hạn như WebStorm, Atom, Sublime hoặc VS Code
  • Trình quản lý gói npm, thường đi kèm với Node.js
  • Mã mẫu của lớp học lập trình (Xem bước tiếp theo của lớp học lập trình để biết cách lấy mã.)

2. Bắt đầu thiết lập

Lấy mã nguồn

Mọi thứ bạn cần cho dự án này đều nằm trong kho lưu trữ Git. Để bắt đầu, bạn cần lấy mã và mở mã đó trong môi trường phát triển mà bạn yêu thích.

Sao chép kho lưu trữ GitHub của lớp học lập trình từ dòng lệnh:

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

Ngoài ra, nếu chưa cài đặt git, bạn có thể tải kho lưu trữ xuống dưới dạng tệp ZIP rồi giải nén tệp zip đã tải xuống.

Nhập ứng dụng

  1. Sử dụng IDE, hãy mở hoặc nhập thư mục codelab-modular-sdk.
  2. Chạy npm install để cài đặt các phần phụ thuộc cần thiết để tạo và chạy ứng dụng trên máy.
  3. Chạy npm run build để tạo ứng dụng.
  4. Chạy npm run serve để khởi động máy chủ web
  5. Mở một thẻ trình duyệt đến http://localhost:8080

71a8a7d47392e8f4.png

3. Thiết lập đường cơ sở

Điểm xuất phát của bạn là gì?

Điểm xuất phát của bạn là một ứng dụng danh sách theo dõi cổ phiếu được thiết kế cho lớp học lập trình này. Mã đã được đơn giản hoá để minh hoạ các khái niệm trong lớp học lập trình này và có ít tính năng xử lý lỗi. Nếu bạn chọn sử dụng lại bất kỳ mã nào trong số này trong ứng dụng chính thức, hãy đảm bảo bạn xử lý mọi lỗi và kiểm thử đầy đủ tất cả mã.

Đảm bảo mọi thứ đều hoạt động trong ứng dụng:

  1. Đăng nhập ẩn danh bằng nút đăng nhập ở góc trên bên phải.
  2. Sau khi đăng nhập, hãy tìm kiếm và thêm "NFLX", "SBUX" và "T" vào danh sách xem bằng cách nhấp vào nút Thêm, nhập các chữ cái rồi nhấp vào hàng kết quả tìm kiếm xuất hiện bên dưới.
  3. Xoá một cổ phiếu khỏi danh sách theo dõi bằng cách nhấp vào dấu x ở cuối hàng.
  4. Xem thông tin cập nhật theo thời gian thực về giá cổ phiếu.
  5. Mở Công cụ của Chrome cho nhà phát triển, chuyển đến thẻ Mạng rồi đánh dấu vào Tắt bộ nhớ đệm và Sử dụng các hàng yêu cầu lớn. Tuỳ chọn Tắt bộ nhớ đệm đảm bảo chúng ta luôn nhận được các thay đổi mới nhất sau khi làm mới và tuỳ chọn Sử dụng các hàng yêu cầu lớn giúp hàng hiển thị cả kích thước đã truyền và kích thước tài nguyên cho một tài nguyên. Trong lớp học lập trình này, chúng ta chủ yếu quan tâm đến kích thước của main.js.

48a096debb2aa940.png

  1. Tải ứng dụng trong nhiều điều kiện mạng bằng cách sử dụng tính năng điều tiết được mô phỏng. Bạn sẽ sử dụng 3G chậm để đo lường thời gian tải trong lớp học lập trình này vì đây là nơi kích thước gói nhỏ hơn giúp ích nhiều nhất.

4397cb2c1327089.png

Bây giờ, hãy bắt đầu di chuyển ứng dụng sang API mô-đun mới.

4. Sử dụng các gói tương thích

Các gói tương thích cho phép bạn nâng cấp lên phiên bản SDK mới mà không cần thay đổi tất cả mã Firebase cùng một lúc. Bạn có thể nâng cấp các API này lên API mô-đun theo từng bước.

Ở bước này, bạn sẽ nâng cấp thư viện Firebase từ phiên bản 8 lên phiên bản mới và thay đổi mã để sử dụng các gói tương thích. Trong các bước sau, bạn sẽ tìm hiểu cách chỉ nâng cấp mã Firebase Auth để sử dụng API mô-đun trước, sau đó nâng cấp mã Firestore.

Ở cuối mỗi bước, bạn có thể biên dịch và chạy ứng dụng mà không gặp sự cố, đồng thời thấy kích thước gói giảm đi khi chúng tôi di chuyển từng sản phẩm.

Tải SDK mới

Tìm phần phụ thuộc trong package.json rồi thay thế bằng phần sau:

package.json

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

Cài đặt lại các phần phụ thuộc

Vì đã thay đổi phiên bản của phần phụ thuộc, nên chúng ta cần chạy lại npm install để lấy phiên bản mới của phần phụ thuộc.

Thay đổi đường dẫn nhập

Các gói tương thích được hiển thị trong mô-đun con firebase/compat, vì vậy, chúng ta sẽ cập nhật đường dẫn nhập tương ứng:

  1. Chuyển đến tệp src/firebase.ts
  2. Thay thế các lệnh nhập hiện có bằng các lệnh nhập sau:

src/firebase.ts

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

Xác minh ứng dụng có hoạt động hay không

  1. Chạy npm run build để tạo lại ứng dụng.
  2. Mở một thẻ trình duyệt đến http://localhost:8080 hoặc làm mới thẻ hiện có.
  3. Chơi với ứng dụng. Mọi thứ vẫn hoạt động.

5. Nâng cấp Auth để sử dụng API mô-đun

Bạn có thể nâng cấp các sản phẩm Firebase theo thứ tự bất kỳ. Trong lớp học lập trình này, trước tiên, bạn sẽ nâng cấp Auth để tìm hiểu các khái niệm cơ bản vì Auth API tương đối đơn giản. Việc nâng cấp Firestore phức tạp hơn một chút và bạn sẽ tìm hiểu cách thực hiện việc đó trong phần tiếp theo.

Cập nhật quá trình khởi chạy Auth

  1. Chuyển đến tệp src/firebase.ts
  2. Thêm lệnh nhập sau:

src/firebase.ts

import { initializeAuth, indexedDBLocalPersistence } from 'firebase/auth';
  1. Xóa import ‘firebase/compat/auth'.
  2. Thay thế export const firebaseAuth = app.auth(); bằng:

src/firebase.ts

export const firebaseAuth = initializeAuth(app, { persistence: [indexedDBLocalPersistence] });
  1. Xoá export type User = firebase.User; ở cuối tệp. User sẽ được xuất trực tiếp trong src/auth.ts mà bạn sẽ thay đổi tiếp theo.

Cập nhật mã xác thực

  1. Chuyển đến tệp src/auth.ts
  2. Thêm các lệnh nhập sau vào đầu tệp:

src/auth.ts

import { 
    signInAnonymously, 
    signOut,
    onAuthStateChanged,
    User
} from 'firebase/auth';
  1. Xoá User khỏi import { firebaseAuth, User } from './firebase'; vì bạn đã nhập User từ ‘firebase/auth'.
  2. Cập nhật các hàm để sử dụng API mô-đun.

Như bạn đã thấy trước đó khi chúng tôi cập nhật câu lệnh nhập, các gói trong phiên bản 9 được sắp xếp xung quanh các hàm mà bạn có thể nhập, trái ngược với các API phiên bản 8 dựa trên không gian tên và mẫu dịch vụ được nối bằng dấu chấm. Việc sắp xếp mã mới này cho phép loại bỏ mã không dùng đến, vì nó cho phép các công cụ bản dựng phân tích mã nào được sử dụng và mã nào không được sử dụng.

Trong phiên bản 9, các dịch vụ được truyền dưới dạng đối số đầu tiên đến các hàm. Dịch vụ là các đối tượng bạn nhận được khi khởi tạo dịch vụ Firebase, ví dụ: đối tượng được trả về từ getAuth() hoặc initializeAuth(). Các biến này lưu giữ trạng thái của một dịch vụ Firebase cụ thể và hàm sử dụng trạng thái đó để thực hiện các tác vụ của mình. Hãy áp dụng mẫu này để triển khai các hàm sau:

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

Xác minh ứng dụng có hoạt động không

  1. Chạy npm run build để tạo lại ứng dụng.
  2. Mở thẻ trình duyệt đến http://localhost:8080 hoặc làm mới thẻ hiện có
  3. Chơi với ứng dụng. Mọi thứ vẫn hoạt động.

Kiểm tra kích thước gói

  1. Mở Công cụ của Chrome cho nhà phát triển.
  2. Chuyển sang thẻ Mạng.
  3. Làm mới trang để ghi lại các yêu cầu mạng.
  4. Tìm main.js và kiểm tra kích thước của tệp này. Bạn đã giảm kích thước gói xuống 100 KB (36 KB nén bằng gzip), tức là giảm khoảng 22% chỉ bằng cách thay đổi một vài dòng mã! Trang web cũng tải nhanh hơn 0,75 giây trên kết nối 3G chậm.

2e4eafaf66cd829b.png

6. Nâng cấp Ứng dụng Firebase và Firestore để sử dụng API mô-đun

Cập nhật quá trình khởi chạy Firebase

  1. Chuyển đến tệp src/firebase.ts.
  2. Thay thế import firebase from ‘firebase/compat/app'; bằng:

src/firebase.ts

import { initializeApp } from 'firebase/app';
  1. Thay thế const app = firebase.initializeApp({...}); bằng:

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

Cập nhật quá trình khởi chạy Firestore

  1. Trong cùng tệp src/firebase.ts,, hãy thay thế import 'firebase/compat/firestore'; bằng

src/firebase.ts

import { getFirestore } from 'firebase/firestore';
  1. Thay thế export const firestore = app.firestore(); bằng:

src/firebase.ts

export const firestore = getFirestore();
  1. Xoá tất cả các dòng sau "export const firestore = ..."

Cập nhật các lệnh nhập

  1. Mở tệp src/services.ts.
  2. Xoá FirestoreFieldPath, FirestoreFieldValue và QuerySnapshot khỏi tệp nhập. Giờ đây, lệnh nhập từ './firebase' sẽ có dạng như sau:

src/services.ts

import { firestore } from './firebase';
  1. Nhập các hàm và loại mà bạn sẽ sử dụng ở đầu tệp:
    **src/services.ts**

import { 
    collection, 
    getDocs, 
    doc, 
    setDoc, 
    arrayUnion, 
    arrayRemove, 
    onSnapshot, 
    query, 
    where, 
    documentId, 
    QuerySnapshot
} from 'firebase/firestore';
  1. Tạo một tệp đối chiếu đến bộ sưu tập chứa tất cả mã thông báo:

src/services.ts

const tickersCollRef = collection(firestore, 'current');
  1. Sử dụng getDocs() để tìm nạp tất cả tài liệu trong bộ sưu tập:

src/services.ts

const tickers = await getDocs(tickersCollRef);

Hãy xem search() để biết mã hoàn chỉnh.

Cập nhật addToWatchList()

Sử dụng doc() để tạo tham chiếu tài liệu đến danh sách xem của người dùng, sau đó thêm mã thông báo vào danh sách đó bằng cách sử dụng setDoc() với 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 });
}

Cập nhật deleteFromWatchList()

Tương tự, hãy xoá một mã thông báo khỏi danh sách xem của người dùng bằng cách sử dụng setDoc() với 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 });
}

Cập nhật subscribeToTickerChanges()

  1. Trước tiên, hãy sử dụng doc() để tạo một tệp tham chiếu tài liệu đến danh sách xem của người dùng, sau đó theo dõi các thay đổi đối với danh sách xem bằng onSnapshot():

src/services.ts

const watchlistRef = doc(firestore, `watchlist/${user.uid}`);
const unsubscribe = onSnapshot(watchlistRef, snapshot => {
   /* subscribe to ticker price changes */
});
  1. Sau khi bạn có các mã thông báo trong danh sách theo dõi, hãy sử dụng query() để tạo truy vấn nhằm tìm nạp giá của các mã thông báo đó và sử dụng onSnapshot() để theo dõi các thay đổi về giá:

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

Hãy xem subscribeToTickerChanges() để biết cách triển khai đầy đủ.

Cập nhật subscribeToAllTickerChanges()

Trước tiên, bạn sẽ sử dụng collection() để tạo một tệp tham chiếu đến tập hợp chứa giá của tất cả các mã thông báo, sau đó sử dụng onSnapshot() để theo dõi các thay đổi về giá:

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

Xác minh ứng dụng có hoạt động không

  1. Chạy npm run build để tạo lại ứng dụng.
  2. Mở thẻ trình duyệt đến http://localhost:8080 hoặc làm mới thẻ hiện có
  3. Chơi với ứng dụng. Mọi thứ vẫn hoạt động.

Kiểm tra kích thước gói

  1. Mở Công cụ của Chrome cho nhà phát triển.
  2. Chuyển sang thẻ Mạng.
  3. Làm mới trang để ghi lại các yêu cầu mạng.
  4. Tìm main.js và kiểm tra kích thước của tệp này. Hãy so sánh với kích thước gói ban đầu – chúng tôi đã giảm kích thước gói hơn 200 KB (63,8 KB nén bằng gzip), tức là nhỏ hơn 50%, giúp thời gian tải nhanh hơn 1,3 giây!

7660cdc574ee8571.png

7. Sử dụng Firestore Lite để tăng tốc độ kết xuất trang ban đầu

Firestore Lite là gì?

SDK Firestore cung cấp tính năng lưu vào bộ nhớ đệm phức tạp, truyền trực tuyến theo thời gian thực, bộ nhớ cố định, đồng bộ hoá nhiều thẻ khi không có mạng, thử lại, đồng thời có nhiều tính năng khác, do đó, kích thước khá lớn. Tuy nhiên, có thể bạn chỉ muốn lấy dữ liệu một lần mà không cần bất kỳ tính năng nâng cao nào. Đối với những trường hợp đó, Firestore đã tạo một giải pháp đơn giản và nhẹ, một gói hoàn toàn mới – Firestore Lite.

Một trường hợp sử dụng tuyệt vời cho Firestore Lite là tối ưu hoá hiệu suất hiển thị trang ban đầu, trong đó bạn chỉ cần biết người dùng đã đăng nhập hay chưa, sau đó đọc một số dữ liệu từ Firestore để hiển thị.

Trong bước này, bạn sẽ tìm hiểu cách sử dụng Firestore lite để giảm kích thước gói nhằm tăng tốc quá trình hiển thị trang ban đầu, sau đó tải động SDK Firestore chính để đăng ký nhận thông tin cập nhật theo thời gian thực.

Bạn sẽ tái cấu trúc mã để:

  1. Di chuyển các dịch vụ theo thời gian thực sang một tệp riêng biệt để có thể tải linh động bằng tính năng nhập động.
  2. Tạo các hàm mới để sử dụng Firestore Lite nhằm truy xuất danh sách theo dõi và giá cổ phiếu.
  3. Sử dụng các hàm Firestore Lite mới để truy xuất dữ liệu nhằm hiển thị trang ban đầu, sau đó tải linh động các dịch vụ theo thời gian thực để theo dõi nội dung cập nhật theo thời gian thực.

Di chuyển các dịch vụ theo thời gian thực sang một tệp mới

  1. Tạo một tệp mới có tên src/services.realtime.ts.
  2. Di chuyển các hàm subscribeToTickerChanges() và subscribeToAllTickerChanges() từ src/services.ts vào tệp mới.
  3. Thêm các lệnh nhập cần thiết vào đầu tệp mới.

Bạn vẫn cần thực hiện một vài thay đổi tại đây:

  1. Trước tiên, hãy tạo một thực thể Firestore từ SDK Firestore chính ở đầu tệp để sử dụng trong các hàm. Bạn không thể nhập thực thể Firestore từ firebase.ts tại đây vì bạn sẽ thay đổi thực thể này thành một thực thể Firestore Lite trong vài bước. Thực thể này sẽ chỉ được dùng để hiển thị trang ban đầu.
  2. Thứ hai, hãy loại bỏ biến firstload và khối if được bảo vệ bằng biến đó. Các chức năng của chúng sẽ được chuyển sang các hàm mới mà bạn sẽ tạo trong bước tiếp theo.

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

Sử dụng Firestore lite để tìm nạp dữ liệu

  1. Mở src/services.ts.
  2. Thay đổi đường dẫn nhập từ ‘firebase/firestore' thành ‘firebase/firestore/lite',, thêm getDoc và xoá onSnapshot khỏi danh sách nhập:

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. Thêm các hàm để tìm nạp dữ liệu cần thiết cho quá trình hiển thị trang ban đầu bằng 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. Mở src/firebase.ts và thay đổi đường dẫn nhập từ ‘firebase/firestore' thành ‘firebase/firestore/lite':

src/firebase.ts

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

Kết hợp tất cả các thành phần này lại với nhau

  1. Mở src/main.ts.
  2. Bạn sẽ cần các hàm mới tạo để tìm nạp dữ liệu cho quá trình kết xuất trang ban đầu và một số hàm trợ giúp để quản lý trạng thái ứng dụng. Bây giờ, hãy cập nhật các lệnh nhập:

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. Tải src/services.realtime bằng cách nhập động ở đầu tệp. Biến loadRealtimeService là một lời hứa sẽ phân giải với các dịch vụ theo thời gian thực sau khi mã được tải. Bạn sẽ sử dụng thông tin này sau để đăng ký nhận thông tin cập nhật theo thời gian thực.

src/main.ts

const loadRealtimeService = import('./services.realtime');
loadRealtimeService.then(() => {
   setRealtimeServicesLoaded(true);
});
  1. Thay đổi lệnh gọi lại của onUserChange() thành hàm async để chúng ta có thể sử dụng await trong phần nội dung hàm:

src/main.ts

onUserChange(async user => {
 // callback body
});
  1. Bây giờ, hãy tìm nạp dữ liệu để hiển thị trang ban đầu bằng các hàm mới mà chúng ta đã tạo ở bước trước.

Trong lệnh gọi lại onUserChange(), hãy tìm điều kiện if (nếu) khi người dùng đã đăng nhập, rồi sao chép và dán mã vào bên trong câu lệnh 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. Trong khối else (nếu không) khi không có người dùng nào đăng nhập, hãy tìm nạp thông tin về giá của tất cả cổ phiếu bằng firestore lite, hiển thị trang, sau đó theo dõi các thay đổi về giá sau khi tải các dịch vụ theo thời gian thực:

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

Hãy xem src/main.ts để biết mã hoàn chỉnh.

Xác minh ứng dụng có hoạt động không

  1. Chạy npm run build để tạo lại ứng dụng.
  2. Mở một thẻ trình duyệt đến http://localhost:8080 hoặc làm mới thẻ hiện có.

Kiểm tra kích thước gói

  1. Mở Công cụ của Chrome cho nhà phát triển.
  2. Chuyển sang thẻ Mạng.
  3. Làm mới trang để ghi lại các yêu cầu mạng
  4. Tìm main.js và kiểm tra kích thước của tệp này.
  5. Giờ đây, tệp này chỉ có kích thước 115 KB (34,5 KB khi nén bằng gzip). Kích thước này nhỏ hơn 75% so với kích thước gói ban đầu là 446KB(138KB nén bằng gzip)! Do đó, trang web đang tải nhanh hơn 2 giây trên kết nối 3G – một sự cải thiện đáng kể về hiệu suất và trải nghiệm người dùng!

9ea7398a8c8ef81b.png

8. Xin chúc mừng

Xin chúc mừng! Bạn đã nâng cấp thành công ứng dụng, giúp ứng dụng nhỏ hơn và nhanh hơn!

Bạn đã sử dụng các gói tương thích để nâng cấp từng phần ứng dụng và sử dụng Firestore Lite để tăng tốc độ hiển thị trang ban đầu, sau đó tải động Firestore chính để truyền trực tuyến các thay đổi về giá.

Bạn cũng đã giảm kích thước gói và cải thiện thời gian tải gói trong quá trình tham gia lớp học lập trình này:

main.js

kích thước tài nguyên (kb)

kích thước nén bằng gzip (kb)

thời gian tải (giây) (qua mạng 3G chậm)

v8

446

138

4,92

tương thích với phiên bản 9

429

124

4,65

Auth mô-đun chỉ dành cho phiên bản 9

348

102

4.2

v9 hoàn toàn mô-đun

244

74,6

3,66

v9 hoàn toàn mô-đun + Firestore lite

117

34,9

2,88

32a71bd5a774e035.png

Giờ đây, bạn đã biết các bước chính cần thiết để nâng cấp một ứng dụng web sử dụng SDK JS Firebase phiên bản 8 để sử dụng SDK JS mô-đun mới.

Tài liệu đọc thêm

Tài liệu tham khảo