Geekly articles weekly

Vaadin Flow - ein seltsamer Hirsch

Jede Veränderung, sogar eine Veränderung zum Besseren,
immer unpraktisch

Richard Hooker

Wie Sie vielleicht wissen, ist Vaadin eines der beliebtesten Java-Webframeworks:


Zuletzt wurde eine neue Version dieses Frameworks für die Entwicklung einer Web-Benutzeroberfläche, Vaadin 10, veröffentlicht. Es gibt nur wenige Veröffentlichungen in russischer Sprache zu Vaadin 10 und Vaadin Flow, und dieser Beitrag soll diese Lücke schließen.


Die Entwickler positionieren Vaadin Flow als neues Java-Webframework für die Entwicklung moderner Webanwendungen und Websites (hier glaube ich ihnen nicht ganz). Dies ist Teil der Vaadin-Plattform, die ein anderes Produkt ersetzt - das Vaadin-Framework. Es ermöglicht Ihnen, Webanwendungen (oder genauer gesagt die Web-Benutzeroberfläche) mithilfe des Java Web Components-Standards zu entwickeln.

Hier im Kopf des Lesers war höchstwahrscheinlich bereits alles durcheinander, all diese Vaadin Bla Bla, das Framework, die Plattform und so weiter. Was ist los?

Wir verwenden Vaadin seit 7 Jahren als Teil unserer CUBA-Plattform für UI- Backoffice -Systeme. In dieser Zeit haben wir viel Erfahrung in der Zusammenarbeit mit ihm gesammelt, sodass wir uns nur um sein Schicksal sorgen müssen. Unter dem Schnitt finden Sie meine Angaben zu Vaadin 10.

Vaadin Framework


Vaadin ist ein finnisches Unternehmen, das Tools und Bibliotheken für die Entwicklung der Benutzeroberfläche entwickelt. Sie bilden das gleichnamige Framework für die Webentwicklung in Java.

Vaadin Framework ist ein UI-Framework mit einem serverseitigen Programmiermodell, bei dem sich die gesamte UI-Logik und ihr Status auf dem Server befinden und nur der UI-Code der Komponenten im Browser ausgeführt wird. Tatsächlich handelt es sich um eine Thin Client-Technologie, bei der der Browser nur die vom Server angegebenen Informationen anzeigt und alle Ereignisse an den Server gesendet werden.

Der serverseitige Ansatz ermöglicht es Ihnen, die Tatsache zu vergessen, dass die Entwicklung im Internet durchgeführt wird, und die Benutzeroberfläche als Desktop-Java-Anwendung mit direktem Zugriff auf Daten und Dienste auf dem Server zu entwickeln. Gleichzeitig kümmert sich Vaadin um die Anzeige der Benutzeroberfläche im Browser und die AJAX-Interaktion zwischen Browser und Server. Die Vaadin-Engine rendert die Benutzeroberfläche der serverseitigen Anwendung im Browser und implementiert alle Details des Client- und Serveraustauschs.



Dieser Ansatz hat viele Vorteile:

  • Java-Code ist einfacher zu schreiben und zu debuggen
  • Sie können vorhandene Java-Bibliotheken und -Tools (IDEs, Compiler, Tests) verwenden.
  • Keine Webdienstentwicklung erforderlich
  • Sicherheit ist besser

Und Nachteile:

  • Benötigen Sie viel Speicher auf dem Server für die UI-Ansicht
  • Schwer zu skalierende Lösung
  • Bei der Entwicklung von Widgets müssen Sie eine Java-API entwickeln

Basierend auf diesen Vor- und Nachteilen hat sich Vaadin FW genau in der Unternehmensentwicklung niedergelassen, wo die Belastungen vorhersehbar sind und die Geschwindigkeit und Leichtigkeit der Entwicklung viel wichtiger sind als die Kosten für Eisen und Speicher.

Was ist mit dem Google Web Toolkit passiert?


Während Vaadin der Öffentlichkeit bekannt war, war der Kundenteil von Vaadin FW untrennbar mit einem anderen bekannten Produkt verbunden - dem Google Web Toolkit (GWT). Dieses Tandem ermöglichte es, die UI-Komponenten selbst und die Server-API für sie in einer Sprache zu schreiben - Java, was sehr praktisch war.

In den letzten Jahren wurde das Google Web Toolkit nicht entwickelt, und seit 2015 warten wir alle auf das Erscheinen von GWT 3.0 / J2CL, das auf der GWT.Create 2015 angekündigt wurde:


In dieser stagnierenden Zeit (2015-2017) ereignete sich ein wichtiges Ereignis: Die Web Components-Spezifikation und ein weiteres Google-Framework, Polymer, wurden veröffentlicht. Anscheinend war dies der Anfang vom Ende der GWT.

Es ist erwähnenswert, dass GWT 3 als internes Google-Framework entwickelt und intern entwickelt wird. Die Community kann den Prozess also in keiner Weise beeinflussen oder zumindest nicht sehen, dass der Prozess abläuft.

Vor dem Hintergrund dieser Stagnation traf das Vaadin-Team eine schwierige Entscheidung, die Entwicklung von GWT vollständig aufzugeben und den Client-Teil seines Frameworks neu zu schreiben . Diese Veränderungen konnten nicht unbemerkt bleiben und alle erschrecken, die sich bereits auf Vaadin entwickeln.

Webkomponenten


Webkomponenten sind eine Reihe von Standards. Es wurde von den Jungs von Google vorgeschlagen und aktiv beworben, aber die Initiative wurde bereits in Mozilla unterstützt. Im Wesentlichen handelt es sich hierbei um Technologien zum Erstellen von UI-Komponenten für das Web, sodass sie die Kapselung von Verhalten und Präsentation unterstützen. Und das Hauptvorteil ist die Möglichkeit der Wiederverwendung.

Schlüsselkonzepte:

  • Benutzerdefinierte Elemente - API zum Erstellen Ihrer HTML-Elemente
  • Shadow DOM ist ein Tool zum Einkapseln von HTML-Komponenten und zum Isolieren ihrer visuellen Darstellung von globalen CSS-Regeln. Kurz gesagt, Sie können eine Komponente erstellen, z. B. ein Bestellformular, und keine Angst haben, dass ihre Stile aufgrund der CSS-Regeln dieser Seite auf einigen Seiten der Website beschädigt werden.
  • HTML-Vorlagen - Die Möglichkeit, passive Blöcke mit leeren DOM-Elementen in einem HTML-Dokument zu platzieren. Solche Blöcke werden vom Browser analysiert, aber sie werden nicht gerendert oder führen ihren Code aus. Es wird empfohlen, sie als Vorlagen für das Rendern von Daten zu verwenden.
  • HTML-Importe - Die Möglichkeit, ein HTML-Dokument als Modul mit allen Layouts, Stilen und JS zu importieren

Wenn Sie sich jetzt beispielsweise den YouTube-DOM-Baum ansehen, werden Sie die Verwendung von benutzerdefinierten Elementen und Schatten-DOM finden:



Mit all diesen Dingen können Sie neue modische UI-Komponenten für das Web schreiben.

Es ist zuzugeben, dass die Browserunterstützung bei weitem nicht perfekt ist und Polyfills beispielsweise für Edge weiterhin erforderlich sind.

Polymer


Polymer ist eine kleine Bibliothek, die auf den Standards von Web Components aufbaut, um deren Verwendung zu vereinfachen. Ein Beispiel:

//    import '@polymer/paper-checkbox/paper-checkbox.js'; import {PolymerElement, html} from '@polymer/polymer'; //    class LikeableElement extends PolymerElement { //      static get properties() { return { liked: Boolean }} //    DOM  , CSS      static get template() { return html` <style> .response { margin-top: 10px; } </style> <paper-checkbox checked="{{liked}}">I like web components.</paper-checkbox> <div hidden$="[[!liked]]" class="response">Web components like you, too.</div> `; } } //     customElements.define('likeable-element', LikeableElement);

Tatsächlich macht Polymer alles, was GWT zuvor getan hat, ist aber gleichzeitig mit allen JS-Komponenten und anderen Frameworks kompatibel, z. B. React und Angular.

Vaadin-Komponenten


Zurück nach Vaadin. Vaadin stellt seit langem ein Produkt namens Vaadin Components her - UI-Komponenten für Front-End-Entwickler, die in jede JS-Anwendung eingebettet werden können.



Diese Komponenten basieren auf Webkomponenten und Polymer!

Wie wir jetzt sehen, war es ein alternativer Flugplatz für das Vaadin Framework, mit dem wir das Google Web Toolkit verlassen und ein neues Framework entwickeln konnten, für das es noch keine Komponenten gab. Das Henne-Ei-Problem wurde gelöst und Vaadin Components wurde zum Front-End des kommenden Vaadin 10.

Vaadin fließen


Vaadin 8 enthielt einen Mechanismus zur Synchronisierung des UI-Status und Unterstützung für ein Zwei-Wege-RPC-Protokoll (Remote Procedure Call). Dies war dank GWT möglich, da die gemeinsamen Schnittstellen und Klassen von Server und Client in Java geschrieben wurden.

