Blog single

Headless TYPO3 : Was ist das und wie benutzt man es?

Headless TYPO3 CMS ist heute in aller Munde. Die Zukunft von CMS bewegt sich schnell weg von traditionellen CMS hin zu Headless CMS. Sind Sie aufgeregt über TYPO3 Headless CMS von Anfänger bis Mittelstufe Fähigkeiten zu kennen? Ich bin sicher, dieser Artikel wird Ihnen helfen.

TYPO3 Headless ist ein solcher Ansatz, der sich aufgrund seiner innovativen Fähigkeit, herausragende digitale Erlebnisse zu liefern, immer größerer Beliebtheit erfreut.

Kennen Sie das?Laut Contentstack wird die Adoptionsrate von Headless CMS erwartet
im nächsten Jahr zu verdoppeln.

Mit interaktiven und einzigartigen Frontend-Designs und schnell ladenden Websites. Mit dem Engagement von TYPO3 und seiner API-first Architektur können Inhalte überall genutzt und dargestellt werden.

Lesen Sie weiter, um mehr über TYPO3 Headless CMS zu erfahren. Glauben Sie mir, es ist interessant! Schnappen Sie sich eine Tasse Kaffee und lesen Sie weiter!

Was ist ein Headless CMS?

Wenn Sie eine Seite auf einer TYPO3-Site laden, führt der Server einen Code aus, der einen für das Frontend entwickelten Code erstellt. Dieses Dokument wird dann an Ihren Browser gesendet. Und so werden dann TYPO3 und Web-Apps, die auf die gleiche Weise funktionieren, als Server-seitige Apps bezeichnet.

Grundsätzlich ist ein Headless-Ansatz in unserer Multi-Device-Welt sehr wertvoll geworden. Headless Content Management bedeutet, dass das CMS ausschließlich für die Eingabe, Bearbeitung und Sortierung von Inhalten im Backend zuständig ist. Ein Headless-System sollte hochgradig zugänglich sein, und zwar unabhängig von der optischen Wirkung des Frontends.

Wie kommen also die Inhalte in einem Headless-System in die Welt hinaus? Nun, auf die Inhalte in der Datenbank wird über RESTful-API-Aufrufe zugegriffen. Das bedeutet, dass er überall dort angezeigt werden kann, wo er aufgerufen wird, ohne Vorlagen oder Plugins. Damit lässt sich eine herkömmliche browserbasierte Website oder fast alles andere im IoT erstellen.

Was also ist TYPO3 Headless?

Headless TYPO3 ist ein Ansatz zur Erstellung von TYPO3-Websites, bei dem TYPO3 als Backend Content Repository dient. Das Frontend ist in verschiedenen Technologien aufgebaut und kommuniziert mit TYPO3 über eine API.

Im Detail erklärt, kann man sagen, dass TYPO3 als Backend-System dient. Das Frontend, das der Client sieht, ist von TYPO3 getrennt. Daher kommt auch der Name "headless" - TYPO3 hat nicht mehr die oberste Schicht, also den Kopf ;), sondern stellt nur noch die APIs zur Verfügung, die das Frontend als Inhaltsquellen nutzt.

Was sind die Vorteile einer Adaption von TYPO3 Headless?

  • Mehr Konsumenten von Inhalten

Heutzutage kommunizieren Marken mit ihren Kunden nicht nur über ihre Websites, sondern über mehrere Kanäle. Ein CMS wird daher nicht nur verwendet, um Inhalte an Webbrowser zu senden. Es schiebt Inhalte an verschiedene andere Stellen. Neben der Bereitstellung von Inhalten für eine Frontend-Website kann Headless TYPO3 Inhalte über eine API bereitstellen, die von verschiedenen anderen Medien konsumiert werden, in denen die Marke präsent sein möchte:

  1. mobile applications
  2. IoT
  3. Kiosk-Displays
  4. etc.
  • Microsite-Manager

Manchmal muss ein Unternehmen mehrere Site-Varianten erstellen (z. B. eine für jede Marke, Veranstaltung, Promotion, Land). In einem solchen Fall kann es einfacher sein, eine Content Engine zu erstellen, die die Inhalte für alle Microsites liefert.

  • Bedarf an einer eleganten Benutzeroberfläche

TYPO3 ist eine erstaunliche Plattform für die Erstellung von Inhalten, Datenspeicherung usw., aber es ist in PHP geschrieben, das eine serverseitige Rendering-Engine ist. Mit Javascript können wir fantastische Interaktionen erstellen, die für Besucher einfach zu bedienen und schnell sind. Bibliotheken wie Angular, React oder Vue helfen Entwicklern, schnell komplizierte Frontend-Anwendungen zu erstellen.

  • Bessere Medienzustellung

Verbesserte Darstellung von Bildern, Videos oder Inhalten auf verschiedenen Bildschirmen!

  • Live Blogging

Aktualisieren Sie Geschichten in Echtzeit mit dem Write-Once-Publishing Anywhere-Konzept.

  • Multi-Site & mehrsprachiger Support

Unterstützt über 51+ internationale Sprachen.

  • Benutzerfreundliche Oberfläche

Die benutzerfreundlichste Open-Source-Oberfläche auf dem Markt.

  • Schnell & einfach

Lösen Sie Inhalte von der Weboberfläche, die perfekte Option für Nicht-Techniker.

  • Anpassungsfähig

Independence to scale at speed without affecting content or the design.

  • Frei & Open-Source

Völlig kostenlos, einfach, ohne Funktionseinschränkungen oder Lizenzen, für den persönlichen oder kommerziellen Gebrauch.

  • Live-Vorschau

Sehen Sie, wie Ihre Inhalte aussehen, bevor Sie sie veröffentlichen. Live. Während Sie sie erstellen

TYPO3 als kopfloses CMS

Headless TYPO3 ist eine Open-Source-Initiative zum Aufbau einer professionellen Publishing-Plattform auf Basis von TYPO3 und einem modernen JS-Technologie-Stack. Dieses Konzept wurde für Teams entwickelt, die Leistung, Flexibilität und Performance mit einem Write-Once-Publishing Anywhere Content-Storage-Mechanismus benötigen.
 

TYPO3 kann am besten als Headless CMS dienen. Sie fragen sich sicher, warum das so ist?

Der Grund dafür ist, dass TYPO3 Out-of-Box-Funktionalitäten hat, die die meisten der erforderlichen Website-Notwendigkeiten haben. Es ist eines der ausgereiftesten CMS und kann gut mit anderen fantastischen APIs zusammenarbeiten, um eine perfekte TYPO3 Headless Website zu erstellen.

Die TYPO3-Community arbeitet sehr intensiv daran, dass TYPO3 ein großartiges API-gesteuertes CMS wird. Im Jahr 2019 wurde eine "TYPO3 Headless Initiative" ins Leben gerufen. Ihr Ziel war es, die Entwicklungsanstrengungen zu koordinieren, um TYPO3 zu einem vollständig headless CMS zu machen.

Das ultimative Ziel von TYPO3 Headless ist es, eine Reihe von APIs vorzubereiten, die von TYPO3 an Ihre bevorzugten JavaScript-Frameworks wie ReactJs, VueJs, AngularJs, etc. übergeben werden.

Zum Zeitpunkt des Schreibens dieser Zeilen wurden enorme Fortschritte gemacht, die es TYPO3 ermöglichen, Inhalte über APIs zu liefern und zu empfangen.

Das ist alles, was wir über TYPO3 Headless CMS wissen. Schauen wir uns an, wie es in TYPO3 funktioniert.

Wie man TYPO3 als Headless CMS einsetzt: Ein Beispiel

TYPO3 war der Zeit voraus und vielen Dank an Macopedia für das Sponsoring und die Mitarbeit bei der TYPO3 Headless Initiative.

Grundsätzlich ist es möglich, das Headless-Konzept für die TYPO3-Website zu nutzen, indem man mit der TYPO3 Extension "headless" eine Erweiterung mit JSON-Content-API für die TYPO3 PWA-Lösung erstellt.

Was macht die TYPO3 Headless Extension?

Die Headless Extension bietet eine JSON-API, die als Endpunkt für jede Art von Anwendung dienen kann. Sie nutzt die Standard-TYPO3-Funktionen, um die Seitenbaumstruktur und den Seiteninhalt in ein JSON-Format zu rendern. Das JSON-Antwortobjekt und die Inhaltselemente sind mit TypoScript anpassbar.

Headless erlaubt es Ihnen, JSON aus TYPO3-Inhalten zu liefern. Sie können die erzeugte Ausgabe modifizieren, indem Sie Typen, Namen und Verschachtelungen von Feldern entwickeln.

