client-side-views

What problem does it solve?

Building client-side React/Hilla views in Vaadin 25 requires coordinating file-based routing, type-safe backend communication, client-side state, and secure server endpoints; this Skill consolidates conventions, patterns, and safety practices so developers can implement interactive browser UIs reliably and consistently.

Core Features & Use Cases

• File-based routing conventions and ViewConfig metadata to map .tsx files to application routes and menus.
• Guidance for @BrowserCallable Java endpoints and the generated TypeScript clients so frontend code can call backend services securely and with proper error handling.
• Reactive endpoints and subscription patterns for server push using Flux and EndpointSubscription, including subscribe/unsubscribe and reconnection handling.
• Signal-based state management with useSignal/useComputed for efficient DOM updates and examples for common patterns like product lists, detail pages, and dashboards.
• Security and best practices: recommended annotations, endpoint statelessness, error handling templates, and anti-patterns to avoid common mistakes.

Quick Start

Create a React view at src/main/frontend/views/products/@index.tsx that calls ProductService.findAll() from Frontend/generated/endpoints, stores the results with useSignal, and renders them in a grid.