Rückblick auf 14 kopflose cm 2019

Vor einiger Zeit stellte sich in einer bekannten Aktiengesellschaft auf dem russischen Markt, in der ich tätig war, die Frage nach der Verwendung von kopflosen CMS. Unter den vielen Implementierungen musste eine ausgewählt werden. Dies ist eine Geschichte darüber, wie ich Auswahlkriterien gebildet habe, wie ich cms analysiert habe und wie diese Analyse mich zu dem Gedanken gebracht hat, dass ich meine eigenen schreiben muss. Übersicht über 14 kopflose cm unter dem Schnitt.

Was ist ein kopfloses CMS?

Obwohl der Begriff nicht neu ist, wird dieses Thema aus irgendeinem Grund im russischsprachigen Internet nur sehr wenig behandelt. Also laut Wikipedia :

Ein Headless Content Management System oder Headless CMS ist ein Back-End-Content-Management-System (CMS), das von Grund auf als Content-Repository erstellt wurde und den Zugriff auf Inhalte über eine RESTful-API für die Anzeige auf jedem Gerät ermöglicht.
Das Headless Content Management System oder Headless CMS ist ein serverbasiertes Content Management System (CMS), das zunächst ein Repository für Inhalte ist und über die RESTful-API Zugriff auf Inhalte zur Anzeige auf jedem Gerät bietet.

Mit anderen Worten, kopfloses cms ist ein Konzept, eine Art spezieller Typ von cms-ok, nach dem cms nur für die Verwaltung von „reinem“ Inhalt verantwortlich ist. Auf diese Weise können Sie die Datenschicht, die in cm verwaltet wird, von der Anzeigeebene trennen, die von der Clientanwendung gesteuert wird. Inhalte werden in einem universellen Format, normalerweise in JSON, verteilt. Auf diese Weise können eine Website, eine mobile Anwendung und alle mit dem Internet verbundenen Geräte gleichzeitig verwaltet werden.

Weitere Informationen zu den Vor- und Nachteilen eines solchen Konzepts finden Sie in diesem oder diesem Artikel oder erneut in einem Wikipedia-Artikel .

Eintauchen in den Kontext

Um die Suchkriterien zu bestimmen und zu verstehen, welches kopflose CMS besser ist als andere, musste ich die Frage beantworten: Was ist das Beste? Welche spezifischen Aufgaben sollte es lösen und wie?

Um meinen aktuellen Gedankengang zu demonstrieren, habe ich mir ein typisches Problem ausgedacht und es mit einem der kopflosen CMS gelöst. Und obwohl in Wirklichkeit alles etwas anders war, ist dieses Format der Erzählung prägnanter und spiegelt die Essenz wider und enthüllt das Thema kopfloser CMS besser.

Stellen wir uns also vor, dass eine Aufgabe zur Entwicklung kommt. Die Site muss einen neuen Abschnitt implementieren, in dem Benutzer Rezensionen zu Filmen lesen.
Die Bedingungen sind wie folgt:

• Im Moment müssen Sie nur den Namen des Films, das Poster, den Namen des Regisseurs und den Text der Rezension anzeigen. In Zukunft wird die Struktur jedoch komplizierter, und es werden Informationen zu Gebühren, Schauspielern usw. angezeigt.
• Eine Person ohne technischen Hintergrund, ein Content Manager, muss Bewertungen hinzufügen und ändern, und dafür sollte keine Entwicklungsressource beteiligt sein.
• Diese Funktionalität sollte deaktiviert sein, d.h. müssen Feature-Toggle implementieren;
• Vor dem Veröffentlichen von Inhalten sollte der Inhaltsmanager in einer Testumgebung sehen können, wie Änderungen aussehen.

Dies sind die Anforderungen, die von einem internen Kunden gestellt wurden. Die Entwicklungsseite hat ihre eigene technische Vision für die Implementierung, nämlich:

• der Kunde sollte nicht in der Lage sein, sein Knie zu schießen, d.h. Der Content Manager sollte nichts kaputt machen, auch wenn er will. Es sollte nur das bearbeiten, was die Entwickler sich vorgestellt haben.
• sollte in der Lage sein, Versionen zu verwalten und ein Rollback durchzuführen, wenn etwas passiert;
• Es ist nicht bekannt, welche zusätzlichen Funktionen in Zukunft verfügbar sein werden. Dies bedeutet, dass das Komplizieren oder Ändern eines Abschnitts einfach sein sollte.
• Auf der Sicherheitsseite: Das System sollte sich auf unserem Server befinden und nicht in einer fremden Cloud, d. h. sollte in der Lage sein, vor Ort bereitzustellen.

Nun, die Aufgabe ist klar. Ich gehe zur Entscheidung über.

