Technology Change general
RapidClipse projects are based on Vaadin and its components, which is based on WebComponents, basically HTML & CSS.
Projects as of RC11 use Vaadin’s new management for these frontend files, which is now based on ES6 modules (or JS modules) instead of HTML imports as before.
Internally, PNPM is now used to assemble and manage the design, not Bower.
Also the way the frontend files are prepared and compiled during the build has changed: Before, they were provided by Bower as webjars, now vite is used.
Vite packs the frontend files in "production" mode, but in developer mode they are provided on-the-fly by starting an additional "vite development server" in the background.
As a result, it is now also possible to see style changes live in the RapidClipse Designer.
Both functions, the management via NMP/PNPM and the creation of a bundle in production mode via webpack are automated as Maven plugins.
In the course of the change to NPM/PNPM the structure of RC/Vaadin applications also changes: The frontend folder, where all additional frontend files (*.js, \*.css) are located, is no longer in the
src/main/webapp/ folder, but directly in the project root folder.
Images and other static resources should remain in the
Handling design customizations has been simplified with the introduction of Custom Themes.
It is now possible to create a custom theme, simply by convention, by creating a subfolder in the
frontend/themes folder that contains at least two subelements: a
components/ folder and a
All custom themes created in this way are based on the Lumo theme, they can be used analogously to it and to the Material theme via
Previously, a separate server ran in the background of each UI Designer window, providing the view.
This design has been changed, among other things to account for the extended startup time due to the NPM/PNPM tasks of the new frontend tooling and the startup of the additional
vite development server.
As of RC11, a server* runs in the background per project, which serves the UIs of all UI Designer windows of a project. This server remains started even if the window is closed again.
This has the consequence that
after RapidClipse startup the start of the background server for the first opened UI Designer window of a project takes a bit longer
all other UI Designer windows can be opened quickly
reloading a page happens quickly
Changes to the zoom and theme settings of a UI Designer window also affect all other UI Designer windows in a project.
Of course, it can always happen that the background server stops working, e.g. due to some changes in the project.
To then get more information it is possible to enable the console output for background servers.
The "Show designer console" setting determines the visibility of the console and is available under
Window → Preferences → RapidClipse → GUI Editor → Designer Server
In previous versions, an application could be run in either Developer Mode or Production Mode, depending on the setting, without any further changes.
There is still a "Production Mode", but it is only used to create a Production Mode build.
This production-mode build calls an additional
vaadin:build-frontend goal of the "vaadin-maven-plugin". This is part of the new design management tooling to let webpack build a frontend package which then becomes part of the war-file.
vaadin:build-frontend partially changes data and paths needed by the webpack development server running in development mode.
It is then often so that after a Production Mode build, the Designer server has problems rendering in the background of the UI Builder windows.
This can be solved by a Maven update, which among other things runs
vaadin:prepare-frontend and then restarting the DesignerServer (right click → Maven → Update Project").