Geekly articles weekly

Vaadin Flow - un étrange cerf

Chaque changement, même un changement pour le mieux,
toujours gênant

Richard Hooker

Comme vous le savez peut-être, Vaadin est l'un des frameworks Web Java les plus populaires:


Plus récemment, une nouvelle version de ce cadre pour le développement d'une interface utilisateur Web, Vaadin 10, a été publiée. Il existe peu de publications en russe sur Vaadin 10 et Vaadin Flow, et cet article est destiné à combler cette lacune.


Les créateurs positionnent Vaadin Flow comme un nouveau framework web Java pour le développement d'applications web et de sites web modernes (ici je ne les crois pas tout à fait). Cela fait partie de la plateforme Vaadin, qui remplace un autre produit - le framework Vaadin, il vous permet de développer des applications Web (ou, pour être précis, l'interface utilisateur Web) en utilisant la norme Java Web Components.

Ici, dans l'esprit du lecteur, tout était probablement déjà mélangé, tous ces Vaadin Bla Bla, le cadre, la plate-forme, etc. Que se passe-t-il?

Nous utilisons Vaadin dans le cadre de notre plate-forme CUBA pour les systèmes de back-office de l'interface utilisateur depuis 7 ans et pendant cette période, nous avons accumulé beaucoup d'expérience en travaillant avec lui, nous ne pouvons donc que nous inquiéter de son sort. Sous la coupe, vous trouverez mes spécifications sur Vaadin 10.

Cadre Vaadin


Vaadin est une entreprise finlandaise qui développe des outils et des bibliothèques pour développer l'interface utilisateur. Ils font le framework du même nom pour le développement web en Java.

Vaadin Framework est un cadre d'interface utilisateur avec un modèle de programmation côté serveur dans lequel toute la logique d'interface utilisateur et son état sont situés sur le serveur, et seul le code d'interface utilisateur des composants est exécuté dans le navigateur. En fait, il s'agit d'une technologie de client léger où le navigateur n'affiche que ce que le serveur dit et tous les événements sont envoyés au serveur.

L'approche côté serveur vous permet d'oublier le fait que le développement s'effectue sous le web, et de développer l'interface utilisateur comme une application Java de bureau avec un accès direct aux données et services sur le serveur. Dans le même temps, Vaadin se chargera d'afficher l'interface utilisateur dans le navigateur et l'interaction AJAX entre le navigateur et le serveur. Le moteur Vaadin rend l'interface utilisateur de l'application côté serveur dans le navigateur et implémente tous les détails de l'échange client et serveur.



Cette approche présente de nombreux avantages:

  • Le code Java est plus facile à écrire et à déboguer
  • Vous pouvez utiliser les bibliothèques et outils Java existants (IDE, compilateurs, tests)
  • Aucun développement de service Web requis
  • La sécurité est meilleure

Et les inconvénients:

  • Besoin de beaucoup de mémoire sur le serveur pour la vue de l'interface utilisateur
  • Solution difficile à mettre à l'échelle
  • Lors du développement de widgets, vous devez développer une API Java

Sur la base de ces inconvénients et avantages, Vaadin FW s'est installé précisément dans le développement d'entreprise, où les charges sont prévisibles, et la vitesse et la facilité de développement sont beaucoup plus importantes que le coût du fer et de la mémoire.

Qu'est-il arrivé à Google Web Toolkit


Pendant tout le temps que Vaadin est familier au grand public, la partie client de Vaadin FW était inextricablement liée à un autre produit bien connu - Google Web Toolkit (GWT). Ce tandem a permis d'écrire les composants d'interface utilisateur eux-mêmes et l'API serveur pour eux dans un seul langage - Java, ce qui était assez pratique.

Ces dernières années, Google Web Toolkit ne s'est pas développé et, depuis 2015, nous attendons tous l'apparition de GWT 3.0 / J2CL, annoncée lors de GWT.


Un événement important s'est produit dans cette période stagnante (2015-2017): la spécification Web Components et un autre framework Google, Polymer, sont apparus. Apparemment, c'était le début de la fin du GWT.

Il convient de noter que GWT 3 est en cours de développement en tant que cadre interne de Google et que son développement est effectué en interne. Ainsi, la communauté ne peut en aucune façon influencer le processus, ou du moins ne pas voir que le processus est en cours.

Dans ce contexte de stagnation, l'équipe Vaadin a pris la décision difficile d'abandonner complètement le développement sur GWT et de réécrire la partie client de son framework . Ces changements ne pouvaient pas passer inaperçus et effrayer tous ceux qui se développaient déjà sur Vaadin.

