Java for front-end development in 2019

Over more than 18 years, Vaadin framework has evolved from a small library, a toolkit, to one of the most popular Java frameworks for front-end development.

One of the notable changes in the history of the Vaadin framework was in 2009 when we started to use the GWT library to build the UI components. Back then, it was a revolutionary tool to convert your Java code into JS. It showed a big success and adoption by the Java community who loves the fact that you can develop your whole front-end with 100% Java.

The time had come and we decided to move away from GWT in 2018, with the announcement of Vaadin version 10 and the usage of standard web components. Those web components are natively built using HTML and JS, and we provide a set of Java APIs to be able to manage them from the server side.

Your choice of frontend framework depends mainly on your business needs, and with Vaadin framework 14+, we show that we still have the leading frontend framework for Java developers, where you can develop your web app 100% in Java. Here are some of the capabilities:

1. Standard Web Components

There is no longer a need to wait for a bleeding edge web technology to be available in the framework. Vaadin framework acts as a thin layer that assembles the front-end pieces together and provides a Java API for them. Those front-end pieces can be any standard web components developed by Vaadin or the community. Check out this tutorial on how to integrate any web component with the framework.

@Tag("payment-item")
@JsModule("@payment-item/payment-item.js")
public class PaymentItem extends Component {
  public PaymentItem() {
  }
}

2. Extending Components

There is no limit to what you can do on the front-end. Whether it's one of the built-in components or an integrated web component, the Vaadin framework provides you with Java APIs to customize the components the way you want.

public class MyComponent extends Composite<Div> {
  // --
}

3. Progressive Web Apps

Vaadin Framework helps you create web apps that are PWA ready, with just an annotation `@PWA`. A PWA is a web app that can be installed right away from the browser to your desktop or mobile phone, and it can also give you hardware access and works offline.

@Route("")
@PWA(name = "Beverage Buddy", shortName = "BevBuddy")
public class MainLayout {
  // --
}

4. Routing and Navigation

Vaadin Framework has a powerful router to manage URIs, navigation, browser history, parameters, error pages, and much more.

@Route(value = "login", layout = MainLayout.class)
public class LoginView extends LoginForm {
  // --
}

There is also a server-side navigation API when needed.

NativeButton button = new NativeButton("Navigate to company");
button.addClickListener( e-> {
  button.getUI().ifPresent(ui -> ui.navigate("company"));
});

5. Everything is an Object in Java; and Vaadin

The coding style of the Vaadin framework is Swing-like, you start by defining some components, and then stack them inside a bigger component or a layout. The framework is event-driven, which means that listening to an event is all you need to perform a round-trip Ajax request to the client side and back. All in just Java:

Button save = new Button("Save", this::save);
Button cancel = new Button("Cancel", this::cancel);
add(new HorizontalLayout(save, cancel));

6. Browser Info

You can read some browser information, and listen to a browser resize event, without worrying much about the client side. This can be useful for cases like changing a layout in a responsive UI.

page.addBrowserWindowResizeListener(
    event -> Notification.show("Window width=" + event.getWidth()
        + ", height=" + event.getHeight()));

7. Data binding

We built the Vaadin framework to be as generic as possible, to work with theoretically any back-end and any server, and we also make it easy to connect the front-end with your back-end through `Binder`. Ensuring a smooth integration between the back-end and front-end, and without leaving the Java ecosystem or worrying about type conversion and communication channels. Here is an example with Spring:

@Route("editor")
public class Editor extends Div {
  private TextField fullName = new TextField;
  public Editor(@Autowired SessionService bean){
    binder.setBean(bean);
    binder.forField(fullName).bind(
    Person::getFullName, Person::setFullName);
  }
}

8. Data Validation

The most secure validation happens on the server-side. That's what the Vaadin framework does, along with an optional JS-based client-side validation.

binder.forField(emailField)
  .withValidator(new EmailValidator(
  "This doesn't look like a valid email address"))
  .bind(Person::getEmail, Person::setEmail);

9. Theming

You can manage component theming from Java. For example, assigning a specific Theme variant to a View:

@Theme(value = Lumo.class, variant = "large")
public class LargeThemedView extends Div {
  //--
}

Assign a CSS classname to a component:

button.setClassName("btn-dialog");

And assign a Theme variant from the built-in Lumo theme engine:

button.addThemeVariants(ButtonVariant.LUMO_PRIMARY,
          ButtonVariant.LUMO_CONTRAST);

10. JavaScript

Let's face it, Javascript is the standard browser language. That's why things like VBScript and Applets did not survive long. Angular developers who are writing TypeScript code have to transpile it into JS. No matter what language you prefer to use, it has to communicate with the browser over JS and HTML at the end of the day. However, with the huge evolution of the web and web app requirements, building a web app with only vanilla JS and HTML is a big challenge and time-consuming.

JavaScript is similar to the assembly language, but for browsers. The frameworks are a high-level tool to build web apps. In a few occasions, we still need to write assembly. And in some other cases, we can fulfill most of our web development needs without Javascript at all. Nevertheless, the Vaadin framework provides you with a Java API to execute a JS code on the client side, and read the returned Promise if needed:

getElement().executeJs("return 'adoptedStyleSheets' in document")
  .then(Boolean.class, supported -> {
    if (supported) {
      System.out.println("Feature is supported");
    } else {
      System.out.println("Feature is not supported");
    }
});

Or you can go all the way and customize your component using templates that can be managed using Java APIs:

@Tag("hello-world")
@JsModule("src/HelloWorld.js")
public class HelloWorld extends PolymerTemplate<HelloWorldModel> {
  // --
}

11. And one more thing

Here are some tutorials on how to host your Vaadin application on some popular cloud providers. They should help you during the evaluation phase but using containers is always a good alternative solution that is usually cloud agnostic, if the cloud provider can host containers.