Schauen wir uns die wichtigsten Funktionen an,

  • JSON-API für Inhaltselemente
  • JSON-API für die Navigations-Seitenbaumstruktur
  • Taking into account all language and translation configuration (e.g. fallback)
  • Leicht erweiterbar mit benutzerdefinierten Feldern oder benutzerdefinierten CE's
  • Unterstützung für EXT:felogin und EXT:form
  • Unterstützung für EXT:news (siehe zusätzliche Erweiterung EXT:headless_news)
  • Unterstützung für (EXT:solr)
  • Unterstützung für EXT:powermail (EXT:powermail)
  • Unterstützung für EXT:gridelements (EXT:gridelements)

 

TYPO3 Headless-Einrichtung

Um die TYPO3 Headless Extension für Ihre TYPO3 Website zu installieren, laden Sie die TYPO3 Headless Extension herunter,

Im nächsten Schritt können Sie die Erweiterung manuell über den Erweiterungsmanager mit der Taste headless installieren.

Oder mit Composer,

composer require friendsoftypo3/headless

Im nächsten Schritt sollten Sie eine Erweiterung TypoScript-Vorlage einbinden, und schon sind Sie startklar.

Bitte beachten Sie, dass Sie fluid-styled content nicht zusammen mit ext:headless im selben Seitenbaum verwenden sollten.

Und Sie sind fertig! Schauen Sie sich die Ausgabe an

In der Headless-Erweiterung haben wir ein neues JSON-Inhaltsobjekt implementiert, mit dem Sie festlegen können, welche Felder Sie ausgeben möchten und wie diese aussehen sollen. Lassen Sie uns zunächst einen Blick auf ein einfaches Beispiel werfen

lib.page = JSON
lib.page {
  fields {
    header = TEXT
    header {
      field = header
    }
  }
}

Ausgang

{
    "header" : "headerFieldValue"
}

Außerdem können Sie mit Schlüsselwortfeldern mehrfache Felder in json verschachteln, z. B.

lib.page = JSON
lib.page {
  fields {
    data {
      fields {
        foo = TEXT
        foo {
          field = bar
        }
        foo1 = TEXT
        foo1 {
          field = bar1
        }
      }
    }

  }
}

Ausgang

{
    "data": [
        {
            "foo": "bar",
            "foo1": "bar1"
        }
    ]
}

Warum Headless TYPO3 mit JSON?

Die aktuelle Ext:headless Erweiterung wird mit dem JSON:API Modul betrieben. Es hat die REST-Erfahrung mit TYPO3 massiv verbessert und macht es zu einem unglaublich vielseitigen System, das praktisch jedem CMS auf dem Markt weit überlegen ist.

  • Das JSON:API-Modul stellt alle Entitäten in TYPO3 zur Verfügung und ermöglicht so eine einfache Interaktion, allerdings auf eine sehr elegante Art und Weise:
  • Es ist konform mit dem JSON:API-Standard (https://jsonapi.org/), was es für jeden, der eine TYPO3-Website integrieren möchte, einfach macht, die Datenstrukturen zu verstehen, ohne dass viel eigene Dokumentation nötig ist
  • Es ermöglicht die Abfrage von Listen und das Filtern nach Entity-Eigenschaften und -Feldern auch nach dem JSON: API-Standard
  • Die Kernfunktionalität von JSON: API wird durch das Modul JSON: API Extras erweitert, das eine zusätzliche Konfigurierbarkeit der Endpunkte ermöglicht.

Die oben genannten Features machen TYPO3 effektiv zu einem super robusten Backend für Frontend-Anwendungen.

Und zusammenfassend!

Headless TYPO3 ist ein interessanter Ansatz, um funktionsreiche interaktive Websites zu erstellen oder Content Hubs zu bauen, die verschiedene inhaltsverbrauchende Websites und Medien versorgen. Er ist jedoch nicht ohne Nachteile und sollte sorgfältig abgewogen werden, bevor man diesen Weg wählt.

Hoffentlich hat Ihnen dieser Artikel genügend Informationen zur Auswahl gegeben. Falls nicht, beraten wir Sie gerne bei Ihrem TYPO3 Headless Projekt.

Write comment

Name*

URL

Comment*

    No comments

Want to explore TYPO3 upgrade in depth ?

Wie behältst du den Überblick über dein TYPO3-Spiel?

Am besten melden Sie sich für unseren Newsletter mit einer monatlichen Dosis TYPO3 an.