Slides of the JAX 2014 talk

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

4. JavaServer Faces
• „Bodenständige Technologie“
• Formularbasierte Anwendungen
• Data Lifecycle
– z.B. Konvertierung + Validierung
• Mächtige Komponenten
• Support für AJAX, HTML5, etc.

5. 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

6. Ein Blick über den
Tellerrand...

7. GWT
[ i t]ɡʉˑ ˑ

8. GWT
• „Development toolkit for building [...]
complex browser-based applications“
• Veröffentlicht 2006
• Geleitet von:
– 2006-2012: Google
– Seit 2012: Steering Committee

9. GWT Compiler
Was ist GWT?

10. 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

11. Server Client
Shared Code!

12. GWT
• GWT Compiler
• Client Bundles
• Deferred Binding
• RequestBuilder
• I18N
• Logging
• UI Components
• RequestFactory
• Testing
• GWT-RPC
• UI Binder
• Editors
• JSNI
• Code Splitting

13. GWT
• GWT Compiler
• Client Bundles
• Deferred Binding
• RequestBuilder
• I18N
• Logging
• UI Components
• RequestFactory
• Testing
• GWT-RPC
• UI Binder
• Editors
• JSNI
• Code Splitting

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

15. Google Sheets

16. Google Shopping Express

17. Evernote

18. „Hello World!“
mit GWT
DEMO

19. Kann man JSF und GWT
kombinieren?
Ja, das geht! ☺

20. JSF & GWT
• Das Ziel:
– Clientseitige Funktionalität
– Mehr Interaktivität
– User Experience
• Die Herausforderung:
– Interaktion mit JSF Komponenten
– JSF Lifecycle nicht beeinflussen

21. JSF + GWT
Eine Beispielanwendung

23. Was ist das BMS?
• Bäckerei Verwaltungssoftware
• JEE7 Anwendung mit JSF 2.2
• Artikelmanagement
– Stammdaten, Kosten, Preise, ...
• Rezeptverwaltung
• Berechnung der Produktionskosten

24. Sprint 23: Einkaufspreise

25. Featurewunsch
„Graphische Aufbereitung
der Auswirkungen
von Einkaufspreisveränderung
auf die Herstellungskosten
der betroffenen Artikel.“

26. Probleme
• Kostenberechnung im Backend!
• JavaScript Komponente sinnvoll!
– Interaktivität (Tooltips, etc.)
• Berechnung auf dem Server?
– RTT problematisch!
• Neuimplementierung der
Berechnungslogik in JavaScript?

27. 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)

28. BMS DEMO

29. Was brauchen wir?
• Interaktion mit JSF Komponenten
➡ GWT Components
• Integration der JavaScript Library
➡ JSNI
• Kommunikation mit Server
➡ Remoting

30. GWT Components

31. GWT Components
• Realisiert als „einfache“ Klassen
• Unterklassen von Widget
• Tiefe Vererbungshierarchie
• Verschiedene Typen:
– Widgets / Panels / Composites
• Component > DOM Element + Kinder

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

33. Beispiel: PasswordTextBox

34. GWT Components
• Basic:
– Button
– RadioButton
– Checkbox
– Textbox
– Textarea
– Listbox
– ...
• Advanced:
– DatePicker
– MenuBar
– Tree
– SuggestBox
– CellTable
– Dialog
– ...

35. 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);

36. Eigene Komponenten
<input type="input" placeholder="Enter email" />

37. Eigene Komponenten
public class Html5TextBox extends TextBox {
public void setPlaceholder(String value) {
getElement().setPropertyString("placeholder", value);
}
public String getPlaceholder() {
return getElement().getPropertyString("placeholder");
}
}

38. 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) {
// ...
}
});

39. 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

40. JSNI
(JavaScript Native Interface)

41. „We think of JSNI as the
web equivalent of inline
assembly code.“
Quelle: http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html

42. JSNI Beispiel
public void someMethod() {
sayHello();
}
private native void sayHello() /*-{
alert('Hello World!');
}-*/;

43. Beispiel: jQuery Integration
public void someMethod() {
fadeOut("foobar");
}
private native void fadeOut(String className) /*-{
$wnd.jQuery('.' + className).hide(800);
}-*/;

44. Overlay Types
public native <????????> getKonferenz() /*-{
var konferenz = {
name : 'JAX',
jahr : 2014
};
return konferenz;
}-*/;

45. Overlay Types
public class Konferenz extends JavaScriptObject {
protected Konferenz() {}
public final native String getName() /*-{
return this.name;
}-*/;
public final native int getJahr() /*-{
return this.jahr;
}-*/;
}

46. Overlay Types
public native Konferenz getKonferenz() /*-{
// ...
}-*/;
public void someMethod() {
Konferenz konferenz = getKonferenz();
Window.alert("Hello " + konferenz.getName());
}

47. Was heißt das?
• Einbindung von JavaScript
Komponenten problemlos möglich
• Overlay Types erlauben:
– Zugriff auf JavaScript Objekte
– „Parsen“ von JSON Dokumenten

48. Remoting

49. Optionen für Remoting
• Standard GWT
– GWT RPC
– RequestBuilder
– ...
• 3rd Party Bibliotheken
– RestyGWT
– ...

50. GWT RPC
• RPC Framework auf Basis von Servlets
• Pro:
– Standard GWT
– Geteilte Modellobjekte
• Contra:
– Proprietäres Datenformat (kein JSON)
– Relativ viele Klassen
– Performance

51. RequestBuilder
• Für GWT optimierter HTTP Client
• Pro:
– Standard GWT
– Nutzung von Standard JSON APIs
• Contra:
– Benötigt Overlay Types
– Manuelles Erstellen der URL

53. JAX-RS Resource
@Path("/")
public class ZutatenResource {
@GET
@Path("/zutat/{name}")
@Produces("application/json")
public Zutat getByName(
@PathParam("name") String name) {
// ...
}
}

54. JAX-RS Resource

55. RestyGWT Client
public interface ZutatenClient extends
RestService {
@GET
@Path("/zutat/{name}")
public void getByName(
@PathParam("name") String name,
MethodCallback<Zutat> callback);
}

56. RestyGWT Client
ZutatenClient 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) {
// ...
}
});

57. Zusammenfassung
GWT
RPC
Request
Builder
Resty
GWT
Standard GWT + + -
Shared Model Classes + - +
JSON via JAX-RS - + +

58. 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

59. Time for...
Source Code!

60. 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

62. Vielen Dank für die
Aufmerksamkeit!
https://github.com/chkal/jax14-jsf-gwt
Christian Kaltepoth
kaltepoth@ingenit.com
@chkal