DEV Community 👩‍💻👨‍💻

Marcus Hellberg
Marcus Hellberg

Posted on

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...
Man smashing computer monitor with a keyboard

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.

A chart, data grid, and date picker compoent

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

}
Enter fullscreen mode Exit fullscreen mode
A UI written in Java using Vaadin Flow

Running application with a text field and a button

The resulting UI.

🟠 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 = '';
  }
}
Enter fullscreen mode Exit fullscreen mode
The same view in Hilla is written in TypeScript and HTML.

Running application with a text field and a button

The resulting UI is the same.

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

Exploring the properties of an object returned from a backend call.

🖍️ 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
}
Enter fullscreen mode Exit fullscreen mode
Define validations using Java Bean Validation annotations.

Form showing errors

The same validations are run on both server and client.

☕️ 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());
    }
}
Enter fullscreen mode Exit fullscreen mode
A Vaadin grid hooked up to a paging Spring Data repository.

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.