Errai: The browser as a platform

Wednesday, May 24, 2017

Errai 4.0.0.Final released!

Today I'm thrilled to announce that Errai 4.0.0.Final has been released!

At a glance, here are the big changes from Errai 3 to 4:
  • Uses GWT 2.8.0 and WildFly 10 for Super Dev Mode
  • Has a new Errai IoC container supporting incremental code regeneration, and greater compliance with CDI
  • Has advanced JS Interop support, including dependency injection of native JavaScript objects, and templating and data-binding with JS Interop wrappers of DOM elements and web components
  • Has message bus enhancements (better clustering support and CSRF protection)
All of these changes have been discussed in previous blog posts. Nonetheless, in this post I will summarise these changes with links to the more detailed descriptions.

New Errai IoC Container

Errai 4 has a new IoC container, that supports incremental regeneration of code. The main benefit of this is to improve the performance of refreshing during Super Dev Mode. But this rewrite also allows for the possibility of migrating to annotation processors for all code generation in a future release.

The new IoC container also more closely aligns with CDI:
  • @ApplicationScoped beans must be proxiable, and are lazily loaded like in Weld
  • @Singleton is a "pseudo-scope": it need not be proxiable but cannot be part of a circular injection
  • @Typed annotation is supported
In some cases, beans may be resolved slightly differently than in Errai 3. Our upgrade guide highlights some important "gotchas" to look out for when upgrading to Errai 4.

Advanced JS Interop Support

The overarching theme of Errai 4 is working directly with JavaScript APIs and the DOM via JS Interop. If you don't already know about JS Interop, I encourage you to watch the first half of this talk by Daniel Kurka at GWTCon.

Here are the ways in which you can use JS Interop with Errai 4:
  • Use JS Interop interfaces for DOM elements or web components as @DataFields in @Templated components
  • Use JS Interop interfaces for DOM elements or web components as @Bound UI components with Errai data-binding
  • Inject JavaScript objects into your application like normal GWT/Java objects
You can read more about Errai 4 JS Interop support here and here, or view examples in the Errai Tutorial.

Message Bus Enhancements

The Errai message bus has received some love in Errai 4, with fixes that improve fail-over behaviour in clustered setups, and optional built-in CSRF protection.

Both of these are described briefly in this blog post.

Thanks to the Community

I'd like to end by thanking everyone in the Errai community who contributed to the quality of this release, through pull requests with new features and reports of important issues in our beta and candidate releases. In particular, the Errai JS Interop support was greatly improved by the important feedback from our community.

Until the next time, happy coding!

Monday, March 6, 2017

Errai 4.0.0.CR2 released!

As of today Errai 4.0.0.CR2 is available. This release contains mostly bug fixes and enhancements to some of our demos.

Below are some of the highlights.

Fix Maven Parallel Build Issues

Previously doing a parallel Maven build of an Errai project could occasionally lead to compilation failures. This release provides a fix so that parallel builds can now reliably execute on Errai projects.

Add Jetty Profiles Back to Errai Demos

During the migration from GWT 2.7 to 2.8 many Errai demo Jetty configurations stopped working, and consequently they were simply removed. Thanks to Dmitrii Tikhomirov, many of the Errai demos now have Jetty profiles once more so you can see how to build an Errai application for deployment outside of a Java EE app server.

Source Translation of Stack Traces in Google Chrome Fixed

A bug in Errai logging had broken source mapping of stack traces in errors logged through Errai. The result was that stack traces printed to the console in Google Chrome would only show obfuscated method names and line numbers. The problem has been fixed so that stack traces logged to the console once again use source maps to show line numbers from the Java source.

Stay Tuned

Stay tuned as we get closer to our first final release of Errai 4. Until then, happy coding!

Friday, January 27, 2017

Errai 4.0.0.CR1 released!

Since our last post we've done several beta releases, but today I'm happy to announce our first candidate release of Errai 4! Since we haven't blogged about our last few Beta releases, this post will contain highlights of all the changes introduced since 4.0.0.Beta4.

  • Client-side support for the CDI @Typed annotation
  • Global translation keys for Errai i18n
  • Removed ResponseCallback
  • Message bus enhancments (better clustering and CSRF protection)
  • General purpose gatekeepers on @Pages

Without further ado, let's dive right in.

Client-side support @Typed

The @Typed annotation allows you to restrict the types of injection sites that a bean may satisfy. What does that mean? To explain, we'll use the example from the @Typed javadoc. Consider the following class:


With normal CDI resolution, this bean will satisfy any unqualified injection site for any the following types, because the bean is assignable to any of these: Shop, BookShop, Business, and Object. Typically this is desirable, but we could reasonably want this bean to only satisfy injection sites of type Shop so that other developers don't depend on the implementation.

