24.4 Beta Merges Hilla with Vaadin and Adds Copilot

General
1

I am super excited about two major new features coming to Vaadin: integrating the Hilla framework side by side with Flow, and introducing a whole new UI editing experience with Vaadin Copilot.

Our North Star is productivity for Java developers, and I believe both of these features will significantly contribute to that goal.

Vaadin’s superpower has always been making Java developers “full-stack,” helping them expand from server-side development to building full web applications. In recent years, we’ve increasingly been asked how organizations building on Vaadin can use their front-end developers to contribute to their applications. At the same time, many Java developers have gained front-end skills and grown more comfortable with TypeScript. The Vaadin team believes in simplifying development through abstraction. Server-side Java continues to excel at this, and we believe Flow is the most productive way to build modern business applications. That said, the flexibility React provides for crafting web apps from raw HTML elements is powerful when used effectively. To help Vaadin developers leverage this power, we built a Java-React bridge with the Hilla framework, and we’re excited that this model can allow Vaadin developers to build even more. In 24.4, we’ve integrated Hilla directly into Vaadin, allowing you to use pure Java and React models side by side in the same app, based on your preferences. This is all about giving teams more options while taking nothing away.

If you’ve been building with Flow, nothing changes: Vaadin continues to be all-in on pure Java UI development. To signify how small the change can be, we’ve released this integration in 24.4, a minor version instead of a major one. If you’ve been building with Hilla, this integration underlines the Vaadin team’s long-term commitment to Hilla.

Vaadin Copilot is something completely new. We believe in code-first UI development: you write code and see the UI in a browser as soon as you save. This always keeps the developer in control. Copilot extends this model in two ways: (1) it allows you to visually edit the live UI while storing all changes in your code, and (2) it helps you in natural language by letting AI suggest changes to your code, which you can see live on the screen. The mental model for all this is a “Vaadin buddy” sitting next to you, pair-programming with you.

Today, Copilot only works with Hilla, but we are busy adding full Flow support in it as we speak. There is a feature flag for Flow support, but give it a month or so before turning it on. Please note that Copilot is a commercial product. It will be included in all subscriptions with no additional cost, but will also be available separately for $25/month.

Both of these features are still very early (24.4.0.beta1 was built yesterday after record-breaking 25 alpha-releases) and will have bugs. If you’re adventurous, you can try them out today nevertheless :slightly_smiling_face:

I would love to hear your thoughts and questions about these - either here on the forum; or on a community town hall webinar next week (exact time to be announced shortly).

Update: Join in for community town hall with me, Leif, and Marc on Web, May 8 at 9:30am PT / 7:30pm EET on our YouTube stream.

8 Likes
3

:pray: :heart_hands: :rocket: :technologist:

2 Likes
4

I’ve published some guides to help you get started with trying out the main new framework features in Flow and Hilla:

3 Likes
5

Joonas mentioned that this is the first public version of Vaadin Copilot.

Any feedback about how it works and ideas on how to improve it even further is highly appreciated.

There are many ways to provide feedback, but using GitHub issues is also a convenient option:

Thank you for taking the time to try it out and give us your feedback! :man_bowing:

6

As some of you may know I’m not a fan of React. That said is it possible to use Lit for the Hilla frontend in the hybrid app?
IMO this would make sense because if I use a TemplateRenderer in Flow I also use Lit and many devs may already know some Lit because of that.

My use case for hybrid apps is to have parts of the app offline-capable and if I use React I would have a mix of React, LIt and Flow.

7

Nothing should change with regards to Lit. You can create a Flow-Lit hybrid in exactly the same way as in Vaadin 24.3.

But most of the new functionality that we’re adding is targeted at React rather than Lit. It might be a good idea to add a way of using React also for client-side renderers from Flow components so that you wouldn’t have to mix.

8

I see. Still, I don’t like React. It adds so much complexity. Life was so easy with Lit…

4 Likes
9

Will we be able to use our own OpenAI API Key?

11

We don’t support that since we want to keep the possibility of switching to some other LLM implementation in the future if we can get better performance in that way.

Why would you want to use your own API key?

12

+1 to Leif.
Could you share the reasons behind why you want to use your own OpenAI API key?

(The change and security implications behind this feature to add your own keys would not be trivial, we just had a short internal chat about this feature).