Für Applikationen oder Websites ist es oft sinnvoll bei Bedarf einzelne Inhalte oder Seiten mit Ajax zu laden. Im besten Fall spiegelt sich die Veränderung in der URL wider und das Ergebnis ist somit verlink- und teilbar. Senna bringt dies und noch weiter Features mit sich.
Senna einbinden und die Grundstruktur schaffen
Um eine Single-Page-Website mit Senna zu bauen ist folgende Struktur nötig:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Seitentitel</title>
<!-- Senna: -->
<script src="../js/senna.js"></script>
</head>
<body>
<a href="/pages/page1.html">Seite 1</a>
<a href="/pages/page2.html">Seite 2</a>
<!-- Container für dynamische Inhale: -->
<div id="content">
<div id="content-default">
<!-- Inhalt der als Standard angezeigt wird -->
</div>
</div>
<script>
/* Senna Config: */
var app = new senna.App();
app.setBasePath('/pages/');
app.addSurfaces('content');
app.addRoutes([
new senna.Route('page1.html', senna.HtmlScreen),
new senna.Route('page2.html', senna.HtmlScreen)
]);
</script>
</body>
</html>Die verlinkten Dokumente page1.html und page2.html beinhalten lediglich das HTML, welches wir in den Container mit der ID content geladen bekommen möchten. Nachdem eine neue Instanz von Senna angelegt wurde, bestimmen wir lediglich für diese Instanz das Root-Verzeichnis für die Inhalte, in welchen Container diese geladen werden sollen und setzten zum Abschluss das Rooting.
Weiter Features
Durch Nutzung der History API und Konfiguration der Routen spiegelt sich die neu geladen Inhalte in der URL wieder. Außerdem bringt Senna eine optionale CSS-Datei mit Loading-Animationen mit. Aus technischer Sicht erleichtern die Möglichkeiten Inhalte per Senna performant zu cachen und viele weiter kleine Features die Arbeit. Mit grade einmal 8KB ist Senna zudem sehr schlank.