Jeder Entwickler, der einen visuellen Content oder Template-Builder entwickelt, steht vor denselben schwierigen Wege: Bauen wir die Kern-Editor-Infrastruktur von Grund auf oder stehen wir auf den Schultern von Riesen? Beim Bau von Composeit, einem Template-Builder der nächsten Generation für präzise PDF-Generierung, haben wir uns für Letzteres entschieden. Indem wir unseren Stack an grapesjs-shadcnverankert haben, haben wir monatelange langweilige Baseline-Entwicklung umgangen.
Hier ein Blick hinter die Kulisse auf genau das, was wir übersprungen haben, wo wir unsere Ingenieurstunden wieder investiert haben und wie das zu einer schnelleren, leistungsfähigeren Anwendung geführt hat.
Was wir nicht bauen mussten (die Out-of-the-Box gewinnt)
Anstatt wochenlang Wireframes zu entwickeln und grundlegende UI-Komponenten zu debuggen, haben grapesjs-shadcn wir uns am ersten Tag einen robusten, produktionsbereiten Kern übergeben. Wir haben die Implementierung von:
Kern-Editor-UI: Rich Text Editors (RTE) für Textmanipulation, Asset-Management-Modals und Layer-Bäume.
Stil- und Attributmechaniken: Komplexe Manager für CSS-Klassen, Traits, Attribute und globale Stilregeln.
Struktur & Wiederverwendbarkeit: Eingebaute Unterstützung für Blöcke, wiederverwendbare Symbole und mehrseitiges Routing.
Indem wir uns diese schweren architektonischen Lasten abgenommen haben, mussten wir das Rad nicht neu erfinden. Stattdessen haben wir 100 % unserer Energie darauf verwendet, die einzigartigen, wertvollen Herausforderungen der PDF-Vorlagengenerierung zu lösen.
Wo wir unsere Zeit wieder investiert haben
Nachdem die Basisarchitektur gelöst war, konzentrierten wir uns darauf, das Kernwertangebot von Composeit zu perfektionieren: absolute Layout-Präzision und leistungsstarke Datenintegration.
1. Pixel-perfekte Leinwand-Live-Bearbeitung
PDFs sind berüchtigt wählerisch – was man auf einer Webleinwand sieht, lässt sich selten perfekt auf eine gedruckte Seite übertragen. Wir nutzten die zusätzliche Entwicklungszeit, um die Live-Leinwand der endgültigen Output-Engine genauer zu machen.
Globale und sektionale Seitenkontrollen: Wir haben ein architektonisches Layout-System entwickelt, bei dem Nutzer projektweite Seiteneinstellungen definieren können, während unabhängige Abschnitte innerhalb desselben Dokuments weiterhin unterschiedliche Seitengrößen und Ausrichtungen haben.
2. Hochleistungs-Datenquellen- und Token-Mapping
Einen Schema-Visualisierer und einen Abstract Syntax Tree (AST) für bedingte Formatierung von Grund auf zu erstellen, ist ein berüchtigter Zeitfresser, besonders bei der Integration mehrerer Bibliotheken. grapesjs-shadcn verfügt über eine eingebaute Benutzeroberfläche für das Management von Schema- und bedingten Logik, die auf den bereits bereitgestellten APIs aufbaut, indem grapesjs die Last des Jonglierens mehrerer Bibliotheken und der Datenübertragung zwischen ihnen vollständig entfällt.
Noch wichtiger ist, dass es einen massiven Leistungsschub bietet:
Der ereignisgetriebene Vorteil: Anstatt sich auf starke React-Hooks
useEffectzu verlassen, um globale Schemaänderungen zu hören (was die Performance verringert, da sowohl das Schema als auch die Vorlage wachsen), haben wir direkt in den nativen Event-Emitter von GrapesJS gekoppelt.Wir hören direkt token-spezifische Ereignisse ab und lösen leichte, isolierte Live-Updates nur aus, wenn sich ein genauer Token ändert. Diese Architektur machte es außerdem unglaublich einfach, komplexe Backend-Daten direkt an UI-Traits und -Stile zu binden.
Komplexe Logik mit EJS überladen
Um unseren Nutzern unternehmensweite Kontrolle über ihre Dokumente zu geben, mussten wir stark verschachtelte Schleifen und fortschrittliche Datenformatierung unterstützen. Wir haben uns entschieden, EJS (Embedded JavaScript Templates) als unsere zugrunde liegende Syntax-Engine zu verwenden.
Obwohl die Umwandlung von Datenresolvern für Sammlungen, Bedingungen und Variablen in EJS komplex klingt, machte das strukturierte Design der grapesjs Datenresolver sie bemerkenswert vorhersehbar. Da die Datenformen festgelegt sind, war das Mapping auf EJS-Vorlagen nahtlos.
Diese Integration ermöglichte es uns, Premium-Datenmanipulationsfunktionen direkt aus der Box auszuliefern:
Für Variablen: Integrierte Datenaggregation und benutzerdefinierte Formatierung.
Für Loops: Fortschrittliche Sortier- und granulare Filtermechanismen direkt im visuellen Builder.
Smarteres Bauen, schnellere Lieferung
Die Wahl der richtigen Stiftung hat uns nicht nur Zeit gespart – sie ermöglichte uns auch Innovationen. Mit solider Kerninfrastruktur hatten wir sogar die Bandbreite, KI-unterstützte Baufunktionen zu entwerfen und umzusetzen, die den Nutzern helfen, Layouts sofort zu erstellen. (Alles über unsere KI-Integration können Sie in unserem speziellen, tiefgehenden Blogbeitrag lesen!)
Wir sind unglaublich stolz darauf, wie schlank, leistungsfähig und kraftvoll Composeit geworden ist, und wir möchten, dass Sie es aus erster Hand erleben.
Fang mit Composeit an
Sehen Sie es in Aktion: Schau dir an, was wir bei composeit.app bauen.
Holen Sie sich das Preset: Bereit, deine eigene zu bauen? Kaufen Sie das Preset hier.
Brauchst du eine Anpassung? Wenn Sie Hilfe bei der Anpassung dieses Setups an Ihren spezifischen Arbeitsablauf benötigen, kontaktieren Sie uns noch heute – wir helfen Ihnen gerne bei der Anpassung.