Supercharge your web app with the modular Firebase JS SDK
summary
A hands‑on migration shows rewriting Firebase JS SDK v8 to the modular v9, converting a stock‑watch web app with npm, Chrome and VS Code, replacing compat imports, then moving Firestore to Firestore Lite and lazy‑loading real‑time code. Bundle numbers drop from 138 KB → 35.2 KB gzip (446 → 118 raw) after incremental changes; auth-only and full modular steps hit 103→350 and 74.8→245. Claim: the final app is 75% smaller and preserves the same features, with real‑time streaming restored via dynamic import.
AI-written summary · about
chapters (18)
- 0:00Start
- 4:37Install the Dependencies
- 6:03Build the App
- 6:31Start a Local Web Server
- 17:08Manual Integration Test
- 18:48Upgrade Only Firebase Auth to the Module Api
- 19:14Upgrade Firebase
- 23:03Rebuild the App and Check the Size
- 26:03Upgrade Firebase App and the Firestore to the Module Api
- 31:30Delete from Watchlist
- 32:19Subscribe to Ticker Changes
- 35:13Limit Constraint
- 46:43Create a Firestore Instance
- 50:04Initial Page Rendering
- 52:38Subscribe to Real-Time Updates
- 53:16Dynamic Input
- 54:59Update the Else Block
- 56:05Rebuild the App
related talks
22mBuilding Fast Angular Applications from End
32mLet's Tree-shake it...
44mWhat's new in Firebase 2022 | Keynote
41mHow we make Web Apps lightning fast at Microsoft!
28mDecoding JavaScript: Loading Performance —
23mDecoding Javascript: Loading Performance
20mTools for Fast Angular Applications
24mFrom Google Analytics to Universal Deploy Schematics!