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. Vaadin erste Buch aktualisierte Ausgabe Begleitwebsite  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 –   . 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,   . 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. Sie schreiben nur Backend-Code d  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   . 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. Theme  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>  </properties> <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId>  <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>  </dependency> </project>  Legen Sie die Vaadin-Version zusammen mit anderen Eigenschaften fest.  Halten Sie die Version aller Abhängigkeiten konsistent.  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   zu: /vaadin   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 } }  Ordnet die Komponente dem   des Vaadin-Servlets zu. Subkontextstamm  Legen Sie den statischen Seitentitel fest. Falls Sie einen dynamischen Titel benötigen, können Sie   implementieren. HasDynamicTitle  Definieren Sie eine   Klasse. RootComponent    ist eine Klasse, die Vaadin als HTML-   rendert. VerticalLayout div  Der Vaadin Spring Boot-Starter kümmert sich um das Einfügen der Liste.  Vaadin führt die Funktion   bei der ersten Browseranforderung aus. init()  Die nächsten Codeschnipsel werden dorthin gehen.  Komponenten hinzufügen  Im obigen Snippet haben wir von   geerbt, einer von Vaadin bereitgestellten   . VerticalLayout 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.  --  Erstellen einer Benutzeroberfläche in Vaadin-Anwendungen  Einige Komponenten können andere enthalten und wissen, wie sie ihre Unterkomponenten anordnen. Beispielsweise platziert   Komponenten von oben nach unten in einer Spalte;   platziert sie von links nach rechts in einer Zeile. VerticalLayout HorizontalLayout  Das Hinzufügen von Komponenten zu einem Layout ist unkompliziert:   add(Label("Hello")) //1 add(Label("world!"))  Im Kontext der   -Funktion. init()  Obwohl dies perfekt funktioniert, können wir die Situation mit   verbessern, da wir Kotlin verwenden. Wir können den obigen Codeausschnitt wie folgt umschreiben: Karibu-DSL   label("Hello") //1 label("world!")    ist eine Karibu DSL-Erweiterungsfunktion der   -Schnittstelle label() HasComponent  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   Komponente einen Footer hinzuzufügen: Grid   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. Quellcode  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   gedruckt wird, wenn der Benutzer auf eine Schaltfläche klickt. Hello world!  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 }  Initialisieren Sie eine neue   mit einem Wert. Checkbox  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:   https://github.com/ajavageek/compare-frontends?embedable=true   Um weiter zu gehen:   Vaadin   Was ist Flow?   Mehr Vaadin   Ursprünglich veröffentlicht bei   am 13. Oktober 2024 A Java Geek

Read all my posts!

Read My Stories

Follow @nicolas_frankel on Twitter

Dieses Audio ist in der Originalsprache der Geschichte produziert!

Zu lang; Lesen

Get Free Unlimited IP Geo Data With IPinfo Lite

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

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

Welcome to HackerNoon Decoded: The Best of 2024 Tech Blogging

HackerNoon Decoded 2024: Wir feiern unsere Remote-Work-Community!

HackerNoon Decoded 2024: Wir feiern unsere Produktmanagement-Community!

HackerNoon Decoded 2024: Celebrating Our Writing Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps