Errai: The browser as a platform

Tuesday, November 7, 2017

Errai 4.1.0.Final Released

We've recently released Errai 4.1.0.Final, the first release on master since branching off the 4.0.x series. In this short post, I will highlight some of cool new things you can find in 4.1.0.Final, which include:
  • Size and performance improvements in code generated for Errai Marshalling and Errai Data Binding
  • Custom content delegation in Errai Navigation
  • moved to META-INF
  • Templating and Data Binding support for Elemental 2
The best part: two of these changes were delivered by our fantastic community. Read below for descriptions about these features. At the end I will talk briefly about forward-development currently happening in Errai.

Marshalling and Data Binding Improvments

Both Errai Marshalling and Data Binding use generated code to introspect and access members of annotated classes. In Errai 4.1.0.Final, this code has been refactored to decrease generated code size and better take advantage of optimisations for String literals in the GWT compiler.

If you use Errai Marshalling or Data Binding heavily, Errai 4.1.0.Final should noticeably decrease the size of your JavaScript payload. A big shout out to slavap for this excellent contribution!

Custom Content Delegation

Errai Navigation provides lots of page-specific mechanisms for hooking into the navigation lifecycle, but until now there were no convenient ways to generically customize how all pages were shown or hidden.

Errai 4.1.0.Final introduces a content delegation system. Users can override a ContentDelegation interface and replace the default implementation to insert their own custom logic for displaying and hiding all pages. The delegation is quite flexible, even allowing for asynchronous actions.

A big thanks to BenDol for the concept and implementation of this feature!

Configuration Moved to META-INF

By convention, configuration files that don't require name-spacing are supposed to be placed in the META-INF folder. Errai 4.1.0.Final supports scanning files in the META-INF folder, allowing users to follow this convention. Moving forward, you should consider this a best practice.

Errai 4.1.0.Final will still work properly with files outside of a META-INF folder, but you may see an abundance of warnings in your logs, as we will likely phase out support for this in our next major release.

Elemental 2 Support for Templating and Data Binding

Elemental 2 is a project that exposes built-in web APIs in Java. Like the first Elemental, the project is automatically generated from external definitions of web APIs. Unlike its predecessor, Elemental 2 uses JS Interop.

Back when we began work on Errai 4, Elemental 2 was not yet available. We didn't want that to slow down our work on HTMLElement-based user interfaces and JS Interop support, and so we created a collection of hand-written element wrappers in Errai.

But now that Elemental 2 is available, it is in the best interests of the GWT community to standardise around these. As such, Errai's DOM wrappers have been deprecated and we have added full support to templating and data-binding for classes from Elemental 2.

We will not be removing the Errai element wrappers, but we will also not be updating them, and you are highly encouraged to use Elemental 2 going forward.

Looking to the Future

The biggest priority for Errai in the coming months is preparing for migration to GWT 3. We've known for some time that GWT 3 will require big changes to the way we develop GWT applications. There probably won't be GWT Widgets. There definitely won't be GWT Generators.

We've already made large strides towards GWT-Widget-less UI development. Although there is some more work to be done here, we are also beginning progress on the even larger and equally important task: migrating Errai's GWT generators to annotation processors.

I'd like to take this opportunity to mention recent addition to our team, Tiago Bento, who has been the driving force behind our APT migration efforts. It's not quite ready for a test drive yet, but keep an eye out in the future for blog posts about how to try out Errai annotation processors on our snapshot releases.

Until the next time, happy coding!

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, allowing you to use a RemoteCallback<> 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 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!


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!