DEV Community: Marcus Hellberg

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

Marcus Hellberg — Thu, 07 Jul 2022 15:11:43 +0000

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

}

A UI written in Java using Vaadin Flow

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

The same view in Hilla is written in TypeScript and HTML.

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 💥

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
}

Define validations using Java Bean Validation annotations.

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

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

How we built Spring PetClinic 100% in Java

Marcus Hellberg — Fri, 17 Dec 2021 17:28:34 +0000

If you've been part of the Spring community for a while, you may have run into the PetClinic sample application. PetClinic aims to give you a realistic example application showcasing everyday development tasks with Spring technologies.

The original Spring and Thymeleaf implementation of PetClinic.

In addition to being the official Spring demo app, there is a thriving community of alternate implementations on GitHub. Having the same example implemented with different frontend and backend technologies can be helpful for learning about new technologies and understanding how they differ from each other.

In the past month, we spent some time implementing both Vaadin Flow and Fusion versions of PetClinic. I'll walk through some highlights in the Flow version in this post.

Vaadin Flow version of PetClinic

Building a web app frontend without HTML

As you look through the code of the Vaadin Flow PetClinic application, one thing will hit you: there are no HTML templates. This is because the views are implemented in Java.

As a concrete example, compare how pet owners are listed with Thymeleaf templates with how they are listed in Flow.



<table id="owners" class="table table-striped">
  <thead>
  <tr>
    <th style="width: 150px;">Name</th>
    <th style="width: 200px;">Address</th>
    <th>City</th>
    <th style="width: 120px">Telephone</th>
    <th>Pets</th>
  </tr>
  </thead>
  <tbody>
  <tr th:each="owner : ${listOwners}">
    <td>
      <a th:href="@{/owners/__${owner.id}__}" th:text="${owner.firstName + ' ' + owner.lastName}"/></a>
    </td>
    <td th:text="${owner.address}"/>
    <td th:text="${owner.city}"/>
    <td th:text="${owner.telephone}"/>
    <td><span th:text="${#strings.listJoin(owner.pets, ', ')}"/></td>
  </tr>
  </tbody>
</table>
<div th:if="${totalPages > 1}">
  <span>Pages:</span>
  <span>[</span>
  <span th:each="i: ${#numbers.sequence(1, totalPages)}">
      <a th:if="${currentPage != i}" th:href="@{'/owners/?page=' + ${i}}">[[${i}]]</a>
      <span th:unless="${currentPage != i}">[[${i}]]</span>
    </span>
  <span>]&nbsp;</span>
  <span>
      <a th:if="${currentPage > 1}" th:href="@{'/owners/?page=1'}" title="First"
         class="fa fa-fast-backward"></a>
      <span th:unless="${currentPage > 1}" title="First" class="fa fa-fast-backward"></span>
    </span>
  <span>
      <a th:if="${currentPage > 1}" th:href="@{'/owners/?page=' + ${currentPage - 1}}" title="Previous"
         class="fa fa-step-backward"></a>
      <span th:unless="${currentPage > 1}" title="Previous" class="fa fa-step-backward"></span>
    </span>
  <span>
      <a th:if="${currentPage < totalPages}" th:href="@{'/owners/?page=' + ${currentPage + 1}}" title="Next"
         class="fa fa-step-forward"></a>
      <span th:unless="${currentPage < totalPages}" title="Next" class="fa fa-step-forward"></span>
    </span>
  <span>
      <a th:if="${currentPage < totalPages}" th:href="@{'/owners/?page=' + ${totalPages}}" title="Last"
         class="fa fa-fast-forward"></a>
      <span th:unless="${currentPage < totalPages}" title="Last" class="fa fa-step-forward"></span>
    </span>
</div>

Listing owners in a paged table with Thymeleaf

In Vaadin Flow, you define and configure the data grid in Java. The Grid component is automatically paged.



