So I decided to try out the latest version of Vaadin and downloaded a default project.
I noticed the new (for me) @Menu annotation on the view.
I am trying to understand the philosophy behind this annotation
Earlier I would build my own SideNav where I could define the sequence of the SideNavItems in the AppLayout. Apparently now this can be achieved by defining the order value in @Menu annotation
Sounds good, but I see a few problems
After declaring the views, suppose I want to change the display order, I need to (at a minimum) change the order value for at least two views.
How does one achieve nested SideNavItems? I tried defining 1.1 as the order value, but no nesting.
What exactly is the goal of the Menu annotation?
Is it not recommended to not use it? If I don’t use it, will it affect the performance?
Any insights to help me understand this feature better, will be most appreciated.
The main idea with the @Menu annotation is to help you get started quickly.
We want the default setup especially for first-time users to be such that a newly added view is immediately usable. There may come a time when they have to learn how to work with the SideNav component but we don’t want that the be the very first thing they encounter.
We acknowledge that the current implementation does not cover all the possible things that might be needed in a complex application. Hierarchy is a prime example of this. One option is to keep using MenuConfiguration.getMenuEntries() to find menu entries but swap out the logic that uses this data configure the SideNav component in a different way. Alternatively, you an keep building the menu fully manually in the same way as before @Menu was added. There is no performance overhead in that case since it’s all based on the discovery mechanism that is anyways also looking for @Route classes.
Using decimal numbers would not be sufficient for expressing a hierarch since there are only two levels in a decimal number. Instead, we’re supporting the concept of fractional indexing. This means that if you want to add an item between index 2 and index 3, then you can use any floating point number between those values, e.g. 2.5. In that way, you can avoid the need to update subsequent indices even though there’s also a tradeoff there with decimal indices being slightly more difficult to understand.
@Menu was introduced to help making side menus faster, where metadata about Flow routes can be populated to your main layout automatically, so you only need to choose the way HOW you render the side menu and don’t care about WHAT to render. WHAT to render is defined declaratively by the @Menu parameters.
This is also a unification with Vaadin Hilla framework where you can also add a new TypeScript view, add a menu metadata and have a new menu item appears automatically.
I’m not aware of any application performance implications when you don’t use this feature.
@Menu doesn’t per se support nested items in the menu, however, SideNav can have child SideNavs.
You may change just one view with double order values. E.g. for placing third item in between item 1 and 2 - order=1, order=2, order=3 → order=1, order=1.1, order=2.