Workplace apps shouldn't suck (Vaadin makes sure they don't)
Tags: java, webdev, typescript, webcomponents
Published: 2022-07-07 15:11:43

---
title: Workplace apps shouldn't suck (Vaadin makes sure they don't)
published: true
description: Vaadin helps you build better business apps with UI components and frameworks tailored to Java backends.
tags: java, webdev, typescript, webcomponents
//cover_image: https://direct_url_to_image.jpg
---

Workplace apps shouldn't suck. 

But we all have that one app at work... 
![Man smashing computer monitor with a keyboard](https://media.giphy.com/media/S7u66urzxc2J2/giphy.gif)

In this post, I want to give a bit of insight into why we are building Vaadin. 

## Why workplace apps matter

Workplace apps are the apps that run businesses. Without them, many things would grind to a halt. 

But they're also often the worst apps around. It takes forever to onboard people on them. They're slow. Mistakes are common, frustrating users. Good thing they only need to use them 8 hours a day 😅 

## That's why we built Vaadin

22 years ago, a few nerds from Finland were building a healthcare web app. They quickly got frustrated with how much time they were spending on the building blocks – instead of actual user value. That's when they started building Vaadin.

While the technologies and specific problems have changed over the past two decades, building good enterprise apps is still challenging.

## Workplace apps have different needs than consumer apps

Great workplace apps need to have great UX. They need to be accessible, secure, reliable and handle large amounts of data. 

Oh, and they need to be built fast, on a tight budget and maintained for years.

Spending a few $100k on optimizing each view in a consumer app with only five views might be ok. But it's a different game when you're building tens or hundreds of complex views. 

## Build good UX at scale

To help developers build good UX at scale, Vaadin created a design system that includes accessible [components](https://vaadin.com/components) and suggested patterns for how to use them. 

You can customize the design system to match your company's look and feel. 

![A chart, data grid, and date picker compoent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3rkddjlze9o8bzfal32.png)

## Frontend frameworks to match your skills and preferences

Depending on your preferences and team skills, Vaadin supports two ways of building apps out of these components: 

🌊 Vaadin Flow
🟠 Hilla

### 🌊 Vaadin Flow

For teams and organizations that prefer working in Java, [Vaadin Flow](https://vaadin.com/flow) offers a productive way of building apps 100% in Java. 

```java
@PageTitle("Flow")
@Route("flow") // localhost:8080/flow
public class FlowView extends VerticalLayout {
    TextField name = new TextField("Name");
    EmailField email = new EmailField("Email");
    DatePicker birthDate = new DatePicker("Birth date");

    public FlowView() {
        var binder = new BeanValidationBinder<>(Person.class);
        binder.bindInstanceFields(this);
        var saveButton = new Button("Save") {
            {
                addThemeVariants(ButtonVariant.LUMO_PRIMARY);
            }
        };
        add(name, email, birthDate, saveButton);
    }

}
```
<figcaption>A UI written in Java using Vaadin Flow</figcaption>

![Running application with a text field and a button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t98k2vnkujds62qrrbgr.png)
<figcaption>The resulting UI.</figcaption>


### 🟠 Hilla

[Hilla](https://hilla.dev/) is made for developers who prefer working closer to the browser and teams with both frontend and backend skills. It combines a Java [Spring Boot](https://spring.io/projects/spring-boot) backend with a reactive TypeScript [Lit](https://lit.dev) frontend. 

```ts
@customElement('hilla-view')
export class HillaView extends View {
  @state() name = '';
  @state() names: string[] = [];

  render() {
    return html`
      <vaadin-text-field
        label="Name"
        .value=${this.name}
        @change=${this.nameChanged}></vaadin-text-field>
      <vaadin-button @click=${this.addName}>Say hello</vaadin-button>

      ${this.names.map((name) => html`<p>${name}</p>`)}
    `;
  }

  nameChanged(e: TextFieldChangeEvent) {
    this.name = e.target.value;
  }

  addName() {
    this.names = [...this.names, this.name];
    this.name = '';
  }
}
```
<figcaption>The same view in Hilla is written in TypeScript and HTML.</figcaption>
 
![Running application with a text field and a button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t98k2vnkujds62qrrbgr.png)
<figcaption>The resulting UI is the same.</figcaption>


## A frontend stack built for Java backends

Regardless of which framework you use, you get the benefits of a modern web framework explicitly built for Java backends: 

🦺 Database-to-view type safety
🖍️ Shared validations
☕️ Seamless integration with Spring and Java libraries

### 🦺 Full-stack type safety
Full-stack type safety means it's quicker to build apps. You can use the auto-complete to explore APIs instead of always reading docs. 

But where it really pays off is when someone changes the backend six months from now - you'll get a compile error, not a production oopsie 💥 

![IDE autocomplete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjnrs0ud4pm9thdv5p05.png)
<figcaption>Exploring the properties of an object returned from a backend call.</figcaption>

### 🖍️ Shared validation rules between backend and frontend

The ability to share validation rules between your backend and UI forms means less code duplication and fewer frustrating errors for the end-user. (Like filling in everything correctly, but the server says no 🚫)

```java
public class Person {

  @NotBlank
  private String name;
  @NotBlank
  private String email;
  @Past
  private LocalDate birthDate;

  // Constructor, getters, setters
}
```
<figcaption>Define validations using Java Bean Validation annotations.</figcaption>

![Form showing errors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsj9n4rj4z1f5izrza00.png)
<figcaption>The same validations are run on both server and client.</figcaption>

### ☕️ Direct access to your Java backend

Because Vaadin is built for Java, working with your data is easy and seamless. 

Like creating connecting a data grid to a paged Spring Data repository: 

```java
public class PersonListView extends VerticalLayout {

    public PersonListView(PersonRepository repo) {
        var grid = new Grid<>(Person.class);
        grid.setItems(query -> 
            repo.findAll(PageRequest.of(
                    query.getPage(), 
                    query.getPageSize()))
                .stream());
    }
}
```
<figcaption>A Vaadin grid hooked up to a paging Spring Data repository.</figcaption>

## Vaadin helps you build better workplace app UX
 
So, why are we building Vaadin? Because we think workplace apps shouldn't suck, and we want to make sure they don't. 

While we can't fix all the apps in the world ourselves, we can give developers the tools to make building better apps easy (and more fun!)

Learn more about Vaadin and get started on http://vaadin.com
or https://hilla.dev