Cada cambio, incluso un cambio para mejor,
siempre inconveniente
Richard Hooker
Como ya sabrás, Vaadin es uno de los frameworks web Java más populares:
Más recientemente, se lanzó una nueva versión de este marco para desarrollar una interfaz de usuario web, Vaadin 10. Hay pocas publicaciones en ruso sobre Vaadin 10 y Vaadin Flow, y esta publicación está destinada a llenar este vacío.
Los creadores posicionan a Vaadin Flow como un nuevo marco web Java para el desarrollo de aplicaciones web modernas y sitios web (aquí no los creo). Esto es parte de la Plataforma Vaadin, que reemplaza a otro producto: Vaadin Framework, que le permite desarrollar aplicaciones web (o, para ser más precisos, la interfaz de usuario web) utilizando el estándar Java Web Components.
Aquí en la mente del lector, lo más probable es que todo ya estuviera mezclado, todos estos Vaadin Bla Bla, el marco, la plataforma, etc. Que esta pasando
Llevamos 7 años utilizando Vaadin como parte de nuestra
plataforma CUBA para sistemas de back-office de UI y durante este tiempo hemos acumulado mucha experiencia trabajando con él, por lo que no podemos sino preocuparnos por su destino. Debajo del corte encontrarás mis especificaciones sobre Vaadin 10.
Marco Vaadin
Vaadin es una empresa finlandesa que desarrolla herramientas y bibliotecas para desarrollar interfaces de usuario. Crean el marco del mismo nombre para el desarrollo web en Java.
Vaadin Framework es un marco de interfaz de usuario con un modelo de programación del lado del servidor en el que toda la lógica de la interfaz de usuario y su estado se encuentran en el servidor, y solo el código de la interfaz de usuario de los componentes se ejecuta en el navegador. De hecho, esta es una tecnología de cliente ligero donde el navegador solo muestra lo que dice el servidor y todos los eventos se envían al servidor.
El enfoque del lado del servidor le permite olvidarse del hecho de que el desarrollo se realiza bajo la web y desarrollar la IU como una aplicación Java de escritorio con acceso directo a los datos y servicios en el servidor. Al mismo tiempo, Vaadin se encargará de mostrar la interfaz de usuario en el navegador y la interacción AJAX entre el navegador y el servidor. El motor Vaadin representa la interfaz de usuario de la aplicación del lado del servidor en el navegador e implementa todos los detalles del intercambio de cliente y servidor.
Este enfoque tiene muchas ventajas:
- El código Java es más fácil de escribir y depurar
- Puede usar las bibliotecas y herramientas Java existentes (IDE, compiladores, pruebas)
- No se requiere desarrollo de servicios web
- La seguridad es mejor
Y contras:
- Necesita mucha memoria en el servidor para ver la IU
- Solución difícil de escalar
- Al desarrollar widgets, debe desarrollar una API Java
Sobre la base de estos inconvenientes y ventajas, Vaadin FW se estableció precisamente en el desarrollo empresarial, donde las cargas son predecibles, y la velocidad y facilidad de desarrollo es mucho más importante que el costo del hierro y la memoria.
¿Qué pasó con el kit de herramientas web de Google?
Todo el tiempo que Vaadin está familiarizado con el público en general, la parte del cliente de Vaadin FW estaba inextricablemente vinculada con otro producto conocido: Google Web Toolkit (GWT). Este tándem hizo posible escribir los componentes de la interfaz de usuario y la API del servidor para ellos en un idioma: Java, que era bastante conveniente.
En los últimos años, Google Web Toolkit no se ha desarrollado, y desde 2015 todos estamos esperando la aparición de GWT 3.0 / J2CL, anunciado en GWT. Crear 2015:
Un evento importante sucedió en este período estancado (2015-2017): apareció la especificación de componentes web y otro marco de Google, Polymer. Aparentemente, este fue el comienzo del fin del GWT.
Vale la pena señalar que GWT 3 se está desarrollando como un marco interno de Google y su desarrollo se lleva a cabo internamente. Por lo tanto, la comunidad no puede influir en el proceso de ninguna manera, o al menos no ver que el proceso continúa.
En el contexto de este estancamiento, el equipo de Vaadin tomó la difícil decisión de abandonar por completo el desarrollo en GWT y
reescribir la parte del cliente de su marco . Estos cambios no pueden pasar desapercibidos y asustan a todos los que ya se están desarrollando en Vaadin.
Componentes web
Web Components es un conjunto de estándares. Fue propuesto y promovido activamente por los chicos de Google, pero la iniciativa ya ha sido apoyada en Mozilla. En esencia, se trata de tecnologías para crear componentes de interfaz de usuario para la web, de modo que admitan la encapsulación del comportamiento y la presentación. Y la principal ventaja es la posibilidad de reutilización.
Conceptos clave:
- Elementos personalizados: API para crear sus elementos HTML
- Shadow DOM es una herramienta para encapsular componentes HTML y aislar su presentación visual de las reglas globales de CSS. En resumen, puede hacer un componente, por ejemplo, un formulario de pedido, y no tener miedo de que sus estilos se rompan en algunas de las páginas del sitio debido a las reglas CSS de esta página.
- Plantillas HTML: la capacidad de colocar bloques pasivos que contienen elementos en blanco DOM en un documento HTML. Dichos bloques son analizados por el navegador, pero no se representan ni ejecutan su código. Se sugiere su uso como plantillas para la representación de datos.
- Importaciones HTML: la capacidad de importar un documento HTML como un módulo con todo su diseño, estilos y JS
Por ejemplo, si ahora mira el árbol DOM de YouTube, encontrará el uso de Elementos personalizados y DOM de sombra:
Todas estas cosas le permiten escribir nuevos componentes de interfaz de usuario de moda para la web.
Vale la pena admitir que la compatibilidad con el navegador está lejos de ser perfecta y que aún se
requieren polyfills , por ejemplo, para Edge.
Polímero
Polymer es una pequeña biblioteca que cumple con los estándares de componentes web diseñada para simplificar su uso. Un ejemplo:
De hecho, Polymer hace todo lo que GWT hizo antes, pero al mismo tiempo es compatible con cualquier componente JS y otros marcos, por ejemplo, React y Angular.
Componentes Vaadin
De vuelta a Vaadin. Durante mucho tiempo, Vaadin ha estado fabricando un producto llamado
Componentes Vaadin: componentes de interfaz de usuario para desarrolladores front-end que pueden integrarse en cualquier aplicación JS.
¡Estos componentes están basados en Web Components y Polymer!
Como vemos ahora, era un aeródromo alternativo para el Marco Vaadin, lo que nos permitió abandonar Google Web Toolkit y desarrollar un nuevo marco para el cual los componentes aún no existían. El problema del huevo y la gallina se ha resuelto y Vaadin Components se ha convertido en el front-end del próximo Vaadin 10.
Flujo de vaadina
Vaadin 8 incluía un mecanismo de sincronización de estado UI y soporte para un protocolo RPC bidireccional (llamada a procedimiento remoto). Esto fue posible gracias a GWT, ya que las interfaces y clases comunes del servidor y el cliente se escribieron en Java.
Junto con el abandono de GWT, fue necesario implementar un nuevo mecanismo que permitiera una integración transparente con la interfaz JS y el servidor Java. Este mecanismo fue Vaadin Flow (y también este nombre se ha usado durante mucho tiempo para referirse a Vaadin 10 completo).
La
documentación de Flow tiene este esquema:
Su significado principal es el siguiente:
- La sincronización del estado de la IU del servidor al cliente es compatible
- la parte del servidor puede suscribirse a los eventos de los componentes de la interfaz de usuario, y se ejecutará una solicitud AJAX
- la lógica de negocios se ejecuta en el servidor, solo los datos que se muestran en la interfaz de usuario se cargan en el navegador web
- el lado del servidor usa Java
- el cliente puede usar plantillas HTML, CSS, JS y Polymer
Para mí, esto significa que habrá más tecnologías de front-end en Vaadin, y ahora Java solo claramente no es suficiente (para Vaadin 8, Java sería suficiente para usted y no sería necesario HTML / CSS). Por otro lado, ahora es posible una fácil integración del código JS.
Plataforma Vaadin
Cada componente de Vaadin 10 se desarrolla por separado y en las mejores tradiciones del mundo JS: pequeños módulos que son lo más independientes posible entre sí. Al mismo tiempo, la parte cliente de los componentes está empaquetada en un JAR en el formato WebJAR:
www.webjars.orgEsto da un poco de miedo, especialmente si nos fijamos en el diseño mínimo:
Para controlar de alguna manera este caos,
apareció un proyecto BOM (Bill of Materials) llamado
Vaadin Platform .
Este no es un producto independiente, sino solo una lista de versiones compatibles de componentes y herramientas diseñadas en el formato
Maven BOM .
Se conecta a Maven de la
siguiente manera :
<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>
Características de Vaadin 10
Total, todo el marco consta de 3 componentes:
- Componentes Vaadin - interfaz
- Vaadin Flow - transporte
- API de componentes del servidor: API de Java para componentes de la interfaz de usuario
Vale la pena comenzar el desarrollo con el
tutorial oficial .
Además, recomiendo un
nuevo seminario web .
Entrantes
Puede familiarizarse con el marco desde la
página . Allí encontrará ejemplos de proyectos, incluidos los de pila completa basados en Spring Boot.
Los fanáticos ardientes de Spring Boot pueden proceder directamente a
start.spring.io y seleccionar Vaadin entre los marcos web allí.
Se puede iniciar un proyecto mínimo con una clase Java, por ejemplo:
En general, puedes escribir en Vaadin 10, como en Vaadin 8, ¡PERO! Definitivamente deberías mirar
la página de coincidencia de componentes .
API de elemento
Killer feature Vaadin 10: controla los elementos DOM directamente desde el código Java del lado del servidor
Element nameField = ElementFactory.createInput(); nameField.setAttribute("id", "nameField"); nameField.setAttribute("placeholder", "John Doe"); nameField.setAttribute("autofocus", "");
También puede administrar atributos que ya están pegados:
Por supuesto, esto no es un reemplazo para los componentes de la interfaz de usuario, pero no se requiere una buena API para cambios de diseño simples cuando se desarrollan componentes de la interfaz de usuario.
Enlace de datos
Para trabajar con componentes que implementan la interfaz HasValue (get / set value y ValueChangeListener), hay una clase Binder conveniente:
Binder<Person> binder = new Binder<>(); TextField titleField = new TextField(); binder.forField(titleField) .bind( Person::getTitle, Person::setTitle);
Como puede ver en el ejemplo, se admite el enlace estáticamente tipado basado en expresiones lambda.
Además, las carpetas pueden instalar convertidores de valor y validadores:
binder.forField(yearOfBirthField)
Plantillas
Las plantillas HTML son tipográficas:
<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>
Las plantillas admiten el enlace de datos declarativo y puede escribir JavaScript nativo que se ejecutará en el navegador tal como está. Esto le permite implementar parte de la lógica de interfaz de usuario más simple sin enviar solicitudes al servidor.
Eventos
El manejo de eventos de componentes
es muy simple :
TextField textField = new TextField(); textField.addChangeListener(e -> System.out.println("Event fired"));
Aquí no notarás la diferencia con el Vaadin 8.
Enrutamiento
La navegación y el enrutamiento en la aplicación se
han convertido en lo que deberían ser :
@Route("some/path") public class SomePathComponent extends Div { public SomePathComponent() { setText("Hello @Route!"); } }
Las vistas pueden determinar qué URL procesan, qué parámetros requieren de la dirección y mucho más.
Desarrollo de componentes
Para Vaadin 10, puede desarrollar componentes de las siguientes maneras:
Tal enfoque directo para el desarrollo de componentes personalizados es quizás el mayor paso adelante. Ya no es necesario escribir contenedores para JS en GWT, luego escribir el lado del servidor en Vaadin.
Tema de Lumo
En lugar de SASS, las
variables CSS ahora se usan para temas visuales, es decir ya no es necesario compilar CSS al compilar el proyecto:
<custom-style> <style> html { --lumo-font-family: "Open Sans", sans-serif; } </style> </custom-style>
Y el tema Valo se reemplaza por un nuevo
tema personalizado de Lumo .
Migrar con Vaadin FW 8
Las opciones de migración de Vaadin 8 se describen en el documento:
vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.htmlAquí tengo malas noticias para ti: si escribiste un gran proyecto en Vaadin 8, entonces tendrás que reescribirlo completamente al cambiar a Vaadin 10. ¡No hay una ruta de migración, desde el principio!
Vaadin 10 y Vaadin 8 son similares en varios aspectos:
- Enfoque del lado del servidor
- Java para desarrollar lógica de interfaz de usuario
- Mismo enfoque para el enlace de datos
El resultado final:
Vaadin 10 es un nuevo marco escrito desde cero .
Como prometen los desarrolladores,
Vaadin 8 será compatible hasta 2022, y pueden aparecer enfoques de migración.
Conclusión
Considero importante que el nuevo sitio web de Vaadin esté escrito en Vaadin Flow, que se está convirtiendo en el estándar de facto para las tecnologías front-end, ya que la madurez de un lenguaje de programación fue determinada por si su compilador estaba escrito en el mismo idioma.
Espero que ahora pueda opinar sobre Vaadin 10. En general, este es un buen marco y una gran reserva para el futuro. Para mí, este es un excelente campo de entrenamiento experimental para nuevas ideas y enfoques para construir una interfaz de usuario.