JavaScript CMS

Ok Legacy-CMS, deine Zeit ist abgelaufen. Es gibt einen guten Grund, warum Headless Content Management Systeme und Content-Plattformen bei Front-End-Entwickler*innen immer beliebter werden. Diese Content-Lösungen entkoppeln Content und Design und liefern leistungsfähigere, skalierbarere Websites und Apps in beeindruckender Geschwindigkeit. Diese Entkopplung ermöglicht es Entwickler*innen auch, mit der Programmiersprache und dem Framework ihrer Wahl zu arbeiten. In diesem Artikel zeigen wir, was ein Headless-CMS für alle JavaScript-Entwickler*innen so attraktiv macht. Wir stellen auch einige Ressourcen zur Verfügung, die Ihnen helfen, Ihren ersten Build mit JS und Contentful zu optimieren.

In der Vergangenheit war die digitale Welt Desktop-zentriert und Content wurde hart in jede Webseite codiert. Dies bot wenig Flexibilität bei der Wiederverwendung und Gestaltung von Content. Während traditionelle CMS wie Wordpress oder Drupal im Vergleich zu ihren frühesten Versionen immer umfangreicher geworden sind (zum großen Teil aufgrund von Plugins), bleibt ihre Funktionalität gleich – und somit eingeschränkt. Content und Code werden immer noch in Seiten-orientierten Frameworks kombiniert, was es schwierig macht, sie für neue, etablierte und aufstrebende digitale Kanäle wie Web-Apps, mobile Apps, Wearables, E-Mail, soziale Medien, AR/VR und mehr anzupassen. Headless CMS verfolgen einen anderen Ansatz für Content. Anstatt Content fest mit einer Webseite oder App zu verknüpfen,bieten Headless CMS mehr Flexibilität, wo und wie Sie Ihren Content bereitstellen. Sie entkoppeln das Backend (d. h. das Content-Repository oder den „Body“) vom Frontend (d. h. der Präsentationsschicht oder dem „Head“).Mit einem Headless-CMS können Sie Ihren gesamten Content mit einem einzigen System verwalten, unabhängig von ihrem endgültigen digitalen Ziel. Sobald der Content zur Lieferung bereit ist, wird er über Anwendungsprogrammierschnittstellen (APIs) in seinen Endpunkt gezogen. Dieser Prozess ändert nicht den ursprünglichen Content, sondern rationalisiert die Content-Management-Workflows und multipliziert gleichzeitig die Reichweite jedes Content-Elements. Kurz gesagt, Headless CMS ermöglichen es Ihnen, Content effizienter in Ihrem gesamten digitalen Universum zu nutzen – jedes Content-Element arbeitet härter und reicht weiter. API-first-Systeme wie Headless CMS sind einfacher zu bedienen sowie flexibler und anpassungsfähiger als ihre monolithischen Pendants. In der heutigen Zeit sind sie unverzichtbare Tools, um großartige Omnichannel-Erlebnisse zu bieten.

Contentful trennt Ihren Content vom Code und ist sprach- und frameworkunabhängig, sodass es für alle Entwickler*innen geeignet ist, unabhängig davon, ob sie JS oder eine andere Sprache bevorzugen. Neben der Unterstützung von JS-basierten Front-End-Frameworks und Technologien wie Angular, React und Vue können Entwickler*innen auf Contentful mit reinem JavaScript aufbauen, wenn sie dies wünschen. Eines der besten Dinge an Contentful ist, dass es persönliche Projekte leicht unterstützt. Unser Free-Paket bietet Ihnen alles, was Sie brauchen, um Ihr Projekt zum Erfolg zu führen. Das Paket umfasst 25 verschiedene Contenttypen und ermöglicht es Ihnen, bis zu 25.000 Datensätze mit zwei Sprachen und drei Umgebungen zu erstellen. Sie können sogar bis zu 1 Million API-Aufrufe pro Monat tätigen. Bereit, die Ärmel hochzukrempeln und mit JavaScript und Contentful loszulegen? Sehen Sie sich unsere Schritt-für-Schritt-Anleitung an, die als Text und Video verfügbar ist. Sie können dem Contentful Developer Advocate Harshil Agrawal über die Schulter schauen, während er eine einfache Kochbuch-App mit Contentful und JavaScript erstellt und dann in Heroku bereitstellt. Der gesamte Prozess kann in sechs einfache Schritte unterteilt werden:

1. Klonen Sie das Github-Repository.

2. Melden Sie sich bei Contentful an und richten Sie das Content-Modell ein.

3. Führen Sie den Entwicklungsserver aus.

4. Pushen Sie alles auf GitHub.

5. Erstellen Sie ein Heroku-Konto.

6. Stellen Sie auf Heroku bereit.

Registrieren Sie sich für ein kostenloses Contentful-Konto und beginnen Sie in wenigen Minuten mit der Erstellung mit Javascript.

Da das Tutorial für eine Kochbuch-Webanwendung gedacht ist und nicht jeder ein Foodie ist, haben wir weitere JavaScript-Beispiel-Apps in unser Entwicklerportal aufgenommen. Jede zeigt Ihnen, wie Sie ein JavaScript- und Contentful-Projekt mit Beispiel-Spaces starten. Diese Beispiel-Apps sind eine großartige Möglichkeit, mit der Erstellung mit Contentful für jeden Anwendungsfall zu beginnen. Die Node.js-Beispiel-App behandelt die Grundlagen der Verwendung von Contentful als CMS für Open-Source-Node.js. Sie zeigt, wie die Entkopplung von Content von ihrer Präsentation mehr Flexibilität ermöglicht und die schnelle Bereitstellung qualitativ hochwertiger Software erleichtert. Das Beispielprojekt für den JavaScript-Produktkatalog zeigt Ihnen, wie Sie eine Front-End-JavaScript-basierte Anwendung erstellen, wobei Contentful als Produktkatalog dient. Es gibt auch eine Beispiel-App zum Erstellen einer Fotogalerie und eine, die unsere Datei-Upload-API demonstriert. Sie können alle diese Beispiel-Apps kostenlos testen und ihre Projektrepos auf Github anzeigen.

Um die Entwicklung von Anwendungen mit JavaScript noch einfacher zu machen, haben wir JavaScript SDK-Client-Bibliotheken veröffentlicht. Diese bieten einen Ausgangspunkt für JS-Entwickler*innen und ermöglichen den Zugriff auf unsere APIs und deren Funktionen. Die Content Delivery API-Client-Bibliothek interagiert mit der Content Delivery API, einer schreibgeschützten API zum Abrufen von Content aus Contentful. Jede Art von Content, sowohl JSON als auch binär, wird über unser globales CDN von dem Server abgerufen, der dem Nutzerstandort am nächsten liegt.

Die Content Management API-Client-Bibliothek interagiert mit der Content Management API und ermöglicht es Ihnen, Content zu erstellen, zu bearbeiten, zu verwalten und zu veröffentlichen. Die API bietet auch Tools für die Verwaltung von Redaktionsteams und die Zusammenarbeit. Diese SDKs sind universell und einfach zu konfigurieren. Sie sind so konzipiert, dass sie mit einer Node-Umgebung und in Browsern funktionieren.

• Content-Abruf über unsere Content Delivery API und Content Preview API.

• Content-Management und -abruf über unsere Content Management API.

• Synchronisierung über die Sync API, mit der Sie eine lokale Kopie des gesamten Contents in einem Space über Delta-Updates auf dem neuesten Stand halten können, oder auch Content aktuell halten, der bearbeitet wurde.

• Unterstützung der Lokalisierung durch Sprachen. Sprachen sind Sprachen-Regionen-Paare, die an spezifische Geschäftsanforderungen angepasst werden können.

• Link-Auflösung. Links sind eine leistungsstarke Möglichkeit, Beziehungen zwischen Content zu modellieren. Sie können einen URI-Abfrageparameter mit der Suche verwenden, um eine ganze Kette von verwandtem Content abzurufen und in Ihrer Anwendung anzuzeigen.

Wenn Sie weitere Fragen zur Verwendung von JavaScript mit Contentful haben, beantworten wir diese gerne. Sie können uns und andere Contentful-Nutzer*innen über den Contentful Community Discord kontaktieren.

Und denken Sie daran, dass Contentful sprachenunabhängig ist, verschiedene Frameworks unterstützt und nicht nur mit JavaScript funktioniert. Um alle bevorzugten Sprachen zu unterstützen, haben wir eine Bibliothek mit Schnellstartanleitungen, Videos und Vorlagen für andere Sprachen und Toolkits erstellt. Sehen Sie sich unsere Schnellstart-Tutorials an und legen Sie noch heute mit Ihrem nächsten Build los. Wenn Sie nach Ressourcen suchen, die mehr Engagement bieten, empfehlen wir unseren Developer Learning Path im Contentful Learning Center. Weitere Informationen zum Kurs und den Inhalten dieses Pfades finden Sie in der Pfadübersicht. Wenn Sie sich sicher fühlen, können Sie die Übersicht überspringen und stattdessen direkt in den Kurs eintauchen.