wordpress-playground VS htmf

Sorry friend, WordPress already beat you to it: https://github.com/WordPress/wordpress-playground

> Is there a reason why using OPFS directly from SQLite doesn't work?

I'm guessing this means using SQLite WASM's built-in OPFS integration as described in these articles:

- sqlite3 WebAssembly documentation - Persistent Storage Options: OPFS - https://sqlite.org/wasm/doc/trunk/persistence.md#opfs

- SQLite Wasm in the browser backed by the Origin Private File System - https://developer.chrome.com/blog/sqlite-wasm-in-the-browser...

Within the Playground, SQLite interacts with the database file in MEMFS only, and the Playground coordinates the syncing from MEMFS to OPFS.

https://github.com/WordPress/wordpress-playground/tree/trunk...

The reason for this, I believe, is that the primary use case is/was to have the entire file system in memory, including SQLite's database file. This was the original implementation, and is still the default behavior. Persistence was later added as an optional feature.

The good news is that browser support for OPFS seems to be getting better. From the SQLite docs:

  As of March 2023 the following browsers are known to have the necessary APIs:

One of the most exciting things at WordCamp Europe 2023 for me was discovering how far along the WordPress Playground project is. If you haven’t heard of the playground before, it’s a full version of WordPress, running directly in your browser!

WordPress has an official WebAssembly build for the browser and Node.js: https://developer.wordpress.org/playground https://github.com/WordPress/wordpress-playground

(Disclosure: I'm the creator)

I love the work going on there at WasmLabs, especially enjoying the articles with in-depth technical explorations.

After the article about running WordPress in the browser was published, there's a new project called WordPress Playground which is gradually preparing NPM or Composer packages to make it easier for people to run it.

https://github.com/WordPress/wordpress-playground/

They've been doing very detailed work, like making some patches to PHP and SQLite for improved compatibility with Emscripten, etc. It seems there's a lot of overlap with what WasmLabs has achieved and probably have continued to develop further. Perhaps there's an opportunity for collaboration.

WordPress WASM\ (28 comments)

I've successfully used this pattern (HTMX hypermedia style) to create an offline-first web app SPA[^1]. One of the pages is pretty dynamic and I wasn't sure if I would need a traditional front end library to work with it. But, nope, hypermedia to the win, it worked fine without a front end framework.

To build it I used my own library called HTMF[^2]. I started out using mpa-enhancer[^3] but found that that pattern is a little to janky sometimes. I think reloading a page every time on every interaction uses too many resources for a browser especially when you use a phone that doesn't have as much power as a laptop.

But overall I find the pattern very easy to use and keeps the complexity down.

I think some of the issues with traditional SPAs is that they have a lot of state and state is nonlinear in complexity. But using templating systems makes the complexity more linear in nature.

Also, I find libraries like React to be overly complex for what it does, see above. The way React works is just odd and counter intuitive. All for problems that are easy to solve. I do think there are places for a React-like library is needed but those are for websites that are inherently highly state-based. But most websites aren't state-based even ones that appear to be state-based at first.

The websites I work on are usually just forms and forms are pretty powerful and can get you a long ways before you need to go outside of that paradigm.

[^1]: https://github.com/jon49/Soccer

[^2]: https://github.com/jon49/htmf

[^3]: https://github.com/jon49/mpa-enhancer

I wrote a js lib similar to HTMX, which I call HTMF[1]. Unlike HTMX I try to stay as close to the metal of the current semantics as possible. So, all interactions are based off of forms. I also tried to keep the wording similar to HTML/JS semantics. It's pretty small lib but pretty amazing how far I can get with it. These days I mainly build offline-first apps with it. But I built it in such a way that it can easily be a progressive enhancement to an MPA app.

[1]: https://github.com/jon49/htmf