Composants Web


Les composants Web sont un ensemble de normes. Il a été proposé et activement promu par les gars de Google, mais l'initiative a déjà été prise en charge dans Mozilla. Il s'agit essentiellement de technologies permettant de créer des composants d'interface utilisateur pour le Web, afin de prendre en charge l'encapsulation du comportement et de la présentation. Et le principal avantage est la possibilité de réutilisation.

Concepts clés:

  • Éléments personnalisés - API pour créer vos éléments HTML
  • Shadow DOM est un outil pour encapsuler les composants HTML et isoler leur présentation visuelle des règles CSS globales. En bref, vous pouvez faire un composant, par exemple, un bon de commande, et ne pas avoir peur que ses styles se cassent sur certaines pages du site en raison des règles CSS de cette page.
  • Modèles HTML - la possibilité de placer des blocs passifs contenant des éléments vides DOM dans un document HTML. Ces blocs sont analysés par le navigateur, mais ils ne sont pas rendus ou exécutent leur code. Il est suggéré de les utiliser comme modèles pour le rendu des données.
  • Importations HTML - la possibilité d'importer un document HTML en tant que module avec toute sa mise en page, ses styles et JS

Par exemple, si vous regardez maintenant l'arborescence DOM YouTube, vous trouverez l'utilisation des éléments personnalisés et du DOM fantôme:



Toutes ces choses vous permettent d'écrire de nouveaux composants d'interface utilisateur à la mode pour le Web.

Il convient d'admettre que la prise en charge du navigateur est loin d'être parfaite et que les polyfills sont toujours nécessaires , par exemple, pour Edge.

Polymère


Polymer est une petite bibliothèque au-dessus des normes des composants Web conçue pour simplifier leur utilisation. Un exemple:

//    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);

En fait, Polymer fait tout ce que GWT faisait auparavant, mais en même temps, il est compatible avec tous les composants JS et autres frameworks, par exemple, React et Angular.

Composants Vaadin


Retour à Vaadin. Vaadin crée depuis longtemps un produit appelé Vaadin Components - composants d'interface utilisateur pour les développeurs frontaux qui peuvent être intégrés dans n'importe quelle application JS.



Ces composants sont basés sur des composants Web et Polymer!

Comme nous le voyons maintenant, c'était un aérodrome de sauvegarde pour le framework Vaadin, qui nous a permis de quitter Google Web Toolkit et de développer un nouveau framework pour lequel les composants n'existaient pas encore. Le problème du poulet et des œufs a été résolu et les composants de Vaadin sont devenus le front-end du prochain Vaadin 10.

Flux Vaadin


Vaadin 8 comprenait un mécanisme de synchronisation d'état de l'interface utilisateur et la prise en charge d'un protocole RPC bidirectionnel (appel de procédure à distance). Cela a été possible grâce à GWT, car les interfaces et classes communes du serveur et du client ont été écrites en Java.

Parallèlement à l'abandon de GWT, il était nécessaire de mettre en œuvre un nouveau mécanisme qui permettrait une intégration transparente avec le frontend JS et le backend Java. Ce mécanisme était Vaadin Flow (et ce nom est également utilisé depuis longtemps pour désigner l'ensemble du Vaadin 10).

La documentation Flow a ce schéma:



Sa signification principale est la suivante:

  • La synchronisation de l'état de l'interface utilisateur du serveur au client est prise en charge
  • la partie serveur peut s'abonner aux événements des composants UI, et une requête AJAX sera exécutée
  • la logique métier est exécutée sur le serveur, seules les données affichées dans l'interface utilisateur sont chargées dans le navigateur Web
  • le côté serveur utilise Java
  • le client peut utiliser des modèles HTML, CSS, JS et Polymer

Pour moi, cela signifie que Vaadin aura plus de technologies frontales, et maintenant Java seul n'est clairement pas suffisant (pour Vaadin 8, Java serait suffisant pour vous et HTML / CSS ne serait pas nécessaire). D'autre part, une intégration facile du code JS est désormais possible.

Plateforme Vaadin


Chaque composant de Vaadin 10 est développé séparément et dans les meilleures traditions du monde JS - de minuscules modules aussi indépendants que possible les uns des autres. Dans le même temps, la partie client des composants est conditionnée dans un JAR au format WebJARs: www.webjars.org

C'est un peu effrayant, surtout si vous regardez la conception minimale:



Afin de contrôler ce chaos, un projet de nomenclature appelé Vaadin Platform est apparu .

