CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

GWT Features Overview

Andrey Mormysh

Java [email protected]

October 15, 2011 www.ExigenServices.com

2 www.ExigenServices.com

GWT Google Web Toolkit


GWT /ˈɡwɪt /Google Web Toolkit


GWT-based projects


GWT-based projects

Google Wave (http://wave.google.com/) - an online tool for real-time communication and collaboration


GWT-based projects


Odnoklassniki (http://www.odnoklassniki.ru) - social network


GWT-based projects


Odnoklassniki (http://www.odnoklassniki.ru) - social network Google Moderator (http://www.google.com/moderator) - a tool that allows

distributed communities to submit and vote on questions for talks, presentations and events


GWT-based projects




Go Grid (http://www.gogrid.com/) - cloud computing infrastructure service provider which enables you to deploy and scale load-balanced cloud server networks via a unique multi-server control panel.


GWT-based projects





Blueprint (https://blueprint.lombardi.com/index.html) - business process mapping tool


GWT-based projects






Scenechronize (https://www.scenechronize.com/) - a production management web application for film, television and commercials


GWT-based projects






Scenechronize (https://www.scenechronize.com/) - a production management web application for film, television and commercials

Whirled (http://www.whirled.com/) - social virtual world website which includes multi-player games

etc…


Features

Cross-browserObject-oriented programmingDev-modeGUI debuggingWigets and declarative UIClient BundleSimple localizationCode optimizationCode splittingRPC, JSON/XMLUI DesignerHTML5…


Features



?


JSNIJava Script Native Interface

Access JS code from Java code and vice versa




Wrap your own or third-party JS-widgets with JSNI:• Google Maps• Flash objects• etc.




Wrap your own or third-party JS-widgets with JSNI:• Google Maps• Flash objects• etc.

Example 1:

public static native void alert(String msg) /*-{ $wnd.alert(msg);}-*/;


JSNI

Example 2:

package mypackage;public MyClass{

public static int foo(){ ... } public static native void exportStaticMethod() /*-{

$wnd.foo = $entry(@mypackage.MyClass::foo());}-*/;

}


Deferred binding

It is a pluggable compile-time type substitution and code generation mechanism.


Deferred binding

It is a pluggable compile-time type substitution and code generation mechanism.

Example:

Static bindingFoo f = new Foo();

Dynamic Binding

Class c = Class.forName(fooImplName);Foo f = (Foo) c.newInstance();

Deferred Binding

Foo f = (Foo) GWT.create(Foo.class);


Deferred binding

Goal - send exactly the right code to client, depending on

• User’s browser• Locale• Mode (debug / production)• Network characteristics• etc.


Deferred binding

Goal - send exactly the right code to client, depending on

• User’s browser• Locale• Mode (debug / production)• Network characteristics• etc.

Facilities

• Make fewer Http Requests• Eliminate dead code• Avoid polymorphic dispatch• Avoid synchronous XHR• Avoid spaghetti code (if-s in JS-code)• Try to use only inline code “elem.innerText = str”• etc.


Permutations


Permutations

Example:

Input:

DOMImpl dom = GWT.create(DOMImpl.class);


Permutations

Example:

Input:


Implementations:DOMImplInternetExplorerDOMImplMozillaDOMImplOpera

Property:user_agent = “IE”


Permutations

Example:

Input:


Implementations:DOMImplInternetExplorerDOMImplMozillaDOMImplOpera

Property:user_agent = “IE”

Output:

DOM dom = new DOMImplInternetExplorer();


Permutations

Example:


Perfect Caching


Perfect Caching

Bootstrap selection script loads Javascript ‘executable’ containing correct set of bindings for given request.

<module>.nocache.js - small<md5>.cache.js – big


Perfect Caching

Bootstrap selection script loads Javascript ‘executable’ containing correct set of bindings for given request.

<module>.nocache.js - small<md5>.cache.js – big Apache HTTP server .htaccess configuration: <Files *.nocache.*>

ExpiresActive on ExpiresDefault "now" Header merge Cache-Control "public, max-age=0, must-revalidate"

</Files>

<Files *.cache.*> ExpiresActive on ExpiresDefault "now plus 1 year"

</Files>


Monilithic Compilation



“The fastest code that which does not run”, --Joel Webber, GWT co-creator




Example:

Shape shape = new Square(4);

1) int area = shape.getArea();




Example:



2) int area = Shape_getArea(shape);




Example:




3) int area = shape.len * shape.len;




Example:




3) int area = shape.len * shape.len;

4) int area = 16;


Image Bundling


Image Bundling

Problem:

1) HTTP 1.1 limit: 2 outgoing connections per domain/port


Image Bundling

Problem:


2) HTTP request has to be sent to the server for each resource (e.g. image)


Image Bundling

Problem:


2) HTTP request has to be sent to the server for each resource (e.g. image)

3) Request for status 304 ("Not Modified")


Image Bundling

Solution:

interface Resources extends ClientBundle {@Source("logo.png")ImageResource logo();

@Source("arrow.png")@ImageOptions(flipRtl = true)ImageResource pointer();

}


Image Bundling

Solution:

interface Resources extends ClientBundle {@Source("logo.png")ImageResource logo();

@Source("arrow.png")@ImageOptions(flipRtl = true)ImageResource pointer();

} Resources resources = GWT.create(Resources.class);

Image img = new Image(resources.logo());


Code Splittingpublic class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { Window.alert("Hello, AJAX"); } }); RootPanel.get().add(b); }}


Code Splittingpublic class Hello implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { GWT.runAsync(new RunAsyncCallback() {

public void onFailure(Throwable caught) { Window.alert("Code download failed"); } public void onSuccess() { Window.alert("Hello, AJAX"); }

}); } }); RootPanel.get().add(b); }}


HTML5 Features Support



• Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents



• Client-side Storage – Use LocalStorage, SessionStorage, and monitor StorageEvents

• Canvas – Add visualizations using Canvas

• Audio – Use Audio widgets

• Video – Use Video widgets


HTML5 Features support


http://www.exigenservices.by/webinars

To be continued…

• Client-server communication (RPC, JSON/XML)• MVP framework (Activities and Places)• DevMode (code-test-debug cycle)• Modules (properties, rules)• Generators (meta-programming)• UiBinder• Cell Widgets (CellTable, CellTree, CellBrowser)• …

http://www.exigenservices.by/webinars

CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

Technology

Transcript of CiklumJavaSat15112011:Andrew Mormysh-GWT features overview