Zuletzt aktualisiert am 14. Mai 2025 durch Jürgen Voskuhl
Die meisten Leser:innen dieses Blogs kennen Content Management Systeme wie WordPress, Joomla und TYPO3. Für bestimmte Aufgabenstellungen drängen sich jedoch andere Lösungen auf. Dies ist beispielsweise der Fall, wenn es um statische Websites geht, wie sie etwa bei Dokumentationen vorkommen.
Ein anderes Beispiel sind Social Media Netzwerke oder Angebote wie Netflix und Magenta TV, die auf große Nutzerzahlen ausgelegt sind, aber immer nur relativ wenig Informationen gleichzeitig anzeigen. Hier spielen sogenannte Single Page Apps ihre Stärken aus! Viele Lösungen sind zudem als Open Source verfügbar. Tauchen Sie also gemeinsam mit uns in die Welt von JavaScript-Frameworks, wieder verwendbaren Komponenten und Digitale Souveränität ein!
In diesem Beitrag erklären wir zunächst die wichtigsten Begriffe und Technologien. Anschließend stellen wir Ihnen einige Projekte vor, an deren Realisierung wir beteiligt waren oder sind.
Die Kraft von Open Source in der Webentwicklung
Open-Source-Software bietet entscheidende Vorteile, auch für die öffentliche Verwaltung:
- Digitale Souveränität: Unabhängigkeit von proprietären Anbietern und deren Geschäftsmodellen.
- Transparenz: Der offene Quellcode ermöglicht Einblick in die Funktionsweise der Software und fördert so Vertrauen.
- Kosteneffizienz: Keine Lizenzgebühren und geringere Gesamtbetriebskosten.
- Flexibilität: Anpassbarkeit an spezifische Anforderungen ohne Abhängigkeit von einzelnen Anbietern.
- Sicherheit: Eine aktive Community entdeckt und behebt Sicherheitslücken oft schneller als bei proprietärer Software.
- Nachhaltigkeit: Langfristige Verfügbarkeit und Weiterentwicklung durch die Community.
Was sind Single Page Applications (SPAs)?
Single Page Applications sind Webanwendungen, die auf einer einzigen HTML-Seite laufen und deren Inhalte dynamisch nachgeladen werden, ohne dass die gesamte Seite neu geladen werden muss. Im Gegensatz zu traditionellen Websites, bei denen jeder Klick einen vollständigen Seitenladevorgang auslöst, aktualisieren SPAs nur die Teile der Seite, die sich tatsächlich ändern.
Vorteile von SPAs:
- Schnellere Nutzererfahrung: Nach dem initialen Laden werden nur noch Daten, nicht aber die gesamte Seite übertragen.
- Flüssigere Übergänge: Keine Unterbrechungen durch Seitenneuladen führen zu einer App-ähnlichen Erfahrung.
- Geringere Serverlast: Der Server muss nur Daten, nicht vollständige HTML-Seiten liefern.
- Offline-Fähigkeit: SPAs können so konzipiert werden, dass sie auch ohne Internetverbindung funktionieren.
Nachteile von SPAs:
- Höhere initiale Ladezeit: Die Anwendung muss zunächst vollständig geladen werden.
- SEO-Herausforderungen: Suchmaschinen können dynamisch geladene Inhalte schwerer indexieren (obwohl moderne Frameworks hier Lösungen bieten).
- Höhere Komplexität: Die Entwicklung erfordert spezifisches Know-how.
Was ist React?
React ist eine Open-Source-JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Im Gegensatz zu herkömmlichen Content-Management-Systemen (CMS) wie WordPress oder TYPO3 ist React keine All-in-One-Lösung, sondern ein flexibles Werkzeug, das sich auf die Darstellung der Benutzeroberfläche konzentriert.
Vorteile gegenüber konventionellen CMS:
- Hohe Performance: Optimierte Aktualisierung der Benutzeroberfläche führt zu schnelleren Ladezeiten.
- Komponenten-basierte Architektur: Wiederverwendbare Bausteine ermöglichen eine effiziente Entwicklung und Wartung.
- Große Community: Eine aktive Entwicklergemeinschaft sorgt für kontinuierliche Verbesserungen und umfangreiche Ressourcen.
Was sind Komponenten?
Komponenten sind wieder verwendbare, unabhängige Codeblöcke, die einen bestimmten Teil der Benutzeroberfläche darstellen. Stellen Sie sich Komponenten wie Legosteine vor – jeder Stein hat eine spezifische Funktion, und zusammen bilden sie die gesamte Anwendung.
Der große Vorteil: Einmal erstellt, können Komponenten überall in der Anwendung wiederverwendet werden. Ändert sich das Design oder die Funktionalität einer Komponente, wird die Änderung automatisch überall übernommen, wo diese Komponente verwendet wird.
Was ist Next.js?
Next.js ist ein React-Framework, das zusätzliche Funktionen und Optimierungen bietet. Es wurde entwickelt, um einige der Herausforderungen zu lösen, die bei der Erstellung größerer Webanwendungen auftreten können.
Next.js steht als Open Source zur Verfügung.
Vorteile gegenüber konventionellen CMS:
- Server-Side Rendering (SSR): Verbessert die Ladezeiten und SEO-Fähigkeiten.
- Statische Seitengenerierung: Ermöglicht das Vorrendern von Seiten für maximale Performance.
- Integriertes Routing: Vereinfacht die Navigation zwischen Seiten.
- Open-Source-Ökosystem: Profitiert von einer großen Community und zahlreichen Erweiterungen.
Was ist Docusaurus?
Docusaurus ist ein statischer Website-Generator, der speziell für Dokumentationswebsites konzipiert wurde. Er ermöglicht die einfache Erstellung und Wartung von Dokumentationen.
Docusaurus steht ebenfalls als Open-Source zur Verfügung.
Vorteile gegenüber konventionellen CMS:
- Optimiert für Dokumentationen: Bietet integrierte Funktionen wie Versionierung, Suchfunktion und Navigationsstrukturen.
- Markdown-basiert: Einfache Erstellung und Bearbeitung von Inhalten ohne HTML-Kenntnisse.
- Schnelle Ladezeiten: Generiert statische HTML-Seiten für optimale Performance.
- Open-Source-Gemeinschaft: Kontinuierliche Verbesserungen und Erweiterungen durch die Community.
Unsere Expertise für die öffentliche Verwaltung
Seit 2022 unterstützt itcv im Auftrag der SINC die FITKO (Föderale IT-Kooperation) - eine vom IT-Planungsrats ins Leben gerufene Organisation, welche die Digitalisierung der öffentlichen Verwaltung koordiniert und vorantreibt.
In dieser Zeit waren wir an zahlreichen Projekte beteiligt und haben passgenaue Lösungen für spezifische Anforderungen unter Anwendung moderner Open-Source-Technologien entwickelt.
Im Folgenden stellen wir Ihnen ausgewählte Projekte aus unserem Portfolio vor.
Dokumentation zur Interoperabilisierung von FIM und XÖV
URL: https://docs.fitko.de/fim-xoev/docs/
Diese Dokumentationsplattform auf Basis von Docusaurus bietet umfassende Informationen zur Interoperabilität zwischen dem Föderalen Informationsmanagement (FIM) und XML in der öffentlichen Verwaltung (XÖV). Die klare Struktur und die integrierte Suchfunktion ermöglichen Nutzern einen schnellen Zugriff auf relevante Informationen.
Standardisierungsagenda
URL: https://docs.fitko.de/standardisierungsagenda/docs/
Im Rahmen des Projekts ging es zunächst um die Erarbeitung eines strukturierten Prozesses: die Standardisierungsagenda. Sie dient als zentrale Übersicht und Orientierung für das Föderale IT-Standardisierungsboard (FIT-SB) und beantwortet die wichtigsten Fragen zu Themen, Abläufen und Zusammenhängen bei der Standardisierung in der öffentlichen Verwaltung. Die Agenda wurde auf der Plattform Docusaurus erstellt und setzt neben der konventionellen Navigation bewusst auf animierte und klickbare Grafiken, um komplexe Prozesse verständlich und interaktiv darzustellen.
Informationsplattform für Föderale IT-Standards
URL: https://docs.fitko.de/fit-standards/
Diese mit Next.js entwickelte Plattform dient als zentrale Informationsquelle für föderale IT-Standards. Die Kombination aus statischen und dynamischen Inhalten bietet eine optimale Balance zwischen Performance und Funktionalität. Als Open-Source-Lösung unterstützt sie die Transparenz-Anforderungen öffentlicher Einrichtungen.
Besonders hervorzuheben ist hierbei, dass die Datenpflege der Informationsplattform in OpenProject (Bestandteil von openDesk, vgl. folgender Abschnitt) erfolgt. Die Übertragung der Informationen erfolgt dabei auf Anforderung von der Informationsplattform aus durch Zugriff auf die von OpenProject bereitgestellte API-Schnittstelle.
OpenProject hat die umgesetzte Lösung als Fallstudie veröffentlicht.
Nutzungsanleitung „openDesk" für das Föderale IT-Standardisierungsboard
URL: https://docs.fitko.de/fit/fit-sb/
openDesk ist eine anpassungsfähige Office- und Kollaborations-Suite, die speziell für die Bedürfnisse der öffentlichen Verwaltung entwickelt wurde und dabei ausschließlich Open-Source-Technologien nutzt. Die Plattform ermöglicht den Mitgliedern des FIT-SB eine gemeinsame Bearbeitung von Dokumenten, strukturierte Diskussionen und transparente Entscheidungsprozesse bei der Entwicklung föderaler IT-Standards.
Im Anschluss an die Entwicklung der Standardisierungsagenda wurde die Nutzungsanleitung für openDesk erstellt. Sie bietet eine umfassende Einführung in die wichtigsten Funktionen der Plattform – von der Anmeldung über die Navigation bis hin zu spezifischen Workflows für die standardisierende Arbeit des Boards. Besonders hervorzuheben ist die klare Struktur der Dokumentation sowie die Nutzung von Markdown, die eine einfache und nachhaltige Aktualisierung des Inhalts ermöglicht. Eine integrierte Suchfunktion unterstützt darüber hinaus den schnellen Zugriff auf relevante Informationen.
Teamarbeit im Fokus
Alle drei Projekte – Standardisierungsagenda, openDesk-Nutzungsanleitung und die Informationsplattform für Föderale IT-Standards – wurden in enger Zusammenarbeit eines Projektteams realisiert, bestehend aus Mitarbeitern von FITKO (als federführende Organisation und Product Owner), SINC und itcv. Diese interdisziplinäre und gemeinschaftliche Herangehensweise war maßgeblich für die Entstehung von drei praxisnahen, benutzerfreundlichen und technisch soliden Informationsressourcen, die die Arbeit des FIT-SB nachhaltig unterstützen.
Ihr Projekt mit Open-Source-Technologien?
Stehen Sie vor der Herausforderung, komplexe Informationen benutzerfreundlich zu präsentieren? Benötigen Sie eine performante, wartbare Webplattform für Ihre Organisation? Wir bei itcv bringen die Expertise mit, um Ihre Anforderungen mit modernen Open-Source-Technologien umzusetzen.
Kontaktieren Sie uns für ein unverbindliches Beratungsgespräch, in dem wir gemeinsam die optimale Lösung für Ihr Projekt entwickeln.
