PHP.GT/Flux is ready to use

[g105b]

PHP.GT/Flux is now released as the small client-side library that gives server-rendered applications a fluid user experience, without asking us to stop writing normal HTML pages, forms, and links.

If we have a page that already works with ordinary browser behaviour, Flux can progressively enhance it. Forms still submit to the same PHP code. Links still point at real pages. The server still returns complete HTML documents. Flux simply makes the browser experience feel fluid by fetching those documents in the background and replacing the matching parts of the current page.

A note on the name

During development, this project was called Turbo. That name made sense within the context of WebEngine, but I dropped it in favour of the portmanteau of Fluid User Experience, Flux.

The web already had well-known Turbo projects, especially in the Hotwire ecosystem, and reusing the name would have caused confusion for developers, documentation, search results, package listings, and anyone trying to explain which Turbo they meant. So the name was dropped before release.

Flux fits the project better. It describes the feeling we want from server-rendered pages: the page can keep moving, updating, and responding, while the underlying application remains ordinary, readable, and proudly HTML-shaped.

You can start now

Flux is available to use today. It is shipped by default with PHP.GT/WebEngine applications, and it can also be used as a standalone browser library in any server-rendered project.

The first thing to try is a normal form:

<form method="post" data-flux="update">
	<button name="do" value="save" data-flux="submit">Save</button>
</form>

There is no new client-side state model hiding behind that button. It is still a form, still a POST request, and still your server-side code doing the real work.

Try the examples

If you have PHP installed, run php -S 0.0.0.0:8080 and visit http://localhost:8080/example in your browser.

The example/ directory shows the library in a real browser, from the tiny counter through to live updates, drag ordering, and link navigation. The link demo in example/04-links.php is a good one to poke at because it mixes full-page navigation with smaller card updates on the same page.

To run the browser examples through the test suite:

composer install
composer behat

The Behat wrapper starts a local PHP server, opens Chrome or Chromium headlessly, and checks that the examples behave as intended.

For the JavaScript unit tests:

npm test

Why Flux exists

Flux exists because server-rendered web applications are still excellent.

The web already gives us forms, links, history, accessibility, caching, URLs, and decades of shared understanding. The problem is not that those tools are old; the problem is that full-page refreshes can feel clunky when a user only changed one small part of the page.

Flux satisfies that middle ground. It keeps the application model simple enough for humans to reason about, while smoothing the experience for the person using the site. We do not need a bespoke JSON API for every button. We do not need to rebuild page state in two languages. We can keep serving HTML, then let Flux help the browser swap the right pieces into place.

That is the little trick: keep the web honest, but make it feel lovely.