AJAX Design Pattern: Predictive Fetch

De pattern theorie is simpel, maar het toepassen kan moeilijk zijn. De AJAX applicatie probeert te raden wat de volgende actie van de gebruiker is en haalt alvast data daarvan op. De moeilijkheidsgraad hangt dus af van het bepalen van de actie.

Echter had ik vandaag een simpel case. Ik werk aan een applicatie voor een arbodienst. Hierbij moeten verzuimmanagers rapportages kunnen maken. De rapportage pagina bestaat uit twee delen. Eerste deel is de samenvatting en tweede deel is de actuele data van de situatie. De samenvatting bevat niet veel data in tegenstelling tot de verzuimdata. Daarom heb ik het in twee delen gesplits. Na de samenvatting staat namelijk een link "Laat data zien". In feite staat onder de samenvatting een div met display op "none" en GEEN data.

Traditionele web developers (no offence!) halen de data op na een request, met andere woorden de data wordt opgehaald zodra op de link wordt geklikt. Dit kan nog mooier, met een XMLHttpRequest, oftewel AJAX-stijl. (Geen usability of back/forward problemen!). Echter kan het soms ook enige tijd duren voordat de verzuimmanager de data daadwerkelijk ziet. Hier is een mooie oplossing voor, die iedereen kan gebruiken.

Namelijk met de Predictive Fetch pattern. Zoals het woord "predictive" al aangeeft, we proberen te raden wat de volgende actie zal zijn. In dit geval is dat niet moeilijk, er is maar een link op de pagina. De link van "Laat data zien". Het is hoogst WAARSCHIJNLIJK dat de verzuimdata gelezen zal worden. Maar hoe zit de pattern dan precies in elkaar?

Op de achtergrond probeert de pattern te raden welke data waarschijnlijk opgehaald zal worden. Na een timeout van enkele secondes, wordt de toekomstige data opgehaald. (Leuke naam voor de pattern trouwens, gezien "pre". Je zou het dus "Pre-dictive Fetch" kunnen noemen!) In mijn geval is de toekomstige data bekend, namelijk de verzuimdata.

Situatie: De body van de pagina wordt geladen en de verzuimmanager ziet de samenvatting. Er wordt nu een timeout aangemaakt van 6 secondes. De verzuimmanager kan de samenvatting lezen en de pagina verlaten. Gebeurt dit binnen zes secondes, dan wordt de verzuimdata NOOIT opgehaald. Na zes secondes wordt echter de data wel opgehaald. Deze wordt dan in de div gezet. De verzuimmanager heeft dit helemaal niet in de gaten, want hij is bezig met het lezen van de samenvatting. Dit gebeurt allemaal op de achtergrond. Zodra de user op de link klikt, ziet hij onmiddelijk de data. De div display wordt gezet op "block". Simpel he?
Maar als de gebruiker wel binnen zes secondes op de linkt klikt, dan wordt gewoon een XMLHttpRequest gemaakt.

Hier is mijn globale opzet:


In dit geval is het raden van de volgende gegevens niet moeilijk. Dit kun je ook gemakkelijk toepassen bij artikelen. Als een lezer langer dan 10 secondes op een pagina zit, is het waarschijnlijk dat hij ook pagina 2 zal lezen.
In andere situaties kan het moeilijker zijn. Wanneer je het niet weet, zou ik de pattern ook niet toepassen.
Grootste voordeel van deze pattern is de hoeveelheid dataverkeer. Danzkij die timeout kun je flinke onnodige traffic voorkomen.

Gelukkig is zijn er ook andere patterns voor AJAX, deze zijn hier te vinden.