ownersGrid = new Grid<>();
ownersGrid.addColumn(new ComponentRenderer<>(owner -> 
    new RouterLink(
                owner.getFirstName() + " " + owner.getLastName(), // Link caption
                OwnerDetailsView.class, // Destination page
                new RouteParameters("ownerId", // Parameters
                        owner.getId().toString()))))
        .setHeader(getTranslation("name"));
ownersGrid.addColumn(Owner::getAddress).setHeader(getTranslation("address"));
ownersGrid.addColumn(Owner::getCity).setHeader(getTranslation("city"));
ownersGrid.addColumn(Owner::getTelephone).setHeader(getTranslation(("telephone")));
ownersGrid.addColumn(owner -> owner.getPets().stream().map(Pet::toString)
        .collect(Collectors.joining(", ")))
        .setHeader(getTranslation("pets"));

The resulting Vaadin app is a single-page web application that runs in all modern browsers and does not require any plugins.

Run Vaadin Flow PetClinic locally

Try out the Vaadin Fusion on your own computer with the following commands (make sure you have Java 8+ and Maven installed):



git clone https://github.com/spring-petclinic/spring-petclinic-vaadin-flow
cd spring-petclinic-vaadin-flow
mvn spring-boot:run

You can now access the app on localhost:8080. The frontend code is in the org.springframework.samples.petclinic.ui package.

Exploring React's new web component support

Marcus Hellberg — Mon, 13 Dec 2021 18:57:06 +0000

Last week, React landed a long-awaited feature in the @experimental branch: support for custom element attributes and properties. Let's take a look at what that means and why I'm excited about it.

Why web components?

Web components are a collection of web standards that let developers build UI components that work in any framework by defining their own custom HTML elements.

If you only use React, this means you get access to new quality components, like Vaadin components, without having to use any workarounds.

If you're in an organization that uses different frameworks across projects, the support for web components means you can more easily use the same set of components in all projects instead of having to reinvent the wheel (or date picker) in each project. They're a great foundation for design systems.

How does it work?

Start by installing the @experimental version of react and react-dom

npm i react@experimental react-dom@experimental

Then, install a web component that you want to use:

npm i @vaadin/vaadin-date-picker

Import the web component using a normal import statement:

import "@vaadin/vaadin-date-picker";

You can then use it in your JSX, binding events and properties like with any other component. Note how the component name uses dashes instead of camel case.

return (
  <vaadin-date-picker
    label="When were you born?"
    i18n={localizedStrings}
    onChange={handleChange}
  />
);

Here's a running example you can try out:

What doesn't work (yet)?

There are still some outstanding issues with custom HTML element support. For instance, onChange event handlers do not work properly (issue).

Using web components with TypeScript is also still challenging as the type definitions haven't been updated yet.

When is it getting released?

Official web component support in React may be released as soon as React 18 if the team gets enough feedback to be confident in releasing it. Otherwise, the release may be pushed back to 19.

If you're interested in seeing web component support in React 18, please try it out and report any issues to the React team on GitHub https://github.com/facebook/react/issues.

Full-stack demo app

Here's a full-stack Spring Boot + React app here if you want to give it a try: https://github.com/marcushellberg/fusion-reactor

How to configure VS Code Java formatting

Marcus Hellberg — Wed, 30 Jun 2021 22:12:56 +0000

I've been using VS Code for Java for the past year or so. For the most part, I've been super happy. But one thing has been driving me crazy.

The problem

I write a nicely formatted chain of methods, like:

public Weather getWeather(Double lat, Double lon) {
  return webClient.get()
      .uri(uri -> uri.path("/")
          .queryParam("lat", lat.toString())
          .queryParam("lon", lon.toString())
          .queryParam("units", "metric")
          .queryParam("apiKey", apiKey)
          .build())
      .retrieve()
      .toEntity(Weather.class)
      .block()
      .getBody();
}

But when I save the file, the formatter "helps" me out by smashing all of it on as few lines as possible:

