Vaadin es una plataforma de desarrollo para crear aplicaciones web en Java. Aunque incluye una API de Java ( Vaadin Flow) que puedes usar para implementar la Interfaz de Usuario (UI) completamente en Java sin escribir HTML o JavaScript, los componentes UI incluidos en Vaadin pueden ser usados directa e individualmente en cualquier documento HTML sin usar Vaadin Flow, Vaadin Fusion u otro framework web.
Los componentes UI de Vaadin est谩n implementados como Web Components. En resumen, un Web Component es una etiqueta o elemento HTML personalizado que un desarrollador puede definir. Por ejemplo, en YouTube, puedes ver que los desarrolladores crearon un elemento personalizado llamado ytd-comment-action-buttons-rendered para encapsular los botones de acci贸n asociados con un comentario:
Vaadin tiene una colecci贸n de Web Components modernos y, en este art铆culo, aprender谩s a usarlos con la ayuda de dos herramientas: npm y Parcel. npm es necesario para manejar las dependencias. Un ejemplo de una dependencia es el Web Component para crear un bot贸n de Vaadin (vaadin-button). Este Web Component est谩 implementado en un conjunto de archivos que necesitas descargar de alg煤n lugar. npm ayuda con eso. Parcel es un empaquetador de m贸dulos JavaScript con cero configuraci贸n. Toma todos los archivos JavaScript que componen tu aplicaci贸n m谩s las dependencias y crea un solo archivo JavaScript que puedes publicar con tu aplicaci贸n cuando la despliegues en producci贸n.
Crea un nuevo proyecto#
Crea un nuevo directorio para tu aplicaci贸n. Por ejemplo:
mkdir vaadin-components-without-frameworks
Descarga Node.js. Lo necesitas ya que contiene npm. Inst谩lalo e inicializa un nuevo proyecto de la siguiente forma:
cd vaadin-components-without-frameworks
npm init -y
Esto crea un archivo package.json en el directorio actual. Este archivo contiene, entre otras cosas, las dependencias que tu aplicaci贸n necesita.
Crea un nuevo archivo JavaScript con el nombre index.js. Crea un nuevo archivo HTML que cargue el archivo index.js. Usa index.html como el nombre del archivo y crea un documento simple como el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vaadin Web Components en HTML</title>
<script src="index.js"></script>
</head>
<body>
<h1>Usando Vaadin Web Components sin frameworks</h1>
</body>
</html>
Agrega Web Components de Vaadin#
Vamos a usar el Web Component para botones de Vaadin en este ejemplo. Desc谩rgalo usando npm de la siguiente manera:
npm i @vaadin/vaadin-button --save
Esto crea un nuevo directorio node_modules/ donde residir谩n todas las dependencias. Ah铆, encontrar谩s los archivos que forman el Web Component vaadin-button de Vaadin y sus dependencias. Los Web Components pueden tener dependencias propias.
Importa la dependencia del bot贸n de Vaadin en el archivo index.js de esta forma:
import '@vaadin/vaadin-button/vaadin-button.js';
Usa los Web Components de Vaadin#
Con las dependencias en su lugar, agrega un bot贸n de Vaadin en el archivo index.html de la siguiente manera:
...
<body>
<h1>Usando Vaadin Web Components sin frameworks</h1>
<vaadin-button onclick='alert("隆Funciona!")'>Haz clic en m铆</vaadin-button>
</body>
...
Construye y ejecuta la aplicaci贸n#
Descarga Parcel ejecutando lo siguiente:
npm install -g parcel-bundler
Para construir la aplicaci贸n, invoca Parcel as铆:
parcel index.html
Esto crea el paquete del lado del cliente y los archivos de distribuci贸n en el directorio dist/. Estos son los archivos que puedes desplegar en un servidor web en entornos de desarrollo, pruebas o producci贸n. De hecho, cuando ejecutas el comando anterior, Parcel inicia un servidor de desarrollo. Puedes invocar la aplicaci贸n en http://localhost:1234. Aqu铆 tienes una captura de pantalla:
