Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up

Handlebars.js – Die Semantische Template Library

Handlebars.js ist eine Template-Engine für JavaScript. Sie ermöglicht dem Entwickler, mit Hilfe von semantischen Templates Business-Logik und HTML zu trennen. Somit ist es nicht von Nöten, HTML-Code per JavaScript zu generieren. Ein großer Vorteil hierbei ist die Übersichtlichkeit durch das Auslagern des JavaScript- und Handlebars-Codes in eigene .js-Dateien. Die durch Handlebars geschaffene Struktur sorgt für einen verständlichen Code und erleichtert somit die Wartbarkeit.
Ein weiterer Vorteil ist es, dass Templates nicht bei jeder erneuten Verwendung neu kompiliert werden müssen. Gerade in der mobilen Nutzung ist dies ein essentieller Performance-Gewinn.

Wann empfiehlt es sich, Handlebars.js zu verwenden?

Es empfiehlt sich, Handlebars zu verwenden, wenn Seiteninhalte während eines Aufrufes öfters aktualisiert werden (z.B. durch Filterung oder Sortierung), denn hierbei müssen die DOM-Elemente nicht jedesmal im JavaScript-Code neu generiert und eingehängt werden, sondern es werden nur entsprechende Templates gerendert. Würde man all dies von JavaScript aus steuern, müsste man jedes DOM-Element z.B. per createElement()-Methode erstellen und per appendChild()-Methode oder innerHTML-Property einzeln erstellen und einhängen.
Man sollte jedoch die Notwendigkeit einer solchen Library überprüfen, denn bei einfachen Webseiten ohne viel Logik würde Handlebars zu viel Overhead produzieren.

Anwendung

Handlebars bietet neben dem Verwenden von Platzhaltern verschiedene Helper-Functions an, wie zum Beispiel if-Abfragen, foreach-Schleifen und Block Parameters. Um Handlebars anzusprechen, werden jegliche Statements und Variablen in doppelt geschweiften Klammern geschrieben. Der Zugriff auf Funktionen erfolgt jeweils mit einem „#“ und endet mit einem „/“ vor der Anweisung.

Im folgenden Code wird geprüft, ob die Property „items“ des JSON-Objekts „news“ Einträge enthält. Ist dies der Fall wird das entsprechende Template „news-table-template“ an dieser Stelle aufgerufen. Als Parameter wird dem Template das „news“-Objekt mit übergeben.

Handlebars.js – Semantische Template Library-1
Abbildung 1: news-template

Im Template für die News-Tabelle wird nun bis auf den <tbody> die Tabelle vorbereitet.
Die einzelnen Row‘s werden in einer foreach-Schleife erstellt, die durch „news.items“ iteriert. Für jedes Element in diesem Array wird ein <tr>-Tag erstellt und dessen <td>-Tags mit den entsprechenden Informationen befüllt.

Handlebars.js – Semantische Template Library 2
Abbildung 2: news-table-template

Im folgenden JavaScript-Code wird nun zuerst das Template compiliert damit es ab sofort zur Verfügung steht. Anschließend wird mit dem vorhandenen Objekt „renderTemplate“ das Template erstellt und in den <div> mit der ID „content-body“ eingehängt. Dieser JavaScript-Code muss in die Seite per <script>-Tag eingebunden werden.

Handlebars.js – Semantische Template Library 3
Abbildung 3: renderNewsTemplate.js

Worin genau besteht in diesem Fall der Vorteil?

Hierbei wird die Logik einer if-Abfrage und einer foreach-Schleife verwendet, um dynamisch eine Tabelle zu erstellen und diese im HTML zu rendern. Trotz dieser Logik müssen dank Handlebars.js keine HTML-Tags im JavaScript-Code erstellt werden und ebenso wird kein inline-JavaScript im HTML ausgeführt. Somit wird die Logik vom Markup getrennt und es entsteht ein übersichtlicher, gut wartbarer Code.
Zudem bringt Handlebars.js neben den oben genannten Helpern noch viele weitere Build-In Helpers mit sich, jedoch besteht auch die Möglichkeit, selbst solche Helper-Funktionen zu implementieren, welche dann im HTML aufgerufen werden können.
Eine Übersicht über alle Build-In Helpers findet man auf folgender Seite: http://handlebarsjs.com

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 19.08.16

Braucht man wirklich jQuery?

Ich beleuchte diese Frage anhand von Beispielen aus der Praxis und hinterfrage, ob in der modernen Browserlandschaft auch natives JavaScript ausreicht.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 23.02.15

Warum ist Inline-CSS und JavaScript-Code so schlecht?

