Errai 4.0

A brief overview

By Max Barkley, errai project lead

What is errai?

a web framework built with gwt

  • Dependency Injection
  • Client-Side Templating
  • Two-Way Data-Binding
  • Client-Side JAX-RS Support
  • CDI Events over HTTP

Why Errai?

Why not some other GWT framework?

  • Annotation-Driven features express intent without boilerplate
  • Uses CDI APIs (dependency injection and CDI events) -- same programming model in client- and server-side code

Why not JavaScript?

  • Leverages the Java type system whenever possible
  • Much more reliable development experience for large, distributed development teams

errai basics

Uses CDI API for Dependency Injection

@ApplicationScoped
public class SingletonService {
    // ...
}
public class FooProducer {
    @Produces static Foo newFoo() {
        // ...
    }
}
public class ServiceConsumer {
    @Inject SingletonService service;
    // ...
}
public class FooConsumer {
    @Inject
    public FooConsumer(Foo foo) {
        // ...
    }
}
  • Declarations of beans and injection points are the same as on the server!

errai basics

Client-side Templating

  • Create UI components declaratively
  • A component has two parts:
    • Template (HTML, CSS/LESS)
    • @Templated bean (a Java class)

errai basics

Client-side Templating

  • The HTML file can be taken directly from the design team
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- Any fragment in the body can be used -->
    <form class="form">
        <input class="username" type="text">
        <input class="password" type="password">
    </form>
</body>
</html>

errai basics

Client-side Templating

  • Fields in @Templated classes map directly to template elements
// The "userForm" fragment in "UserForm.html" is the component root
@Templated("#userForm")
public class UserForm {

    // Maps to fragment "username"
    @Inject @DataField TextBox username;

    // Maps to fragment "password"
    @Inject @DataField("password") PasswordTextBox pass;
}
<form id="userForm">
    <input data-field="username" type="text">
    <input class="password" type="password">
</form>

errai basics

Declarative Data-Binding

  • Data-binding synchronizes state between a data-model and UI elements 
  • Data-binding in Errai is two-way
    • model changes propogate to the UI
    • UI changes propogate to the model

errai basics

Declarative Data-Binding

  • Use @Model to declare your data-model
  • Use @Bound to sync a UI-field with the data-model
@Templated
public class NewUserForm {
    @Inject @Model User user;

    @Inject @Bound @DataField TextBox name;
    @Inject @Bound("address.street") @DataField TextBox street;
    @Inject @Bound("address.number") @DataField IntegerBox number;
}

errai Native JS Support

Use Cases

  1. Works with native HTML and Web Component
  2. Integrates easily with third-party JS libraries

errai js interop support

Use Case 1: DOM Elements

  • Can use Errai's features with HTML elements
@Templated
public class Example {
    @Inject @Model User user;

    @Inject @Named("h1")
    @Bound @DataField Heading name;

    @Inject
    @Bound("address.street") @DataField TextInput street;
}
  • Makes it easier to use designer templates, since HTML markup in app is the same

errai js interop support

Use Case 1: Web Components

  • Errai makes it easy to integrate with web components
  • This is a wrapper for the Polymer paper-input element
@Element("paper-input")
@JsType(isNative = true)
public interface PaperInput extends HTMLElement, HasValue<String> {
  @Override @JsProperty String getValue();
  @Override @JsProperty void setValue(String value);
}
String old = input.getValue();
input.setValue("foo");
var old = input.value;
input.value = "foo";

Java

JavaScript

  • Declaration of the JS API is fully declarative!

errai js interop support

Use Case 2: Third-party libraries

  • Errai's dependency injection makes it easy to define injectors for third-party JavaScript objects

errai js interop support

Use Case 2: Third-party libraries

  • Example: JQuery
    • JQuery has a globally scoped "$" function
    • $ wraps and enhances HTML elements
$(element).children().first().remove();

errai js interop support

Use Case 2: Third-party libraries

  • Injecting the JQuery function into a constructor makes testing in Java SE easy
@Templated
public class Form {
    @Inject
    public Form(JQuery $) {
        // ...
    }
}
@Test
public void formWithJQuery() {
    Form form = new Form(new JQueryMock());
    // ...
}
  • Java SE tests run much faster -- this quickens the development cycle

take away

errai basics

  • Dependency Injection
@Inject
@Templated
@DataField
  • Templating
@Model
@Bound
  • Data-Binding
@Bindable

errai JS Integration

  • Makes working with native HTML and JS easier than other GWT technologies
  • Still provides compile-time and type safety over traditional JS development

London Meeting 2016

By Max Barkley

London Meeting 2016

Presentation slides for GWT Con 2016

  • 590
Loading comments...

More from Max Barkley