62
Christian Kaltepoth | ingenit GmbH & Co. KG JSF vs. GWT? JSF und GWT!

JSF vs. GWT? JSF und GWT!

Embed Size (px)

DESCRIPTION

Slides of the JAX 2014 talk

Citation preview

Page 1: JSF vs. GWT? JSF und GWT!

Christian Kaltepoth | ingenit GmbH & Co. KG

JSF vs. GWT? JSF und GWT!

Page 2: JSF vs. GWT? JSF und GWT!
Page 3: JSF vs. GWT? JSF und GWT!
Page 4: JSF vs. GWT? JSF und GWT!

JavaServer Faces

• „Bodenständige Technologie“• Formularbasierte Anwendungen• Data Lifecycle

– z.B. Konvertierung + Validierung

• Mächtige Komponenten• Support für AJAX, HTML5, etc.

Page 5: JSF vs. GWT? JSF und GWT!

Aber...

• Server als zentrale Instanz– Rendering, Validierung, etc.– Viel Kommunikation mit dem Server

• PPR reicht oft nicht aus• State, State, State, ...

– Muss synchron gehalten werden– Ohne langlebige Scopes geht nichts

Page 6: JSF vs. GWT? JSF und GWT!

Ein Blick über den Tellerrand...

Page 7: JSF vs. GWT? JSF und GWT!

GWT[ i t]ɡʉˑ ˑ

Page 8: JSF vs. GWT? JSF und GWT!

GWT

• „Development toolkit for building [...] complex browser-based applications“

• Veröffentlicht 2006• Geleitet von:

– 2006-2012: Google– Seit 2012: Steering Committee

Page 9: JSF vs. GWT? JSF und GWT!

GWT Compiler

Was ist GWT?

Page 10: JSF vs. GWT? JSF und GWT!

Warum GWT statt JavaScript?

• Java als etablierte Sprache• Gewohntes Tooling

– IDE, Build Tools, Testing, ....

• Starke Typisierung– Compiler Checks, Static Code Analysis, ...

• GWT kümmert sich um:– DOM Garbage Collection– Inkompatibilitäten zwischen Browsern

Page 11: JSF vs. GWT? JSF und GWT!

Server Client

Shared Code!

Page 12: JSF vs. GWT? JSF und GWT!

GWT

• GWT Compiler• Client Bundles• Deferred Binding• RequestBuilder• I18N• Logging• UI Components

• RequestFactory• Testing• GWT-RPC• UI Binder• Editors• JSNI• Code Splitting

Page 13: JSF vs. GWT? JSF und GWT!

GWT

• GWT Compiler• Client Bundles• Deferred Binding• RequestBuilder• I18N• Logging• UI Components

• RequestFactory• Testing• GWT-RPC• UI Binder• Editors• JSNI• Code Splitting

Page 14: JSF vs. GWT? JSF und GWT!

Ist GWT überhaupt noch„State of the Art“?

Page 15: JSF vs. GWT? JSF und GWT!

Google Sheets

Page 16: JSF vs. GWT? JSF und GWT!

Google Shopping Express

Page 17: JSF vs. GWT? JSF und GWT!

Evernote

Page 18: JSF vs. GWT? JSF und GWT!

„Hello World!“ mit GWT

DEMO

Page 19: JSF vs. GWT? JSF und GWT!

Kann man JSF und GWT kombinieren?

Ja, das geht! ☺

Page 20: JSF vs. GWT? JSF und GWT!

JSF & GWT

• Das Ziel:– Clientseitige Funktionalität– Mehr Interaktivität– User Experience

• Die Herausforderung:– Interaktion mit JSF Komponenten– JSF Lifecycle nicht beeinflussen

Page 21: JSF vs. GWT? JSF und GWT!

JSF + GWT

Eine Beispielanwendung

Page 22: JSF vs. GWT? JSF und GWT!
Page 23: JSF vs. GWT? JSF und GWT!

Was ist das BMS?

• Bäckerei Verwaltungssoftware• JEE7 Anwendung mit JSF 2.2• Artikelmanagement

– Stammdaten, Kosten, Preise, ...

• Rezeptverwaltung• Berechnung der Produktionskosten

Page 24: JSF vs. GWT? JSF und GWT!

