Neuigkeiten zur Scrivito Example App

Unsere Example App hat im Verlauf der Entstehung von Scrivito eine ganz entscheidende Rolle gespielt, nicht nur für unsere Kunden, sondern auch für uns als Entwickler. Mit ihr wollten und konnten wir zeigen, was alles möglich ist, wenn man eine auf Scrivito basierende App programmiert. Die meisten unserer Kunden verwenden sie als Grundlage ihrer Website. Wir selbst nutzen die Example App konsequent, um neue Features zu testen. Gleichzeitig dient sie uns als Richtschnur bei der Erstellung von Tutorials und der Beantwortung von Support-Anfragen.

Wir entwickeln die Example App kontinuierlich weiter. Wenn Sie vor einiger Zeit Ihr Website-Projekt mit dieser App begonnen haben, könnte es also sein, dass Sie ein paar tolle Features noch gar nicht kennen. Damit Sie schnell auf den aktuellen Stand kommen können und nichts verpassen, haben wir hier für Sie das Wichtigste zusammengetragen.

Animiertes Image Widget

Da die Example App ohnehin auf JavaScript basiert, haben wir zum Image Widget die Option hinzugefügt, das ausgewählte Bild zu animieren. Redakteure können nun Bilder beispielsweise hereinschwenken lassen, sobald sie auf der Seite für den Besucher sichtbar werden. Da die Example App open source ist, können Entwickler nachvollziehen, wie wir die Animationen implementiert haben, und sie jederzeit ändern oder erweitern. Pull Request.

Generator für Page- und Widget-Klassen

Die Seiten- und Widget-Typen, die in einem Projekt zum Einsatz kommen, haben alle dieselbe Dateistruktur. Oft ist es für einen Entwickler am einfachsten, das Verzeichnis einer bestehenden Objekt- oder Widget-Klasse zu duplizieren, deren Bestandteile umzubenennen und zu bearbeiten. Bei einer neuen Klasse ohne Bezug zu einer vorhandenen macht Ihnen unser neuer Generator die Arbeit nun noch leichter. Dieses Kommandozeilen-Tool erzeugt das erforderliche Verzeichnis sowie die Dateien darin, die gleich mit sinnvollen Voreinstellungen ausgestattet werden. Dazu gibt es auch einen Artikel in der Dokumentation - damit Sie schneller loslegen und ans Ziel kommen können.

Vorausberechnung der Webseiten

Wie zufrieden Besucher mit einer Website sind, hängt ganz wesentlich davon ab, wie schnell die Seiten geladen werden. Je schneller, desto mehr Punkte gibt es aus diesem Grund auch von Suchmaschinen wie Google. Nun sind mit Scrivito gebaute Websites so genannte Single-Page-Apps, d.h. JavaScript-Anwendungen, die vollständig im Browser laufen. Die Seiten „auszurechnen“ kostet nicht nur Zeit, sondern stellte bis vor Kurzem für die Bots der meisten Suchmaschinen auch eine unüberwindbare Hürde dar, da sie mit JavaScript-Anwendungen nichts anfangen konnten. Aus dem letztgenannten Grund haben wir anfangs das von Netlify angebotene Prerendering genutzt, um wenigstens den Bots indizierbaren Content liefern zu können. Zu einer Verbesserung der Ladegeschwindigkeit für Besucher hat dieses Prerendering jedoch nicht geführt. Deshalb haben wir unsere eigene Lösung entwickelt, die beide Aspekte berücksichtigt. Kurz zusammengefasst: Unser Prerenderer nutzt eine Browser-Engine („headless“, d.h. ohne Anzeigemöglichkeit), um im Rahmen eines jeden Deployment-Vorgangs ein statisches Abbild der gesamten Website zu generieren – ohne dafür zusätzliche Infrastruktur zu benötigen. Sobald eine so erzeugte statische Seite geladen wird, sorgt spezielle Funktionalität von React dafür, dass ihr wieder die Dynamik eingehaucht wird, die man von modernen Webapplikationen gewohnt ist. Diese Prerendering-Technik haben wir auch in die Example App eingebaut. Sie ist nicht trivial, aber weitgehend transparent und beschert der App den beeindruckenden Lighthouse-SEO-Score, den wir uns für die Besucher Scrivito-basierter Websites gewünscht haben.

