Desenvolvimento

15 mar, 2018

Vaadin 10 Beta

Publicidade

Foi liberada a versão beta da próxima versão do Vaadin: o Vaadin 10. Se você nunca ouviu falar em Vaadin, deixe-me explicar do que se trata.

Há muito tempo atrás, numa galáxia muito distante…

“Não tenho tempo pra isso. Fechando aba em 3, 2, 1…”

Espera! Se você é desenvolvedor frontend (seja qual for o seu framework de escolha) ou backend (principalmente em Java), ou fullstack (faz o trabalho de dois mas recebe só um único salário), Vaadin pode te ajudar a ser mais produtivo e a entregar aplicações mais bem acabadas.

“Já sei onde isso vai dar: lá vem mais uma framework JavaScript que eu importo e todos os meus problemas serão resolvidos. Desculpe, mas meu bower/yarn/npm/webpack/ já está cheio de bibliotecas milagrosas.”

Ok, eu entendo. Mas antes de você ir, você já ouviu falar de webcomponents?

Webcomponents é a especificação que permite que os navegadores utilizem elementos customizados, que podem possuir lógica e estilos que não conflitam com o restante da página. Isso permite que você, por exemplo, crie um componente com a tag <meu-componente>, e a lógica e estilos dele são encapsulados no que é chamado shadow root.

Sendo assim, você pode usar qualquer webcomponent existente na sua página, independente se você usa Angular, React, Meteor, PHP, Java, Cobol, Assembly ou desenvolve usando borboletas.

Portanto, você não precisa usar toda a plataforma chamada Vaadin 10. Você pode instalar somente um componente, usar na sua página, deixar seu cliente mais satisfeito, e ter mais tempo para ler XKCDs.

“Ok, conte-me mais sobre!”

Vaadin 10 – focado em aplicações web mobile-first

Se você já desenvolveu uma aplicação perfeita para desktop, e depois o cliente/chefe/stakeholder/sogra/papagaio veio e pediu encarecidamente para você portar a aplicação para mobile, você provavelmente sabe o quão dolorido é o processo.

Não basta simplesmente colocar uma tag no head da página e esperar que tudo fique magicamente responsivo, e é ainda pior quando você descobre que aquele componente maravilhoso de jQuery que você usa na página é horrível em mobile, e você precisa refazê-lo do zero (ou encher a página de hacks em CSS).

É muito mais fácil se você começa a sua aplicação já pensando em mobile. Ou pelo menos começar usando componentes e layouts que são responsivos por padrão.

E não se iluda: há mais usuários mobile do que desktop hoje em dia. Se você não tem o requisito de rodar a sua aplicação em mobile hoje, esse requisito vai chegar – cedo ou tarde.

“Mas é melhor fazer nativo!”

Bom, depende muito da aplicação. Se tratando de games, por exemplo, sem dúvidas. Mas quando falamos de business apps, ou “enterprise apps”, o preço de desenvolver – e manter – apps nativas geralmente não compensa. Ter uma web app responsiva é a forma mais rápida e barata de se entregar valor para o seu cliente.

E é aqui que o Vaadin se destaca. A plataforma provê uma vasta biblioteca de webcomponents, prontos para serem usados na aplicação, independente de framework.

Vaadin 10 inclui 49 webcomponents – e contém desde data grid com lazy loading, componentes para formulários e validação, componentes para upload de múltiplos arquivos, etc. Tudo o que geralmente é necessário numa aplicação comercial.

O bom é que os componentes funcionam em todos os navegadores modernos – e até não tão modernos, como IE11. Sim, estamos em 2018 e ainda estamos falando de IE – e funcionam com interação via keyboard, mouse e touch. Todos os componentes são facilmente internacionalizáveis (mais uma coisa que desenvolvedor geralmente “deixa pra depois”), e customizáveis (a marca da sua empresa é amarela com detalhes em rosa choque e você quer que todos os botões sejam bege? Sem problemas!). E são bonitos por padrão – o que é ótimo se você é um desenvolvedor sem nenhum dom para design (meu caso).

Mas chega de papo, eis a lista de webcomponents providos pela plataforma: http://vaadin.com/elements

E não é só isso! Clicando nos próximos 5 minutos você ganha gratuitamente uma vasta gama de exemplos rodando direto do site, e a documentação completa de como integrar o webcomponent na sua aplicação! E não é só isso. Para quem já ouviu falar de Vaadin antes, sabe que até a versão 8, Vaadin era um framework especializado em Java server-side. Você podia construir web apps usando somente código Java, sem interagir com JavaScript, HTML ou CSS. Usando uma API similar a Swing e GWT, com Vaadin você pode realmente cumprir a promessa do Java (write once, run everywhere).

Com Vaadin 10, nada mudou. Usando o Vaadin Flow (que é o nome do framework server-side), você pode criar, adicionar e instrumentar webcomponents na aplicação, sem ter que lidar com o client-side. Eis um exemplo:

<vaadin-date-picker
  label="Select birth date" 
  value="[[user.birthDate]]" 
  required>
</vaadin-date-picker>
DatePicker bd = new DatePicker(“Select birth date”);
bd.setValue(user.getBirthDate());
bd.setRequired(true);

Do lado esquerdo temos a declaração de um componente em client-side, e do lado direito o mesmo componente, mas sendo criado via Vaadin Flow

A grande mudança do Vaadin Flow para o Vaadin 8 é que agora os componentes não são mais baseados em GWT, e sim em webcomponents. E como webcomponent é uma especificação, e não um framework, com Vaadin Flow você pode instrumentar qualquer webcomponent que você queria colocar na sua página (não é limitado somente aos componentes Vaadin). Isso significa também que não é necessário nenhum conhecimento adicional em Vaadin para desenvolver um componente novo – basta seguir a especificação.

Portanto, você tem a liberdade para usar os componentes em qualquer framework client-side, e usar quaisquer webcomponents com o framework server-side.

Para quem é desenvolvedor Java hardcore e não quer nem pensar em ter que lidar com o client-side (Javascript, HTML, CSS), também é possível criar a aplicação somente em Java.

Botando a mão na massa

Eu posso ficar falando falando e falando aqui eternamente sobre como o Vaadin 10 é bacana, cheio de features e tudo mais, mas não tem jeito: se tratando de desenvolvimento, o importante é por a mão na massa.

Quer usar os webcomponents na sua aplicação em Angular, React ou Vue? Está interessado em usar o parte server-side? Ou tudo junto e misturado?

Aqui você encontra vários links para começar uma aplicação com Vaadin 10:

Por exemplo, quer começar uma aplicação usando Java server-side usando Spring? Tá na mão:

Ou então, só testar alguma coisa em um projeto em Angular? Manda bala:

Vale lembrar que foi liberada a versão beta do Vaadin 10. Significa que bugs são esperados, portanto, não é recomendado que você coloque em produção ainda. A não ser, é claro, que você seja esse cara aqui:

Seu feedback é importantíssimo para a criar a melhor plataforma possível para os desenvolvedores e para os clientes dos desenvolvedores (incluindo aqueles amáveis clientes que continuam usando IE). Você pode entrar em contato diretamente via fórum ou tirar dúvidas via Gitter e StackOverflow (com a tag “vaadin”). Encontrou um bug ou tem uma ideia de melhoria? Manda lá no GitHub. E é claro, como todo projeto open-source, pull requests são sempre bem-vindos!

Referências