CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

GWT Features Overview

Andrey Mormysh

Java Developera.mormysh@gmail.com

October 15, 2011 www.ExigenServices.com

2 www.ExigenServices.com

GWT Google Web Toolkit

GWT /ˈɡwɪt /Google Web Toolkit

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.

Example 1:

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

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

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

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

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

• 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)• …

CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

Technology

Transcript of CiklumJavaSat15112011:Andrew Mormysh-GWT features overview

Open Admin - GWT

GtugDakar AppEngine, Gwt

An introduction to GWT and Ext GWT

Architecting your GWT applications with GWT-Platform - Lesson 02

Gwt session

Gwt Ui Overhaul

Gwt Presentation 1

Programmation GWT 2

GWT = easy AJAX

Prague GWT

Opensoft Gwt

GWT Jug Stuttgart

Gwt create2013 Frankfurt: How we built a million dollar business with GWT

Gdd2009 gwt gwt-architecture-best-practices

GWT Quick Start

Gwt Tutorial

Testing GWT Applications

GWT: Why GWT, GQuery, and RequestFactory

Introduction to GWT

What’s New in GWT? - Jfokus · GWT 2.1 RequestFactory Newer alternative to GWT-RPC Designed for data-oriented services-Higher level of abstraction than GWT-RPC-Foundation for future