1. Einleitung

In diesem Projekt wird gezeigt, wie eine serverseitige Webanwendung mit Quarkus, Renarde, Qute und htmx realisiert werden kann. Ziel ist es, eine einfache, aber moderne ToDo-Anwendung zu entwickeln, die komplett in Java implementiert ist und dennoch auf der Benutzeroberfläche reaktiv wirkt – ohne große Frontend-Frameworks wie React oder Angular.

2. Warum Renarde?

In einer Welt, in der viele Webframeworks entweder zu schwergewichtig oder zu fragmentiert sind, setzt Renarde auf Klarheit, Einfachheit und moderne Entwicklererfahrung – und das vollständig im Java-Ökosystem.

2.1. Was ist Renarde?

Renarde ist ein serverseitiges MVC-Webframework, das auf Quarkus aufsetzt. Es richtet sich an Entwickler:innen, die moderne Webanwendungen in Java schreiben möchten – ohne auf das übliche Overhead eines typischen Java-Stacks zu stoßen.

Kernidee: Produktivität und Klarheit wie in modernen Frameworks (z. B. Rails, Django), aber vollständig in Java und Quarkus-nativ.

2.2. Stärken von Renarde

Eigenschaft Vorteil

Echte Full-Stack Java Entwicklung

Frontend, Backend, Routing, Validierung – alles in einer Sprache.

Nahtloses Zusammenspiel mit Quarkus

Alle Vorteile von Quarkus – schnelle Startup-Zeit, GraalVM-Optimierung, Dev-Mode – stehen sofort zur Verfügung.

Klares MVC-Konzept

Models, Controller und Views sind logisch getrennt und gut strukturiert.

Qute-Integration

Moderne, typensichere Templates direkt im Java-Umfeld.

Entwicklerfreundlich

Kein unnötiger XML-Overhead, wenig Konfiguration, klare Syntax.

2.3. Renarde im Vergleich

Framework Sprache Templates JS nötig? Fokus

Renarde + Qute

Java

Qute

kaum (htmx)

Einfach & serverseitig

Spring MVC

Java

Thymeleaf

mittel

umfangreich, konfigurierbar

Rails

Ruby

ERB

mittel

produktiv, fullstack

Express.js

JS

Handlebars

hoch

minimal, JS-zentriert

Renarde fühlt sich dabei wie eine Mischung aus dem Pragmatismus von Rails und der Stabilität von Java an – jedoch ohne Ballast.

2.4. Wann sollte man Renarde nutzen?

  • Du willst eine Webanwendung in Java bauen

  • Du willst keine eigene JavaScript-Single-Page-App pflegen

  • Du willst Serverlogik und UI-Logik nicht trennen

  • Du brauchst Produktivität ohne Vendor-Lock-in

3. Unser Projekt

3.1. Technologien im Überblick

Technologie Beschreibung

Quarkus

Ein modernes, containerfreundliches Java-Framework mit Fokus auf Entwicklerproduktivität und schnelle Startup-Zeiten. Optimal für Cloud-native Anwendungen.

Renarde

Ein auf Quarkus basierendes MVC-Framework. Es bietet Routing, Validierung, Formularverarbeitung und REST-Endpunkte auf einfache Weise.

Qute

Die Template-Engine von Quarkus. Sie trennt Präsentation und Logik klar und unterstützt typsicheres Templating.

htmx

Eine leichtgewichtige JavaScript-Bibliothek, mit der man HTML über AJAX, WebSockets oder Server-Sent Events aktualisieren kann – ohne eigenes JavaScript schreiben zu müssen.

3.2. Ziel des Projekts

Ziel ist es, eine funktionsfähige ToDo-Liste umzusetzen mit:

  • Anzeige aller Aufgaben

  • Hinzufügen neuer Aufgaben

  • Löschen von Aufgaben

  • Verwendung von Qute für die Anzeige

  • Dynamisches Nachladen mit htmx ohne Seitenreload

  • Backend-Logik mit Renarde

3.3. Projekt erstellen

Ein Quarkus-Projekt mit Renarde, Qute und Hibernate kann über den folgenden Befehl erstellt werden:

mvn io.quarkus.platform:quarkus-maven-plugin:3.6.4:create \
  -DprojectGroupId=com.example \
  -DprojectArtifactId=todo-app \
  -DclassName="com.example.controller.TaskController" \
  -Dextensions="renarde, qute, hibernate-orm-panache"
