SQLite3 en JavaScript con WebAssembly y OPFS
Anteriormente te he hablado de SQLite en el navegador web, ya sea con Svelte o JavaScript puro. Hoy voy a mostrarte otra cosa: cómo invocar a SQLite3 desde WASM o WebAssembly.
Al final vamos a estar invocando la API de SQLite3 de JS desde WebAssembly. Te enseñaré cómo es mi entorno de trabajo y cómo usar SQLite3 con WebAssembly.
SQLite3 con JavaScript puro y OPFS – Tutorial
En este post te mostraré cómo usar SQLite3 directamente en el navegador web usando la librería original escrita en C a través de WebAssembly y el OPFS para alojar la base de datos. De este modo tendremos SQLite3 original en la web para trabajar en el navegador con JS del lado del cliente.
Podremos hacer esto con JavaScript puro o con cualquier framework; pero te mostraré un ejemplo básico y bien explicado de SQLite3 con JavaScript. Luego te enseñaré un ejemplo con Tailwind, Svelte y Progressive Web apps.
Usando SQLite3 en la web con Sveltekit y @sqlite.org/sqlite-wasm
Estoy muy emocionado porque después de tanto tiempo y gracias al Origin Private File System podremos tener SQLite3 en los navegadores, con todas sus ventajas y todo contenido desde una página web.
Si quieres puedes ver el hola mundo sin Svelte, es decir, con JS puro y aprender cómo usar SQLite3 en el navegador web sin servidores.
Ya había leído eso hace tiempo pero tenías que hacer unas cosas “experimentales”.
El punto es que ando aprendiendo un poco de Svelte con Tailwind haciendo una app de notas (a las que les agregaré encriptación) y me dio curiosidad por ver si SQLite3 ya estaba “portado” totalmente, porque si bien ya existía con WebAssembly no había manera de crear archivos binarios en el navegador web.
Entonces encontré a: https://developer.chrome.com/blog/sqlite-wasm-in-the-browser-backed-by-the-origin-private-file-system/
Y vi que ya era posible. Lo siguiente era hacerlo funcionar con SvelteKit que usa a su vez Vite para todo su entorno.
Te contaré cómo lo hice y de dónde me he guiado.
WebAssembly en Go: tutorial y ejemplos
Acabo de publicar un post sobre las ventajas y usos de WebAssembly en donde prometí que traería un ejemplo con Go.
De hecho ya tenía el ejemplo desde antes, pero no iba a poner toda la definición de WebAssembly aquí.
En fin, veamos cómo utilizar Go para compilar a WebAssembly y llamar al código desde JavaScript.
WASM y Go – Hola mundo
Pero no te confundas, WebAssembly no es JavaScript, es código que se ejecuta directamente en el navegador, solo que JavaScript le dice al navegador cómo usarlo.
Configurar apache para servir archivos wasm
Al probar WebAssembly en un servidor apache instalado con XAMPP e intentar cargar un archivo con extensión wasm aparecía el siguiente error:
Uncaught (in promise) TypeError: Failed to execute ‘compile’ on ‘WebAssembly’: Incorrect response MIME type. Expected ‘application/wasm’
Esto es porque Apache no sabe de qué tipo son los archivos wasm, y no los sirve con el MIME correcto.
Vamos a ver dos soluciones a esto.
WebAssembly: definición, usos, ventajas y desventajas
WebAssembly es una tecnología relativamente nueva (se ha hablado de WebAssembly desde el 2015) que traerá muchas cosas nuevas a la web y a la forma en la que se programan las cosas.
En este post voy a dar una definición y análisis de WebAssembly desde mi punto de vista, analizando sus usos y explicación, además de algunas ventajas.