public Weather getWeather(Double lat, Double lon) {
  return webClient.get()
      .uri(uri -> uri.path("/").queryParam("lat", lat.toString()).queryParam("lon", lon.toString())
          .queryParam("units", "metric").queryParam("apiKey", apiKey).build())
      .retrieve().toEntity(Weather.class).block().getBody();
}

The solution

The solution ended up being simple, just not that well documented. VS Code Java uses a headless Eclipse not only for Intellisense and other code actions, but also for code formatting.

A helpful Gist pointed to a way of using an Eclipse settings file to configure the formatter per project. But I wanted a solution that would work across projects. Finally, I found a super helpful Stack Overflow answer that outlined how to do just that.

1. Get a formatter config XML file

You can either use a formatter like the Google Java Style Guide (which I did) or export your Eclipse profile through Preferences > Java > Code Style > Formatter.

Save the file somewhere convenient where it won't get deleted. I chose ~/.vscode/eclipse-java-google-style.xml.

2. Change the join wrapped lines property to false

In the settings XML file, find the org.eclipse.jdt.core.formatter.join_wrapped_lines property, and set its value to false. Add the property if you don't have it.

<setting id="org.eclipse.jdt.core.formatter.join_wrapped_lines" value="false"/>

3. Tell VS Code to use the format config

Open the VS Code settings (settings.json) and add the following line (remember to update the path):

"java.format.settings.url": "~/.vscode/eclipse-java-google-style.xml",

4. Profit

Restart VS Code. Change a Java file and the formatter should now produce a much nicer output.

How to send web push notifications in Java

Marcus Hellberg — Thu, 27 May 2021 23:42:24 +0000

Web push notifications are a way of informing your app users when something important has happened.

Users can receive web push notifications even when they are not actively using your application, for instance, if the app is open in a background tab or even if it's not open.

Push notifications are widely supported by all browsers except for Safari: 78% of web users use a browser that supports them.

In this tutorial, I'll show you how to subscribe to notifications in the browser and how to send notifications from a Java server.

Video version

A bit of background: how web push notifications work

Web push notifications rely on two web standards: Notification API and Push API (which in turn uses ServiceWorker). They require HTTPS to work.

Subscribing to push notifications

The server shares its public key with the browser
The browser uses the public key to subscribe to a push service (each browser have their own)
The push service returns a subscription with a unique endpoint URL that can be used to send push messages
The subscription is saved to the server

Image courtesy of Google Web Fundamentals

Sending push notifications

The server signs an authorization header with its private key
The server sends the message to the unique endpoint URL
The push server decrypts the auth header
The push server sends the message to the device/browser

Image courtesy of Google Web Fundamentals

Setup project and generate VAPID keys

I'm using Hilla for this example. Hilla uses Spring Boot on the backend and Lit on the frontend.

I will only cover the key steps here. You can find the complete source code on GitHub.

You can create a new Fusion project with the Vaadin CLI:

npx @vaadin/cli init --hilla push-app

Create a set of VAPID keys with the web-push npm package.

npx web-push generate-vapid-keys

Create a new file .env in the project directory and use it to store the keys. Add it to your .gitignore so you don't accidentally publish it.

export VAPID_PUBLIC_KEY=BAwZxXp0K....
export VAPID_PRIVATE_KEY=1HLNMKEE....

Add the Java WebPush and BouncyCastle library dependency to pom.xml:

<dependency>
    <groupId>nl.martijndwars</groupId>
    <artifactId>web-push</artifactId>
    <version>5.1.1</version>
</dependency>
<dependency>
    <groupId>org.bouncycastle</groupId>
    <artifactId>bcprov-jdk15on</artifactId>
    <version>1.70</version>
</dependency>

Load the environment file and start the app:

source .env
mvn

Create a Java service for handling subscriptions and sending notifications

Create a new Spring Boot service, MessageService.java. This service will read in the keys and

package com.example.application;

