Just a Button? Spoiler: No.

Zero milliseconds: a finger

It starts with almost nothing. Under a mouse button, a small metal dome collapses and closes a circuit. On a phone, your finger changes the electric field over a grid of tiny capacitors, and a controller works out where it landed. Either way, a few hundred times a second something is asking: has anything changed? This time the answer is yes.

The operating system turns that answer into an event. The browser receives it, checks which element sits under the pointer, waits for the press to be released over the same element, and only then decides that this was a click. Several layers of software, written by people who never met each other, have just agreed on what you meant.

A secret with a stranger

Now the browser has something to say to a server it has never seen, over networks it does not own, owned by companies it cannot trust. And yet nobody along the way will be able to read it.

When this page opened, your browser and our server agreed on a shared secret key in plain sight. They exchanged numbers anyone could copy, did some arithmetic on an elliptic curve, and each ended up with the same key, while anyone listening ended up with nothing useful. The server proved who it is with a certificate signed by an authority your device already trusts. All of that took a fraction of a second and happened before you scrolled down. The click rides inside that envelope.

Light in glass

The request leaves as radio waves to your router, then as electricity, and very soon as light. Inside an optical fiber the bytes become pulses travelling at about two thirds of the speed of light, roughly 200,000 kilometres every second.

Our server stands in Helsinki. From Kyiv the light needs around seven milliseconds to get there. From New York it dives into a cable on the floor of the Atlantic and arrives in roughly forty. On the way it passes through a dozen or more routers, and none of them knows the whole route. Each one only knows which neighbour is a little closer to the destination. Tens of thousands of independent networks keep telling each other which addresses they can reach, and out of that constant conversation, with nobody in charge, a path appears.

Helsinki

In a data centre in Finland, the packets meet nginx, which hands the request to a PHP process that has been awake and waiting: a long-lived Swoole worker, with the framework already in memory. Nothing boots for this click. It is simply heard.

The click does not arrive as "POST to some URL". It arrives as an event addressed to a component: the button say of this instance was clicked. When the page was drawn, the server signed what this particular button is allowed to do, so it checks the signature before anything else. Then it finds the one class bound to that event and calls it.

That class looks up which country your address belongs to, in a database that sits on the same machine. The address is forgotten right there; only the country is kept. Then a row of a few dozen bytes goes to MySQL, which writes it to disk and makes sure it would survive a power cut before it says "done".

Back to everyone

This is where a click stops being private. The handler publishes one short word: site_hellos. Every page that shows the list of hellos, in any browser, in any country, is holding a single open stream to the server and listening for that word.

For each of them the server runs the list again, notices that exactly one row is new, and sends only that row. Back through the workers, the routers, the cables under the sea, the radio in someone's living room. A table in Tokyo, in Lisbon, in Lviv, grows by one line, with your flag in it. Usually in well under a second, and usually nobody thinks about it at all.

Light, mathematics, agreements between strangers, a disk that promises to remember and a stream that never closes. All of it, for one hello.

What that button is in Semitexa

Here is the part that still makes me smile: in Semitexa, the framework this site runs on, the button at the end of this page is not wired to anything by hand. There is no JavaScript written for it and no route of its own. It is a component: a class that declares its parts, and a template.

#[AsComponent(name: 'site-hello-button',
    template: '@project-layouts-semitexa-site/components/hello-button.html.twig')]
#[UiPart(name: 'say', uses: ButtonPrimitive::class)]
final class HelloButtonComponent
{
}

The click is a server event. One class says which (component, part, event) it handles, and that is the whole binding:

#[AsService]
#[HandlesUiEvent(component: HelloButtonComponent::class, part: 'say', event: 'click')]
final class SayHelloHandler implements UiEventHandlerInterface
{
    public function handle(object $payload, UiEventContext $context): UiEventResponse
    {
        // Rate limits left out here for brevity.
        $country = $this->countries->lookup(self::clientIp());
        $this->hellos->say($country['code'] ?? '', $country['name'] ?? '');
        $this->invalidator->touch('site_hellos');

        return UiEventResponse::ok();
    }
}

The table is not a table that fetches data. It is a subscription to a feed that watches that scope, so the touch() above is what wakes every open copy of it:

#[AsPublicPayload(path: '/_feed/hello', name: 'site.hello.feed',
    responseWith: HelloCollectionResponse::class, transport: TransportType::Sse)]
#[WatchScopes('site_hellos')]
final class HelloFeedPayload implements SseCollectionFeedPayloadInterface

And on the page, the whole thing is two lines:

{{ component('site-hello-button') }}
{% include '@platform-ui/components/runtime/grid-v2.html.twig' with { endpoint: '/_feed/hello' } only %}

Signing what the button may do, carrying the click to the server, finding its handler, keeping one stream per page, re-running every open view, diffing it and sending only the rows that moved, across every worker: that is the framework's job, not yours. The live data grid article takes the grid side apart frame by frame.