Já pensou em desenvolver uma aplicação Web sem precisar escrever código HTML, CSS e JavaScript? Pois o framework Vaadin surgiu justamente com esta proposta. Apenas com uma linguagem, a linguagem Java, você poderá criar interfaces de usuários sofisticadas graças a este framework sensacional!

O que Você Vai Encontrar Neste Artigo

• O que é o Vaadin:

Uma visão geral sobre este framework.

• Como o Vaadin funciona:

Como é possível criar páginas web com Java.

• Como é sua estrutura:

Uma visão sobre os componetes do Vaadin.

• Quais são os benefícios do Vaadin:

Descubra como o Vaadin pode simplificar o desenvolvimento, manutenção e segurança das suas aplicações.

• Exemplo prático:

Como criar seu primeiro projeto web com o framework Vaadin.

• Exemplos reais:

Aplicações disponíveis no mercado que utilizaram este framework.

O que é o Vaddin

O Vaadin é um framework de código aberto para a construção de aplicações web-modernas inteiramente em Java, sem a necessidade de escrever HTML ou JavaScript. Os desenvolvedores podem compor a interface do usuário a partir de componentes, conectá-los às fontes de dados e faze-los reagir aos eventos do usuário, semelhante à construção de aplicativos de desktop tradicionais..

Como o Vaadin funciona

O Vaadin transforma o código Java em páginas Web, e o processo pode ser simplificado nos passos abaixo:

• Escreva o código:

Primeiramente escreva o código em Java.

• Vaadin Flow:

O Vaadin Flow irá processar o código Java no servidor.

• Conversão do código:

Após isso, o Vaadin Flow converte o código Java em HTML, CSS e JavaScript.

• Renderização:

O Navegador irá renderizar a página com base no código.

• Interatividade:

As interações do usuário são processadas pelo servidor e o Vaadin atualiza a página conforme o necessário.

Estrutura do Vaadin

• Vaadin Flow:

Vaadin Flow é uma estrutura full-stack exclusiva que permite criar aplicativos da web sem escrever HTML ou JavaScript. Basicamente, com base em seu código Java, ele irá enviar o resultado para o navegador em forma de HTML, CSS e Java Script, após o processamento no servidor. Essa comunição é feita utilizando WebSockets e AJAX.

O Flow controla os atributos, propriedades e filhos desses elementos HTML e pode até executar invocações JavaScript personalizadas. O Flow sincroniza entre si os objetos Java do lado do servidor e os elementos HTML do lado do cliente.

• Vaadin Hilla:

Hilla é uma estrutura para construção de aplicativos web reativos em backends Java. Ele integra com precisão um frontend React TypeScript com um backend Spring Boot .

• Biblioteca de componentes:

A grande coleção de componentes gratuitos do Vaadin permite criar qualquer tipo de aplicativo da web. Além disso, todos os componentes têm uma aparência moderna que pode ser facilmente adaptada à sua aplicação.

• Vaadin Designer:

Vaadin Designer é uma ferramenta visual onde você pode arrastar e soltar componentes web em uma tela. Qualquer alteração feita será refletida na visualização da IU que está sendo construída.

Quais são os benefícios do Vaadin

• Produtividade e Simplicidade:

Com o Vaadin, o desenvolvimento de sua aplicação será bem mais simples e produtiva, pois será possível se concentrar na lógica de negócios, já que o front-end será facilitado graças ao Vaadin. Além disso, com tudo feito em apenas uma linguagem, o Java, o código terá menos bugs e mais produtividade.

• Manutenção:

Graças a arquitetura organizada do Vaadin, a manutenção do código é semelhando a trocar pilhas do controle remoto, já que seu código é fácil de entender e modificar.

• Segurança:

Os dados estarão sempre seguros, já que toda a lógica da aplicação fica no servidor e os clientes só poderão ver a interface.

• Comunidade:

Sua comunidade é ativa e oferece suporte comercial. Além disso, sua documentação é extensa e existem vários tutoriais disponíveis na web.

Exemplo Prático

Veja como criar um projeto de To-do List com o Vaadin.

• Baixe e descompacte o arquivo disponível em https://vaadin.com/docs/latest/guide/quick-start

• Abra o arquivo `MainView.java` que está no diretório `src/main/java/com/example/application/views/main/`

• Copie e cole o código abaixo:

package com.example.application.views.main;


import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;


@Route("")
public class MainView extends VerticalLayout {


  public MainView() {
      VerticalLayout todosList = new VerticalLayout();
      TextField taskField = new TextField();
      Button addButton = new Button("Add");
      addButton.addClickListener(click -> {
          Checkbox checkbox = new Checkbox(taskField.getValue());
          todosList.add(checkbox);
      });
      addButton.addClickShortcut(Key.ENTER);


      add(
              new H1("Vaadin Todo"),
              todosList,
              new HorizontalLayout(
                      taskField,
                      addButton
              )
      );
  }
}

• Na pasta principal abra o Terminal e digite ./mvnw

• Após isso será aberto http://localhost:8080/

O resultado será como a imagem abaixo:

Exemplos de Sites Criados com Vaadin

Aqui estão exemplos de aplicações reais desenvolvidas com Vaadin:

• Trustly: https://trustly.com
• Analyticom: https://analyticom.de
• Statflo: https://statflo.com
• Munich Airport: https://www.munich-airport.de

Conclusão

Este revolucionário framework veio para tranformar a maneira como desenvolvemos aplicações web. Trazendo simplicidade e a robustez da linguagem Java para o mundo web, facilitando o desenvolvimento de interfaces modernas e responsivas. Então, caso tenha familiaridade com a linguagem Java, este framework é ideal para suas aplicações front-end e/ou full-stack.

Referências

https://pt.wikipedia.org/wiki/Vaadin

https://vaadin.com/success-stories

https://vaadin.com/faq#how-does-vaadin-work

https://vaadin.com/docs/latest/guide

https://vaadin.com/docs/latest/guide/quick-start

https://vaadin.com/benefits

https://trustly.com

https://analyticom.de

https://statflo.com

https://www.munich-airport.de