Handlebars

Moderne webapplicaties zijn zeer dynamisch: informatie verandert ‘live’ en de verwachtingen op het gebied van gebruikersgemak zijn hoog. Het gevolg daarvan is dat de browser de gepresenteerde gegevens voortdurend moet bijwerken. In dit artikel beschrijven we een populaire techniek waarmee dat kan worden gedaan: HandlebarsModerne webapplicaties zijn zeer dynamisch: informatie verandert ‘live’ en de verwachtingen op het gebied van gebruikersgemak zijn hoog. Het gevolg daarvan is dat de browser de gepresenteerde gegevens voortdurend moet bijwerken. In dit artikel beschrijven we een populaire techniek waarmee dat kan worden gedaan: Handlebars. verder lezen.

Allereerst wat achtergrond: binnen de softwareontwikkeling is het goed gebruik om scheiding te maken tussen onder andere de logica van een applicatie en de presentatie hiervan. Zo blijft code leesbaar en onderhoudbaar. De presentatie van gegevens wordt gedaan via templates. In deze templates worden gegevens uit de database omgezet naar leesbare en netjes gepresenteerde informatie.

Voor de presentatie van deze templates worden zogenoemde ‘templating engines’ in gezet. Deze hulpprogramma’s bieden de developer mogelijkheden om de templates op een gestructureerde manier op te bouwen. Het is bijvoorbeeld mogelijk om templates op te verdelen in subtemplates welke vervolgens op verschillende plekken kunnen worden hergebruikt.

Wat is Handlebars?

Handlebars is een populaire templating engine voor het opbouwen van dynamische HTML-templates. In een Handlebars template wordt de structuur beschreven waarin informatie moet worden getoond. Via semantische tags wordt aangegeven waar dynamische content geplaatst moet worden en op welke manier deze content moet worden weergegeven. De programmeur beschrijft dus in het Handlebars-template op welke manier informatie moet worden getoond.

Bij de presentatie van gegevens wordt de data via Handlebars verwerkt tot HTML-code die in de browser kan worden weergegeven. In tegenstelling tot sommige andere templating engines, wordt dit compleet door de browser van de bezoeker uitgevoerd: Handlebars-templates worden binnen de browser via JavascriptJavaScript is een scripttaal om webpagina's interactief te maken en webapplicaties te ontwikkelen. verder lezen verwerkt. Dit zorgt ervoor dat de server waarop het systeem draait bijna niet belast wordt. Maar ook bij de gebruiker zorgt het voor een veel hogere snelheid en responsiviteit van de applicatie. Semantiek

Uitgangspunt van Handlebars is om templates op een semantische manier op te stellen. Semantisch betekent in dit geval dat de programmeur aan de hand van de benaming van elementen kan zien wat voor soort content dat element representeert. Dit maakt de gehele structuur zeer overzichtelijk en makkelijk te beheren of over te dragen.

Voor ontwikkelaars en vormgevers is het daardoor ook fijn om mee te werken, omdat de stukken van templates duidelijk weergeven wat waar getoond gaat worden. Het is efficiënt omdat behapbare kleine stukjes template gemaakt kunnen worden welke op verschillende plekken hergebruikt kunnen worden, zoals informatieboxjes of tabellen.

Handlebars voor techies: wat kun je ermee?

Handlebars geneert HTML door het template te parsen op basis van JSON-data. Placeholder-tags worden daarbij vervangen door datavalues. Handlebars is in wezen een uitbreiding op Mustache, en de Mustache-annotatie wordt nog steeds gebruikt. Je geeft dus in je Handlebars-template via Mustache tags aan waar de gegevens uit het gekoppelde systeem moeten worden geïnjecteerd.

Handlebars zelf bevat minimale logica. Dat dwingt de Handlebars ontwikkelaar om alle algoritmes in de controller-laag uit te voeren, waarmee Handlebars een bijdrage levert aan de structuur van de applicatie. Het resultaat is schone en leesbare HTML. De functionaliteit van Handlebars kan worden uitgebreid via zogenoemde helper-functies. Helper-functies zijn onder meer bedoeld om door het systeem aangeleverde technische data te transformeren naar een voor de eindgebruiker geschikte visuele weergave. In zo’n helper wordt specifieke presentatielogica verwerkt. Doordat de helper zelf een semantische benaming krijgt, blijven de Handlebars-templates zelf nog steeds een semantisch duidelijk leesbaar.

Een voorbeeld hiervan is het binnenkrijgen van een timestamp (een hoog nummer met een aantal verlopen seconden, sinds 1 jan 1970). De gebruiker heeft niets aan zo’n nummer en een helperfunctie zou van zo’n timestamp als output iets kunnen maken als “Zondag 20 mei 2018”, maar hetzelfde geven zou ook verwerkt kunnen worden naar “2 dagen en 6 uur geleden”.

Helpers voor logische structuren

Via de helpers is er support voor “als-dan” structuren, bedoeld om gegevens conditioneel weer te geven. De front-end ontwikkelaarEen front-end developer zet een design over naar een werkbare applicatie, website of ander stuk software. verder lezen kan daarmee op eenvoudige wijze aangeven dat een ander onderdeel getoond moet worden wanneer een veld bijvoorbeeld leeg is, of rood indien deze een negatieve waarde bevat.

Daarnaast is het mogelijk om door grotere datasets heen te lopen. Wanneer er een hele collectie gegevens wordt doorgegeven, dan kan er met een each-functie door de data heen worden gelopen zodat voor elk resultaat een stukje HTML wordt gegenereerd.

Voorbeeldcode

Omdat een voorbeeld meer zegt dan 600 woorden, volgt hier een klein stukje code. We beginnen met een Handlebars-template waarin een lijst met contactpersonen wordt gepresenteerd: <div> {{#EACH CONTACTS}} {{> CONTACTPERSON}} {{/EACH}} </div>

Zoals je kunt zien wordt in bovenstaand template een iterater-helper gebruikt om door een dataset heen te lopen. Om voor elke entiteit daadwerkelijk gegevens te tonen wordt een subtemplate gehanteerd met daarin de volgende code:

Bovenstaand subtemplate bevat helper-functies welke bijvoorbeeld de geboortedatum omzetten naar een leeftijd, en op basis van een timestamp weergeeft wanneer de gegevens voor het laatst gewijzigd zijn.

Dan de data: stel dat de volgende JSON-data zou worden aangeleverd door het back-end systeem:

Op basis van deze data zou er via de Handlebars-templates HTML gegenereerd worden met daarin een complete lijst met namen, wijzigingen en foto’s:

Conclusie

Handlebars is uitermate geschikt voor presentatie van door het systeem aangeleverde gegevens, waarbij nieuwe data of wijzigingen elegant en eenvoudig kunnen worden verwerkt tijdens de interactie. Door uitsluiting van functies voor dataverwerking of opslag van gegevens wordt met deze templating engine de structuur van de applicatie bewaakt. Het resultaat? Leesbare en goed onderhoudbare code!