Workplace apps shouldn't suck (Vaadin makes sure they don't)

Workplace apps shouldn't suck.

But we all have that one app at work...

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 and suggested patterns for how to use them.

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

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 offers a productive way of building apps 100% in 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);
    }

}

🟠 Hilla

Hilla 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 backend with a reactive TypeScript Lit frontend.

@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 = '';
  }
}

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 💥

🖍️ 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 🚫)

public class Person {

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

  // Constructor, getters, setters
}

☕️ 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:

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());
    }
}

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