import java.io.IOException;
import java.security.GeneralSecurityException;
import java.security.Security;
import java.time.LocalTime;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.ExecutionException;
import java.util.stream.Collectors;
import javax.annotation.PostConstruct;
import org.bouncycastle.jce.provider.BouncyCastleProvider;
import org.jose4j.lang.JoseException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Service;
import nl.martijndwars.webpush.Notification;
import nl.martijndwars.webpush.PushService;
import nl.martijndwars.webpush.Subscription;

@Service
public class MessageService {

  @Value("${vapid.public.key}")
  private String publicKey;
  @Value("${vapid.private.key}")
  private String privateKey;

  private PushService pushService;
  private List<Subscription> subscriptions = new ArrayList<>();

  @PostConstruct
  private void init() throws GeneralSecurityException {
    Security.addProvider(new BouncyCastleProvider());
    pushService = new PushService(publicKey, privateKey);
  }

  public String getPublicKey() {
    return publicKey;
  }

  public void subscribe(Subscription subscription) {
    System.out.println("Subscribed to " + subscription.endpoint);
    this.subscriptions.add(subscription);
  }

  public void unsubscribe(String endpoint) {
    System.out.println("Unsubscribed from " + endpoint);
    subscriptions = subscriptions.stream().filter(s -> !endpoint.equals(s.endpoint))
        .collect(Collectors.toList());
  }

  public void sendNotification(Subscription subscription, String messageJson) {
    try {
      pushService.send(new Notification(subscription, messageJson));
    } catch (GeneralSecurityException | IOException | JoseException | ExecutionException
        | InterruptedException e) {
      e.printStackTrace();
    }
  }

  @Scheduled(fixedRate = 15000)
  private void sendNotifications() {
    System.out.println("Sending notifications to all subscribers");

    var json = """
        {
          "title": "Server says hello!",
          "body": "It is now: %s"
        }
        """;

    subscriptions.forEach(subscription -> {
      sendNotification(subscription, String.format(json, LocalTime.now()));
    });
  }
}

Some key things to note:

The @Value("${vapid.public.key}") annotation reads the environment variables into the fields.
The service stores the subscriptions in a List. In a more practical application, you would keep them in a database along with the user.
You send push notifications with pushService.send(new Notification(subscription, messageJson)). The payload can also be plain text, but JSON is more flexible.
The service sends out a notification to all subscribers every 15 seconds, containing the current time.

Create an Endpoint for accessing the server

Next, you need a way to access the server from the browser. In Vaadin Fusion, you do this by defining an Endpoint. The endpoint will generate TypeScript types and TS accessor methods you can use in the client code.

package com.example.application;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import dev.hilla.Endpoint;
import dev.hilla.Nonnull;
import nl.martijndwars.webpush.Subscription;

@Endpoint
@AnonymousAllowed
public class MessageEndpoint {

  private MessageService messageService;

  public MessageEndpoint(MessageService messageService) {
    this.messageService = messageService;
  }

  public @Nonnull String getPublicKey() {
    return messageService.getPublicKey();
  }

  public void subscribe(Subscription subscription) {
    messageService.subscribe(subscription);
  }

  public void unsubscribe(String endpoint) {
    messageService.unsubscribe(endpoint);
  }
}

Some things to note:

Endpoints are secured by default. You can allow anonymous access with @AnonymousAllowed.
The endpoint injects the message service and delegates subscribing and unsubscribing to it.

Subscribe to notifications in the browser

Create a view for subscribing to notifications. The LitElement component keeps track of two pieces of state:

whether the user has allowed notifications
whether the user has an existing push subscription

import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@vaadin/button';
import { View } from '../view';
import { MessageEndpoint } from 'Frontend/generated/endpoints';

@customElement('notifications-view')
export class NotificationsView extends View {
  @state() denied = Notification.permission === 'denied';
  @state() subscribed = false;

  render() {
    return html`
      <h1>Web Push Notifications 📣</h1>

      ${this.denied
        ? html` <b> You have blocked notifications. You need to manually enable them in your browser. </b> `
        : ''}
      ${this.subscribed
        ? html`
            <p>Hooray! You are subscribed to receive notifications 🙌</p>
            <vaadin-button theme="error" @click=${this.unsubscribe}>Unsubscribe</vaadin-button>
          `
        : html`
            <p>You are not yet subscribed to receive notifications.</p>

            <vaadin-button theme="primary" @click=${this.subscribe}>Subscribe</vaadin-button>
          `}
    `;
  }