The @Typed annotation allows us to specify a subset of this bean's assignable types as its bean types, like so:


With this declaration, BookShop now only satisfies injection sites with types Shop or Object, preventing other developers from injecting this as a BookShop or a Business.

Global Translation Keys in Errai i18n

If you use Errai i18n, then you know that translation bundles use templated class names as prefixes for the keys. For example, consider this templated bean.


If we used Errai i18n to translate the "hello" data-field, we would define the translation of this element with the key "I18nTemplatedBean.hello-key". The disadvantage of this prefixing is that it made it impossible to share translations of common words between templates, leading to lots of duplication.

Now Errai i18n supports unprefixed translation keys that can be used in any template. Global translation keys have a lower priority than prefixed translations, and so they will only be used to translate a data-field if there is no translation key for the field specific to that template. So we could use the value associated with the key "hello-key" to translate the data-field in the above example provided there is no value for the key "I18nTemplatedBean.hello-key".

No more ResponseCallback for JAX-RS RPCs

The ResponseCallback was introduced to Errai to allow developers to access the underlying Response object returned from a JAX-RS RPC call. Unfortunately, this feature caused a serious problem for client-side RPC interceptors (including those used by Errai Security), where it became impossible to intercept the result of an RPC calls without a ClassCastException in some cases.

To solve this problem, we've removed the ResponseCallback, so that every RPC method has a single expected callback type that directly corresponds to the return type of the RPC method. In cases where a Response object is needed, you can modify your JAX-RS method to return a javax.ws.rs.core.Response, allowing you to use a RemoteCallback<com.google.gwt.http.client.Response> from the client call site.

Message Bus Enhancements

Clustering Fixes

This release fixes a bug where the message bus could enter a reconnect loop after failover in certain clustering setups. With this fix the message bus is now more resilient at handling failover when working behind a load balancer.

CSRF Protection

The Errai Bus now provides basic CSRF protection. This protection is disabled by default. It can be enabled setting this property to true (as a System property or in ErraiApp.properties): errai.bus.enable_csrf_token

When enabled, a CSRF token is generated on the server that must be included as a header in every bus request. This token can be embedded on a GWT host page with a provided filter, or else negotiated as part of the message bus connection.

General purpose gatekeepers for @Pages

Since the release of Errai Security it has been possible to control access to pages via required roles, but there was no general way to redirect before a page was displayed based on business logic.

As a recent change, you can now intercept navigation by adding a NavigationControl parameter to a @PageShowing method like so:


We on the Errai team would like to thank Ben Dol for both suggesting and implementing this feature.

Still Time for Feedback

As always, we encourage and welcome community feedback. If you are still on Errai 3, consider checking out our migration guide and trying out Errai 4 today!

Until the next time, happy coding!

Thursday, November 10, 2016

Errai 4.0.0.Beta4 released!

Greetings!

Errai 4.0.0.Beta4 is now available. This release contains mostly bug fixes, but here are some noteworthy changes:
  • Upgrade GWT to 2.8.0 and Guava to 20.0
  • The Errai Tutorial now showcases Errai's JS interop integration

Errai Tutorial Enhancments

A major vision of Errai 4 has been more support for working directly with the DOM and more support for using JS interop. With this latest round of enhancements, the Errai Tutorial now showcases this vision and below I'll highlight some of the major features in action.

UI Components without GWT Widgets

The Errai Tutorial now showcases UI components built without any GWT widgets [1] [2]. These components are built with Errai templating using JS interop wrappers for interacting with the DOM; Element wrappers are used in place of GWT widgets and DOM events in place of GWT widget events.

One big advantage of this approach is that the markup of these UI components at runtime is exactly the same as the template HTML. Because GWT widgets are often implemented with multiple tags and custom CSS classes, using widgets as @DataFields can result in UI components rendering differently than their templates render when viewed outside the application.

Custom JS Interop Wrappers for DOM Elements and Web Components

The Errai Tutorial demonstrates how you can integrate web components with your Errai app, and how you can write your own custom element wrappers with specialized data-binding behaviour.

The tutorial now uses the Polymer paper-input and paper-textarea web components as part of a @Templated form. These components can be injected and used as @DataFields (as they are here). By using Errai's new HasValue interface for native @JsTypes with the @JsProperty annotation, these wrappers declaratively instruct Errai to use the "value" property of the paper elements for data-binding.

The tutorial also includes custom anchor element wrappers that showcase more complex data-binding behaviour. The BindableEmailAnchor is a wrapper for an anchor element that uses HasValue and @JsOverlay so that @Bound instances will display an email address as a mailto link as well as in the anchor text content.

