Was Sie über Vaadin wissen müssen – das serverseitige AJAX-Framework mit integrierter Batterie

Ich habe viel über geschrieben. Ich war so begeistert, dass ich das darüber (neben dem Book of Vaadin), die für Vaadin 7 und eine darüber geschrieben habe. Trotzdem bin ich erstaunt, dass so viele Leute in der JVM-Welt noch nie davon gehört haben.

In diesem Beitrag möchte ich Vaadin im Kontext von AJAX und SSR vorstellen.

Eine kurze Einführung in Vaadin

Das Schöne an Vaadin ist seine Einfachheit – Sie schreiben nur Backend-Code . Das haben Sie richtig gelesen. Ein Vaadin-Entwickler muss nur Java oder eine beliebige JVM-Sprache und die Vaadin-API kennen. Zur Laufzeit erstellt Vaadin den clientseitigen Code, d . h. HTML, JavaScript und CSS. Dieser Ansatz ermöglicht es Entwicklern, sich auf die Kernfunktionalität der Anwendung zu konzentrieren, was den Entwicklungsprozess produktiver macht.

Vaadin baut auf Komponenten und Layouts auf, genau wie herkömmliche Desktop-Frameworks. Wenn Sie Swing oder JavaFX kennen, werden Sie sich sofort zu Hause fühlen.

Ich habe CSS oben erwähnt: Vaadin ermöglicht Ihnen die Entwicklung Ihres CSS in einem dedizierten, wiederverwendbaren Paket namens Theme . Das Sahnehäubchen: Die Entwicklung eines Themes kann parallel zur Backend-Entwicklung erfolgen und ist nicht an letztere gebunden; der Code muss keine bestimmte Vorlage verwenden oder dem HTML bestimmte Klassen hinzufügen.

Vaadin-Einrichtung

