Publixx Architektur – One Page App. Zero Backend.

Version 1.0 | Stand: Januar 2026 | incoxx GmbH

Die Vision: "No IT Project"

Publixx läuft vollständig im Browser. Kein Application Server. Keine Datenbank. Kein Docker. Keine Cloud-Pflicht.

Was Sie brauchen:

Einen Webserver (Apache, nginx, IIS, S3)
Statische Dateien hochladen
Fertig.

Was das bedeutet:

Deployment in Minuten, nicht Monaten
Keine Server-Administration
Keine Sicherheitsupdates für Backend-Frameworks
Läuft sogar offline von einem USB-Stick

Technologie-Entscheidung: Vanilla JavaScript

Publixx verwendet kein Framework. Kein React. Kein Angular. Kein Vue.

Warum?

Framework-Ansatz	Publixx-Ansatz
React 16 → 17 → 18 Migration	Keine Migration nötig
Angular 8 → 12 → 15 Breaking Changes	Stabiler Code seit 2020
Alle 2-3 Jahre neu schreiben	Einmal schreiben, langfristig nutzen
Komplexe Build-Pipeline	Ein Webserver reicht
500+ npm Dependencies	5 externe Libraries

Das Ergebnis: 135.000 Zeilen JavaScript, die einfach funktionieren – heute und in 10 Jahren.

Die Architektur im Überblick

┌─────────────────────────────────────────────────────────────────────┐
│                         BROWSER                                     │
│                                                                     │
│  ┌──────────────────────────────────────────────────────────────┐   │
│  │                     index.html                                │  │
│  │                          ↓                                    │  │
│  │                  publixx_boot.js                              │  │
│  │                          ↓                                    │  │
│  │    ┌─────────────────────────────────────────────────────┐    │  │
│  │    │              15-Phasen Bootloader                    │   │  │
│  │    │                                                      │   │  │
│  │    │  Phase 1-3:   Foundation (i18n, Config, API)         │   │  │
│  │    │  Phase 4-6:   Core (State, DOM, Routing)             │   │  │
│  │    │  Phase 7-9:   Render Engine + Inspector              │   │  │
│  │    │  Phase 10-12: UI + Export-Module                     │   │  │
│  │    │  Phase 13-15: Features + Permissions                 │   │  │
│  │    └─────────────────────────────────────────────────────┘    │  │
│  │                          ↓                                    │  │
│  │              151 JavaScript-Module geladen                    │  │
│  │                          ↓                                    │  │
│  │                    APP READY                                  │  │
│  └──────────────────────────────────────────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘
                              ↕
