Frontend Aufbau

Owned by Manuel
Last updated: Aug 23, 2022
1 min read

RapidClipse-Projekte basieren auf Vaadin und dessen UI-Komponenten. Die Client-seitigen Anteile der Komponenten sind WebComponents, bestehen also im Grunde aus HTML & CSS.

Während die Server-Seitigen Anteile wie gewohnt als jar-Dependencies vorliegen und mit Maven gemanagt werden, liegen die Client-Seitigen Anteile als ES6 Module (oder JS Module) vor.
Wie der Name schon sagt sind die ES6 Module modular aufgebaut, können also Anhängigkeiten zu anderen Modulen haben.

Vaadin stellt ein Frontend-Tooling bereit, welches sowohl das Package-Management der JS Module integriert als auch die Weiterverarbeitung der Module und weiterer Frontend-Dateien.
Intern wird PNPM zum Management und Zusammenstellen der Module genutzt, und webpack zum Packen (im Production Mode) bzw. Bereitstellen (im Development Mode).
Dieses Tooling ist automatisiert und als "vaadin-maven-plugin" gekapselt, welches als Maven-Plugin in den normalen Maven-Build-Lifecycle integriert ist.

Bestandteile des maven-plugins:

  • vaadin:prepare-frontend: Zusammenstellung der notwendigen ES6 Module und Package-Management mit PNPM

  • vaadin:build-frontend: Packen der Module und der zusätzlichen Dateien aus dem frontend-Ordner mit webpack

Zusätzlich zu den JS Module-Dateien berücksichtigt das Frontend-Tooling auch die Dateien aus dem "frontend"-Ordner im Projekt-Root-Verzeichnis.
Dieser "frontend"-Ordner kann zusätzliche CSS- und JavaScript-Dateien enthalten, z.B. js-Dateien zum definieren eigener Komponenten oder css-Dateien für Anpassungen am Styling - einzelne Dateien wie auch ganze Custom-Themes.

Vaadin-Projekte und somit auch RapidClipse-Projekte sind by default im Development Mode. Hier wird "build-frontend" nicht ausgeführt, stattdessen wird beim Start der Applikation ein zusätzlicher "webpack-development-server" gestartet, welcher die Modul-Dateien und Dateien aus dem "frontend"-Ordner für die Applikation "on-the-fly" bereitstellt.

 

Durch npm/pmpm gemanagte Frontend-Dependencies liegen im Ordner "node_modules" im Root-Ordner des Projekts.
Weitere Dateien im Zusammenhang mit dem Frontend-Tooling:

  • package.json

  • package-lock.json / pnpm-lock.yaml

  • webpack.config.js

  • webpack.generated.js

XDEV Software Corp. - One Embarcadero Center, San Francisco, CA 94111, US
Copyright © 2015. XDEV Software Corp. All rights reserved.