Ich werde jedes JSON-CMS verwenden , dies ist eines der kopflosen CMS . Ich stelle fest, dass es im Moment nicht alle oben beschriebenen Anforderungen erfüllt. Beispielsweise kann der Content Manager in einer Testumgebung nicht sehen, wie Änderungen aussehen. Alle Vor- und Nachteile werden jedoch später sichtbar. Jetzt versuche ich, ein typisches Szenario für die Arbeit mit kopflosen CMS zu „fühlen“.

Als erstes müssen die Modelle beschrieben werden. Das Modell beantwortet die Frage, wie die Inhaltsentität aussehen soll. Wie ist ihre Struktur? Im Wesentlichen ist dies ein Protokoll der Interaktion zwischen cms und einer Clientanwendung. In unserem Fall - eine Rezension des Films - enthält das Objekt:

• 3 obligatorische Eigenschaften: Filmtitel, Filmplakat, Rezensionstext;
• 1 optionale Eigenschaft: Objekt "Director", das wiederum 2 erforderliche Eigenschaften Name und Nachname enthält.

In der JSON-Schemaansicht sieht das Modell folgendermaßen aus:

{ type: 'object', required: ['movieName', 'moviePoster', 'reviewText'], additionalProperties: false, properties: { movieName: { type: 'string', minLength: 1, maxLength: 300, }, moviePoster: { type: 'string', description: 'URL to file', }, movieProducer: { type: 'object', required: ['name', 'surname'], additionalProperties: false, properties: { name: { type: 'string', maxLength: 100, minLength: 1 }, surname: { type: 'string', maxLength: 100, minLength: 1 }, }, }, reviewText: { type: 'string', minLength: 1, maxLength: 3000, }, }, } 

Sie müssen auch Feature Toggle implementieren. Ein Modell in Form eines JSON-Schemas sieht folgendermaßen aus:

 { type: 'object', required: ['isFeatureActive', 'name'], additionalProperties: false, properties: { isFeatureActive: { type: 'boolean' }, name: { type: 'string', enum: ['movieReviewFeatureToggle'] }, }, } 

Wenn Sie wissen, wie Modelle aussehen sollen, können Sie sie in einem beliebigen JSON-CMS erstellen.



Ich erstelle sofort Inhaltsentitäten, d. H. der Inhalt selbst, basierend auf Modellen. Eine Dummy-Überprüfung und Feature-Toggle-Entität.



Um die Clientanwendung in cms zu integrieren, ist ein API-Schlüssel erforderlich. Ich generiere es im entsprechenden Abschnitt cms.


Jetzt ist alles bereit für die Implementierung von Funktionen in der Client-Anwendung und die Integration in cms. Die Client-Anwendung kann alles sein - eine Website oder eine mobile Anwendung oder beides, die auf irgendetwas geschrieben ist. Als Beispiel implementiere ich Funktionen auf der SPA-Site in React. Tatsächlich nehmen wir die Daten mit der bereits bekannten festen Struktur von cms und zeigen sie so an, wie wir es wollen.

 import React, { Component } from 'react' import { Accordion, AccordionItem, AccordionItemTitle, AccordionItemBody, } from 'react-accessible-accordion' import 'react-accessible-accordion/dist/fancy-example.css' const apiUrl = 'https://api.anyjsoncms.com' // ApiKey      const apiKey = '87414950dfd15648ea560bd89dd0ee02bfc8fcca' class App extends Component { constructor(props) { super(props) this.state = { movies: null, isFeatureActive: null, loading: true, } } componentDidMount() { const options = { method: 'GET', headers: { ApiKey: apiKey } } Promise.all([ fetch(`${apiUrl}/entries?apiId=featureToggle`, options).then(resp => resp.json() ), fetch(`${apiUrl}/entries?apiId=movieReview`, options).then(resp => resp.json() ), ]) .then(([featureToggleResp, movieReviewResp]) => { const featureToggle = featureToggleResp.find( item => item.value.name === 'movieReviewFeatureToggle' ) const isFeatureActive = featureToggle && featureToggle.value && featureToggle.value.isFeatureActive const movies = movieReviewResp.map(item => item.value) this.setState({ movies, isFeatureActive, loading: false }) }) .catch(error => { console.error(error) }) } render() { const { movies, isFeatureActive, loading } = this.state if (loading) return <div>Loading...</div> if (!isFeatureActive) return <div style={{ display: 'none' }}>Section is hidden</div> return ( <div> <Accordion> {movies.map( ({ movieName, moviePoster, movieProducer, reviewText }, index) => ( <AccordionItem key={index}> <AccordionItemTitle> <h3>{movieName}</h3> </AccordionItemTitle> <AccordionItemBody> <img src={`${apiUrl}${moviePoster}`} alt="" /> {!movieProducer ? null : ( <div>{`${movieProducer.name} ${ movieProducer.surname }`}</div> )} <div>{reviewText}</div> </AccordionItemBody> </AccordionItem> ) )} </Accordion> </div> ) } } export default App 

