Ulasan dari 14 cm tanpa kepala 2019

Beberapa waktu lalu, di salah satu perusahaan publik terkemuka di pasar Rusia tempat saya bekerja, muncul pertanyaan tentang penggunaan cm tanpa kepala. Di antara banyak implementasi, satu harus dipilih. Ini adalah cerita tentang bagaimana saya membentuk kriteria seleksi, bagaimana saya menganalisis cm, dan bagaimana analisis ini membuat saya berpikir bahwa saya perlu menulis sendiri. Tinjauan 14 cm tanpa kepala di bawah potongan.

Apa itu CMS tanpa kepala?

Meskipun istilah ini tidak baru, untuk beberapa alasan topik ini sangat sedikit dibahas di Internet berbahasa Rusia. Jadi menurut wikipedia :

Sistem manajemen konten tanpa kepala , atau CMS tanpa kepala , adalah sistem manajemen konten (CMS) back-end saja yang dibangun dari bawah ke atas sebagai repositori konten yang membuat konten dapat diakses melalui RESTful API untuk ditampilkan pada perangkat apa pun.
Sistem manajemen konten tanpa kepala , atau CMS tanpa kepala adalah sistem manajemen konten berbasis server (CMS), yang pada awalnya merupakan repositori konten dan menyediakan akses ke konten melalui RESTful API untuk ditampilkan pada perangkat apa pun.

Dengan kata lain, cms tanpa kepala adalah konsep, sejenis cms-ok, yang menurutnya cms hanya bertanggung jawab untuk mengelola konten “murni”. Ini memungkinkan Anda untuk memisahkan lapisan data, yang dikelola dalam cms, dari lapisan tampilan, yang dikendalikan oleh aplikasi klien. Konten didistribusikan dalam format universal, biasanya dalam JSON, dan ini memungkinkan untuk mengelola situs web, aplikasi seluler, dan perangkat apa pun yang terhubung ke Internet secara bersamaan.

Anda dapat membaca lebih lanjut tentang pro dan kontra dari konsep seperti itu di artikel ini, atau yang ini , atau lagi di artikel wikipedia .

Pencelupan dalam konteks

Untuk menentukan kriteria pencarian dan memahami cm tanpa kepala mana yang lebih baik daripada yang lain, saya harus menjawab pertanyaan - apa yang terbaik? Apa tugas khusus yang harus diselesaikan dan bagaimana?

Untuk menunjukkan pemikiran saya saat ini, saya menemukan masalah yang khas dan menyelesaikannya menggunakan salah satu cm tanpa kepala. Dan meskipun dalam kenyataannya semuanya sedikit berbeda, format narasi ini lebih ringkas dan mencerminkan esensi dan lebih baik mengungkapkan topik cm tanpa kepala.

Jadi, mari kita bayangkan bahwa tugas datang ke pengembangan. Situs perlu menerapkan bagian baru di mana pengguna akan membaca ulasan untuk film.
Syaratnya adalah sebagai berikut:

• saat ini, Anda hanya perlu menampilkan nama film, poster, nama sutradara dan teks ulasan, tetapi di masa depan strukturnya akan menjadi lebih rumit, informasi tentang biaya, aktor, dll.
• seseorang tanpa latar belakang teknis, seorang manajer konten, harus menambahkan dan mengubah ulasan, dan untuk ini sumber daya pengembangan tidak boleh dilibatkan;
• fungsi ini harus dinonaktifkan, mis. perlu mengimplementasikan fitur toggle;
• Sebelum menerbitkan konten, pengelola konten harus dapat melihat di lingkungan pengujian bagaimana pengeditan akan terlihat.

Ini adalah persyaratan yang berasal dari pelanggan internal. Sisi pengembangan memiliki visi teknis sendiri untuk implementasi, yaitu:

• pelanggan seharusnya tidak dapat menembak lututnya, mis. manajer konten tidak boleh merusak apa pun, bahkan jika dia mau. Seharusnya hanya mengedit apa yang dibayangkan pengembang;
• harus dapat mengelola versi dan mundur jika terjadi sesuatu;
• tidak diketahui fungsionalitas tambahan apa yang akan muncul di masa depan, yang berarti mempersulit atau mengubah suatu bagian harus mudah;
• di sisi keamanan: sistem harus di server kami, dan tidak di cloud yang aneh, mis. harus dapat menggunakan di tempat.

Nah, tugasnya jelas. Saya memberikan keputusan.

Saya akan menggunakan JSON CMS , ini adalah salah satu cm tanpa kepala. Saya perhatikan bahwa saat ini tidak memenuhi semua persyaratan yang dijelaskan di atas. Misalnya, pengelola konten tidak akan dapat melihat di lingkungan pengujian bagaimana pengeditan akan terlihat. Namun, semua kelebihan dan kekurangan akan terlihat nanti. Sekarang saya mencoba untuk "merasakan" skenario khas bekerja dengan cm tanpa kepala.

Hal pertama yang harus dilakukan adalah mendeskripsikan model. Model menjawab pertanyaan, seperti apa bentuk entitas konten? Apa strukturnya? Intinya, ini adalah protokol interaksi antara cms dan aplikasi klien. Dalam kasus kami - tinjauan film - objek berisi:

