{"id":693,"date":"2026-06-16T23:30:37","date_gmt":"2026-06-16T22:30:37","guid":{"rendered":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/?p=693"},"modified":"2026-07-07T23:31:20","modified_gmt":"2026-07-07T22:31:20","slug":"vaadin-flow-25-moderne-full-stack-webentwicklung-rein-in-java","status":"publish","type":"post","link":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/?p=693","title":{"rendered":"Vaadin Flow 25 \u2013 Moderne Full-Stack-Webentwicklung rein in Java"},"content":{"rendered":"\n

Stell dir vor, du k\u00f6nntest eine moderne Single-Page-Application schreiben, ohne eine Zeile JavaScript, HTML oder CSS \u2014 nur mit Java. Genau das erm\u00f6glicht Vaadin Flow: Serverseitige UI-Komponenten, die im Browser als Web Components gerendert werden. Vaadin 25 bringt diesen Ansatz auf den neuesten Stand mit Spring-Boot-Integration, virtueller Scroll-Liste und fl\u00fcssigem Daten-Binding.<\/p>\n\n\n\n

Dieser Artikel f\u00fchrt dich durch die Erstellung einer vollst\u00e4ndigen Todo-App mit Vaadin Flow 25 und Spring Boot.<\/p>\n\n\n\n

Was ist Vaadin Flow?<\/h2>\n\n\n\n

Vaadin Flow ist ein serverseitiges UI-Framework: Du schreibst Java-Klassen, die UI-Komponenten wie Buttons, Textfelder und Grids repr\u00e4sentieren. Die Kommunikation zwischen Server und Browser l\u00e4uft automatisch \u00fcber WebSockets. Du interagierst nie direkt mit dem DOM \u2014 Vaadin \u00fcbernimmt das Rendering und Event-Handling vollst\u00e4ndig.<\/p>\n\n\n\n

Die aktuelle Version 25.2.1<\/strong> (Juni 2026) l\u00e4uft mit Spring Boot 4.0+ und Java 21+.<\/p>\n\n\n\n

Projekt-Setup<\/h2>\n\n\n\n

Maven \u2014 Spring Boot + Vaadin BOM:<\/strong><\/p>\n\n\n

<parent<\/span>><\/span>\n    <groupId<\/span>><\/span>org.springframework.boot<\/groupId<\/span>><\/span>\n    <artifactId<\/span>><\/span>spring-boot-starter-parent<\/artifactId<\/span>><\/span>\n    <version<\/span>><\/span>4.0.4<\/version<\/span>><\/span>\n<\/parent<\/span>><\/span>\n\n<properties<\/span>><\/span>\n    <java.version<\/span>><\/span>21<\/java.version<\/span>><\/span>\n    <vaadin.version<\/span>><\/span>25.2.1<\/vaadin.version<\/span>><\/span>\n<\/properties<\/span>><\/span>\n\n<dependencyManagement<\/span>><\/span>\n    <dependencies<\/span>><\/span>\n        <dependency<\/span>><\/span>\n            <groupId<\/span>><\/span>com.vaadin<\/groupId<\/span>><\/span>\n            <artifactId<\/span>><\/span>vaadin-bom<\/artifactId<\/span>><\/span>\n            <version<\/span>><\/span>${vaadin.version}<\/version<\/span>><\/span>\n            <type<\/span>><\/span>pom<\/type<\/span>><\/span>\n            <scope<\/span>><\/span>import<\/scope<\/span>><\/span>\n        <\/dependency<\/span>><\/span>\n    <\/dependencies<\/span>><\/span>\n<\/dependencyManagement<\/span>><\/span>\n\n<dependencies<\/span>><\/span>\n    <dependency<\/span>><\/span>\n        <groupId<\/span>><\/span>com.vaadin<\/groupId<\/span>><\/span>\n        <artifactId<\/span>><\/span>vaadin-spring-boot-starter<\/artifactId<\/span>><\/span>\n    <\/dependency<\/span>><\/span>\n<\/dependencies<\/span>><\/span>\n<\/code><\/span>Code-Sprache:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Das Datenmodell und der Service<\/h2>\n\n\n\n
Zun\u00e4chst das Domain-Objekt und eine In-Memory-Service-Schicht:<\/p>\n\n\n
import<\/span> java.util.concurrent.CopyOnWriteArrayList;\n\npublic class<\/span> Todo<\/span> <\/span>{\n    private Long id;\n    private String<\/span> task;\n    private boolean done;\n\n    public Todo() {}\n\n    public Todo(Long id, String<\/span> task) {\n        this<\/span>.id = id;\n        this<\/span>.task = task;\n    }\n\n    public Long getId() { return<\/span> id; }\n    public void<\/span> setId(Long id) { this<\/span>.id = id; }\n    public String<\/span> getTask() { return<\/span> task; }\n    public void<\/span> setTask(String<\/span> task) { this<\/span>.task = task; }\n    public boolean isDone() { return<\/span> done; }\n    public void<\/span> setDone(boolean done) { this<\/span>.done = done; }\n}\n<\/code><\/span>Code-Sprache:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
import org.springframework.stereotype.Service;\nimport java.util.*;\nimport java.util.concurrent.atomic.AtomicLong;\n\n@Service\npublic<\/span> class<\/span> TodoService<\/span> <\/span>{\n    private<\/span> final<\/span> List<\/span><Todo> todos = new<\/span> CopyOnWriteArrayList<>();\n    private<\/span> final<\/span> AtomicLong counter = new<\/span> AtomicLong(1<\/span>);\n\n    public<\/span> List<\/span><Todo> findAll() {\n        return<\/span> Collections.unmodifiableList(todos);\n    }\n\n    public<\/span> Todo add(String task) {\n        Todo todo = new<\/span> Todo(counter.getAndIncrement(), task);\n        todos.add(todo);\n        return<\/span> todo;\n    }\n\n    public<\/span> void remove(Todo todo) {\n        todos.remove(todo);\n    }\n\n    public<\/span> void toggle(Todo todo) {\n        todo.setDone(!todo.isDone());\n    }\n}\n<\/code><\/span>Code-Sprache:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
Die Haupt-View mit @Route<\/h2>\n\n\n\n
Vaadin Views werden mit @Route<\/code> annotiert. Das folgende TodoView<\/code> baut eine komplette Benutzeroberfl\u00e4che aus Java-Komponenten zusammen:<\/p>\n\n\n
import<\/span> com.vaadin.flow.component.Key;\nimport<\/span> com.vaadin.flow.component.button.Button;\nimport<\/span> com.vaadin.flow.component.button.ButtonVariant;\nimport<\/span> com.vaadin.flow.component.grid.Grid;\nimport<\/span> com.vaadin.flow.component.icon.VaadinIcon;\nimport<\/span> com.vaadin.flow.component.orderedlayout.HorizontalLayout;\nimport<\/span> com.vaadin.flow.component.orderedlayout.VerticalLayout;\nimport<\/span> com.vaadin.flow.component.textfield.TextField;\nimport<\/span> com.vaadin.flow.router.PageTitle;\nimport<\/span> com.vaadin.flow.router.Route;\n\n@Route(\"\"<\/span>)\n@PageTitle(\"Todo App\"<\/span>)\npublic class<\/span> TodoView<\/span> extends<\/span> VerticalLayout<\/span> <\/span>{\n\n    private final TodoService service;\n    private final Grid<Todo> grid = new<\/span> Grid<>(Todo.class, false<\/span>);\n    private final TextField taskField = new<\/span> TextField();\n\n    public TodoView(TodoService service) {\n        this<\/span>.service = service;\n\n        taskField.setPlaceholder(\"Neue Aufgabe eingeben...\"<\/span>);\n        taskField.setClearButtonVisible(true<\/span>);\n\n        Button addButton = new<\/span> Button(\"Hinzuf\u00fcgen\"<\/span>, VaadinIcon.PLUS.create());\n        addButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);\n        addButton.addClickListener(e -> addTodo());\n        addButton.addClickShortcut(Key.ENTER);\n\n        grid.addColumn(Todo::getId).setHeader(\"ID\"<\/span>).setWidth(\"80px\"<\/span>);\n        grid.addColumn(Todo::getTask).setHeader(\"Aufgabe\"<\/span>).setAutoWidth(true<\/span>);\n\n        grid.addComponentColumn(todo -> {\n            Button doneBtn = new<\/span> Button(\n                todo.isDone() ? \"\u2705\"<\/span> : \"\u2b1c\"<\/span>,\n                e -> { service.toggle(todo); refreshGrid(); }\n            );\n            return<\/span> doneBtn;\n        }).setHeader(\"Status\"<\/span>).setWidth(\"80px\"<\/span>);\n\n        grid.addComponentColumn(todo -> {\n            Button deleteBtn = new<\/span> Button(\"L\u00f6schen\"<\/span>, VaadinIcon.TRASH.create());\n            deleteBtn.addThemeVariants(ButtonVariant.LUMO_ERROR, ButtonVariant.LUMO_SMALL);\n            deleteBtn.addClickListener(e -> {\n                service.remove(todo);\n                refreshGrid();\n            });\n            return<\/span> deleteBtn;\n        }).setWidth(\"120px\"<\/span>);\n\n        HorizontalLayout toolbar = new<\/span> HorizontalLayout(taskField, addButton);\n        toolbar.setDefaultVerticalComponentAlignment(Alignment.BASELINE);\n        toolbar.setWidthFull();\n\n        add(toolbar, grid);\n        refreshGrid();\n    }\n\n    private void<\/span> addTodo() {\n        String<\/span> task = taskField.getValue().trim();\n        if<\/span> (!task.isEmpty()) {\n            service.add(task);\n            taskField.clear();\n            refreshGrid();\n        }\n    }\n\n    private void<\/span> refreshGrid() {\n        grid.setItems(service.findAll());\n    }\n}\n<\/code><\/span>Code-Sprache:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Routing: Mehrseitige Apps mit @Route<\/h2>\n\n\n\n
Vaadin Flow bietet ein volles Routing-System mit Parameter-Support und verschachtelten Layouts:<\/p>\n\n\n
<em>\/\/ Haupt-Layout mit Navigationsleiste<\/em><\/span>\npublic class<\/span> MainLayout<\/span> extends<\/span> AppLayout<\/span> implements<\/span> RouterLayout<\/span> <\/span>{\n    public MainLayout() {\n        DrawerToggle toggle = new<\/span> DrawerToggle();\n        H1 title = new<\/span> H1(\"Meine App\"<\/span>);\n        addToNavbar(toggle, title);\n\n        VerticalLayout drawer = new<\/span> VerticalLayout(\n            new<\/span> RouterLink(\"Todos\"<\/span>, TodoView.class),\n            new<\/span> RouterLink(\"Statistik\"<\/span>, StatsView.class)\n        );\n        addToDrawer(drawer);\n    }\n}\n\n<em>\/\/ View mit Pfad-Parameter<\/em><\/span>\n@Route(value = \"todo\/:todoId\"<\/span>, layout = MainLayout.class)\npublic class<\/span> TodoDetailView<\/span> extends<\/span> VerticalLayout<\/span>\n        implements<\/span> BeforeEnterObserver<\/span> <\/span>{\n    @Override\n    public void<\/span> beforeEnter(BeforeEnterEvent event) {\n        String<\/span> todoId = event.getRouteParameters().get(\"todoId\"<\/span>)\n            .orElse(\"unbekannt\"<\/span>);\n        add(new<\/span> H2(\"Todo #\"<\/span> + todoId));\n    }\n}\n\n<em>\/\/ Programmgesteuerte Navigation<\/em><\/span>\ngetUI().ifPresent(ui -> ui.navigate(\"todo\/\"<\/span> + someId));\n<\/code><\/span>Code-Sprache:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Formular-Validierung mit dem Binder<\/h2>\n\n\n\n
Vaadin’s Binder<T><\/code>-Klasse erm\u00f6glicht typsichere Zwei-Wege-Datenbindung zwischen UI-Komponenten und Beans:<\/p>\n\n\n
import<\/span> com.vaadin.flow.data.binder.Binder;\nimport<\/span> com.vaadin.flow.component.checkbox.Checkbox;\n\npublic class<\/span> TodoEditor<\/span> extends<\/span> VerticalLayout<\/span> <\/span>{\n    private final Binder<Todo> binder = new<\/span> Binder<>(Todo.class);\n    private final TextField task = new<\/span> TextField(\"Aufgabe\"<\/span>);\n    private final Checkbox done = new<\/span> Checkbox(\"Erledigt\"<\/span>);\n    private Todo currentTodo;\n\n    public TodoEditor() {\n        binder.forField(task)\n            .asRequired(\"Aufgabe darf nicht leer sein\"<\/span>)\n            .withValidator(t -> t.length() >= 3<\/span>,\n                \"Mindestens 3 Zeichen erforderlich\"<\/span>)\n            .bind(\"task\"<\/span>);\n\n        binder.forField(done).bind(\"done\"<\/span>);\n\n        Button save = new<\/span> Button(\"Speichern\"<\/span>, e -> {\n            if<\/span> (binder.writeBeanIfValid(currentTodo)) {\n                Notification.show(\"Gespeichert!\"<\/span>);\n            }\n        });\n\n        add(task, done, save);\n    }\n\n    public void<\/span> edit(Todo todo) {\n        this<\/span>.currentTodo = todo;\n        binder.readBean(todo);\n    }\n}\n<\/code><\/span>Code-Sprache:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Fazit<\/h2>\n\n\n\n
Vaadin Flow ist kein Framework f\u00fcr jede Anwendung \u2014 aber f\u00fcr datenintensive Business-Apps mit komplexen CRUD-Formularen ist es unschlagbar produktiv. Der Verzicht auf eine separate Frontend-Codebase bedeutet weniger Context-Switching, weniger Schnittstellen und schnellere Entwicklung.<\/p>\n\n\n\n
Mit Vaadin 25, Spring Boot 4.0 und der nahtlosen Binder-API schreibst du Full-Stack-Apps in reinem Java \u2014 und der Browser raunzt nie, weil kein JavaScript fehlt.<\/p>\n","protected":false},"excerpt":{"rendered":"
Stell dir vor, du k\u00f6nntest eine moderne Single-Page-Application schreiben, ohne eine Zeile JavaScript, HTML oder CSS \u2014 nur mit Java. Genau das erm\u00f6glicht Vaadin Flow: Serverseitige UI-Komponenten, die im Browser als Web Components gerendert werden. Vaadin 25 bringt diesen Ansatz auf den neuesten Stand mit Spring-Boot-Integration, virtueller Scroll-Liste und fl\u00fcssigem Daten-Binding. Dieser Artikel f\u00fchrt dich […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-693","post","type-post","status-publish","format-standard","hentry","category-spring"],"_links":{"self":[{"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=\/wp\/v2\/posts\/693","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=693"}],"version-history":[{"count":1,"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=\/wp\/v2\/posts\/693\/revisions"}],"predecessor-version":[{"id":694,"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=\/wp\/v2\/posts\/693\/revisions\/694"}],"wp:attachment":[{"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=693"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=693"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xn--javaeinfacherklrt-4qb.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}