We received a lot of feedback from our community regarding the TypeScript view support we added in Vaadin 15. Many of you were excited about the new capabilities it offers for Vaadin apps. But, there was also some confusion about this change. In particular, many in our community asked: "How does TypeScript support (and client-side views) fit into the bigger Vaadin picture?”
This diagram shows the big picture.
These definitions clarify how the parts fit together:
Vaadin is a platform for building modern, collaborative web apps for Java backends. It integrates UI components, frameworks, and tools into one opinionated web development stack.
Lumo is the default theme for all Vaadin applications and components. It can be customized to fit your visual style requirements. Lumo contains foundational styles – typography, colors, sizing & spacing and icons – that components and applications can use to achieve a consistent visual design.
Collaboration Engine provides the easiest way to build real-time collaboration features in business critical applications. It synchronizes user-state and data across multiple client instances of a web app in real time.
Vaadin Flow is a framework for building web apps 100% in Java. Flow automates everything on the frontend. The strong abstraction layer and server-driven architecture provide security and stability, allowing you to focus on creating user value. Accessing backend data services is simple when the UI logic runs on the server side. This is the signature Vaadin you know and love.
Vaadin Fusion is a framework for building reactive client-side web apps. Reusable web components and simplified, secure, and type-safe access to the Java backend, lets you stay more productive than with minimalistic frontend frameworks. Fusion apps are built on web and industry standards, making them more stable than the alternatives.
While Flow and Fusion offer you two different ways of building the UI, they share the same philosophy: making building UIs easier, by building them from reusable components, automating browser-server communications and embracing a Java backend. Vaadin Flow and Fusion work seamlessly together.
Most parts of the Vaadin platform are shared between Fusion and Flow. This includes the UI components, theme, project build, production mode, etc. You can add views built with either framework to the same app.
What does this mean for me as a developer?
No breaking changes result from the new feature. In fact, nothing at all changes in your application code. The main impact relates to our communication and website organization. While Vaadin 14 ships only with Flow, the upcoming Vaadin 18 will ship with Flow and Fusion.
- If you are a Java developer who relies on Flow, rest assured that you can continue as normal and ignore Fusion completely.
- If you are a frontend developer just discovering Vaadin, Fusion is a great entry point to the platform.
- If you work in a full-stack team and need the best of both worlds, you can use both options interchangeably right out of the box.
We will update our website, feature pages, and documentation to reflect the new names. This will make it easier for you to find the right information while you're learning and developing. For example, the Vaadin documentation will eventually have separate sections for each framework.
Vaadin’s Flow development will have a renewed Java focus and will remain as Java-centric as possible (while minimizing any necessary frontend tinkering). On the other hand, Fusion will emphasize an exceptional frontend development experience.
In summary, all of this means three things:
- There is now a more precise separation between the two development models (frameworks) in our communication.
- It is easier to navigate and find the relevant tooling, resources, and support, based on your preferred development model.
- You have the reassurance that both frameworks are compatible and complement each other and continue to be supported in the Vaadin platform.
I hope this post helps to clarify how the two frameworks are positioned within the Vaadin platform. If you are interested in knowing more about the differences and similarities, head over to the framework comparison page. Leave a comment on this post, if you have questions or feedback.