Sprint 23: Einkaufspreise

Page 25: JSF vs. GWT? JSF und GWT!

Featurewunsch

„Graphische Aufbereitung der Auswirkungen

von Einkaufspreisveränderung auf die Herstellungskosten

der betroffenen Artikel.“

Page 26: JSF vs. GWT? JSF und GWT!

Probleme

• Kostenberechnung im Backend!• JavaScript Komponente sinnvoll!

– Interaktivität (Tooltips, etc.)

• Berechnung auf dem Server?– RTT problematisch!

• Neuimplementierung der Berechnungslogik in JavaScript?

Page 27: JSF vs. GWT? JSF und GWT!

Lösungsansatz

• Implementierung mittels GWT– Eingaben aus JSF Komponenten auf dem

Client auslesen– Berechnungslogik als Shared Code– Nutzung von JavaScript Chart Library für

die Grafik (d3.js)

Page 28: JSF vs. GWT? JSF und GWT!

BMS DEMO

Page 29: JSF vs. GWT? JSF und GWT!

Was brauchen wir?

• Interaktion mit JSF Komponenten➡ GWT Components

• Integration der JavaScript Library➡ JSNI

• Kommunikation mit Server➡ Remoting

Page 30: JSF vs. GWT? JSF und GWT!

GWT Components

Page 31: JSF vs. GWT? JSF und GWT!

GWT Components

• Realisiert als „einfache“ Klassen• Unterklassen von Widget• Tiefe Vererbungshierarchie• Verschiedene Typen:

– Widgets / Panels / Composites

• Component > DOM Element + Kinder

Page 32: JSF vs. GWT? JSF und GWT!

Klassenhierarchie

Quelle: Book of Vaadin - https://vaadin.com/book/

Page 33: JSF vs. GWT? JSF und GWT!

Beispiel: PasswordTextBox

Page 34: JSF vs. GWT? JSF und GWT!

GWT Components

• Basic: – Button– RadioButton– Checkbox– Textbox– Textarea– Listbox– ...

• Advanced:– DatePicker– MenuBar– Tree– SuggestBox– CellTable– Dialog– ...

Page 35: JSF vs. GWT? JSF und GWT!

Komponentenbaum

Label label = new Label("Name:");

TextBox textbox = new TextBox();textbox.setText("Christian");

FlowPanel panel = new FlowPanel();panel.add(label);panel.add(textbox);

RootPanel.get().add(panel);

Page 36: JSF vs. GWT? JSF und GWT!

Eigene Komponenten

<input type="input" placeholder="Enter email" />

Page 37: JSF vs. GWT? JSF und GWT!

Eigene Komponenten

public class Html5TextBox extends TextBox {

public void setPlaceholder(String value) { getElement().setPropertyString("placeholder", value); }

public String getPlaceholder() { return getElement().getPropertyString("placeholder"); }

}

Page 38: JSF vs. GWT? JSF und GWT!

Für uns interessant...<input id="foobar" type="text" />

Element element = Document.get().getElementById("foobar");

TextBox textBox = TextBox.wrap(element);

