GWT.create 2015 – JSInterop & Polymer
“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?
- @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
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.
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.
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.
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.
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.