┌─────────────────────────────────────────────────────────────────────┐
│                      WEBSERVER (statisch)                           │
│                                                                     │
│   /index.html      → Einstiegspunkt                                 │
│   /js/*.js         → 151 Module (~3,5 MB)                           │
│   /css/*.css       → Stylesheets                                    │
│   /templates/      → HTML-Templates                                 │
│   /data/           → JSON/Excel Datenquellen                        │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Der Smart Bootloader

Der Bootloader ist das Herzstück der Architektur. Er löst ein komplexes Problem elegant: 151 Module in der richtigen Reihenfolge laden, abhängig von Kundenlizenzen.

Wie funktioniert das?

1. Startpunkt: index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/style.css">
  <script src="js/publixx_boot.js"></script>
</head>
<body>
  <div id="app">...</div>
  <script>
    PublixxBoot.boot({ basePath: '' });
  </script>
</body>
</html>

Eine HTML-Datei. Ein Script-Tag. Das war's.

2. Der Bootloader übernimmt

$ publixx --boot
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

PUBLIXX Template Automation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Loading modules...              45 / 67

✓ DOM Cache
✓ i18n Core  
● Render Engine...
○ Main Script

Loaded: 45  Skipped: 3  Saved: 180 KB

Die 15 Ladephasen

Phase	Was wird geladen	Warum diese Reihenfolge?
1	i18n, DOM Cache, UI Helpers	Sprache + Performance zuerst
2	Brandkit	Kundenspezifisches Branding
3	API Handler, PQL Engine, Wizard	Datenanbindung vorbereiten
4	Fonts, Constants, State, Menu	Kern-Infrastruktur
5	Utils, FileUtils, Settings	Hilfsfunktionen
6	Template Router	Template-Auswahl-Logik
7	Barcode/QR	Muss vor Render Engine!
8	Extended Elements, Rendercanvas	Die Render-Engine
9	Inspector, About	Inspector
10	Inspector, Toolbar, Drag&Drop, Main Script	Haupt-UI
11	PXF Crypto, Handler, UI	Austauschformat
12	PDF, PPTX, Word, Excel, HTML, Video...	Export-Module (conditional)
13	iiRDS Dialog, Export	Technische Dokumentation
14	Magic Layout, AutoFit, Fullscreen	Premium-Features
15	UI Permissions	Finale Berechtigungen

Conditional Loading: Nur laden, was nötig ist

// config steuert, was geladen wird:
{
  "permissions": {
    "ui": {
      "buttons": {
        "pdf": true,      // ✓ PDF-Export laden
        "pptx": true,     // ✓ PowerPoint laden
        "excel": false,   // ✗ Excel NICHT laden → 450 KB gespart
        "video": false    // ✗ Video NICHT laden → 320 KB gespart
      }
    }
  }
}

Ergebnis: Kunden ohne Excel-Lizenz laden 450 KB weniger. Schnellerer Start, weniger Traffic.

Externe Bibliotheken: Minimal & Bewährt

Publixx verwendet nur 5 externe Libraries – alle kampferprobt:

Library	Version	Zweck	Größe
jsPDF	2.5	PDF-Erzeugung	280 KB
PptxGenJS	3.12	PowerPoint-Export	320 KB
JSZip	3.10	ZIP-Archivierung	90 KB
SheetJS	0.20	Excel Import/Export	450 KB
QRCode.js	1.0	QR-Code Generierung	45 KB

Keine dieser Libraries erfordert npm, webpack, oder Build-Prozesse. Alle werden per CDN oder lokal eingebunden.

Die Modul-Architektur

IIFE-Pattern: Saubere Kapselung

Jedes Modul ist ein Immediately Invoked Function Expression:

// Beispiel: pxf-handler.js
const PXF_Handler = (function() {
  'use strict';
  
  // Private Variablen
  const VERSION = '2.3.0';
  let importedAssets = {};
  
  // Private Funktionen
  function validateFormat(data) { ... }
  
  // Öffentliche API
  return {
    exportPXF: async function(options) { ... },
    importPXF: async function(file) { ... },
    getVersion: function() { return VERSION; }
  };
})();

Vorteile:

Keine globale Verschmutzung
Klare öffentliche API
Private Implementierung geschützt
Funktioniert ohne Build-Tools

Die wichtigsten Module-Gruppen

┌─────────────────────────────────────────────────────────────────┐
│                        MODULE-GRUPPEN                           │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  CORE (unveränderlich)                                          │
│  ├── state.js          → Zentraler Anwendungszustand            │
│  ├── rendercanvas.js   → Template-Rendering                     │
│  ├── fileutils.js      → Dateioperationen                       │
│  └── constants.js      → Globale Konstanten                     │
│                                                                 │
│  UI (Benutzeroberfläche)                                        │
│  ├── inspector.js      → Eigenschaften-Panel                    │
│  ├── toolbar.js        → Menüleiste                             │
│  ├── menu.js           → Dropdown-Menüs                         │
│  └── draganddrop.js    → Drag & Drop                            │
│                                                                 │
│  EXPORT (15+ Formate)                                           │
│  ├── pdfexport.js      → PDF-Erzeugung (110 KB)                 │
│  ├── pptxexport.js     → PowerPoint (90 KB)                     │
│  ├── wordexport.js     → Word DOCX (79 KB)                      │
│  ├── imageexport.js    → PNG/JPG/WebP (60 KB)                   │
│  ├── videoexport.js    → MP4-Video (33 KB)                      │
│  └── ...               → HTML, Excel, iiRDS, DPP, etc.          │
│                                                                 │
│  DATA (Datenverarbeitung)                                       │
│  ├── datapicker.js     → Datenquellen-Auswahl (87 KB)           │
│  ├── pql-engine.js     → SQL-ähnliche Abfragen                  │
│  ├── sync-datasource.js → Live-Synchronisation                  │
│  └── formatting-rules.js → Bedingte Formatierung                │
│                                                                 │
│  i18n (Internationalisierung)                                   │
│  ├── i18n.js           → Kern-System                            │
│  ├── i18n-de.js        → Deutsch (62 KB)                        │
│  ├── i18n-en.js        → Englisch (58 KB)                       │
│  ├── i18n-fr.js        → Französisch (61 KB)                    │
│  ├── i18n-it.js        → Italienisch (58 KB)                    │
│  └── i18n-es.js        → Spanisch (60 KB)                       │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Datenfluss: Vom Template zum fertigen Dokument

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   TEMPLATE  │     │    DATA     │     │   OUTPUT    │
│   (HTML)    │  +  │   (JSON)    │  =  │  (15+ Fmt)  │
└──────┬──────┘     └──────┬──────┘     └──────┬──────┘
       │                   │                   │
       ▼                   ▼                   ▼
   Layout mit          Produktdaten         Ein PDF,
   Platzhaltern:       aus Excel/API:       PowerPoint,
   {{produktname}}     "Pumpe X200"         Word, Video...
   {{preis}}           "1.299 €"            mit echten
   {{bild}}            "pump.jpg"           Inhalten

Der Rendering-Zyklus

// 1. Template laden
state.currentTemplate = await loadTemplate('produktblatt.html');

// 2. Daten binden
state.currentData = await loadData('produkte.json');

// 3. Rendern
RenderCanvas.render(state.currentTemplate, state.currentData[0]);

// 4. Exportieren (Beispiel: PDF)
const pdf = await PDFExport.generate({
  template: state.currentTemplate,
  data: state.currentData,
  options: { quality: 'print', bleed: 3 }
});

Konfiguration: Eine Datei für alles

Die config.json steuert alles – ohne Code-Änderungen:

{
  // Datenquellen
  "xlsxUrl": "/data/produkte.xlsx",
  "xlsxSheet": "Katalog",
  
  // Templates
  "templateUrl": "/templates/produktblatt.html",
  "templateRouter": true,
  
  // Branding
  "defaultLogo": "/assets/logo.png",
  "defaultBgColor": "#ffffff",
  
  // Features aktivieren/deaktivieren
  "permissions": {
    "ui": {
      "buttons": {
        "pdf": true,
        "pptx": true,
        "word": true,
        "excel": false,
        "video": false
      },
      "features": {
        "magicLayout": true,
        "autoFit": true,
        "aiFeatures": false
      }
    }
  },
  
  // API-Integrationen
  "apis": {
    "googleCloud": { "enabled": true },
    "openai": { "enabled": false }
  }
}

Deployment-Varianten:

Minimal: PDF + PowerPoint für Händler
Standard: Alle Print-Formate + Web
Enterprise: Alle Formate + AI + API

Gleicher Code, unterschiedliche config.json.

Performance-Zahlen

Metrik	Wert	Vergleich
Initiales Laden	2-4 Sekunden	Canva: 8-12s
Code-Größe (JS)	3,5 MB	React-App: 5-15 MB
Externe Dependencies	5	Typische SPA: 200+
Zeit bis erstes Rendern	< 500ms	Nach Boot
Export PDF (10 Seiten)	3-5 Sekunden	Client-seitig
Offline-fähig	Ja	Nach einmaligem Laden

Deployment-Szenarien

Szenario 1: Einfacher Webserver

/var/www/publixx/
├── index.html
├── js/
├── css/
├── templates/
└── data/

Fertig. Apache/nginx konfigurieren, URL aufrufen.

Szenario 2: S3 + CloudFront

aws s3 sync ./publixx s3://my-bucket/publixx
aws cloudfront create-invalidation --distribution-id XXX --paths "/*"

Zusammenfassung

Aspekt	Publixx-Ansatz
Backend	Keins – 100% Browser
Framework	Vanilla JS – keine Migration
Module	151 IIFE-Module, phasenweise geladen
Konfiguration	Eine JSON-Datei
Deployment	Statische Dateien kopieren
Offline	Vollständig unterstützt
Updates	Dateien austauschen, fertig