Geschwindigkeitsverbesserungen

Wie schnell Webseiten funktionsfähig werden, hängt nicht nur davon ab, wie zügig die ihr zugrundeliegende App in den Browser gelangt. Denn auch danach benötigt dieser noch Zeit, um beispielsweise die JavaScript-Funktionalität der App herzustellen und sie zu initialisieren. Je schneller die Example App nach und nach wurde, desto spürbarer wurde auch der Zeitanteil, den zusätzliche Schriften verbraucht haben, bis sie geladen und anzeigbar waren. Die Lösung hierfür war <code>font-display: swap</code>. Durch diesen „CSS-Trick“ verwendet der Browser erst einmal System-Fonts, bis die eigentlich vorgesehenen Schriften verfügbar sind. Punktuell geht es dabei nur um Sekundenbruchteile, die der Besucher nicht einmal wahrnimmt. Unsere Messungen haben allerdings ergeben, dass insgesamt die Font-Ersetzung die Dauer bis zum „first meaningful paint“ (der "Seite-ist-fertig-Eindruck") um bis zu 55 % reduziert.

Videos im Seitenkopf

Neben der oben erwähnten Animation des Image Widgets haben wir noch etwas für’s Auge in die Example App eingebaut: In den Seitenköpfen können jetzt nicht nur Bilder, sondern auch Videos als Hintergrund angezeigt werden. Die Header lassen sich individuell je Seite definieren, in drei Größen und unabhängig vom Seitentyp. Durch die neue Video-Option sind Redakteure nun noch flexibler in der Seitengestaltung. Ob und welche Bilder oder Videos - auch bezüglich ihrer jeweiligen Dateigröße - für bestimmte Seiten gut geeignet sind, überlassen wir natürlich gerne Ihren Redakteuren. Uns hat jedenfalls mixkit als Quelle hochwertiger Webseiten-Videos sehr gut gefallen.

Content Browser hilft bei der Auswahl

Mit dem Release des Scrivito SDKs 1.5.0 ist der Content Browser hinsichtlich der Filterung nach Objekttypen konfigurierbar geworden. Für Redakteure bedeutet dies, dass ihnen etwa bei der Auswahl eines Bildes für ein Image Widget nur Bilder angeboten werden. Das erweiterte API von configureContentBrowser wird genau hierfür in der Example App genutzt. Die verwendete Konfiguration lässt sich natürlich bei Bedarf flexibel anpassen, um beispielsweise Inhalte unterschiedlichen Typs auswählbar zu machen. Pull Request.

Zustimmung zur Nutzung von Cookies

Als ein in Deutschland ansässiges Unternehmen sind wir selbstverständlich an die Datenschutz-Grundverordnung (DSGVO) gebunden. Sie fordert unter anderem, dass Website-Besucher über personenbezogenes Tracking informiert werden müssen, also gegebenenfalls auch über den Gebrauch von Cookies. Da heute der Einsatz von Cookies Gang und Gäbe ist, haben wir die Example App mit einem hübschen und leicht zuschaltbaren Formular zur Zustimmung versehen. Um es zu aktivieren, brauchen Sie lediglich in den Homepage-Eigenschaften, Registerkarte „Site settings“, die Seite anzugeben, auf der Ihre Datenschutzbestimmungen zu finden sind. Pull Request.

Vereinfachte Definition der Content Security Policy

