Speeding Webapps with WASM and SQLite
🎬S3:E05 A crash course on optimizing webapps
Hey, TechFlixers!
Today, we're diving into the magical world of modern web app performance. We're going to break down some key concepts and technologies that can make apps like Notion or Figma perform seamlessly in your browser. Get ready to power up your knowledge with WebAssembly (WASM), SQLite, Origin Private File System (OPFS), and more!
WebAssembly (WASM)
WebAssembly (WASM) is a binary instruction format for a stack-based virtual machine. In simple terms, it's a way to run code written in multiple languages at near-native speed in the browser. Think of it as a performance booster that allows you to run complex applications on the web without compromising speed.
Why WASM?
Speed: WASM is designed to be fast, much faster than JavaScript, enabling complex computations and graphics-intensive applications.
Portability: Write code in languages like C, C++, or Rust and run it on any web platform without modification.
SQLite
SQLite is a lightweight, disk-based database that doesn’t require a separate server process. It's embedded directly into the application, making it perfect for local storage in web applications.
Why SQLite?
Simplicity: Self-contained and easy to set up.
Speed: Efficient for read-heavy operations and ideal for local data caching.
Origin Private File System (OPFS)
Origin Private File System (OPFS) is a web API that provides a way to store data persistently and privately within a web browser. It allows web apps to save and retrieve files even after the browser is closed.
Why OPFS?
Persistence: Keeps data safe between sessions.
Privacy: Data Isolation by Origin. Let’s break this down.
What is an Origin?
In web development, an origin is defined by a combination of:
Scheme (Protocol):
httporhttpsHost (Domain):
example.comPort:
80,443, etc.
For instance, the origin for https://www.example.com is different from http://example.com due to the different schemes (https vs. http).
What Does Data Isolation Mean?
It means that the data stored by a web application is kept separate and secure from other web applications. Specifically, it ensures:
Private Storage: Data saved by https://www.example.com is kept in its own private storage area.
Access Control: Only https://www.example.com can access this data. Other websites or origins, like https://otherexample.com, cannot read or modify this data.
Session Persistence: The data remains available across browser sessions (even after closing and reopening the browser) but is only accessible to the same origin that created it.
Why Is This Important?
Prevents malicious sites from accessing sensitive information stored by other sites.
Ensures that user data is not inadvertently shared between different web applications.
Maintains the integrity of the data by preventing unauthorized modifications.
Web Workers and SharedWorkers
Web Workers allow you to run scripts in background threads. SharedWorkers, on the other hand, are a special type of Web Worker that can be shared across multiple scripts and tabs.
Why use Web Workers?
Concurrency: Perform tasks without blocking the main thread, keeping the UI responsive.
Isolation: Run heavy computations without affecting the main application flow.
Putting It All Together
Notion’s Optimization Strategy
SQLite Caching with WASM: By using SQLite in the browser with WASM, Notion sped up page navigation by 20%.
Data Persistence with OPFS: They used OPFS to store data persistently across sessions.
Concurrency Management: Notion used a SharedWorker architecture to handle multiple tabs. Each tab had its own Web Worker for writing to SQLite, ensuring only one active tab at a time to avoid concurrency issues.
Error Handling: Transactions and error logging were implemented to address data corruption.
Performance Enhancements: To tackle regressions like slower page load times, they loaded the WASM SQLite library asynchronously and optimized for slower devices by racing API requests with disk cache reads.
Another Example
Imagine you’re playing an online game that saves your progress. With these technologies:
WASM would handle the game logic efficiently.
SQLite would store your game data locally.
OPFS would ensure your progress is saved even if you close your browser.
Web Workers would keep the game running smoothly by handling background tasks.
These advancements are not just for gaming but for any web app that requires high performance and real-time interactions.
Stay tuned for more insights and tech breakdowns! Until next time, keep your code clean and your performance sharp.