• 3 sifat wajib: judul film, poster film, teks ulasan;
• 1 properti opsional: objek "direktur", yang pada gilirannya berisi 2 nama properti dan nama keluarga yang diperlukan.

Dalam model tampilan JSON Schema terlihat seperti ini:

{ 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, }, }, } 

Anda juga perlu menerapkan fitur toggle, model dalam bentuk Skema JSON terlihat seperti ini:

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

Ketika Anda memiliki pemahaman tentang bagaimana model seharusnya terlihat, Anda dapat membuatnya di Any JSON CMS.



Saya segera membuat entitas konten, yaitu konten itu sendiri, berdasarkan model. Satu ulasan dummy dan fitur toggle entity.



Untuk mengintegrasikan aplikasi klien dengan cms, kunci API diperlukan. Saya menghasilkannya di cms bagian yang sesuai.


Sekarang semuanya siap untuk implementasi fungsionalitas dalam aplikasi klien dan integrasi dengan cms. Aplikasi klien dapat berupa apa saja - situs web atau aplikasi seluler, atau keduanya, ditulis pada apa pun. Sebagai contoh, saya menerapkan fungsionalitas pada situs SPA di Bereaksi. Bahkan, kami mengambil data dengan struktur tetap yang sudah diketahui dari cms dan menampilkannya seperti yang kami inginkan.

 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 

Itu saja. Sekarang pengelola konten dapat dengan mudah mengelola ulasan, dan ada juga kesempatan untuk mengaktifkan dan menonaktifkan fungsi menggunakan fitur toggle.

Menampilkan ulasan untuk film adalah contoh sederhana, saya sengaja mengutipnya agar tidak tenggelam dalam detail, tetapi hanya untuk menunjukkan prinsipnya. Pada kenyataannya, fitur bisa menjadi urutan besarnya lebih rumit. Ini dapat berupa elemen antarmuka, katalog produk, widget kompleks, halaman arahan, generator formulir, pos, dll. Juga, dalam contoh ini, cm hanya menyebarkan informasi, tetapi sebagian besar cm tanpa kepala menyediakan API CRUD, yang memungkinkan, misalnya, untuk memproses formulir, dan umumnya memanipulasi entitas, apa pun. Secara umum, ide cms tanpa kepala adalah tepatnya untuk memberikan kebebasan dan kenyamanan dalam mengimplementasikan protokol kompleks yang sewenang-wenang untuk mentransfer kontrol ke cms apa pun dan sesuai kebutuhan.

Kriteria seleksi dan analisis cm tanpa kepala

Setelah saya memahami tugas apa yang akan diselesaikan dengan menggunakan cm tanpa kepala dan bagaimana, saya memilih kriteria dan mulai mempelajari sistem. Saat ini ada 54 cm menurut headlesscms.org . Menganalisa semua itu adalah proses yang agak memakan waktu, jadi saya menyoroti 14 sistem yang paling populer, terkenal dan dibahas: Setiap JSON CMS, Contentful, Strapi, GraphCMS, Squidex, Butter CMS, Cloud CMS, ockpit, Cosmic JS, Directus, Kentico Cloud, Netlify CMS , Prismik, Hantu.

Hasilnya lebih nyaman untuk belajar dalam bentuk tabel . Tapi duplikat di sini.

CMS JSON Apa Saja

Puas

Strapi

GraphCMS

Squidex

Mentega cms

Awan cms

ockpit

Cosmic JS

Directus

Kentico Cloud

Netlify CMS

Prismic

Ghost

Kesimpulan

Pada umumnya, dari cm tanpa kepala saya berharap melihat dua hal utama: kebebasan dalam membuat model, berkat itu Anda dapat mengimplementasikan protokol apa pun, dan menggunakan sistem kontrol versi yang sama sehingga semua perubahan dapat dikelola secara transparan.
Dan sedikit kekecewaan menunggu saya. Meskipun Anda dapat bekerja dengan sebagian besar sistem ini, mereka memiliki sejumlah kelemahan yang tidak menyenangkan bagi saya. Ini, tentu saja, tidak berarti bahwa sistemnya buruk, itu hanya berarti bahwa mereka tidak memenuhi harapan saya, dan harapan saya adalah masalah saya. Saya akan menyuarakan mereka:

• 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.

Sayangnya, ketika saya bekerja di perusahaan publik itu, kami tidak dapat mengambil salah satu dari sistem ini. Cloud CMS paling cocok untuk kebutuhan kita, tetapi harga itu menggigit.

Kesimpulan

Begitulah analisis ini membuat saya berpikir bahwa saya perlu menulis cms tanpa kepala saya. Anda sudah melihatnya, pada contohnya, ada demonstrasi solusi untuk masalah. Ini disebut Any JSON CMS .

PEMBARUAN: Setiap JSON CMS telah menjadi solusi open source, repositori github ada di sini .

Tujuan utamanya adalah untuk memberikan kebebasan dalam menciptakan model rumit yang sewenang-wenang dan mengendalikan semua perubahan menggunakan sistem mirip-git. Sekarang jauh dari semua yang ingin saya terapkan, itu sudah memiliki "pesan" utama.