Errai: The browser as a platform

Friday, April 1, 2016

Errai 4.0.0.Beta1 released!

Greetings everyone!

As we write this, GWT and Errai are 10- and 6-years-old projects respectively. In those years, the web development community has progressed at an amazing speed, which has led some to ask the question: Is there still a place for these projects now and in the future?

We on the Errai Team continue to see huge value in our type-safe and declarative programming model for developing large projects. It is because of this value that we continue to actively develop Errai and it is because of this value that we continue to say this.

Today we're happy to announce the release of Errai 4.0.0.Beta1, targeting GWT 2.8.0-Beta1. This release brings exciting new features for working with native JavaScript and HTML, as well as improved refresh times in Super Dev Mode. In particular, 4.0.0.Beta1 includes:

  • A new Errai IoC container supporting partial code regeneration for improved refresh performance in Super Dev Mode
  • Greater compliance with CDI such as:
  • Support for injecting native JavaScript objects into IoC beans with JS interop
  • Support for injecting Errai IoC beans across separately compiled GWT scripts
  • Support for native DOM-based UI development with:
    • JS interop wrappers for common DOM elements
    • A declarative way of defining custom element wrappers available for injection in Errai IoC
    • Ability to use native DOM elements with Errai UI @DataFields, Errai Navigation @Pages, and Errai Data Binding @Bound fields

So what do all these changes mean for you?

Performance Improvements

When developing in Super Dev Mode, refreshing after modifying an IoC managed type requires generating significantly less code, decreasing the overall refresh time.
At runtime, applications with many @ApplicationScoped beans will notice decreased start-up times as @ApplicationScoped beans are now lazily instantiated by default.

Templated Beans with Native HTML Elements

In Errai 4 it's now possible to develop UI components without Widgets, and instead with thin-wrappers around native HTML elements. Here is a @Templated bean for a form using Errai UI and Data Binding.

How is this different from Errai 3?
  • Div, TextInput, and TextArea are not Widgets. Rather they are thin-wrappers around the div, input, and textarea elements respectively (using the GWT 2.8 JS Interop API)
  • The ContactForm does not extend Composite
  • The root element of the template is accessible as a @DataField. (This can be used to manually add this template to the DOM.)

Injecting Other DOM Elements

Errai 4 provides built-in thin-wrappers for most commonly used HTML elements, which you can you use in place of Widgets. The complete collection can be found in this package.
In case you wish to inject elements which do not have specific wrappers provided by Errai, you may use either of the following options.

Use the @Named Qualifier

Using the @Named qualifier, it is possible to inject an HTMLElement with any tag name. For example, here is how you could inject a nav element.

Create your own @Element

It's also very simple to declare your own thin DOM wrappers using the new @Element annotation. For example, here is a thin wrapper for the nav element that, if included in your project, can be available for injection in the IoC.

Next Steps

For those of you itching to learn more, our next blog post will take a deep dive into native JavaScript support in Errai 4, including how you can make arbitrary JavaScript objects injectable and how you can inject Errai IoC beans across separately compiled GWT scripts.
Until then you can check out our new and improved Errai Tutorial, which showcases all of the features mentioned here.

Happy coding!