Warum der Einsatz von Inline-CSS bzw. JavaScript-Code schlecht ist, da Dinge wie Caching, DRY-Prinzip, Wartbarkeit und Media-Queries gänzlich außer Acht gelassen werden.

Close up of female hands while typing on laptop
Blog 20.11.18

SharePoint Framework Client-Side Webparts mit React

React ist ein Framework zum Erstellen von Benutzeroberflächen. In der SharePoint Online Entwicklung bietet es sich für die Entwicklung von Client-Side Webparts an.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 12.06.18

Spaltenformatierung in SharePoint: Column formatting vs. JS

Eine Gegenüberstellung der Spaltenformatierung von JSLink zu der neueren Methode Column formating in Office 365.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 28.05.18

Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 20.12.18

Ich bin im Flow! – Eine Übersicht zu Microsoft Flow

Die Power Platform wird aktuell von Microsoft sehr stark gepusht. Zeit, sich mit dem Potenzial der einzelnen Komponenten zu beschäftigen. Heute: Flow.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 15.10.19

GraphQL – Die Alternative zu REST

GraphQL ist eine Abfragesprache für APIs zur Ausführung von Abfragen mit Hilfe eines für die Daten definierten Typensystems. In dieser kleinen Blog-Serie schauen wir uns einfache Queries und Mutations an.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 30.10.19

Testen von Angular Anwendungen mit Cypress

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt werden.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 05.07.16

Xamarin – plattformübergreifende App-Entwicklung

Xamarin ist eine übergreifende Entwicklungsplattform, die die Welten zusammenführt und die bislang erforderliche Mehrarbeit weitgehend überflüssig macht.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 09.05.19

Teams Extensions – Erstellen von Erweiterungen für Teams

Mit der Entwicklung von Extensions kann Teams einfach erweitert werden. Hierfür gibt es das App Studio, welches über den Teams Store installiert werden kann.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 27.11.18

Tipps und Tricks mit Entity Framework

In diesem Blogbeitrag möchte ich einige Tipps und Tricks rund um Entity Framework mit euch teilen. In allen Beispielen gehen wir vom Code-First Ansatz aus.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Referenz

Siemens AG: SharePoint statt Excel bei komplexen Formularen

Siemens ersetzt komplexe Excel-Tabellen für die Verwaltung und Auswertung der Projekt- und Arbeitsstunden durch intuitive SharePoint-Anwendung – für mehr Übersicht und einfache Bedienung.

Close up of female hands while typing on laptop
Blog 24.09.18

Grundlagen der Gestaltung

Die Gestaltgesetze der Wahrnehmungspsychologie

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 13.03.17

Corporate News – Das zentrale Medium interner Kommunikation

Um die Akzeptanz des unternehmenseigenen Intranets zu steigern, sind Corporate News ein erster Schritt, um Neuigkeiten, Strategie und Strukturen gleichmäßig zu kommunizieren.

Close up shot of female hands typing on laptop
Blog 15.05.17

SharePoint vs. TYPO3 – Sechs Gründe für SharePoint-Intranet

Hier lesen Sie die sechs wichtigsten Argumente, warum Sie Office 365 mit SharePoint für Ihre Intranetlösung gegenüber TYPO3 bevorzugen sollten.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 14.06.16

Was kann der neue Office 365 Planner – und was kann er nicht

„Office 365 Planner“ ist das neue Tool von Microsoft, mit dem sich Zusammenarbeit und Aufgabenverteilung in Teams organisieren lässt. Was kann der neue Office 365 Planner – und was kann er nicht

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 14.02.16

Fünf Tipps für mehr SharePoint-Adoption in Unternehmen

SharePoint ist eine vielseitige und mächtige technologische Plattform mit vielen Funktionen. Unseren fünf Expertentipps erhöhen die Adoption.

Close up of female hands while typing on laptop
Blog 08.11.16

Was ist Application Lifecycle Management (ALM)?

Application Lifecycle Management beschreibt einen ganzheitlichen Ansatz, der eine Anwendung während allen Phasen der Software begleitet.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 10.02.16

Produktiver lernen mit SharePoint

Bringt die aktuelle Version der SharePoint-Plattform so viele neue Features mit, es zu einem perfekten Learning Management System zu machen? Wir beleuchten es.

Zwei Frauen schauen gemeinsam auf einen Bildschirm
Blog 08.07.15

Change Management in IT-Projekten

Viele IT-Projekte scheitern am Zusammenspiel verschiedener Faktoren, wie unklare Ziele, ungenügende Ressourcen, schlechte Kommunikation und fehlende User-Akzeptanz.