Das ist alles. Jetzt kann der Content Manager problemlos Bewertungen verwalten, und es besteht auch die Möglichkeit, Funktionen mithilfe der Funktionsumschaltung zu aktivieren und zu deaktivieren.

Das Anzeigen von Rezensionen für Filme ist ein einfaches Beispiel. Ich habe es bewusst zitiert, um nicht im Detail zu ertrinken, sondern nur um das Prinzip zu demonstrieren. In der Realität können Merkmale um eine Größenordnung komplizierter sein. Dies können Schnittstellenelemente, Produktkataloge, komplexe Widgets, Zielseiten, Formulargeneratoren, Posts usw. sein. In diesem Beispiel verbreitet cms nur Informationen, aber die meisten kopflosen cms bieten CRUD-APIs, mit denen beispielsweise Formulare verarbeitet werden können Manipulieren Sie im Allgemeinen Entitäten, was auch immer. Im Allgemeinen besteht die Idee von kopflosen cms gerade darin, Freiheit und Bequemlichkeit bei der Implementierung eines willkürlich komplexen Protokolls zu bieten, um die Kontrolle auf cms von irgendetwas und nach Bedarf zu übertragen.

Auswahlkriterien und Analyse kopflos cms

Nachdem ich verstanden hatte, welche Aufgaben mit kopflosen CMS wie gelöst werden würden, wählte ich die Kriterien aus und begann, die Systeme zu untersuchen. Laut headlesscms.org gibt es derzeit 54 cm. Alle zu analysieren ist ein ziemlich zeitaufwändiger Prozess, daher habe ich die 14 beliebtesten, bemerkenswertesten und am meisten diskutierten Systeme hervorgehoben: Alle JSON-CMS, Contentful, Strapi, GraphCMS, Squidex, Butter-CMS, Cloud-CMS, pitockpit, Cosmic JS, Directus, Kentico Cloud, Netlify CMS , Prismisch, Geist.

Die Ergebnisse lassen sich bequemer in Form einer Tabelle untersuchen . Aber hier duplizieren.

Beliebiges JSON-CMS

Zufrieden

Strapi

GraphCMS

Squidex

Butter cms

Wolke cms

Pitockpit

Kosmische js

Directus

Kentico Cloud

Netlify CMS

Prismic

Ghost

Schlussfolgerungen

Im Großen und Ganzen erwartete ich von kopflosen CMS zwei Hauptaspekte: Freiheit beim Erstellen von Modellen, dank derer Sie jedes Protokoll implementieren können, und ein ähnliches Versionskontrollsystem, damit alle Änderungen transparent verwaltet werden können.
Und eine leichte Enttäuschung erwartete mich. Obwohl Sie mit den meisten dieser Systeme arbeiten können, haben sie eine Reihe von Nachteilen, die für mich unangenehm sind. Dies bedeutet natürlich nicht, dass die Systeme schlecht sind, sondern nur, dass sie meine Erwartungen nicht erfüllt haben und meine Erwartungen meine Probleme sind. Ich werde sie aussprechen:

• headless cms . , , . , , , , . , , . - Cloud CMS, Cockpit Cosmic JS.
• : , , . , - , — . , - , :
  

   { "oneOf": [ { "type": "number", "multipleOf": 5 }, { "type": "number", "multipleOf": 3 } ] } 

  
  Cockpit.
  
• , . , number, 100. , maximum: 50? ? GraphCMS.
• Git Cloud CMS Netlify CMS.

Als ich bei dieser Aktiengesellschaft arbeitete, konnten wir leider keines dieser Systeme übernehmen. Cloud CMS war am besten für unsere Bedürfnisse geeignet, aber der Preis dafür ist schlecht.

Fazit

So führte mich diese Analyse zu dem Gedanken, dass ich meine kopflosen CMS schreiben muss. Sie haben sie bereits gesehen, an ihrem Beispiel wurde eine Lösung für ein Problem demonstriert. Es heißt Any JSON CMS .

UPDATE: Jedes JSON-CMS ist zu einer Open-Source-Lösung geworden. Das Github-Repository befindet sich hier .

Ihr Hauptziel ist es, Freiheit bei der Erstellung beliebig komplexer Modelle zu bieten und alle Änderungen mithilfe eines git-ähnlichen Systems zu steuern. Weit entfernt von allem, was ich gerne implementiert hätte, hat es bereits die Hauptbotschaft.