Patchnotes Version 11

Rapidclipse Version 11 is the final step to move from Vaadin 14 Bower to Vaadin 14 NPM. That enables us to move forward to newer Vaadin versions higher 14 and to next long-term versions in the future. To be more detailed the package manager of Vaadin has changed to NPM and in short words PNPM manages all the dependencies in the JavaScript and Node.js world. The biggest difference between Bower and NPM is that NPM does nested dependency tree while Bower requires a flat dependency tree.

This change of the package manager requires a total new implementation of our UI Designer and therefore we decided to make some fundamental changes of the basic architecture of our Designer. In the past we initialized some parts of the whole project for each UI Designer tab to show a representation that is as realistic as possible. This comes with some disadvantages:

1. We had increased loading times for each tab again and again

2. We were not able to consider global configurations like themes in the UI Designer

3. We had a lot of overhead in the RAM

So, we changed that, and we decided to build and deploy the project once a reuse it in every tab again. This eliminated the two disadvantages above. That means only the first access to a UI within a project need a little longer to load all further accesses are a lot faster. And on top of that we are able to show a full theme integration and every small CSS adjustment in our UI Designer. The point that we only need one application server per project in the background instead of having one for each tab is even better.

Let´s talk about the changes a little bit more detailed:

1. Theme handling has been improved on Vaadin and RapidClipse

   1. The folder where themes are defined has been changed. It is moved from “src.main.webapp.frontend” to project root.

   2. Also, the structure within that frontend folder has changed. See Vaadin documentation for details here: https://vaadin.com/docs/v14/flow/styling/custom-theme

   3. By default, this new “Frontend” folder is created on project creation. And there is also a default custom theme defined which represents the default setting of a Vaadin project. Feel free to use this default template and customize it with your own CI. Further you can create and hold multiple themes in that frontend folder and change it whenever you want.

   4. As in the previous versions of Rapidclipse there is that theme change ComboBox in the upper right corner of the UI Designer. In the past it only affected the current visible tab and not the whole project at runtime. This has changed. After changing the theme, it changes the theme for the whole project within all tabs in the Designer and at runtime if the “@Theme” annotation is still in place. Otherwise you have to export the  “@Theme” annotation by clicking the button left next to the ComboBox.

   5. CSS instead of using HTML import within your java classes. When additional CSS classes are in use, then it was necessary to import them by adding a html import on the java class which uses that CSS file. This is not longer possible and required. Instead of using HTML Import only something like this is working: “@CssImport("./themes/Default/navbar.css")” additionally we will need only one import on the top UI of the project.

   6. We added another section to the project management where all these theming things can be managed and configured.

   7. Detailed information´s and documentation can be found here Frontend & Design

   8. Detailed information´s to the migration from 10.4.1 to 11 can be found here Migration von 10/X zur Version 11

2. New functions in the upper right corner of the UI Designer

   1. After changing the theme of the project in the Designer, it might be possible to restart the Designer server in the Background. For those reasons we added two additional buttons to the upper right corner of the Designer

   2. Refresh the Designer – Just refreshes the current view and tries to fix some issues with the component borders and helping grid line in the UI Designer.

   3. Restart the Background Server – Restarts the whole app Server in the Background for all tabs in the IDE. This is recommended to do after a theme change anyway.

   4. Export the “@Theme” annotation – To apply a UI theme at runtime it is necessary to add a “@Theme” annotation on the top UI or the top UI that implements the “RouterLayout” interface. To have a little more convenient method to add the annotation this button is for.

   5. Show App in Browser – Sometimes it could be useful to see a preview outside the designer. For that reason, we add a function to open an external browser and add the app URL of the background app server as target. So you have to possibility to see your app life in different Browsers as preview.

3. The way to deploy application in production has changed

   1. In the past there wasn´t a possibility to deploy the application out of RapidClipse in a convenient way. You had to read several pages of Vaadin Documentation, changing code and annotations and sometimes this was quite confusing. This has changed. Now RapidClipse provides a new function in the QuickLaunch View of the IDE. “Build web app (.war) [Production]” this function deploys the application with production configuration to the target folder.

   2. IMPORTANT: After building a version in production the project setup changed a little bit. Because of that the project can no longer handled with our UI Designer and therefore a second normal developer deployment is necessary.

4. Security improvement within the RapidClipse Framework and dependency of a RapidClipse project

   1. We improved the all over security by updating most of our dependencies which are used within our framework.

5. List of Framework updates:

   1. See table below

6. Possibility to upgrade the basic configuration of your project to new version 11

   1. We added a small function to support the migration from 10.4.1 to 11. This functionality can be found by right clicking on the project -> RapidClipse -> Update Project. The following changes will happen after clicking:

      1. Updating all dependencies to newest versions

      2. Adding necessary additional folders and files (NPM files) to the project

      3. Changes the former file extensions from file.ui.xml to file.uixml

Framework and dependency updates