Geekly articles weekly

Vaadin Flow - um estranho cervo

Toda mudança, mesmo uma mudança para melhor,
sempre inconveniente

Richard Hooker

Como você deve saber, o Vaadin é uma das estruturas da web Java mais populares:


Mais recentemente, foi lançada uma nova versão dessa estrutura para o desenvolvimento da interface do usuário da Web, o Vaadin 10. Existem poucas publicações em russo sobre o Vaadin 10 e o Vaadin Flow, e esta publicação foi criada para preencher essa lacuna.


Os criadores posicionam o Vaadin Flow como uma nova estrutura da Web Java para o desenvolvimento de aplicativos e sites modernos (aqui eu não acredito muito neles). Isso faz parte da Vaadin Platform, que substitui outro produto - o Vaadin Framework, que permite desenvolver aplicativos da Web (ou, para ser mais preciso, a interface do usuário da Web) usando o padrão Java Web Components.

Aqui na mente do leitor, provavelmente tudo já estava confuso, todos esses Vaadin Bla Bla, a estrutura, a plataforma e assim por diante. O que está havendo?

Estamos usando o Vaadin como parte de nossa plataforma CUBA para sistemas de back-office de interface do usuário por 7 anos e, durante esse tempo, acumulamos muita experiência trabalhando com ele, portanto não podemos deixar de nos preocupar com o destino dele. Abaixo do corte, você encontrará minhas especificações sobre o Vaadin 10.

Quadro Vaadin


Vaadin é uma empresa finlandesa que desenvolve ferramentas e bibliotecas para o desenvolvimento de UI. Eles criam a estrutura com o mesmo nome para desenvolvimento web em Java.

O Vaadin Framework é uma estrutura de interface do usuário com um modelo de programação do servidor no qual toda a lógica da interface do usuário e seu estado estão localizados no servidor, e apenas o código da interface do usuário dos componentes é executado no navegador. De fato, essa é uma tecnologia de thin client em que o navegador exibe apenas o que o servidor diz e todos os eventos são enviados ao servidor.

A abordagem do lado do servidor permite esquecer o fato de que o desenvolvimento é realizado na Web e desenvolver a interface do usuário como um aplicativo Java de desktop com acesso direto aos dados e serviços no servidor. Ao mesmo tempo, o Vaadin cuidará da exibição da interface do usuário no navegador e da interação AJAX entre o navegador e o servidor. O mecanismo Vaadin renderiza a interface do usuário do aplicativo do servidor no navegador e implementa todos os detalhes da troca de clientes e servidores.



Essa abordagem tem muitas vantagens:

  • O código Java é mais fácil de escrever e depurar
  • Você pode usar as bibliotecas e ferramentas Java existentes (IDEs, compiladores, testes)
  • Não é necessário desenvolvimento de serviço da web
  • A segurança é melhor

E contras:

  • Precisa de muita memória no servidor para visualização da interface do usuário
  • Solução difícil de dimensionar
  • Ao desenvolver widgets, você precisa desenvolver uma API Java

Com base nesses pontos positivos e negativos, o Vaadin FW se estabeleceu precisamente no desenvolvimento empresarial, onde as cargas são previsíveis e a velocidade e a facilidade do desenvolvimento são muito mais importantes que o custo de ferro e memória.

O que aconteceu com o Google Web Toolkit


Sempre que o Vaadin é familiar ao público em geral, a parte do cliente do Vaadin FW estava inextricavelmente vinculada a outro produto conhecido - o Google Web Toolkit (GWT). Esse conjunto tornou possível escrever os componentes da interface do usuário e a API do servidor para eles em um idioma - Java, o que era bastante conveniente.

Nos últimos anos, o Google Web Toolkit não se desenvolveu e, desde 2015, todos aguardamos o aparecimento do GWT 3.0 / J2CL, anunciado no GWT.


Um evento importante aconteceu neste período estagnado (2015-2017): a especificação Web Components e outra estrutura do Google, Polymer, apareceram. Aparentemente, este foi o começo do fim do GWT.

Vale ressaltar que o GWT 3 está sendo desenvolvido como uma estrutura interna do Google e seu desenvolvimento é realizado internamente. Portanto, a comunidade não pode influenciar o processo de forma alguma, ou pelo menos não perceber que o processo está em andamento.