Zusammen mit der Aufgabe von GWT musste ein neuer Mechanismus implementiert werden, der eine transparente Integration in das JS-Frontend und das Java-Backend ermöglicht. Dieser Mechanismus war Vaadin Flow (und auch dieser Name wurde lange Zeit verwendet, um sich auf den gesamten Vaadin 10 zu beziehen).

Die Flow- Dokumentation hat folgendes Schema:



Seine Hauptbedeutung ist wie folgt:

  • Die Synchronisierung des UI-Status vom Server zum Client wird unterstützt
  • Der Serverteil kann die Ereignisse der UI-Komponenten abonnieren, und eine AJAX-Anforderung wird ausgeführt
  • Geschäftslogik wird auf dem Server ausgeführt, nur die in der Benutzeroberfläche angezeigten Daten werden in den Webbrowser geladen
  • Die Serverseite verwendet Java
  • Der Client kann HTML-, CSS-, JS- und Polymer-Vorlagen verwenden

Für mich bedeutet dies, dass Vaadin über mehr Front-End-Technologien verfügt, und jetzt reicht Java allein eindeutig nicht mehr aus (für Vaadin 8 würde Java für Sie ausreichen und HTML / CSS wäre nicht erforderlich). Andererseits ist jetzt eine einfache Integration von JS-Code möglich.

Vaadin-Plattform


Jede Komponente von Vaadin 10 wird separat und in den besten Traditionen der JS-Welt entwickelt - winzige Module, die so unabhängig wie möglich voneinander sind. Gleichzeitig wird der Client-Teil der Komponenten in einer JAR im Format WebJARs: www.webjars.org verpackt

Dies ist ein wenig beängstigend, besonders wenn man sich das minimale Design ansieht:



Um dieses Chaos irgendwie zu kontrollieren, erschien ein Stücklistenprojekt namens Vaadin Platform .

Dies ist kein eigenständiges Produkt, sondern nur eine Liste kompatibler Versionen von Komponenten und Werkzeugen, die im Stücklistenformat Maven entwickelt wurden.