Il ne s'agit pas d'un produit indépendant, mais simplement d'une liste de versions compatibles de composants et d'outils conçus au format Maven BOM .

Il se connecte à Maven comme suit :

 <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>

Caractéristiques de Vaadin 10


Au total, l'ensemble du cadre se compose de 3 volets:

  1. Composants Vaadin - frontend
  2. Vaadin Flow - transport
  3. API de composants de serveur - API Java pour les composants d'interface utilisateur

Cela vaut la peine de commencer le développement avec le didacticiel officiel .

Aussi, je recommande un nouveau webinaire .

Entrées


Vous pouvez vous familiariser avec le cadre à partir de la page . Vous y trouverez des exemples de projets, y compris la pile complète basée sur Spring Boot.

Les fans ardents de Spring Boot peuvent passer directement à start.spring.io et sélectionner Vaadin parmi les frameworks Web là-bas.

Un projet minimal peut être démarré avec une classe Java, par exemple:

 //  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); } }

En général, vous pouvez écrire sur Vaadin 10, comme sur Vaadin 8, MAIS! Vous devriez certainement regarder la page de correspondance des composants .

API Element


Fonction Killer Vaadin 10 - contrôlez les éléments DOM directement à partir du code Java côté serveur.

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

Vous pouvez également gérer des attributs déjà apposés:

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

Bien sûr, ce n'est pas un remplacement pour les composants d'interface utilisateur, mais une bonne API pour des changements de disposition simples lors du développement de composants d'interface utilisateur n'est pas requise.

Liaison de données


Pour travailler avec des composants qui implémentent l'interface HasValue (get / set value et ValueChangeListener), il existe une classe Binder pratique:

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

Comme vous pouvez le voir dans l'exemple, la liaison de type statique basée sur des expressions lambda est prise en charge.

De plus, les classeurs peuvent installer des convertisseurs de valeur et des validateurs:

 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);

Modèles


Les modèles HTML sont en cours de composition:

 <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>

Les modèles prennent en charge la liaison de données déclarative et vous pouvez écrire du JavaScript natif qui sera exécuté dans le navigateur en l'état. Cela vous permet d'implémenter une partie de la logique d'interface utilisateur la plus simple sans envoyer de requêtes au serveur.

Les événements


La gestion des événements des composants est très simple :

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

Ici, vous ne remarquerez pas la différence avec le Vaadin 8.

Acheminement


La navigation et le routage dans l'application sont devenus ce qu'ils devraient être :

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

Les vues peuvent déterminer l'URL qu'elles traitent, les paramètres dont elles ont besoin pour l'adresse, et bien plus encore.

Développement de composants


Pour Vaadin 10, vous pouvez développer des composants de la manière suivante:


Une telle approche simple du développement de composants personnalisés est peut-être le plus grand pas en avant. Il n'est plus nécessaire d'écrire des wrappers pour JS sur GWT, puis d'écrire côté serveur sur Vaadin.

Thème Lumo


Au lieu de SASS, les variables CSS sont désormais utilisées pour les thèmes visuels, c'est-à-dire plus besoin de compiler CSS lors de la construction du projet:

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

Et le thème Valo est remplacé par un nouveau thème Lumo personnalisé .



Migration avec Vaadin FW 8


Les options de migration depuis Vaadin 8 sont décrites dans le document: vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

Ici, j'ai de mauvaises nouvelles pour vous: si vous avez écrit un énorme projet sur Vaadin 8, vous devrez le réécrire complètement lors du passage à Vaadin 10. Il n'y a pas de chemin de migration, du mot du tout!

Vaadin 10 et Vaadin 8 sont similaires à plusieurs égards:

  • Approche côté serveur
  • Java pour développer la logique de l'interface utilisateur
  • Même approche pour la liaison de données

Conclusion : Vaadin 10 est un nouveau framework écrit à partir de zéro .

Comme les développeurs le promettent, Vaadin 8 sera pris en charge jusqu'en 2022 et des approches de migration peuvent apparaître.

Conclusion


Je considère qu'il est important que le nouveau site Web de Vaadin soit écrit en Vaadin Flow, qui devient la norme de facto pour les technologies frontales, car la maturité d'un langage de programmation a été déterminée par le fait que son compilateur ait été écrit dans le même langage ou non.

J'espère que maintenant vous pouvez vous faire votre opinion sur Vaadin 10. En général, c'est un bon cadre et une énorme réserve pour l'avenir. Pour moi, c'est un excellent terrain de formation expérimental pour de nouvelles idées et approches pour la construction d'une interface utilisateur.

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

More articles:


All Articles