TypeScript, client-side views and endpoints in Vaadin - Q&A

Edit: This post has been updated to reflect the new Vaadin Flow/Fusion product naming.

We introduced a new TypeScript API for building client-side views in Vaadin 15, called Vaadin Fusion. It is a new framework alongside the existing Vaadin Flow framework. 

In Vaadin 16 and 17, we added support for client-side forms and improved the development experience with live reload. In upcoming releases, we're continue working on helpers for offline views, support for reactive backends, and stateless authentication.

All these new changes are not Java-related, and this has understandably raised questions among our long-time users and community members. Many of you chose to use Vaadin precisely because it allows you to build UIs fully in Java. All this work on Fusion and TypeScript support may seem irrelevant to you, or worse, threatening–what does all of this mean for Flow?

In this post, I want to answer the most common questions we've heard and start a discussion to answer any other questions you may have.

Why did Vaadin add Fusion for building TypeScript client-side views?

Web development has changed a lot during Vaadin's 20-year history. In the early days, building a web app meant working with browser-specific APIs and JavaScript that was inconsistent, tedious, and constantly changing. That remained the case for well over a decade.

Throughout this time, Vaadin's stable Java API helped developers be more productive and allowed companies to build maintainable apps, by offering a layer of abstraction over the quickly-evolving web technologies.

But a lot has changed in the past few years. The web platform has matured into a capable application platform. IDEs, dependency management tools, languages, and libraries have evolved. Today, frontend development offers a compelling development experience that's suitable even for the most business-critical apps.

The higher level of abstraction offered by the Vaadin Flow Java API is still a good choice for many projects, but it is no longer a strict necessity. Many developers prefer working closer to web standards now that they are more mature.

We want to be the best framework for building web apps on the Java platform. By adding support for building client-side views, we are bringing the benefits of using Vaadin to an even wider audience and more use cases:

• Developers who prefer working closer to the browser in HTML, TypeScript, and CSS.
• Developers who prefer a reactive programming model and declarative templating.
• Teams and companies with separate frontend and backend developers.
• Apps with offline functionality.
• Apps that use browser and device APIs extensively.
• Apps that need to support tens of thousands of concurrent users.

What are the main differences between Vaadin Flow and Fusion?

In most cases, you can build an app that looks and behaves the same with either framework. The differences lie in the programming model, application architecture, and languages you use. The table below summarizes the main differences.

Regardless of how you build your views, you have the same set of themeable components and end-to-end type safety.

Does the introduction of Fusion mean I need to learn TypeScript to build Vaadin apps?

No. You can continue to build Java-only apps just like before using Vaadin Flow. Fusion is a separate framework and using it is optional.

Conversely, if you prefer building views in TypeScript, you can build your app entirely using Fusion.

Will the Flow Java API continue to be supported?

Yes. For Java developers, it’s business as usual. We are continuously adding more features and improvements to Vaadin Flow. You can continue to build apps 100% in Java, just like you have always done.

Vaadin's core focus is teams who have Java backends. We added Fusion as an alternative to Flow, so that we can support a more diverse group of developers and teams.

When should you use Flow, and when should you use Fusion?

For most developers, the choice is a matter of personal preference. Here are a few general guidelines to help you choose.

Building Vaadin apps with Fusion client-side views is a good option if you:

• Prefer working with frontend technologies, like TypeScript, HTML, and CSS.
• Enjoy a reactive programming model, with declarative templates.
• Work in a team that has separate frontend and backend developers.
• Are building an app with offline functionality.
• Are building an app that interacts a lot with browser APIs.
• Are building an app that needs to scale to 10,000s of concurrent users.

Building Vaadin apps with Flow server-side views is a good option if:

• You prefer working only in Java and having an abstraction over web technologies.
• You are building an app that interacts a lot with backend services.
• You need the added security of running the UI code on your server.

Can I add Fusion views to an existing Vaadin project?

Yes. Both frameworks are designed to work well together.

You will need to update your application to Vaadin 17 and change it to use client-side bootstrapping. The client router first looks for matching client-side routes, and then server-side routes.

Why does Vaadin build on LitElement and not React or Angular?

Vaadin is based on web components because we believe that web standards give you the most stable and performant platform to build your app on. We use LitElement as a lightweight convenience library for creating web components.

LitElement components have a reactive programming model that is similar to React. Instead of a proprietary template syntax like JSX or Angular templates, it uses TypeScript template literals. Because LitElement has very few library-specific concepts, it's fast to learn.

LitElement is also fast to render. In most cases, faster than React.

Is Vaadin 17 production-ready?

Yes, Vaadin 17 is a stable release and is suitable for use in production.

The only caveat is that Vaadin 17 is not a long-term-support (LTS) version and is only supported for a month after the release of Vaadin 18. You will need to update to 18, 19, and so on to stay on a supported version, until we release the next LTS version. These updates are typically straightforward. Most only require updating the version in your pom.xml file.

The next Vaadin LTS version will include support for TypeScript-based client-side views and will be supported for five years (up to 15 with an Enterprise subscription). Once you are on an LTS version, you can choose to only update to the following LTS releases, which are released every 1-2 years.

What's the easiest way to try out Vaadin Fusion?

The easiest way to get started is to follow the quick start guide in the docs. If you have any questions, head on over to the forum for help.

Other questions

I realize that you probably have many more questions than I was able to answer in this post. Let's continue the discussion in the comments below, I'll attempt to answer your questions promptly.