Architettura modulare a blocchi

Contenuti come componenti. Una struttura che scala.

b10cks è costruito attorno a un'architettura modulare a blocchi che rispecchia il modo in cui i team frontend moderni pensano già l'interfaccia. Costruisci il tuo content model da blocchi atomici, riutilizzabili e componibili, poi assemblali in qualsiasi cosa.

Inizia gratis

Il problema della discrepanza

Il tuo frontend usa componenti. Perché il tuo CMS no?

Lo sviluppo frontend moderno si basa sui principi dell'atomic design: atomi, molecole, organismi, template, pagine. I componenti sono composti da componenti più piccoli. La struttura è riutilizzabile, prevedibile e manutenibile.

Poi apri il tuo CMS e trovi un elenco piatto di campi di testo.

b10cks colma questo divario. Il tuo content model è costruito da blocchi — esattamente come i tuoi componenti UI — così la struttura del tuo CMS riflette la struttura del tuo prodotto. Niente più layer di traduzione. Niente più tentativi di capire a quale campo corrisponda cosa.

Cos'è un blocco?

L'unità fondamentale di contenuto in b10cks.

Un blocco è una struttura di contenuto nominata, tipizzata e riutilizzabile. Pensalo come un componente di contenuto: ha un nome, un insieme di campi tipizzati e uno scopo definito nel tuo content model.

Esempi:

  • HeroSection — title: Text, subtitle: Text, cta: Link, background: Image
  • FeatureCard — icon: Text, heading: Text, body: RichText
  • TestimonialBlock — quote: Text, author: Reference(TeamMember), company: Text
  • PricingTier — name: Text, price: Number, features: Array(Text), highlighted: Boolean

Definiscilo una volta. Usalo ovunque.

Atomic design, supportato nativamente

Atomi → Molecole → Organismi → Contenuto.

b10cks supporta il nesting completo dei blocchi. Un blocco può contenere campi, riferimenti ad altri blocchi o array di blocchi, permettendoti di costruire gerarchie di contenuto che corrispondono esattamente al tuo sistema di atomic design.

Blocchi nell'editor visuale

Ciò che modelli è ciò che vedono gli editor.

Ogni tipo di blocco che definisci sulla canvas si mappa direttamente a un componente nell'editor visuale dei contenuti. Gli editor vedono i blocchi come form strutturati e nominati, non come un muro di campi di testo tutti uguali.

  • I tipi di blocco sono etichettati con nome e icona
  • I blocchi annidati sono visualizzati come sezioni comprimibili
  • Trascina per riordinare gli elenchi di blocchi di tipo array
  • Creazione inline di blocchi senza uscire dal contesto della pagina

I tuoi sviluppatori definiscono la struttura. I tuoi editor la compilano — in modo intuitivo, senza formazione.

Schemi dei blocchi come codice

Per i team che preferiscono la config-as-code.

Definisci gli schemi dei tuoi blocchi in modo programmatico usando il formato schema di b10cks — versionato nel tuo repository insieme al codice frontend.

Distribuisci le modifiche agli schemi tramite CI/CD come qualsiasi altro cambiamento di codice. La canvas le riflette automaticamente.

Migrazione ed evoluzione

I content model cambiano. b10cks li rende sicuri.

Le architetture di contenuto reali evolvono. Aggiungerai campi, rinominerai tipi e ristrutturerai gerarchie man mano che il tuo prodotto cresce. b10cks rende questi cambiamenti gestibili:

  • Aggiunta di campi — aggiunti in sicurezza; le voci esistenti vengono impostate di default su null o su un valore predefinito specificato
  • Rinomina di campi — tracciata con la cronologia delle migrazioni, così i riferimenti non si rompono
  • Deprecazione dei blocchi — contrassegna un tipo di blocco come deprecato senza rimuoverlo; gli editor vedono un avviso, il contenuto esistente viene preservato
  • Cronologia delle versioni — ogni modifica allo schema viene registrata, con possibilità di rollback

Costruisci i contenuti come costruisci la UI.

Il divario tra il tuo design system e il tuo CMS non deve per forza esistere. Inizia a costruire con i blocchi di b10cks — gratis, open source e pronto da oggi.