GWT.create 2015 – JSInterop & Polymer

Many exciting features have been announced this year during the GWT.create conference. The most interesting one might be the JsInterop API.

“Deep dive in JSInterop” presented by Ray Cromwell

> Please find here the presentation of Ray Cromwell : http://bit.ly/1zxBKmU

JSInterop has been already mentioned in the last GWT.create, and was released as an experimental API in the 2.7 version in 2014. And later with the release of GWT 2.8, the experimental tags will be finally removed, as Ray Cromwell announced in his keynote. Until now, JSInterop complets its first phase. This feature will be available for reliable use very soon. Ray also gave a deeper talk about JSInterop later of the day.

What is in Phase 1?

Today GWT integrates with all Javascript, and can call any JS API with JSNI wrapping system. JSInterop is a more efficient and more idiomatic way for this purpose. That is not all, it also makes this as a two way street, which means, it can easily consume external Javascript APIs, as well as export reusable Javascript libraries out of GWT code. Subclass of a Javascript Object becomes an easy thing as polymorphism is a nature character of Java. Some key annotation in JSInterop:

  • @JsType: used for a Java interface which declares the interface of a Javascript object. Either one that already exists from the external Javascript environment, or one that will be accessible to the external Javascript environment. Here are some tips for JsType : it does not prevent compiler from pruning non-instantiated classes and it does not export static methods, fields, enums or constructors;
  • @JsProperty: used as a field accessor;
  • @JsExport: supplements the limitations of JSType. It marks a constructor, a static method, or a static field for creating an unobfuscated alias in the global scope;
  • @JsNamespace: Provides a default namespace for @JsExport.

Although, Phase 1 has its restrictions:

  • Can not overload method name;
  • Do not support varargs;
  • There is no clean way to invoke native JS constructors;
  • No way to align JRE collections with native JS collections;
  • No easy way to define object and array literals;
  • No handling of boxed Java types.

Phase 2 is coming

With the support of Java 8, using lambdas in GWT is now possible. Which means, today JavaScript could be more verbose than GWT. The Phase 2 aims to reduce boilerplate and remove the restrictions of Phase 1. Phase 2 will try to make idiomatic object literals, that means, instead of add @JsProperty for the getters and setters, use public attributes of a class without annotation.

The benefits

JSInterop makes GWT output closure modules. It can produce reusable codes (which is the case of the new Google Inbox) and be optimized in compilation. It provides a cross language type checking. We can also imagine that, GWT could parse the latest html specs, extract JsInterop interfaces automatically and keep them always up to date. In other words the whole Web world is available for GWT. As said Cromwell at the end of his session about JsInterop  no more need to choose between Angular, backbone, jquery…, just use it, and interop it.

“Polymer and elements” presented by Chris DiGiano

> Please find here the presentation of Chris DiGiano : http://bit.ly/17leqTD

We should be familiar with “Web Component” now. It was one of the key words in the last GWT.create in 2013 and has been talked a lot recently. The Web applications face problems today. The rich UI is required but the tool is not rich enough, which makes building UI a difficult task, and developers need to know too many frameworks or languages. Web Component aims to resolve this. The Polymer team, Chris DiGiano from Google gave us a very living example in his session “Polymer and Elements” : the element in standard HTML. It is a declarative element, has encapsulated behaviors, is reusable. The Web Component should be something like that.Four key notions of Web Component were presented by Chris:

  • Custom elements: Avoid large coding work, make extendable component with meaningful HTML;
  • Templates: Use native client side template;
  • Shadow DOM: Scoping, hide elements, make sure CSS inside element;
  • HTML import: Load custom element definitions and resources.

Polyfills

Unfortunately, the standard Web Component is not supported by every browser today yet. But with the help of polyfills, it makes it possible for developers to use these standards across all modern browsers.

browser 1

Polymer

Polymer is a lightweight, opinionated sugar over Web Components, as described by Chris (please visit this blog article for further information about Polymer). Polymer provides many elements. And a lot of efforts have been made for the mobile web application. This is really a nice thing. Polymer Core element are a set of utility elements including general-purpose UI elements (such as icons, layout elements, and toolbars), as well as non-UI elements providing features like AJAX, signaling and storage. Polymer also provides a designer : polymer-project.org/tools/designer/.

Use Polymer in GWT

How we can use these awesome elements with GWT? Chris gave us an example. We could just use it as the way we use the other HTML standard elements. Thanks to the JSInterop.

  • Where we link the nocache.js to, we need to add the polyfills and “Html import” some webcomponent that we want to use;
  • These new elements are free to use in UIBinder;
  • If we don’t need to operate the element, this could end here. Otherwise, we will need JsInterop to declare a type for the component;
  • Then the elements can be declared as UIField. We can do anything we need like add a clickhandler, etc.

Some sample code of using polymer with GWT could be find here: https://github.com/cdigiano/polymergwt.

Today’s Polymer

Chris announced that, Polymer is on the dev preview version. The 0.8 version will be released imminently. It is 5 times faster and 87% smaller than 0.5 version. The 1.0 version is previewed for mid of the year.

The community

Polymer is not alone for Web Component development. Mozilla also has Brick. The contribution is not reserved only for the browser makers. Chris listed some of them :

 < bootstrap-elements >, < twbs-grid >, < app-router >, < page-er >,
 < ajax-form > 

And with JsInterop, GWT can benefit 100% from the revolution of the web applications.

Share
Zhe SUN
Zhe SUN

3091

Leave a Reply

Your email address will not be published. Required fields are marked *