jsf vs. gwt? jsf und gwt!
DESCRIPTION
Slides of the JAX 2014 talkTRANSCRIPT
![Page 1: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/1.jpg)
Christian Kaltepoth | ingenit GmbH & Co. KG
JSF vs. GWT? JSF und GWT!
![Page 2: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/2.jpg)
![Page 3: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/3.jpg)
![Page 4: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/4.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/5.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/6.jpg)
Ein Blick über den Tellerrand...
![Page 7: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/7.jpg)
GWT[ i t]ɡʉˑ ˑ
![Page 8: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/8.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/9.jpg)
GWT Compiler
Was ist GWT?
![Page 10: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/10.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/11.jpg)
Server Client
Shared Code!
![Page 12: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/12.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/13.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/14.jpg)
Ist GWT überhaupt noch„State of the Art“?
![Page 15: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/15.jpg)
Google Sheets
![Page 16: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/16.jpg)
Google Shopping Express
![Page 17: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/17.jpg)
Evernote
![Page 18: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/18.jpg)
„Hello World!“ mit GWT
DEMO
![Page 19: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/19.jpg)
Kann man JSF und GWT kombinieren?
Ja, das geht! ☺
![Page 20: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/20.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/21.jpg)
JSF + GWT
Eine Beispielanwendung
![Page 22: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/22.jpg)
![Page 23: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/23.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/24.jpg)
Sprint 23: Einkaufspreise
![Page 25: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/25.jpg)
Featurewunsch
„Graphische Aufbereitung der Auswirkungen
von Einkaufspreisveränderung auf die Herstellungskosten
der betroffenen Artikel.“
![Page 26: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/26.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/27.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/28.jpg)
BMS DEMO
![Page 29: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/29.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/30.jpg)
GWT Components
![Page 31: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/31.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/32.jpg)
Klassenhierarchie
Quelle: Book of Vaadin - https://vaadin.com/book/
![Page 33: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/33.jpg)
Beispiel: PasswordTextBox
![Page 34: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/34.jpg)
GWT Components
• Basic: – Button– RadioButton– Checkbox– Textbox– Textarea– Listbox– ...
• Advanced:– DatePicker– MenuBar– Tree– SuggestBox– CellTable– Dialog– ...
![Page 35: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/35.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/36.jpg)
Eigene Komponenten
<input type="input" placeholder="Enter email" />
![Page 37: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/37.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/38.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/39.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/40.jpg)
JSNI(JavaScript Native Interface)
![Page 41: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/41.jpg)
„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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/42.jpg)
JSNI Beispiel public void someMethod() {
sayHello(); }
private native void sayHello() /*-{
alert('Hello World!');
}-*/;
![Page 43: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/43.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/44.jpg)
Overlay Types
public native <????????> getKonferenz() /*-{
var konferenz = { name : 'JAX', jahr : 2014 }; return konferenz;
}-*/;
![Page 45: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/45.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/46.jpg)
Overlay Typespublic native Konferenz getKonferenz() /*-{
// ...
}-*/;
public void someMethod() {
Konferenz konferenz = getKonferenz();
Window.alert("Hello " + konferenz.getName());
}
![Page 47: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/47.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/48.jpg)
Remoting
![Page 49: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/49.jpg)
Optionen für Remoting
• Standard GWT– GWT RPC– RequestBuilder– ...
• 3rd Party Bibliotheken– RestyGWT– ...
![Page 50: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/50.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/51.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/52.jpg)
![Page 53: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/53.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/54.jpg)
JAX-RS Resource
![Page 55: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/55.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/56.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/57.jpg)
Zusammenfassung
GWT RPC
RequestBuilder
RestyGWT
Standard GWT + + -
Shared Model Classes + - +
JSON via JAX-RS - + +
![Page 58: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/58.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/59.jpg)
Time for...Source Code!
![Page 60: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/60.jpg)
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!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/61.jpg)
![Page 62: JSF vs. GWT? JSF und GWT!](https://reader035.vdokument.com/reader035/viewer/2022081720/54799afe5906b5a8048b474a/html5/thumbnails/62.jpg)
Vielen Dank für die Aufmerksamkeit!
https://github.com/chkal/jax14-jsf-gwt
Christian [email protected] @chkal