Das Einrichten von Vaadin im Kontext von Spring Boot ist ein Kinderspiel:

 <project> <properties> <java.version>17</java.version> <kotlin.version>1.9.24</kotlin.version> <vaadin.version>24.4.9</vaadin.version> <!--1--> </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <!--2--> <version>${vaadin.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-spring-boot-starter</artifactId> <!--3--> </dependency> </project>

1. Legen Sie die Vaadin-Version zusammen mit anderen Eigenschaften fest.
2. Halten Sie die Version aller Abhängigkeiten konsistent.
3. Fügen Sie die Vaadin Spring Boot-Integrationsbibliothek hinzu.

Vaadin basiert auf einem regulären Java-Servlet, das standardmäßig auf die Root abgebildet wird. Die Vaadin Spring Boot-Integration ermöglicht es, die Standardeinstellung zu überschreiben. Da unsere Codebasis mehrere Frameworks integriert, ordnen wir sie über die entsprechende Eigenschaft /vaadin zu:

 vaadin.url-mapping=/vaadin/*

Bei der ersten Anfrage eines Clients gibt Vaadin den Code der JavaScript-Engine zurück. Die Engine führt nachfolgende Anfragen durch, um die konfigurierte Benutzeroberfläche abzurufen und die letztere Clientseite zu strukturieren. Von da an verarbeitet die Engine alle Benutzerinteraktionen und aktualisiert die Benutzeroberfläche bei Bedarf.

Erste Schritte mit Vaadin

Nachdem wir das Projekt eingerichtet haben, müssen wir konfigurieren, welche Komponente Vaadin anzeigt, wenn es eine Anfrage erhält.

 @Route("/") //1 @PageTitle("Vaadin") //2 class TodoView(todos: ArrayList<Todo>) : VerticalLayout() { //3-4-5 init { //6 // ... //7 } }

1. Ordnet die Komponente dem Subkontextstamm des Vaadin-Servlets zu.
2. Legen Sie den statischen Seitentitel fest. Falls Sie einen dynamischen Titel benötigen, können Sie implementieren.
3. Definieren Sie eine RootComponent Klasse.
4. VerticalLayout ist eine Klasse, die Vaadin als HTML- div rendert.
5. Der Vaadin Spring Boot-Starter kümmert sich um das Einfügen der Liste.
6. Vaadin führt die Funktion init() bei der ersten Browseranforderung aus.
7. Die nächsten Codeschnipsel werden dorthin gehen.

Komponenten hinzufügen

Im obigen Snippet haben wir von VerticalLayout geerbt, einer von Vaadin bereitgestellten Komponente .

Das Vaadin Design System umfasst eine Reihe von Komponenten, die Sie zum Erstellen Ihrer Benutzeroberfläche verwenden können. Die Komponenten verfügen zusätzlich zur TypeScript-API für die clientseitige Entwicklung über eine serverseitige Java-API.

Sie verwenden eine Komponente, indem Sie sie zuerst erstellen und dann einem enthaltenen Layout hinzufügen.

--

Einige Komponenten können andere enthalten und wissen, wie sie ihre Unterkomponenten anordnen. Beispielsweise platziert VerticalLayout Komponenten von oben nach unten in einer Spalte; HorizontalLayout platziert sie von links nach rechts in einer Zeile.

Das Hinzufügen von Komponenten zu einem Layout ist unkompliziert:

 add(Label("Hello")) //1 add(Label("world!"))

1. Im Kontext der init() -Funktion.

Obwohl dies perfekt funktioniert, können wir die Situation mit verbessern, da wir Kotlin verwenden. Wir können den obigen Codeausschnitt wie folgt umschreiben:

 label("Hello") //1 label("world!")

1. label() ist eine Karibu DSL-Erweiterungsfunktion der HasComponent -Schnittstelle

Karibu ist großartig, hat aber einen kleinen Nachteil: Es bietet keine Erweiterungsfunktionen für die gesamte API. Sie müssen beispielsweise auf die reguläre API zurückgreifen, um einer Grid Komponente einen Footer hinzuzufügen:

 appendFooterRow().apply { getCell(completedProp).component = Button("Clean up") { todos.removeIf { it.completed } refresh() } }

Ein Vorteil ist, dass Karibu Open Source ist und Sie jederzeit einen Beitrag leisten können, wenn Sie etwas hinzuzufügen haben.

Spezifische Komponenten der Benutzeroberfläche sind für das allgemeine Verständnis nicht wichtig. Bei Interesse können Sie jederzeit den überprüfen.

Benutzerinteraktionen

Als Großrechner die Könige der Computer waren, griff man über Terminals auf sie zu. Die Benutzeroberfläche war ziemlich eingeschränkt und das Rendering erfolgte auf dem „dummen“ Terminal. Bei Personalcomputern wurde die Rendering-Funktionalität vom Server auf den Client verlagert. Zu dieser Zeit ordneten Entwickler einer Komponente über einen Trigger ein Verhalten zu. Sie konnten beispielsweise festlegen, dass Hello world! gedruckt wird, wenn der Benutzer auf eine Schaltfläche klickt.

Webanwendungen haben dieses Paradigma geändert. Wie unsere vorherigen Artikel gezeigt haben, wird jede Interaktion nun einem Anfrage-Antwort-Fluss zugeordnet, synchron oder asynchron. Vaadin bringt uns zurück zum ursprünglichen Paradigma.

 Checkbox(todo.completed).apply { //1 addValueChangeListener { todo.completed = it.value } //2 }

1. Initialisieren Sie eine neue Checkbox mit einem Wert.

   
   

2. Wenn sich der Wert des Kontrollkästchens ändert, führen Sie das Lambda aus – wir ändern den Wert des zugrunde liegenden Modells.

Es ist kein JavaScript-Code erforderlich; Vaadin verwaltet die Interaktion selbstständig.

Abschluss

Der Beitrag war nur eine kurze Einführung in Vaadin im Kontext von AJAX und SSR.

Die meisten Entwickler, die das Programmieren von Web-Apps lernen und daher an das Request-Response-Modell gewöhnt sind, reagieren schlecht, wenn sie mit Vaadin in Berührung kommen. Ihr Hauptargument ist das Fehlen einer API. Meiner Meinung nach ist das ein Vorteil: Einige Apps, insbesondere Business-Apps, entwickeln sich nicht so weit, dass Sie dedizierte mobile Clients entwickeln müssen.

Vaadin wird mit einem Standard-CSS-Set geliefert, wie in der Einleitung beschrieben. Dieses Standarddesign sorgt dafür, dass Vaadin-Anwendungen von Anfang an gut aussehen und bietet Benutzern eine komfortable und optisch ansprechende Arbeitsumgebung. Sie können jedoch jederzeit ein anderes Design integrieren oder sogar Ihr eigenes entwickeln.

Der eigentliche Vorteil liegt jedoch wieder auf organisatorischer Ebene. Im Einführungsbeitrag habe ich erwähnt, dass die Trennung von Frontend- und Backend-Entwicklung Probleme bei deren Integration schafft. Da Vaadin keine solche Trennung hat, ist die Projektplanung vorhersehbarer, da es keinen Integrationsschritt zwischen Frontend und Backend gibt. Ebenso kann das Theming parallel zur Entwicklung erfolgen.

Der vollständige Quellcode für diesen Beitrag ist auf GitHub zu finden:

Um weiter zu gehen:

---

Ursprünglich veröffentlicht bei am 13. Oktober 2024