GWT - building a better web

Was haben die Kunden von morgen
Google Web Toolkit, heute im Web gesehen und
bedient? Sind wir auch in der Lage,
making a better web? derartig JavaScript-lastige
Anwendungen zu bauen? Wenn
Ihre Kernkompetenzen im Java-EE-
Umfeld angesiedelt sind, dann
dürfte das GWT ein sehr
interessantes Webframework für
Sie sein. In diesem Vortrag werden
papick g. taboada
die Konzepte rund um GWT sowie
pgt technology scouting GmbH
Architekturaspekte einer GWT-
Anwendung betrachtet.

Web 1.0, 2.0, 3.0 ?!?
© 2012 by pgt technology scouting GmbH

the new Web

the BetterWeb™ !

Topics ‣The BetterWeb™
‣ The architectural shift
‣ Standards?
‣ Developing smarter
‣ GWT does the job?

BetterWeb™ by apps?

BetterWeb™ by buzzwords?

BetterWeb™
 by new technologies?
 by new devices?
 by new frameworks?
 by new plugins?
 by new products?


no downtime no $$$ awesome UX it simply works

BetterWeb™ by UX

easy, right?

no

Topics ‣ The BetterWeb™
‣ Standards?

step 1 - use the browser

Browser Server

event

espo nse
full html r

event

spo nse
fu ll html re

event

spo nse
fu ll html re

The web THEN
and now
 Browsers where dumb html
terminals
 High server side resource
consumption


Browser Server
ﬁrst reques
t

e sp o n se
full html r
event

event

data reque
st
event

data
event
data reque
st

data

The web then
and NOW
 Rich user interfaces in the
Browser
 Server resource consumption
reduced to a minimum


The „ajax“ architectural shift

step 2.1 - understand http

step 2.2 - understand html

step 2.3 - understand browsers

connection bottleneck

HTTP 1.1 Speciﬁcation

8.1.4 Practical considerations

(...)

Clients that use persistent connections
SHOULD limit the number of
simultaneous connections that they
maintain to a given server. A single-user
client SHOULD NOT maintain more
than 2 connections with any server or
proxy.
(...)

Chrome: 6 IE 6: 2 IE 7: 2 IE 8: 6 IE 10: 8 Safari: 6 Firefox: 6

so what?

even 20 would not be enough

Actually, a good way
to kill your mobile
data plan and
battery life.

side note:

1
this is why amazons
„silk“ or does really
improve the surf
experience on mobile
devices. In fact, it would
improve the UX on any
device. Why bother doing
it right, when we can have
the cloud computing
power to the rescue?

one!!!

that was page request.

134 Requests

1/2 MB Download

MEDIOCRITY
It takes a lot less time and most people won't notice the
difference until it's too late.
© http://despair.com

cache time to live? new versions? only ﬁxes subsequent calls!

Caching helps, partially

remember:
less
latency
is
BETTER


the thing you want to build is a RCC

RPC

RCCs == Rich Cloud Clients

XML
JavaScript
HTML
DOM/ DOM-Scripting

XMLHttpRequest
JSON

Dynamic HTML

The Ajax
slippery slope
‣ Try “a little bit of script”
‣ Every body loves it!
‣ More!!!
‣ Errr - Do we know
Javascript?
‣ Does it work with…
‣ Wait – this is hard!

copyright 2006, Leland Scott, Musings from Mars
Native DHTML speakers

Fear browsers
with all of mind,
body and spirit
When in danger,
when in doubt,
run in circles
cry and shout


© http://www.duccutters.com/FrancoisKnorreck-Snaefell.tpl

Ajaxifying the web is not a solution™

No, no, no.
Please no!
Please!

html + css + js is here to stay

HTML5 Chrome Firefox Safari Opera

canvas
video
geolocation
appcache
Vic Gundotra
database Google IO Keynote

workers

HTML 5 here and now

Topics ‣ The Web?
‣Standards?

Java BetterWeb™ Standard?

Industriestandard
• Java EE ist ein De-facto oder Quasi-Standard in
der Entwicklung von unternehmenskritischen
Anwendungen
• JSF Speziﬁkation ist Teil der Java EE Speziﬁkation
Standard

Java EE Standard LOCK-IN