Es verbindet sich wie folgt mit Maven:

 <dependencyManagement> <dependencies> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-bom</artifactId> <version>${vaadin.platform.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement>

Eigenschaften von Vaadin 10


Insgesamt besteht das gesamte Framework aus 3 Komponenten:

  1. Vaadin Components - Frontend
  2. Vaadin Flow - Transport
  3. Server Components API - Java API für UI-Komponenten

Es lohnt sich, die Entwicklung mit dem offiziellen Tutorial zu beginnen .

Außerdem empfehle ich ein neues Webinar .

Vorspeisen


Sie können sich auf der Seite mit dem Framework vertraut machen. Dort finden Sie Beispiele für Projekte, einschließlich Full-Stack basierend auf Spring Boot.

Begeisterte Fans von Spring Boot können direkt zu start.spring.io gehen und dort Vaadin unter den Web-Frameworks auswählen.

Ein minimales Projekt kann mit einer Java-Klasse gestartet werden, zum Beispiel:

 //  URL   @Route("") public class MainView extends VerticalLayout { public MainView() { //  UI   Button button = new Button("Click me"); //    button.addClickListener(event -> { new Notification("Hello!").open(); }); add(button); } }

Im Allgemeinen können Sie auf Vaadin 10 schreiben, wie auf Vaadin 8, ABER! Sie sollten sich unbedingt die Komponenten-Matching-Seite ansehen.

Element-API


Killer-Funktion Vaadin 10 - Steuern Sie DOM-Elemente direkt über serverseitigen Java-Code.

 Element nameField = ElementFactory.createInput(); nameField.setAttribute("id", "nameField"); nameField.setAttribute("placeholder", "John Doe"); nameField.setAttribute("autofocus", "");

Sie können auch Attribute verwalten, die bereits angebracht sind:

 // "John Doe" String placeholder = nameField.getAttribute("placeholder"); // true nameField.hasAttribute("autofocus"); nameField.removeAttribute("autofocus"); // ["id", "placeholder"] nameField.getAttributeNames().toArray();

Dies ist natürlich kein Ersatz für UI-Komponenten, aber eine gute API für einfache Layoutänderungen beim Entwickeln von UI-Komponenten ist nicht erforderlich.

Datenbindung


Für die Arbeit mit Komponenten, die die HasValue-Schnittstelle implementieren (get / set value und ValueChangeListener), gibt es eine praktische Binder-Klasse:

 Binder<Person> binder = new Binder<>(); TextField titleField = new TextField(); binder.forField(titleField) .bind( Person::getTitle, Person::setTitle);

Wie Sie dem Beispiel entnehmen können, wird eine statisch typisierte Bindung basierend auf Lambda-Ausdrücken unterstützt.

Darüber hinaus können Binder Wertkonverter und Validatoren installieren:

 binder.forField(yearOfBirthField) // Validator will be run with the String value of the field .withValidator(text -> text.length() == 4, "Doesn't look like a year") // Converter will only be run for strings with 4 characters .withConverter( new StringToIntegerConverter("Must enter a number")) // Validator will be run with the converted value .withValidator(year -> year >= 1900 && year < 2000, "Person must be born in the 20th century") .bind(Person::getYearOfBirth, Person::setYearOfBirth);

Vorlagen


HTML-Vorlagen setzen:

 <link rel="import" href="../bower_components/polymer/polymer-element.html"> <link rel="import" href="../bower_components/paper-input/paper-input.html"> <dom-module id="hello-world"> <template> <div> <paper-input id="inputId" value="{{userInput}}"></paper-input> <button id="helloButton" on-click="sayHello">Say hello</button> <div id="greeting">[[greeting]]</div> </div> </template> <script> class HelloWorld extends Polymer.Element { static get is() { return 'hello-world' } } customElements.define(HelloWorld.is, HelloWorld); </script> </dom-module>

Die Vorlagen unterstützen die deklarative Datenbindung und Sie können natives JavaScript schreiben, das im Ist-Browser ausgeführt wird. Auf diese Weise können Sie einen Teil der einfachsten UI-Logik implementieren, ohne Anforderungen an den Server zu senden.

Ereignisse


Die Behandlung von Komponentenereignissen ist sehr einfach :

 TextField textField = new TextField(); textField.addChangeListener(e -> System.out.println("Event fired"));

Hier werden Sie den Unterschied zum Vaadin 8 nicht bemerken.

Routing


Navigation und Routing in der Anwendung sind zu dem geworden, was sie sein sollten :

 @Route("some/path") public class SomePathComponent extends Div { public SomePathComponent() { setText("Hello @Route!"); } }

Ansichten können bestimmen, welche URL sie verarbeiten, welche Parameter sie von der Adresse benötigen und vieles mehr.

Komponentenentwicklung


Für Vaadin 10 können Sie Komponenten auf folgende Arten entwickeln:


Ein solch unkomplizierter Ansatz für die Entwicklung kundenspezifischer Komponenten ist vielleicht der größte Fortschritt. Es ist nicht mehr erforderlich, Wrapper für JS auf GWT zu schreiben und dann die Serverseite auf Vaadin zu schreiben.

Lumo-Thema


Anstelle von SASS werden jetzt CSS-Variablen für visuelle Themen verwendet, d. H. Beim Erstellen des Projekts muss kein CSS mehr kompiliert werden:

 <custom-style> <style> html { --lumo-font-family: "Open Sans", sans-serif; } </style> </custom-style>

Das Valo-Thema wird durch ein neues benutzerdefiniertes Lumo-Thema ersetzt .



Migration mit Vaadin FW 8


Die Migrationsoptionen von Vaadin 8 sind im Dokument beschrieben: vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

Hier habe ich schlechte Nachrichten für Sie: Wenn Sie ein großes Projekt über Vaadin 8 geschrieben haben, müssen Sie es beim Umstieg auf Vaadin 10 komplett neu schreiben. Es gibt überhaupt keinen Migrationspfad!

Vaadin 10 und Vaadin 8 sind in mehreren Aspekten ähnlich:

  • Serverseitiger Ansatz
  • Java zur Entwicklung der UI-Logik
  • Gleicher Ansatz zur Datenbindung

Fazit: Vaadin 10 ist ein neues Framework, das von Grund auf neu geschrieben wurde .

Wie die Entwickler versprechen, wird Vaadin 8 bis 2022 unterstützt, und es können Migrationsansätze auftreten.

Fazit


Ich halte es für wichtig, dass die neue Vaadin-Website in Vaadin Flow geschrieben ist, das zum De-facto-Standard für Front-End-Technologien wird, da die Reife einer Programmiersprache davon abhängt, ob ihr Compiler in derselben Sprache geschrieben wurde.

Ich hoffe, dass Sie jetzt Ihre Meinung zu Vaadin 10 abgeben können. Im Allgemeinen ist dies ein guter Rahmen und eine große Reserve für die Zukunft. Für mich ist dies ein ausgezeichneter experimenteller Übungsplatz für neue Ideen und Ansätze zum Aufbau einer Benutzeroberfläche.

Source: https://habr.com/ru/post/de416893/

More articles:


All Articles