Twenty-four years ago, we founded Vaadin with the mission to simplify the development of business applications. Thanks to advancements in web and Java platforms, the development experience has improved significantly. However, many challenges persist; creating an outstanding business app for the web remains complex, partly due to rising user experience expectations.
The simplicity of the developer experience remains crucial. The easier an app is to develop, the more focus can be placed on functionality and user experience. This helps drive us toward the ultimate goal: simplicity in user experience. The easier an app is to use, the more users can accomplish with less mental effort. This leads to what truly matters — serving the users of the apps we build, keeping them productive and focused on creating value. The apps we build should fade into the background, staying out of the users' way.
Read Vaadin 24.4 release notes ->
Vaadin’s mission is to simplify development, enabling you to focus on creating apps that delight your users.
Creating something simple is hard. At times, it can be difficult to even identify the most straightforward solution. Building that solution may be even more challenging. However, the most challenging part is often conflicting interests within your organization.
At Vaadin, we strongly believe that simplicity in the user experience is crucial and worth fighting for, whether it involves wrangling with technology or organizations. We are also committed to fighting for simplicity in the developer experience so that you can focus on the rest.
Business applications of the future - built today
Within every business, there is a set of processes that collectively provide value to the customer. We believe a business application acts as a view into one or more of these processes, enabling individuals to observe and engage in them.
When observing some of the most popular modern business applications, common patterns can be identified. Here are the ten features that we believe users will expect from a modern business application developed today:
- Accessible: Every user should be able to use the application regardless of personal limitations.
- Collaborative: All users viewing the business process through a shared view should see the same data and be able to edit it together in real time.
- Linkable: Inviting someone to join a shared view of the business process should be as easy as sharing the current URL.
- Device agnostic: The view should open and function properly whether it is accessed on a laptop, tablet, phone, or AR glasses. Users should be able to seamlessly switch between devices by simply entering the URL.
- Seamlessly secured: Logging in should never be a hassle, and switching devices or sharing a view should be practical. Fortunately, many devices already support biometric authentication to make security seamless.
- Team chat integrated: Teams work asynchronously in Slack, Microsoft Teams, or a similar environment. Business applications should contact users in those environments when their attention is required.
- Personalized: The user interface adapts to user preferences and helps users resume where they left off and engage in their typical activities.
- Lightning fast: Not only should the latency for every interaction be unnoticeable, but advanced users should also have keyboard shortcuts for everything.
- AI-assisted: Whenever there is a repetitive task, an AI assistant should do the grunt work, leaving the user to supervise.
- Beautiful: Users associate the visual design quality with the quality of the product. No modern business application should afford to look less than beautiful.
While few applications today achieve a perfect score of 10 out of 10, as software developers, we should already be working towards a future where this level of quality is not just a competitive advantage but a necessary standard.
Full-stack teams iterate and ship faster with better quality
When viewed from a distance, the architecture of all web applications appears the same: a web browser loads JavaScript, HTML, CSS, and images from a web server to create a user interface for business processes and display data retrieved and stored on a server through HTTP calls. The server utilizes server-side language to execute business logic and security measures, and connects with databases and services to store data or manage underlying processes. Building all of this from the ground up for a project would be highly complex and require a large team of skilled developers proficient in multiple technologies.
Fortunately, numerous libraries, frameworks, components, and tools are available to abstract this process's intricate details. When these technologies work together seamlessly, a small team of developers can manage the full-stack requirements of a web application and concentrate on developing the business application rather than focusing on infrastructure.
The primary advantage of developing all aspects of an application feature end-to-end within one team is full ownership of the delivery. With a team able to take ownership of every aspect of a feature, there is no need to wait for others, reducing communication delays in the development process.
This enables the team to deliver faster and allows for rapid iteration, minimizing the need for extensive upfront planning. By being more agile, iterating quickly, and taking ownership of the outcome, the quality of the product is typically higher.
Example: A full-stack team owning the feature end-to-end avoids wait times,
making them faster than organizations with decoupled backend and frontend teams.
A full-stack team needs a multitude of technologies to be productive in today's environment. The problem is not a lack of options, but rather an abundance. Unfortunately, decision-making is no longer simple. When it comes to business applications, it is important to consider the long-term life cycle. It is crucial to choose a combination of tools that not only work well together currently, but will also continue to do so in the future. Instead of making all decisions and handling maintenance on your own, potentially dealing with thousands of indirect dependencies, full-stack teams should look for a development platform that takes on the responsibility of seamlessly integrating all necessary components.
Seeking the right level of abstraction for web UI development
As a general rule, the more abstraction a framework provides, the more productive you can be. However, there may come a point where the abstraction hinders your progress and slows you down.
Vaadin was likely the first web framework to introduce the concept of building web user interfaces from components in 2001, predating the development of JSF, Wicket, Angular, and React. However, we did not invent the idea of component-oriented user interfaces, which were already common on desktops. We were not the only ones independently introducing this concept to the web, as many others were also working on similar ideas at the time. Nevertheless, the idea has proven to be the right one: today, nearly every web framework is based on components due to the powerful abstraction they provide.
From the early days, we chose an abstraction where web applications can be programmed entirely in Java, running on the server side. This full-stack approach has made it possible to automate tasks such as defining the look and behavior of user interface components, managing communication between the browser and server, and handling security. It is great when the user interface components have the necessary features, but it can also be challenging for the team to create new web components when existing ones are unsuitable.
Starting with Angular.js, a different approach became popular: starting from the browser side and building components almost from scratch. The advantage of starting from raw HTML elements is that it gives the developer more control. However, it can become uncontrollably complex as the application grows.
This approach and the complexity it introduces popularized the idea of separate development teams: one team building server APIs and another team building the frontend UI. This division was driven by the need for a wide range of technologies and skills. We believe that this separation and the relatively low level of abstraction have significantly increased the time required to develop many business applications.
Now, the world is shifting back towards full-stack development. This is evident with the rise of frontend-first full-stack frameworks like Next.js, which enable frontend teams to extend their capabilities to the backend. Additionally, many front-end frameworks now support server-side rendering and are exploring ways to connect the client and server. Hybrid frameworks appear to be the future of development.
As the web platform matured and the popularity of Angular and React continued to rise, we began to investigate how Vaadin could better support full-stack Java teams who are comfortable with frontend UI development. The idea was to automate communication from Java, retain the powerful UI components, and enable teams to write UI in TypeScript. Initially, this concept seemed to go against our foundation of using server-side Java for everything. To explore this idea, we developed the Hilla framework. Initially based on the Web Components standard, it has since evolved to incorporate React, providing developers with a more comprehensive and familiar set of tools.
Vaadin platform unification increases flexibility for Java teams
Our vision for the future of Vaadin is to continue simplifying the developer experience with a full-stack platform for Java web applications. Starting from Vaadin 24.4, you can choose the level of abstraction you prefer: either stay 100% in server-side Java or combine it with frontend React.
This choice remains available to you throughout the application development process and as you add new features. We also strive to maintain consistency across the stack by offering high-quality web components and full-stack integration for all components.
With two frameworks built in Vaadin – Flow for writing UI in pure Java, and Hilla for full-stack React in Java – we have learned that:
- Flow is more productive when the components are what you are looking for. Not needing to think about communication or the web at all remains empowering.
- React is an intuitive and fast way to build UI starting from the frontend, and having access to the world's largest web development ecosystem is helpful.
- A mature, accessible, beautiful, and consistent set of web components is essential for quickly and efficiently building business applications, even with React.
- Hilla can significantly speed up development on the React + Java combination by automatically creating a bridge between them.
- Java remains a solid foundation. Spring has made most of the server-side easy, and the ecosystem remains astonishing.
To ensure that existing Vaadin Flow users' experience remains great, we chose to introduce this in a minor version with no breaking changes. However, it is also a significant advancement, providing unmatched frontend development capabilities for all teams working on the Vaadin platform. If necessary, React can be utilized to assist in building specific parts of the application where it is most beneficial, or you can consider adding frontend developers to your team.
For teams already working with Hilla, this is a bit larger change: it includes convenient file system-based routing but also introduces package name changes. However, the most important aspect is that by integrating Hilla into the core of Vaadin, we have made a long-term commitment to it. This includes incorporating Hilla into all of our offerings and providing long-term maintenance and support for it.
Invite a robot to join your team to assist in developing the user interface
To further simplify development, we are proud to introduce Vaadin Copilot, your AI sidekick for developing user interfaces. Our vision is to create a pair programming partner that can assist you with all UI-related tasks while ensuring that you maintain control of your code. While GitHub Copilot helps by autocompleting a few lines of code, Vaadin Copilot assists you in creating the UI – you may want to use both.
When Apple introduced Swift UI a few years ago, we gasped. The most highly respected UI company pivoted from UI designers to code-first UI development. The idea of simply writing code and instantly seeing your UI update based on that code is incredibly powerful. Additionally, eliminating UI models reduces complexity and gives developers more control. Apple even included small UI helpers in Xcode to auto-complete colors and layout parameters, making coding a bit easier.
Inspired by this, we followed their lead and transitioned from Vaadin Designer to code-first UI development. With Vaadin Copilot, we are now taking this to the next level. Not only can you see the UI you coded in real-time, but you can also edit the UI in a running application by drag-and-drop and modifying various properties. What sets this apart from Vaadin Designer (and most other UI designers) is that editing the live UI updates your code in real-time. Your code always stays the master. For example, if you add a button, a line of code instantiating a button is added. If you change colors, your CSS is edited accordingly.
However, it is not just about editing the UI; you can communicate with Copilot in natural language. You can ask it to change the layout, and it will edit your code accordingly. You can even ask it to design you a tax form, and it may be able to do so. Behind the scenes, we are utilizing the recently released GPT-4o model by Open AI. While it is quite smart, it often makes mistakes. This is why having the built-in undo functionality that integrates with IntelliJ and VS Code is beneficial. We believe that AI will rapidly become more intelligent. Vaadin Copilot will also become more intelligent as we build on the best foundation models, hoping to make it an increasingly valuable assistant for you. See documentation.
Take Vaadin 24.4 for a spin
Trying the new features is easy: create a new app at start.vaadin.com and try it out yourself!
Please share your experience and help the Vaadin team iterate the platform in the direction that serves you best.