No contexto dessa estagnação, a equipe Vaadin tomou uma decisão difícil de abandonar completamente o desenvolvimento no GWT e reescrever a parte do cliente de sua estrutura . Essas mudanças não poderiam passar despercebidas e assustaram todos os que já estão desenvolvendo o Vaadin.

Componentes da Web


Componentes da Web é um conjunto de padrões. Foi proposto e promovido ativamente pelos caras do Google, mas a iniciativa já foi apoiada no Mozilla. Essencialmente, essas são tecnologias para a criação de componentes de interface do usuário para a Web, para que eles suportem o encapsulamento de comportamento e apresentação. E a principal vantagem é a possibilidade de reutilização.

Conceitos chave:

  • Elementos personalizados - API para criar seus elementos HTML
  • O Shadow DOM é uma ferramenta para encapsular componentes HTML e isolar sua apresentação visual das regras globais de CSS. Em resumo, você pode criar um componente, por exemplo, um formulário de pedido e não ter medo de que seus estilos sejam quebrados em algumas das páginas do site devido às regras CSS desta página.
  • Modelos HTML - a capacidade de colocar blocos passivos contendo elementos em branco do DOM em um documento HTML. Esses blocos são analisados ​​pelo navegador, mas não são renderizados ou executam seu código. Eles são sugeridos para serem usados ​​como modelos para renderização de dados.
  • Importações HTML - a capacidade de importar um documento HTML como um módulo com todo o seu layout, estilos e JS

Por exemplo, se você agora olhar para a árvore DOM do YouTube, encontrará o uso de Elementos personalizados e DOM da sombra:



Todas essas coisas permitem que você escreva novos componentes de interface do usuário modernos para a web.

Vale admitir que o suporte ao navegador está longe de ser perfeito e ainda são necessários polyfills , por exemplo, para o Edge.

Polímero


O Polymer é uma pequena biblioteca sobre os padrões de componentes da Web projetados para simplificar seu uso. Um exemplo:

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

De fato, o Polymer faz tudo o que o GWT fazia antes, mas, ao mesmo tempo, é compatível com qualquer componente JS e outras estruturas, por exemplo, React e Angular.

Componentes Vaadin


De volta a Vaadin. Há muito tempo, a Vaadin fabrica um produto chamado Vaadin Components - componentes de interface do usuário para desenvolvedores de front-end que podem ser incorporados a qualquer aplicativo JS.



Esses componentes são baseados em Web Components e Polymer!

Como vemos agora, era um aeródromo de backup para o Vaadin Framework, o que nos permitiu sair do Google Web Toolkit e desenvolver uma nova estrutura para a qual os componentes ainda não existiam. O problema do ovo e da galinha foi resolvido e o Vaadin Components se tornou o front-end do próximo Vaadin 10.

Fluxo de Vaadin


O Vaadin 8 incluiu um mecanismo de sincronização do estado da interface do usuário e suporte para um protocolo RPC bidirecional (chamada de procedimento remoto). Isso foi possível graças ao GWT, pois as interfaces e classes comuns do servidor e do cliente foram escritas em Java.

Juntamente com o abandono do GWT, foi necessário implementar um novo mecanismo que permitisse uma integração transparente com o frontend JS e o backend Java. Esse mecanismo era o Vaadin Flow (e esse nome também é usado há muito tempo para se referir a todo Vaadin 10).

A documentação do Flow possui este esquema:



Seu principal significado é o seguinte:

  • A sincronização do estado da interface do usuário do servidor para o cliente é suportada
  • a parte do servidor pode se inscrever nos eventos dos componentes da interface do usuário e uma solicitação AJAX será executada
  • lógica de negócios é executada no servidor, apenas os dados exibidos na interface do usuário são carregados no navegador da web
  • o lado do servidor usa Java
  • o cliente pode usar modelos HTML, CSS, JS e Polymer

Para mim, isso significa que o Vaadin terá mais tecnologias front-end e agora o Java por si só não é suficiente (para o Vaadin 8, o Java seria o suficiente para você e o HTML / CSS não seria necessário). Por outro lado, a fácil integração do código JS agora é possível.

Plataforma Vaadin


Cada componente do Vaadin 10 é desenvolvido separadamente e nas melhores tradições do mundo JS - pequenos módulos que são tão independentes quanto possível um do outro. Ao mesmo tempo, a parte do cliente dos componentes é empacotada em um JAR no formato WebJARs: www.webjars.org

Isso é um pouco assustador, especialmente se você observar o design mínimo:



Para controlar de alguma forma esse caos, um projeto de BOM (Bill of Materials) chamado Vaadin Platform apareceu .

Este não é um produto independente, mas apenas uma lista de versões compatíveis de componentes e ferramentas projetadas no formato Maven BOM .

Ele se conecta ao Maven da seguinte maneira :

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

Recursos do Vaadin 10


Total, toda a estrutura consiste em 3 componentes:

  1. Componentes Vaadin - frontend
  2. Vaadin Flow - transporte
  3. API de componentes do servidor - API Java para componentes da interface do usuário

Vale a pena iniciar o desenvolvimento com o tutorial oficial .

Além disso, recomendo um novo webinar .

Iniciantes


Você pode se familiarizar com a estrutura na página . Lá você encontrará exemplos de projetos, incluindo o full-stack baseado no Spring Boot.

Fãs ardentes do Spring Boot podem prosseguir diretamente para start.spring.io e selecionar Vaadin entre os frameworks da web.

Um projeto mínimo pode ser iniciado com uma classe Java, por exemplo:

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

Em geral, você pode escrever no Vaadin 10, como no Vaadin 8, MAS! Você deve definitivamente olhar para a página de correspondência de componentes .

API do elemento


Recurso assassino Vaadin 10 - controle elementos DOM diretamente do código Java do lado do servidor.

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

Você também pode gerenciar atributos que já estão afixados:

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

Obviamente, isso não substitui os componentes da interface do usuário, mas uma boa API para alterações simples de layout ao desenvolver componentes da interface do usuário não é necessária.

Ligação de dados


Para trabalhar com componentes que implementam a interface HasValue (obter / definir valor e ValueChangeListener), existe uma classe Binder conveniente:

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

Como você pode ver no exemplo, a ligação digitada estaticamente com base nas expressões lambda é suportada.

Além disso, os binders podem instalar conversores e validadores de valor:

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

Templates


Os modelos HTML estão formatados:

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

Os modelos suportam ligação de dados declarativa e você pode escrever JavaScript nativo que será executado no navegador como está. Isso permite implementar parte da lógica mais simples da interface do usuário sem enviar solicitações ao servidor.

Eventos


A manipulação de eventos de componentes é muito simples :

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

Aqui você não notará a diferença com o Vaadin 8.

Encaminhamento


A navegação e o roteamento no aplicativo tornaram-se o que deveriam ser :

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

As visualizações podem determinar qual URL eles processam, quais parâmetros eles exigem do endereço e muito mais.

Desenvolvimento de Componentes


Para o Vaadin 10, você pode desenvolver componentes das seguintes maneiras:


Uma abordagem tão direta ao desenvolvimento de componentes personalizados é talvez o maior passo em frente. Não é mais necessário gravar wrappers para JS no GWT e depois gravar o lado do servidor no Vaadin.

Tema Lumo


Em vez de SASS, as variáveis ​​CSS agora são usadas para temas visuais, ou seja, não é mais necessário compilar CSS ao criar o projeto:

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

E o tema Valo é substituído por um novo tema personalizado do Lumo .



Migrando com o Vaadin FW 8


As opções de migração do Vaadin 8 estão descritas no documento: vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.html

Aqui tenho más notícias para você: se você escreveu um grande projeto no Vaadin 8, precisará reescrevê-lo completamente ao mudar para o Vaadin 10. Não há caminho de migração, a partir da palavra!

Vaadin 10 e Vaadin 8 são semelhantes em vários aspectos:

  • Abordagem do lado do servidor
  • Java para desenvolver lógica da interface do usuário
  • Mesma abordagem para ligação de dados

A linha inferior: Vaadin 10 é uma nova estrutura escrita do zero .

Como os desenvolvedores prometem, o Vaadin 8 será suportado até 2022, e as abordagens de migração podem aparecer.

Conclusão


Considero importante que o novo site da Vaadin seja escrito em Vaadin Flow, que se torna o padrão de fato para tecnologias de front-end, pois a maturidade de uma linguagem de programação foi determinada no momento se o compilador foi escrito na mesma linguagem.

Espero que agora você possa opinar sobre o Vaadin 10. Em geral, esse é um bom quadro e uma enorme reserva para o futuro. Para mim, este é um excelente campo de treinamento experimental para novas idéias e abordagens para a criação de uma interface do usuário.

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

More articles:


All Articles