cd todo-app

Dies erzeugt ein vollständiges Projekt mit den wichtigsten Komponenten für Backend, Templating und Datenbankzugriff.

3.4. Projektstruktur

src/
├── main/
│   ├── java/com/example/
│   │   ├── model/Task.java              // Datenmodell
│   │   ├── controller/TaskController.java // Weblogik
│   │   └── repositories/TaskRepository.java // Datenzugriff
│   └── resources/templates/
│       └── task/
│           ├── index.qute.html          // Hauptansicht

3.5. Datenmodell: Task

Das Datenmodell besteht aus einer Entität Task, die in der Datenbank gespeichert wird:

@Entity
public class Task extends PanacheEntity {
    public String title;
    public boolean done;
}

3.6. Repository: TaskRepository

Für den Datenbankzugriff wird ein Repository definiert:

@ApplicationScoped
public class TaskRepository implements PanacheRepository<Task> {
}

3.7. Controller: TaskController

Der Controller steuert die Benutzerinteraktionen. Er bietet Funktionen zum Anzeigen, Hinzufügen und Löschen von Aufgaben:

@Path("/")
public class TaskController extends Controller {

    @Inject
    TaskRepository repo;

    @GET
    public TemplateInstance index() {
        List<Task> tasks = repo.listAll();
        return Templates.task.index(tasks);
    }

    @POST
    @Transactional
    public void add(String title) {
        if (!title.isBlank()) {
            Task task = new Task();
            task.title = title;
            repo.persist(task);
        }
        redirect();
    }

    @POST
    @Path("delete/{id}")
    @Transactional
    public void delete(Long id) {
        repo.deleteById(id);
        redirect();
    }
}

Wichtig:

  • @POST-Methoden verarbeiten Formulareingaben.

  • redirect() ruft die Indexseite neu auf.

  • Die HTML-Formulare nutzen hx-post, was einen POST-Request ohne vollständigen Seitenreload auslöst.

3.8. Qute Template: index.qute.html

Dieses Template stellt die HTML-Oberfläche dar. Es enthält das Formular sowie die Liste der Aufgaben.

<!DOCTYPE html>
<html>
<head>
    <title>ToDo App</title>
    <script src="https://unpkg.com/htmx.org@1.9.2"></script>
</head>
<body>
    <h1>Meine Aufgaben</h1>

    <form hx-post="/" hx-target="#task-list" hx-swap="outerHTML">
        <input type="text" name="title" placeholder="Neue Aufgabe">
        <button type="submit">Hinzufügen</button>
    </form>

    <div id="task-list">
        {#for task in tasks}
            <div>
                {task.title}
                <form hx-post="/delete/{task.id}" hx-target="#task-list" hx-swap="outerHTML" style="display:inline">
                    <button type="submit">Löschen</button>
                </form>
            </div>
        {/for}
    </div>
</body>
</html>

Erklärung:

  • hx-post="/": Sende das Formular an den Root-Controller per POST.

  • hx-target="#task-list": Der Bereich mit der ID task-list wird ersetzt.

  • hx-swap="outerHTML": Der gesamte div-Inhalt wird ersetzt.

3.9. Anwendung starten

Starte die Anwendung mit:

mvn quarkus:dev

→ Die App ist unter http://localhost:8080 erreichbar.

3.10. Funktionstest

  1. Öffne die Anwendung im Browser.

  2. Gib eine neue Aufgabe ein → Hinzufügen

  3. Die Liste wird automatisch aktualisiert, ohne Seite neu zu laden.

  4. Klick auf Löschen entfernt Einträge sofort – ebenfalls ohne Reload.

3.11. Vorteile dieser Architektur

  • Weniger JavaScript – htmx benötigt keinen eigenen Code.

  • Schnelles Feedback – Aufgaben erscheinen sofort nach Eingabe.

  • Saubere Trennung – Qute trennt HTML von Logik.

  • Klares Backend – dank Renarde strukturierter Codefluss.

3.12. Erweiterungsmöglichkeiten

  • Aufgaben als erledigt markieren (Checkbox + done-Feld)

  • Validierung mit @NotBlank und Anzeige im Template

  • Benutzerverwaltung (z. B. mit Quarkus Security)

  • AJAX-basierte Validierung mit htmx

  • Ladeanimationen, Pagination oder Filterfunktionen

4. Quellen