Since the @JsOverlay method implementation is the only code generated by the GWT-compiler for a native @JsType, this is a light-weight way to declare element interfaces with custom data-binding behaviour.

Uses JQuery to Demonstrate Third-Party JavaScript Integration

The Errai Tutorial has a wrapper for a small subset of JQuery to showcase third-party JavaScript integration. With only a single @Produces annotation added to the JQuery wrapper, it is possible to inject the JQuery function for use in GWT code.

In general, we on the Errai team believe that using dependency injection is a best practice, but this is especially important with native JavaScript objects. By injecting the JQuery function rather than accessing it through a static method, it is much easier to mock out that object and test the code using it in a Java SE environment.

Try It Out and Give Us Your Feedback

We encourage you all to check out Errai 4.0.0.Beta4 and our new tutorial and share with us your feedback, whether that feedback is bug reports to our JIRA page, or more general disucssion in our forum.

Until the next time, happy coding!

Friday, September 30, 2016

Errai 4.0.0.Beta3 released!

Greetings!

Today we have the pleasure of announcing a new Errai release, 4.0.0.Beta3. Some important highlights in this release are:
  • GWT version upgraded to 2.8.0-rc2.
  • support for different merging strategies on @DataField attributes.
  • support for JS interop DOM event wrappers for @EventHandler methods.
Without any delay, let's talk about what these changes mean for you.

GWT Version Upgrade to 2.8.0-rc2

If you tried using Errai 4.0.0.Beta2 with GWT 2.8 snapshots or 2.8.0-rc2 you may have experienced issues running Super Dev Mode because of transitive dependency conflicts between GWT and Errai. These issues are resolved in 4.0.0.Beta3.

Data-Field Attribute Merging Strategies

When Errai initialises a templated bean, it merges attributes of data-fields in the HTML file with attributes on @DataFields in the @Templated Java file. In previous versions, attribute values of the data-fields in the HTML file always overrode @DataField attribute values. For example, for the Errai template below, the value of the title attribute at runtime would be "template".

As of this release, you can select between two strategies: USE_BEAN and USE_TEMPLATE.

Merging Single-Valued Attributes

For most attributes, USE_TEMPLATE (the default) causes merging to happen as in previous Errai versions: attribute values on a data-fields in the HTML file will override values of the respective @DataFields.

Conversely, the USE_BEAN strategy will preserve attribute values from the @DataField, only copying attribute values from a data-field in the HTML template if that attribute is not set in the respective @DataField.

You can declare which strategies to use as part of the @DataField annotation, with the ability to specify strategies for specific attributes, or a default strategy for all other attributes. In the example below, the "title" attribute will keep whatever value is set on the @DataField and all other attributes will have the value from the template data-field.


Merging List-Valued Attributes

Both strategies behave a bit differently when merging the "style" and "class" attributes because these attributes have list values.

When merging class values, all class names from the template and Java field are preserved. In other words, all CSS classes are combined between template data-fields and Java @DataFields regardless of which strategy is selected.

For example, below the "container" div will have the following classes (even if a different merging strategy was specified on the @DataField): "template bean both"


When merging style properties, individual CSS rules are kept from both the Java @DataField and the template data-fields as long as they do not conflict with each other. When there is a conflict, the selected strategy is used to resolve it, where USE_TEMPLATE causes the HTML data-field style value to win, and USE_BEAN causes the Java @DataField value to win.

In the example below, the "container" div will have the following style after the merging strategy is applied: "color: red; font-weight: bold; background-color: black"

JS Interop DOM Event Wrappers

In this release we have introduced a @BrowserEvent annotation for defining a native @JsType as an interface for a DOM Event. Annotated types can be used with the @EventHandler annotation to define methods as event listeners similarly to how @EventHandler is used with GWT Widget events. Several @BrowserEvent interfaces can be found in errai-common, covering the more common DOM event interfaces.

Below is an excerpt from the MouseEvent interface in errai-common.


Unlike GWT Widget events, multiple kinds of DOM events can share the same interface. The @BrowserEvent value for MouseEvent specifies the names of DOM events for which MouseEvent is an interface.

Because of this many-to-one mapping, declaring a handler method with a @BrowserEvent works similarly to declaring a native GWT event. There is a new @ForEvent annotation that is used to specify for which DOM event a handler should listen (which is analogous to @SinkNative for native GWT events).

An @EventHandler with a @BrowserEvent type can be registered for any data-field in the template HTML file, whether or not it has a corresponding @DataField in the Java bean.

Next Steps

Keep an eye out for upcoming blog posts focusing on some of the more advanced new features in Errai 4 such as JS interop support.

Until then, happy coding!