Eine durchdachte Content Security Policy trägt entscheidend dazu bei, Ihre Website gegen Angriffe abzusichern. Die Example App war von Anfang an mit einer CSP ausgestattet, deren Format jedoch so kryptisch war, wie der Browser es erwartete. Die betreffende Datei haben wir nun durch eine im JSON-Format ersetzt, wodurch die CSP leichter zu lesen ist und besser gepflegt werden kann. Dass Fehler in der CSP bisher erst nach dem Deployment zutage traten, empfanden wir auch als hinderlich, weshalb wir bei dieser Gelegenheit die CSP auch für die lokale Entwicklungsumgebung aktiviert haben. Ungereimtheiten in der Policy werden nun also bereits bei der Entwicklung sichtbar und können spontan beseitigt werden.

Interaktive Google Maps

Interessanterweise war unser Artikel zur Google-Maps-Einrichtung eine Weile lang die am häufigsten aufgerufene Seite in der Scrivito-Dokumentation. Dort und auf unserer Website insgesamt gibt es natürlich Spannenderes. Wir haben uns aber dennoch gefreut, weil wir offenbar unter den Ersten waren, die eine detaillierte Anleitung zur Nutzung des neuen Google-APIs hatten. Frühere Versionen des Google-Maps-Widgets waren auf die statische Darstellung des angegebenen Standorts beschränkt. Bei den interaktiven Maps in der aktuellen Version können Sie nun den Standort wechseln, Hotspots anzeigen lassen und vieles mehr. Pull Request.

100 % Lighthouse-SEO-Score

Mit Hilfe des oben bereits erwähnten von Google bereitgestellten Verfahrens lässt sich als ein Aspekt der SEO-Konformität die Geschwindigkeit beurteilen, mit der die Seiten einer Website „ready to use“ werden. Dass wir diesbezüglich alles gegeben haben, hatten wir ja schon geschrieben. Weshalb kommt die Example App unmittelbar nach der Installation dennoch nur auf 93 %? Das liegt daran, dass hohe Geschwindikeit nicht das einzige Kriterium ist, dem eine Website genügen muss, um nach Googles Maßstäben perfekt zu sein. Ein weiteres Kriterium ist die Seitenbeschreibung der Homepage, die wir leer lassen mussten. Wäre sie bei allen auf der Example App basierenden Websites identisch, würde Googles Maschinerie eine Form des Missbrauchs vermuten, und das wollten wir natürlich nicht. Nehmen Sie sich also bitte ein oder zwei Minuten und vergeben Sie in den Eigenschaften der Homepage, Registerkarte „Metadata“, eine „Page description“, die den Sinn und Zweck Ihrer Website kurz und knapp zusammenfasst. Danach dürfte der Lighthouse-SEO-Score Ihrer Site stark gegen 100 % tendieren...

SDK-Updates einspielen

Das Scrivito-SDK ist das Herz Ihrer Scrivito-basierten Web-Anwendung. Es pumpt kontinuierlich Ihre Inhalte in die besuchten Seiten und sorgt dafür, dass Änderungen durch Redakteure gespeichert und veröffentlicht werden, ohne dass es eines „Speichern“-Buttons bedarf. Dank NPM ist es kinderleicht, das SDK auf den neuesten Stand zu bringen, um von allen Verbesserungen und Aktualisierungen zu profitieren, die wir bei jedem Release vornehmen. Unser Entwickler-Team implementiert, testet und dokumentiert jedes Release gewissenhaft und stellt sicher, dass Scrivito und unsere Example App fehlerfrei funktionieren, damit Sie alle neuen Funktionen uneingeschränkt nutzen können.

Wir hoffen sehr, dass Ihnen unsere Updates gefallen und nützen! Über die vielen kleineren Verbesserungen wie etwa die klareren Konsolenausgaben oder das Space Widget konnten wir in diesem Rahmen zwar nicht berichten. Da jedoch die Example App open source ist, lassen sich alle Änderungen jederzeit anhand der Pull Requests nachvollziehen. Wenn Sie einen Feature- oder Verbesserungswunsch haben, dann lassen Sie es uns bitte wissen, und zögern Sie nicht, einen Pull Request zu stellen, wenn Sie etwas Interessantes für die Example App implementiert haben!