NO ONE EVER GOT
FIRED FOR BUYING
{ MICROSOFT
IBM
ORACLE
...

To JSF or to JSF,
that‘s the question.

http://de.wikipedia.org/wiki/ Proprietär

• Juristisch „urheberrechtlich geschützt“
• IT: Dinge, die nicht allgemein anerkannten
Standards entsprechen („hauseigene
Entwicklungen“)

• Freie-Software-Bewegung: alles was nicht frei
(Lizenztechnisch) und Quelloffen ist.

WEB Standards Java EE Standards

Rich vintage (?)
Cloud web app
Thing architecture

Wait...

Warranty

Vendor independence?
Support

cloud

HTML5
IE6
IE10
IE9
HTML4
the Avatar UI JS
Support
Websphere
5... 6... 7... Java FX
Mobile

but, what about the future?

JBoss

Sencha
Google (RichFaces)

(GXT) GWT Prime Technology JSF
(PrimeFaces)
Isomorphic Software Icesoft Technologies
(Smart GWT) (IceFaces)

blue or red pill?

AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, The New Blogger, Chrome Webstore, Product Search, Public
Data, New Google Groups, Orkut, Google Takeout, Google Pagespeed, Google WebFonts, Google Tables

google is „dogfooding“

Topics ‣ The Web?
‣ Standards?
‣Developing smarter

building the BetterWeb™

Google Web Toolkit

Google Web Toolkit (GWT) is an open source Java
development framework that lets you escape the matrix
of technologies that make writing AJAX applications so
difﬁcult and error prone.

With GWT, you can develop and debug AJAX
applications in the Java language using the Java
development tools of your choice. When you deploy
your application to production, the GWT compiler
translates your Java application to browser-compliant
JavaScript and HTML.


GWT

Google Web Toolkit (GWT) is an open source Java
development framework that lets you escape the matrix
of technologies that make writing AJAX applications so
difﬁcult and error prone.

With GWT, you can develop and debug AJAX
applications in the Java language using the Java
development tools of your choice. When you deploy
your application to production, the GWT compiler
translates your Java application to browser-compliant
JavaScript and HTML.


GWT

open source framework
escape the matrix of technologies
develop and debug in Java
Java development tools
translates to browser-compliant JavaScript


Standalone JS apps

JS app can be anything

development cycle

Develop in Java

Checkstyle

Develop in Java

Checkstyle

Findbugs,
PMD

Develop in Java

Checkstyle

Findbugs,
PMD

Patterns

Develop in Java

Checkstyle

Findbugs,
PMD

Patterns

Unit testing

Develop in Java

Checkstyle

Findbugs,
PMD

Patterns

Unit testing

Refactoring!

Develop in Java

it‘s about engineering

One click start

Use the webapp

Debug in Java

Cross compile to JS

Distribute

more than just a cross compiler

panel

has

programmatic DOM is widget
manipulation DOM
tree
declarative deﬁnition
event handling

simple UI component model

widget
DOM
tree

LOGIC in Java
Java API
LAYOUT in HTML/ CSS

separation of concerns

I am not a widget!!

very fast / efﬁcient data grid

@RemoteServiceRelativePath("echo")
public interface EchoService extends RemoteService {

String echo(String name);
}

public interface EchoServiceAsync {

void echo(String name, AsyncCallback<String> callback);
}

public class EchoServiceImpl extends RemoteServiceServlet implements
EchoService {

public String echo(String name) {

return name.toUpperCase();

}
}

RPC style communication

httprequest builder xml dom parser

i18n safeHTML templates
logging
css/ js obfuscation requestFactory

module concept code generator
permutations per browser/ language

JSNI for native JS uiBinder

and much more...

living with the bottleneck

!=

project layout vs. deployment layout

sprites / client bundle

doing the right thing
• inline css + js + html + images + sound into one
file

• browsers just get what they need (code,
language)

• caching done right!
• name patterns for cache configuration
• use new very unique filenames for each
compile output


developer guided splits

build what you need

architectural freedom

do we know how?

sometimes

command pattern (dispatch)
place framework
eventbus
model-view-presenter

Ray Ryan - lessons learned

Topics ‣ The Web?
‣ Standards?
‣GWT does the job?

Is GWT good for the BetterWeb™?

• Sponsored/ developed by Google
• Lead by comitee
• Apache 2 licensed
• Leverages Java knowledge for web development
• brings software engineering to the web, suitable
for product development


• End to end debugging
• No package/ deploy roundtrips
• Leverage Java knowledge and tooling


• Split points reduce initial download
• Minimal server load by just loading data
• Reduced number of requests
• Uses client/ browser resources to free up server
resources


• Build-What-You-Need™
• Leverage browser capabilities


Papick G. Taboada
Dipl. Wi.-Ing. (TU)

http://pgt.de
pgt technology scouting GmbH

PROJECT-
BERATUNG UNTERSTÜTZUNG

POC REVIEWS

COACHING
SCHULUNG

http://blog.oio.de

) OIO Kompass : Java Web-Frameworks )
Eine Studie zu den Hintergründen der Auswahl von Java Web-Frameworks.

2011: 52 Teilnehmer | 250 Entwickler 2012: bereits über 200 Teilnehmer

http://www.oio.de/kompass/ueberblick-java-web-frameworks-vergleich/

time for questions?

GWT - building a better web

More Related Content

Similar to GWT - building a better web (20)

Recently uploaded (20)

GWT - building a better web

Editor's Notes