Dynamische content met Handlebars

Dynamische content met Handlebars

1291 woorden

Hoe kan je willekeurige inhoud tonen en toch caching gebruiken? In dit artikel leg ik uit hoe ik Handlebars heb gebruikt in WordPress met Varnish caching.

← terug

Een snellere website door caching

Iedereen wil een snelle website.

Een manier om dat te bereiken is door de volledige pagina op te slaan als tijdelijk bestand, zodat deze niet voor elk bezoek opnieuw door de server moet worden opgebouwd. Het opnieuw opbouwen van een pagina kost een server rekenkracht; dit zorgt voor vertraging. Met een goede cache methode zoals Varnish kan je dit omzeilen.

Eenvoudige weergave van pagina caching
Een versimpelde flowchart van pagina caching.

Deze volledige pagina caching werkt als volgt:

  1. Gebruiker vraagt een pagina op;

  2. Webserver verzamelt benodigde bestanden;

  3. Eventueel wordt informatie uit een database (zoals MySQL of MongoDB) opgehaald en teruggestuurd naar de webserver;

  4. Eventueel worden bepaalde dynamische componenten door een scripting taal op de webserver afgehandeld (zoals PHP of Ruby)

  5. De samengestelde pagina wordt volledig opgeslagen als een tijdelijk bestand op de webserver;

  6. De tijdelijke pagina wordt teruggestuurd naar de browser van de gebruiker;

  7. Een nieuwe bezoeker slaat stap 3, 4 en 5 over en gaat direct naar stap 6;

  8. Als de pagina cache wordt leeggemaakt (of verloopt), door bijvoorbeeld het toevoegen van een nieuwe pagina in het CMS, begint dit proces weer vanaf stap 1;

Bij het gebruik van deze ‘volledige pagina caching’ krijgen alle bezoekers dezelfde inhoud voorgeschoteld net zolang totdat de cache wordt leeggemaakt.

Dit kan bijvoorbeeld een probleem opleveren voor:

  • Advertenties
  • Een willekeurige selectie van referenties
  • Weergeven van actuele openingstijden

Video uitleg van Varnish

Varnish software heeft een video uitleg gemaakt over de voordelen van caching.

Een promotie video van Varnish softwareBekijk video op YouTube
Promotie video van Varnish.

Gelukkig zijn er manieren om toch dynamische content voor verschillende bezoekers te tonen zonder de voordelen van pagina caching achterwege te laten.

In deze korte explainer leg ik uit hoe.


Aan de slag

In dit artikel ga ik er vanuit dat je bekend bent met WordPress of PHP, HTML en JavaScript. Ik gebruik Handlebars om met JavaScript een gedeelte van een pagina te kunnen opbouwen. Dit is een manier om onafhankelijk van de pagina die uit de cache komt toch wisselende inhoud te tonen.

We doorlopen deze stappen:

  1. Download Handlebars
  2. Kopieer en link het bestand in je project
  3. Maak een Handlebars template aan
  4. Haal de data op die gebruikt moet worden
  5. Bewerk de data (optioneel)
  6. Toon resultaat in de pagina

1. Download Handlebars

Via handlebarsjs.com download je het benodigde javascript. Of installeer het met Bower: bower install handlebars --save.

Voeg deze bestanden toe aan je <head>.

<!-- Handlebars script -->
<script src="<?php bloginfo('template_url'); ?>/js/handlebars.js"></script>

<!-- Main javascript file -->
<script src="<?php bloginfo('template_url'); ?>/js/app.js"></script>

3. Maak een Handlebars template aan

In de HTML code van je pagina moet je een mini-template maken die wordt ingeladen door Handlebars. De template gebruikt moustache syntax, een taal die {} gebruikt voor notatie. (draai je hoofd en het is een snor 😛).

<script id="posts-template" type="text/x-handlebars-template">
  <ul>
    {{#post}}
    <li>
      <a href="{{link}}">{{title}}</a>
    </li>
    {{/post}}
  </ul>
</script>

<div id="posts-output"></div>

4. Haal de data op die gebruikt moet worden

Met een stuk PHP code haal ik in dit voorbeeld de laatste berichten op van een WordPress website. De PHP array wordt omgezet naar een JSON formaat.

<?php

// Get 6 posts
$args = array(
  'numberposts' => '6'
);

// Get recent posts with WordPress helper
$recent_posts = wp_get_recent_posts($args);

// Prepare results array
$posts = array();

foreach($recent_posts as $key => $recent) {

  // Create post array
  $post = array(
    'title' => $recent['title'],
    'link'  => get_permalink($recent['ID'])
  );
  // Add post to result array
  $posts[] = $post;
}

// Convert PHP array to JSON object
$json = json_encode($posts);
?>
<script>
  // Set PHP output as JavaScript variable
  var postsJson = <?php echo $json; ?>;
</script>

5. Bewerk de data (optioneel)

We hebben nu de gegevens van de berichten in JavaScript staan. Hier kunnen we bewerkingen op doen zoals de volgorde willekeurig maken of het aantal items beperken.

Voorbeeld: beperk aantal items

var maxSize = 4;

postsJson = postsJson.splice(0,maxSize);

Voorbeeld: willekeurige volgorde

// From: http://stackoverflow.com/a/3718452
function shuffle(sourceArray) {
  for (var i = 0; i < sourceArray.length - 1; i++) {
    var j = i + Math.floor(Math.random() * (sourceArray.length - i));

    var temp = sourceArray[j];
    sourceArray[j] = sourceArray[i];
    sourceArray[i] = temp;
  }
  return sourceArray;
}

// Shuffle JSON
postsJson = shuffle(postsJson);

6. Toon resultaat in de pagina

Vervolgens kan Handlebars worden aangeroepen om de gegevens te verwerken in de template. Je moet hiervoor aangeven waar in de pagina de template moeten worden getoond.

// Import post template
var source   = $("#posts-template").html();

// Create Handlebars template from source
var template = Handlebars.compile(source);

// Render data in template
var rendered = template({posts:postsJson});

// Show output
$("#posts-output").html(rendered);

Klaar!

Dat was het. Je hebt nu een stuk HTML code dat wordt gegenereerd door JavaScript dat prima gecached kan worden.

Het resultaat zal er ongeveer zo uit zien:

<ul>
  <li><a href="http://website.nl/post1">Bericht 1</a></li>
  <li><a href="http://website.nl/post2">Bericht 2</a></li>
  <li><a href="http://website.nl/post3">Bericht 3</a></li>
  <li><a href="http://website.nl/post4">Bericht 4</a></li>
  <li><a href="http://website.nl/post5">Bericht 5</a></li>
  <li><a href="http://website.nl/post6">Bericht 6</a></li>
</ul>

Tip: Vaak zorg ik dat er in de template ook nog een stuk statische code staat dat kan worden opgepikt door zoekmachines. Code die door JavaScript wordt gegenereerd, wordt (op dit moment nog) minder goed geindexeerd.

Ik gebruik dit op het WordPress platform van Savvii voor onder andere de volgende websites: tmi.investments, en r2b.nl. Bekijk de broncode van die websites voor uitgebreidere voorbeelden.


Mocht je nog vragen hebben over Handlebars, of correcties op het artikel hebben laat me het weten in de reacties!

Rutger Laurman
~ webontwikkelaar en adviseur

Freelance front-end webontwikkelaar met voorliefde voor gebruiksvriendelijkheid en interfaceontwerp. Samen met freelancers en internet bureau's uit regio Utrecht maak ik al meer dan 15 jaar websites en webapplicaties.