6: Async

Maak stemmen nu direct. Phlo's frontend runtime onderschept formulieren en links die gemarkeerd zijn met async, plaatst ze op de achtergrond en past de DOM-opdrachten van de server toe op de pagina. Geen herlaadbeurt, geen client-side status, geen API-laag: dezelfde route beantwoordt beide werelden.

6.1: Schakel in op de frontend

Voeg twee resources toe aan data/app.json:

{
    "resources": [
        "DB/DB",
        "DB/model",
        "DB/JSONDB",
        "DB/JSON.result",
        "payload",
        "phlo.async",
        "DOM/form"
    ]
}

phlo.async is de async request engine in www/app.js (die view() al op elke pagina omvat), en DOM/form leert het om formulieren in te dienen. Herbouwen:

php www/app.php build::run

De output vermeldt *app.js: de frontend bundle is opnieuw gegenereerd.

6.2: Routes hebben een sync-kant en een async-kant

Elke route is alleen sync, tenzij je anders aangeeft:

• geen modifier: reguliere HTTP-verzoeken alleen
• async: verzoeken van de Phlo frontend alleen
• both: beide

Verander de stemroute om beide te bedienen en tak op het verzoektype:

route both POST poll vote $id {
    if (!$option = type_poll::record(id: (int)$id)) return false
    type_poll::change('id=?', (int)$id, votes: $option->votes + 1)
    if (%req->async) return apply(
        outer: ['#results' => $this->results],
    )
    location('/poll')
}

%req->async is waar wanneer de Phlo frontend de oproep heeft gedaan. Async verzoeken krijgen een apply(...) antwoord; gewone browsers krijgen nog steeds de omleiding. Eén route, twee transporten, nul duplicatie.

Let op de afsluitende komma binnen apply(...): in Phlo eindigt elke regel van een meerregelige argumentlijst met een komma, inclusief de laatste. Die komma is wat de parser vertelt dat de verklaring doorgaat.

6.3: Mark het formulier als async

De frontend onderschept alleen elementen met de async klasse. Eén teken in de choices view:

view choices:
<section.card>
<foreach type_poll::records() AS $option>
    <form.async method=post action="/poll/vote/$option->id">
        <button>$option->option</button>
    </form>
</foreach>
</section>

<form.async ...> is de puntafkorting voor class="async". Hetzelfde geldt voor navigatie: <a.async href="/poll"> laadt een pagina via de async pipeline met een view-overgang in plaats van een volledige herlaad.

Herlaad http://localhost/poll eenmaal (om de nieuwe markup op te halen), en stem dan. De balk animeert naar zijn nieuwe breedte, de tellingen worden bijgewerkt, en de pagina herlaadt nooit. De transition: width .4s uit hoofdstuk 4 zorgt voor de easing.

6.4: Wat apply() daadwerkelijk verzendt

apply() retourneert JSON-commando's die de frontend uitvoert tegen de DOM. Kijk hoe het gebeurt:

curl -s -X POST -H "X-Requested-With: phlo" http://localhost/poll/vote/1

{"outer": {"#results": "<section id=\"results\" class=\"card\">..."}}

outer vervangt de outerHTML van het element; de server heeft de results view gerenderd en deze als een string verzonden. Andere commando's werken op dezelfde manier: inner, append, remove, class, value, title, path, scroll, en meer, allemaal benoemde argumenten voor één apply() aanroep. Er is geen controle op de naam van de commando's tijdens de build-tijd, dus een typfout zoals innr: wordt stilletjes genegeerd; houd de commando-tabel uit de gids bij de hand.

Stem vanuit twee verschillende browser-tabbladen en je zult de laatste kloof opmerken: het andere tabblad beweegt niet totdat je het opnieuw laadt. Houd die gedachte vast voor hoofdstuk 8. Eerst: meer talen.