  async firstUpdated() {
    const registration = await navigator.serviceWorker.getRegistration();
    this.subscribed = !!(await registration?.pushManager.getSubscription());
  }

  async subscribe() {
    const notificationPermission = await Notification.requestPermission();

    if (notificationPermission === 'granted') {
      const publicKey = await MessageEndpoint.getPublicKey();
      const registration = await navigator.serviceWorker.getRegistration();
      const subscription = await registration?.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: this.urlB64ToUint8Array(publicKey),
      });

      if (subscription) {
        this.subscribed = true;
        // Serialize keys uint8array -> base64
        MessageEndpoint.subscribe(JSON.parse(JSON.stringify(subscription)));
      }
    } else {
      this.denied = true;
    }
  }

  async unsubscribe() {
    const registration = await navigator.serviceWorker.getRegistration();
    const subscription = await registration?.pushManager.getSubscription();
    if (subscription) {
      await subscription.unsubscribe();
      await MessageEndpoint.unsubscribe(subscription.endpoint);
      this.subscribed = false;
    }
  }

  private urlB64ToUint8Array(base64String: string) {
    const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
    const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
      outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
  }
}

The important part here is the subscribe()-method. Here is what it does:

Asks the user for permission to show notifications with Notification.requestPermission(). The answer will be "granted" or "denied". NOTE: If the user declines, you cannot ask them again. Be sure to only prompt the user when they expect and want notifications.
If the user grants permission, fetch the public key from the server and use the ServiceWorker PushManager to subscribe to notifications. The applicationServerKey is a Uint8Array containing the public key. You need to convert it with the included method. (Not the most convenient API 🤷‍♂️)
If the subscription succeeds, send it to the server.

Handle incoming push messages in the ServiceWorker

Once you are subscribed to notifications, the server will send out a notification every 15 seconds.

Override the Vaadin generated ServiceWorker by copying target/sw.ts -> frontend/sw.ts.

Add the following two listeners to sw.ts:

self.addEventListener('push', (e) => {
  const data = e.data?.json();
  if (data) {
    self.registration.showNotification(data.title, {
      body: data.body,
    });
  }
});

self.addEventListener('notificationclick', (e) => {
  e.notification.close();
  e.waitUntil(focusOrOpenWindow());
});

async function focusOrOpenWindow() {
  const url = new URL('/', self.location.origin).href;

  const allWindows = await self.clients.matchAll({
    type: 'window',
  });
  const appWindow = allWindows.find((w) => w.url === url);

  if (appWindow) {
    return appWindow.focus();
  } else {
    return self.clients.openWindow(url);
  }
}

The fetch listener gets called when a new message comes in. Read the event data property as JSON to access the message payload.
- Use self.registration.showNotification() to show a notification using the message data.
The notificationclick listener gets called when you click on the notification.
- Close the notification.
- See if the user has an open tab application tab. If they do, focus it. If they don't, open a new window.

Source code

You can find the complete source code on my GitHub: https://github.com/marcushellberg/hilla-push-notifications.

New Vaadin, Angular and React comparison tool

Marcus Hellberg — Thu, 09 Jul 2020 16:44:05 +0000

One of the most natural ways of learning for us humans (sorry, Google bot) is to compare new concepts we come across with something we already know from before.

"What's a dosa?"-- It's like a savory Indian crepe made with fermented rice and lentil dough and filled with deliciousness.

"How is the new Mac different from the current one?" -- It's going to feature a new ARM-based processor architecture, but it will still run the same software.

"Is Finnish similar to Swedish?" -- Hahahahaha. No.

By using something you already know as a reference, you pick up new knowledge and skills faster. You reuse your existing mental frameworks to give context and meaning to new information, perhaps even deepening the understanding of things you already know.