textBox.addChangeHandler(new ChangeHandler() { @Override public void onChange(ChangeEvent event) { // ... }});

Page 39: JSF vs. GWT? JSF und GWT!

Was heißt das?

• Zugriff auf DOM Element der JSF Komponenten ist einfach möglich

• Erlaubt uns...– ... aktuelle Werte zu lesen– ... den Zustand zu verändern– ... Listener zu registrieren

Page 40: JSF vs. GWT? JSF und GWT!

JSNI(JavaScript Native Interface)

Page 41: JSF vs. GWT? JSF und GWT!

„We think of JSNI as the web equivalent of inline

assembly code.“

Quelle: http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html

Page 42: JSF vs. GWT? JSF und GWT!

JSNI Beispiel public void someMethod() {

sayHello(); }

private native void sayHello() /*-{

alert('Hello World!');

}-*/;

Page 43: JSF vs. GWT? JSF und GWT!

Beispiel: jQuery Integration

public void someMethod() {

fadeOut("foobar");

}

private native void fadeOut(String className) /*-{

$wnd.jQuery('.' + className).hide(800);

}-*/;

Page 44: JSF vs. GWT? JSF und GWT!

Overlay Types

public native <????????> getKonferenz() /*-{

var konferenz = { name : 'JAX', jahr : 2014 }; return konferenz;

}-*/;

Page 45: JSF vs. GWT? JSF und GWT!

Overlay Typespublic class Konferenz extends JavaScriptObject {

protected Konferenz() {}

public final native String getName() /*-{ return this.name; }-*/;

public final native int getJahr() /*-{ return this.jahr; }-*/;

}

Page 46: JSF vs. GWT? JSF und GWT!

Overlay Typespublic native Konferenz getKonferenz() /*-{

// ...

}-*/;

public void someMethod() {

Konferenz konferenz = getKonferenz();

Window.alert("Hello " + konferenz.getName());

}

Page 47: JSF vs. GWT? JSF und GWT!

Was heißt das?

• Einbindung von JavaScript Komponenten problemlos möglich

• Overlay Types erlauben:– Zugriff auf JavaScript Objekte– „Parsen“ von JSON Dokumenten

Page 48: JSF vs. GWT? JSF und GWT!

Remoting

Page 49: JSF vs. GWT? JSF und GWT!

Optionen für Remoting

• Standard GWT– GWT RPC– RequestBuilder– ...

• 3rd Party Bibliotheken– RestyGWT– ...

Page 50: JSF vs. GWT? JSF und GWT!

GWT RPC

• RPC Framework auf Basis von Servlets• Pro:

– Standard GWT– Geteilte Modellobjekte

• Contra:– Proprietäres Datenformat (kein JSON)– Relativ viele Klassen– Performance

Page 51: JSF vs. GWT? JSF und GWT!

RequestBuilder

• Für GWT optimierter HTTP Client• Pro:

– Standard GWT– Nutzung von Standard JSON APIs

• Contra:– Benötigt Overlay Types– Manuelles Erstellen der URL

Page 52: JSF vs. GWT? JSF und GWT!
Page 53: JSF vs. GWT? JSF und GWT!

JAX-RS Resource@Path("/")public class ZutatenResource {

@GET @Path("/zutat/{name}") @Produces("application/json") public Zutat getByName( @PathParam("name") String name) {

// ...

}

}

Page 54: JSF vs. GWT? JSF und GWT!

JAX-RS Resource

Page 55: JSF vs. GWT? JSF und GWT!

RestyGWT Clientpublic interface ZutatenClient extends RestService {

@GET @Path("/zutat/{name}") public void getByName( @PathParam("name") String name, MethodCallback<Zutat> callback);

}

Page 56: JSF vs. GWT? JSF und GWT!

RestyGWT ClientZutatenClient client = GWT.create(ZutatenClient.class);

client.getArtikel("Zucker", new MethodCallback<Zutat>() {

@Override public void onSuccess(Method method, Zutat response) { // ... }

@Override public void onFailure(Method method, Throwable e) { // ... }

});

Page 57: JSF vs. GWT? JSF und GWT!

Zusammenfassung

GWT RPC

RequestBuilder

RestyGWT

Standard GWT + + -

Shared Model Classes + - +

JSON via JAX-RS - + +

Page 58: JSF vs. GWT? JSF und GWT!

Was heißt das?

• Kommunikation mit dem Server auf verschiedene Arten möglich

• Wir verwenden RestyGWT:– Nutzung von JAX-RS– Modellobjekte als Shared Code

• Funktioniert auch mit JPA Entitäten!

– Stark typisierte Client API

Page 59: JSF vs. GWT? JSF und GWT!

Time for...Source Code!

Page 60: JSF vs. GWT? JSF und GWT!

Fazit

• JSF & GWT lassen sich kombinieren• Keine „Lösung für Alles“• Kann sinnvoll sein, wenn...

– geteilter Code benötigt wird– bestehende JSF Anwendungen mehr

„Interaktivität“ benötigen– Typensicherheit gewünscht wird

Page 61: JSF vs. GWT? JSF und GWT!
Page 62: JSF vs. GWT? JSF und GWT!

Vielen Dank für die Aufmerksamkeit!

https://github.com/chkal/jax14-jsf-gwt

Christian [email protected] @chkal