Aplikacje korzystające obecnie z dowolnego interfejsu Firebase Web API z przestrzenią nazw, od compat bibliotek do wersji 8 lub starszej, powinny rozważyć migrację do modułowego interfejsu API, korzystając z instrukcji zawartych w tym przewodniku.
W tym przewodniku przyjęto założenie, że znasz interfejs API z przestrzenią nazw i że będziesz korzystać z pakietu modułów, takiego jak webpack lub pakiet zbiorczy , do uaktualniania i ciągłego opracowywania aplikacji modułowych.
Zdecydowanie zaleca się korzystanie z pakietu modułów w środowisku programistycznym. Jeśli go nie użyjesz, nie będziesz mógł skorzystać z głównych zalet modułowego interfejsu API w zmniejszonym rozmiarze aplikacji. Będziesz potrzebował npm lub przędzy , aby zainstalować SDK.
Kroki uaktualniania w tym przewodniku będą oparte na wyimaginowanej aplikacji internetowej, która korzysta z zestawów SDK uwierzytelniania i Cloud Firestore. Pracując nad przykładami, możesz opanować koncepcje i praktyczne kroki wymagane do uaktualnienia wszystkich obsługiwanych pakietów Firebase Web SDK.
Informacje o bibliotekach z przestrzenią nazw ( compat ).
Istnieją dwa rodzaje bibliotek dostępnych dla Firebase Web SDK:
- Modułowa — nowa powierzchnia API zaprojektowana w celu ułatwienia wytrząsania drzewa (usuwania nieużywanego kodu), aby Twoja aplikacja internetowa była tak mała i szybka, jak to tylko możliwe.
- Namespaced (
compat) — znana powierzchnia API, która jest w pełni kompatybilna z wcześniejszymi wersjami SDK, umożliwiając aktualizację bez zmiany całego kodu Firebase naraz. Biblioteki Compat mają niewielką lub żadną przewagę pod względem wielkości lub wydajności w porównaniu z ich odpowiednikami w przestrzeniach nazw.
Ten przewodnik zakłada, że skorzystasz z kompatybilnych bibliotek, aby ułatwić sobie aktualizację. Biblioteki te umożliwiają dalsze używanie kodu z przestrzenią nazw wraz z kodem refaktoryzowanym dla modułowego interfejsu API. Oznacza to, że możesz łatwiej kompilować i debugować swoją aplikację podczas procesu aktualizacji.
W przypadku aplikacji, które mają bardzo małą ekspozycję na Firebase Web SDK — na przykład aplikacji, która wykonuje tylko proste wywołanie interfejsów API uwierzytelniania — praktyczne może być refaktoryzacja starszego kodu z przestrzeniami nazw bez korzystania z kompatybilnych bibliotek. Jeśli aktualizujesz taką aplikację, możesz postępować zgodnie z instrukcjami zawartymi w tym przewodniku dotyczącymi „modułowego interfejsu API” bez korzystania z kompatybilnych bibliotek.
O procesie aktualizacji
Każdy etap procesu uaktualniania ma określony zakres, dzięki czemu można dokończyć edytowanie źródła aplikacji, a następnie skompilować ją i uruchomić bez uszkodzeń. Podsumowując, oto, co musisz zrobić, aby uaktualnić aplikację:
- Dodaj biblioteki modularne i biblioteki kompatybilne do swojej aplikacji.
- Zaktualizuj instrukcje importu w swoim kodzie, aby były zgodne.
- Refaktoryzuj kod dla pojedynczego produktu (na przykład Uwierzytelnianie) do stylu modułowego.
- Opcjonalnie: w tym momencie usuń bibliotekę zgodności uwierzytelniania i kod zgodności dla uwierzytelniania, aby przed kontynuowaniem wykorzystać korzyści związane z rozmiarem aplikacji dla uwierzytelniania.
- Refaktoryzuj funkcje dla każdego produktu (na przykład Cloud Firestore, FCM itp.) do stylu modułowego, kompilując i testując, aż wszystkie obszary zostaną ukończone.
- Zaktualizuj kod inicjujący do stylu modułowego.
- Usuń wszystkie pozostałe oświadczenia zgodności i kod zgodności ze swojej aplikacji.
Pobierz najnowszą wersję SDK
Aby rozpocząć, pobierz biblioteki modułowe i biblioteki kompatybilne za pomocą npm:
npm i firebase@10.3.1 # OR yarn add firebase@10.3.1
Zaktualizuj importy do zgodności
Aby Twój kod działał po zaktualizowaniu zależności, zmień instrukcje importu tak, aby używały „zgodnej” wersji każdego importu. Na przykład:
Przed: wersja 8 lub wcześniejsza
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Po: kompat
// compat packages are API compatible with namespaced code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Refaktoryzacja do stylu modułowego
Podczas gdy interfejsy API z przestrzeniami nazw są oparte na łańcuchu kropek przestrzeni nazw i wzorcach usług, podejście modułowe oznacza, że kod będzie zorganizowany głównie wokół funkcji . W modułowym interfejsie API pakiet firebase/app i inne pakiety nie zwracają kompleksowego eksportu zawierającego wszystkie metody z pakietu. Zamiast tego pakiety eksportują poszczególne funkcje.
W modułowym interfejsie API usługi są przekazywane jako pierwszy argument, a następnie funkcja wykorzystuje szczegóły usługi do wykonania reszty. Sprawdźmy, jak to działa w dwóch przykładach, które refaktoryzują wywołania interfejsów API uwierzytelniania i Cloud Firestore.
Przykład 1: refaktoryzacja funkcji uwierzytelniania
Przed: komp
Kod zgodności jest identyczny z kodem z przestrzenią nazw, ale import uległ zmianie.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Po: modułowy
Funkcja getAuth przyjmuje firebaseApp jako swój pierwszy parametr. Funkcja onAuthStateChanged nie jest powiązana łańcuchowo z instancją auth , tak jak w interfejsie API z przestrzenią nazw; zamiast tego jest to darmowa funkcja, której pierwszym parametrem jest auth .
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Aktualizacja obsługi metody Auth getRedirectResult
Modularny interfejs API wprowadza przełomową zmianę w getRedirectResult . Gdy nie jest wywoływana żadna operacja przekierowania, modułowy interfejs API zwraca null w przeciwieństwie do interfejsu API z przestrzenią nazw, który zwrócił UserCredential z użytkownikiem null .
Przed: komp
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Po: modułowy
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
Przykład 2: refaktoryzacja funkcji Cloud Firestore
Przed: komp
import "firebase/compat/firestore"
const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
})
.catch((error) => {
console.log("Error getting documents: ", error);
});
Po: modułowy
Funkcja getFirestore przyjmuje firebaseApp jako swój pierwszy parametr, który został zwrócony przez initializeApp we wcześniejszym przykładzie. Zwróć uwagę, że kod tworzący zapytanie jest bardzo różny w modułowym interfejsie API; nie ma łańcuchów, a metody takie jak query lub where są teraz udostępniane jako bezpłatne funkcje.
import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";
const db = getFirestore(firebaseApp);
const q = query(collection(db, "cities"), where("capital", "==", true));
const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
Zaktualizuj odniesienia do Firestore DocumentSnapshot.exists
Modularny interfejs API wprowadza zasadniczą zmianę polegającą na zmianie właściwości firestore.DocumentSnapshot.exists na metodę . Funkcjonalność jest zasadniczo taka sama (testowanie, czy dokument istnieje), ale musisz zmienić kod, aby użyć nowszej metody, jak pokazano:
Przed: zgodność
if (snapshot.exists) {
console.log("the document exists");
}
Po: modułowy
if (snapshot.exists()) {
console.log("the document exists");
}
Przykład 3: łączenie stylów kodu z przestrzenią nazw i kodem modułowym
Używanie bibliotek zgodności podczas uaktualniania umożliwia dalsze używanie kodu z przestrzenią nazw wraz z kodem refaktoryzowanym dla modułowego interfejsu API. Oznacza to, że możesz zachować istniejący kod z przestrzenią nazw dla Cloud Firestore podczas refaktoryzacji uwierzytelniania lub innego kodu SDK Firebase do stylu modułowego i nadal pomyślnie skompilować aplikację z obydwoma stylami kodu. To samo dotyczy modułowego kodu API z przestrzenią nazw w produkcie takim jak Cloud Firestore; nowe i stare style kodu mogą współistnieć, o ile importujesz kompatybilne pakiety:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Pamiętaj, że chociaż Twoja aplikacja się skompiluje, nie uzyskasz korzyści związanych z rozmiarem aplikacji kodu modułowego, dopóki całkowicie nie usuniesz ze swojej aplikacji instrukcji zgodności i kodu.
Zaktualizuj kod inicjujący
Zaktualizuj kod inicjujący aplikacji, aby używał składni modułowej. Ważne jest, aby zaktualizować ten kod po zakończeniu refaktoryzacji całego kodu w aplikacji; dzieje się tak dlatego, że firebase.initializeApp() inicjuje stan globalny zarówno dla interfejsów API compat, jak i modular, podczas gdy funkcja modular initializeApp() inicjuje tylko stan dla modularnego.
Przed: komp
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Po: modułowy
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Usuń kod zgodności
Aby zdać sobie sprawę z zalet modułowego interfejsu API związanych z rozmiarem, należy w końcu przekonwertować wszystkie wywołania na styl modułowy pokazany powyżej i usunąć wszystkie instrukcje import "firebase/compat/* ze swojego kodu. Kiedy skończysz, nie powinno być więcej odniesień do globalnej przestrzeni nazw firebase.* lub dowolnego innego kodu w stylu API przestrzeni nazw.
Korzystanie z biblioteki zgodności z okna
Modułowy interfejs API jest zoptymalizowany do pracy z modułami, a nie z obiektem window przeglądarki. Poprzednie wersje biblioteki umożliwiały ładowanie i zarządzanie Firebase przy użyciu przestrzeni nazw window.firebase . Nie jest to zalecane, ponieważ nie pozwala na eliminację nieużywanego kodu. Jednak kompatybilna wersja JavaScript SDK działa z window dla programistów, którzy wolą nie rozpoczynać od razu modułowej ścieżki aktualizacji.
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.3.1/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
Biblioteka kompatybilności wykorzystuje modułowy kod pod maską i zapewnia ten sam interfejs API, co interfejs API z przestrzenią nazw; oznacza to, że szczegółowe informacje można znaleźć w odwołaniu do interfejsu API z przestrzenią nazw i fragmentach kodu z przestrzenią nazw. Ta metoda nie jest zalecana do długotrwałego użytkowania, ale jako początek aktualizacji do w pełni modułowej biblioteki.
Korzyści i ograniczenia modułowego zestawu SDK
W pełni zmodularyzowany zestaw SDK ma następujące zalety w porównaniu z wcześniejszymi wersjami:
- Modułowy zestaw SDK umożliwia radykalne zmniejszenie rozmiaru aplikacji. Przyjmuje nowoczesny format modułu JavaScript, co pozwala na praktyki „potrząsania drzewem”, w których importujesz tylko te artefakty, których potrzebuje Twoja aplikacja. W zależności od aplikacji, potrząsanie drzewem za pomocą modułowego zestawu SDK może skutkować zmniejszeniem o 80% kilobajtów w porównaniu z porównywalną aplikacją zbudowaną przy użyciu interfejsu API z przestrzenią nazw.
- Modułowy zestaw SDK będzie nadal korzystał z ciągłego rozwoju funkcji, podczas gdy interfejs API z przestrzenią nazw nie.