A new web framework comparison tool for fast learning

The most common question I get when introducing Vaadin to new developers is, "How does Vaadin compare to <the framework they are using>?"

It makes sense. The fastest way to make sense of Vaadin is to relate it to the framework they're already familiar with: what's similar and what’s different?

With that in mind, I created a new web framework comparison tool that lets you compare the code for accomplishing everyday programming tasks in three popular web frameworks: Vaadin, Angular and React.

Comparing the component models of Vaadin and Angular.

You start by selecting a pair of frameworks: for instance, Vaadin and Angular. The tool then shows you side-by-side code examples to achieve the same thing in both frameworks. It includes:

Component model
Templating
Forms
Routing
State and rendering
Styling
Backend communication

The tool covers both Vaadin's Java component API and the new TypeScript-based web component API. You can even use it to compare the two if you're interested to see how they differ.

Same app, four implementations

In addition to relating basic concepts, the comparison also walks you through an example full-stack application built with each framework and a Spring Boot Java backend.

The Vaadin TypeScript app running on GitPod in a browser.

You can try out the projects right in your browser using GitPod, or clone the GitHub repo and run them on your computer.

👉 Go to the web framework comparison

(Originally published on the Vaadin blog)

Setting up TypeScript support in Vaadin

Marcus Hellberg — Thu, 22 Aug 2019 18:06:11 +0000

Update. Vaadin 14.5 and later come with built-in TypeScript support. The following steps are only required for 14.4 and earlier.

A while back, I created a small demo project to show that as of Vaadin 14, you can now easily configure your project to support TypeScript in frontend templates.

Giovanni, an active community member, pointed out to me that I didn't really explain the steps needed to get TypeScript working. Instead of burying the steps in a GitHub ticket, I thought I'd write up a quick blog post outlining the steps. Hopefully, this will help others later on.

This guide is tested with Vaadin 14.

In addition to Java, you will need to have Node installed.

Get your Vaadin project ready

If you don't have a Vaadin 14+ project, download a starter at vaadin.com/start.

If you have a Vaadin project running an earlier version of Vaadin, read the migration guide and upgrade the project before continuing.

Run mvn package once to make sure that Vaadin fetches all needed dependencies

Install TypeScript and its Webpack loader

In the project folder, run

npm install --save-dev typescript ts-loader

Configure Webpack to handle TypeScript

Open webpack.config.js and edit the module.export declaration to the following:

module.exports = merge(flowDefaults, {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json']
  },
  devtool: 'inline-source-map',
  module: {
    rules: [{
      // Include ts, tsx, js, and jsx files.
      test: /\.tsx?$/,
      exclude: /node_modules/,
      loader: 'ts-loader',
    }],
  }
});

Here, we configure Webpack to run all typescript and JavaScript files through the TypeScript compiler. The reason we're also passing JavaScript files to the TypeScript compiler is that it can transpile newer JavaScript syntax to support older browsers if needed.

Configure the TypeScript compiler

In the project root, add a new file tsconfig.json with the following content

{
  "compilerOptions": {
    "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,
    "module": "es2015" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */,
    "declaration": true /* Generates corresponding '.d.ts' file. */,
    "sourceMap": true /* Generates corresponding '.map' file. */,
    "strict": true /* Enable all strict type-checking options. */,
    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
    "experimentalDecorators": true /* Enables experimental support for ES7 decorators. */
  }
}

See the file in the demo for more options you can configure.

Load a TypeScript file from Java

With the configuration taken care of, you can now place TypeScript (.ts) files in the /frontend folder and load them using @JsModule from Java.

/src/main/java/.../LitTemplate.java

@Tag("lit-template")
@JsModule("./src/lit-template.ts")
public class LitTemplate extends Component {
//...
}

That's it.

You can check out the complete demo source here: https://github.com/marcushellberg/vaadin-lit-typescript/

If you have any questions, post them below or reach out to me on Twitter @marcushellberg