JSF vs. GWT? JSF und GWT!

Click here to load reader

  • date post

    28-Nov-2014
  • Category

    Technology

  • view

    618
  • download

    0

Embed Size (px)

description

Slides of the JAX 2014 talk

Transcript of JSF vs. GWT? JSF und GWT!

  • 1. Christian Kaltepoth | ingenit GmbH & Co. KG JSF vs. GWT? JSF und GWT!
  • 2. JavaServer Faces Bodenstndige Technologie Formularbasierte Anwendungen Data Lifecycle z.B. Konvertierung + Validierung Mchtige Komponenten Support fr AJAX, HTML5, etc.
  • 3. 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
  • 4. Ein Blick ber den Tellerrand...
  • 5. GWT [ i t]
  • 6. GWT Development toolkit for building [...] complex browser-based applications Verffentlicht 2006 Geleitet von: 2006-2012: Google Seit 2012: Steering Committee
  • 7. GWT Compiler Was ist GWT?
  • 8. Warum GWT statt JavaScript? Java als etablierte Sprache Gewohntes Tooling IDE, Build Tools, Testing, .... Starke Typisierung Compiler Checks, Static Code Analysis, ... GWT kmmert sich um: DOM Garbage Collection Inkompatibilitten zwischen Browsern
  • 9. Server Client Shared Code!
  • 10. GWT GWT Compiler Client Bundles Deferred Binding RequestBuilder I18N Logging UI Components RequestFactory Testing GWT-RPC UI Binder Editors JSNI Code Splitting
  • 11. GWT GWT Compiler Client Bundles Deferred Binding RequestBuilder I18N Logging UI Components RequestFactory Testing GWT-RPC UI Binder Editors JSNI Code Splitting
  • 12. Ist GWT berhaupt noch State of the Art?
  • 13. Google Sheets
  • 14. Google Shopping Express
  • 15. Evernote
  • 16. Hello World! mit GWT DEMO
  • 17. Kann man JSF und GWT kombinieren? Ja, das geht!
  • 18. JSF & GWT Das Ziel: Clientseitige Funktionalitt Mehr Interaktivitt User Experience Die Herausforderung: Interaktion mit JSF Komponenten JSF Lifecycle nicht beeinflussen
  • 19. JSF + GWT Eine Beispielanwendung
  • 20. Was ist das BMS? Bckerei Verwaltungssoftware JEE7 Anwendung mit JSF 2.2 Artikelmanagement Stammdaten, Kosten, Preise, ... Rezeptverwaltung Berechnung der Produktionskosten
  • 21. Sprint 23: Einkaufspreise
  • 22. Featurewunsch Graphische Aufbereitung der Auswirkungen von Einkaufspreisvernderung auf die Herstellungskosten der betroffenen Artikel.
  • 23. Probleme Kostenberechnung im Backend! JavaScript Komponente sinnvoll! Interaktivitt (Tooltips, etc.) Berechnung auf dem Server? RTT problematisch! Neuimplementierung der Berechnungslogik in JavaScript?
  • 24. Lsungsansatz Implementierung mittels GWT Eingaben aus JSF Komponenten auf dem Client auslesen Berechnungslogik als Shared Code Nutzung von JavaScript Chart Library fr die Grafik (d3.js)
  • 25. BMS DEMO
  • 26. Was brauchen wir? Interaktion mit JSF Komponenten GWT Components Integration der JavaScript Library JSNI Kommunikation mit Server Remoting
  • 27. GWT Components
  • 28. GWT Components Realisiert als einfache Klassen Unterklassen von Widget Tiefe Vererbungshierarchie Verschiedene Typen: Widgets / Panels / Composites Component > DOM Element + Kinder
  • 29. Klassenhierarchie Quelle: Book of Vaadin - https://vaadin.com/book/
  • 30. Beispiel: PasswordTextBox
  • 31. GWT Components Basic: Button RadioButton Checkbox Textbox Textarea Listbox ... Advanced: DatePicker MenuBar Tree SuggestBox CellTable Dialog ...
  • 32. 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);
  • 33. Eigene Komponenten
  • 34. Eigene Komponenten public class Html5TextBox extends TextBox { public void setPlaceholder(String value) { getElement().setPropertyString("placeholder", value); } public String getPlaceholder() { return getElement().getPropertyString("placeholder"); } }
  • 35. Fr uns interessant... Element element = Document.get().getElementById("foobar"); TextBox textBox = TextBox.wrap(element); textBox.addChangeHandler(new ChangeHandler() { @Override public void onChange(ChangeEvent event) { // ... } });
  • 36. Was heit das? Zugriff auf DOM Element der JSF Komponenten ist einfach mglich Erlaubt uns... ... aktuelle Werte zu lesen ... den Zustand zu verndern ... Listener zu registrieren
  • 37. JSNI (JavaScript Native Interface)
  • 38. We think of JSNI as the web equivalent of inline assembly code. Quelle: http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html
  • 39. JSNI Beispiel public void someMethod() { sayHello(); } private native void sayHello() /*-{ alert('Hello World!'); }-*/;
  • 40. Beispiel: jQuery Integration public void someMethod() { fadeOut("foobar"); } private native void fadeOut(String className) /*-{ $wnd.jQuery('.' + className).hide(800); }-*/;
  • 41. Overlay Types public native getKonferenz() /*-{ var konferenz = { name : 'JAX', jahr : 2014 }; return konferenz; }-*/;
  • 42. 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; }-*/; }
  • 43. Overlay Types public native Konferenz getKonferenz() /*-{ // ... }-*/; public void someMethod() { Konferenz konferenz = getKonferenz(); Window.alert("Hello " + konferenz.getName()); }
  • 44. Was heit das? Einbindung von JavaScript Komponenten problemlos mglich Overlay Types erlauben: Zugriff auf JavaScript Objekte Parsen von JSON Dokumenten
  • 45. Remoting
  • 46. Optionen fr Remoting Standard GWT GWT RPC RequestBuilder ... 3rd Party Bibliotheken RestyGWT ...
  • 47. GWT RPC RPC Framework auf Basis von Servlets Pro: Standard GWT Geteilte Modellobjekte Contra: Proprietres Datenformat (kein JSON) Relativ viele Klassen Performance
  • 48. RequestBuilder Fr GWT optimierter HTTP Client Pro: Standard GWT Nutzung von Standard JSON APIs Contra: Bentigt Overlay Types Manuelles Erstellen der URL
  • 49. JAX-RS Resource @Path("/") public class ZutatenResource { @GET @Path("/zutat/{name}") @Produces("application/json") public Zutat getByName( @PathParam("name") String name) { // ... } }
  • 50. JAX-RS Resource
  • 51. RestyGWT Client public interface ZutatenClient extends RestService { @GET @Path("/zutat/{name}") public void getByName( @PathParam("name") String name, MethodCallback callback); }
  • 52. RestyGWT Client ZutatenClient client = GWT.create(ZutatenClient.class); client.getArtikel("Zucker", new MethodCallback() { @Override public void onSuccess(Method method, Zutat response) { // ... } @Override public void onFailure(Method method, Throwable e) { // ... } });
  • 53. Zusammenfassung GWT RPC Request Builder Resty GWT Standard GWT + + - Shared Model Classes + - + JSON via JAX-RS - + +
  • 54. Was heit das? Kommunikation mit dem Server auf verschiedene Arten mglich Wir verwenden RestyGWT: Nutzung von JAX-RS Modellobjekte als Shared Code Funktioniert auch mit JPA Entitten! Stark typisierte Client API
  • 55. Time for... Source Code!
  • 56. Fazit JSF & GWT lassen sich kombinieren Keine Lsung fr Alles Kann sinnvoll sein, wenn... geteilter Code bentigt wird bestehende JSF Anwendungen mehr Interaktivitt bentigen Typensicherheit gewnscht wird
  • 57. Vielen Dank fr die Aufmerksamkeit! https://github.com/chkal/jax14-jsf-gwt Christian Kaltepoth [email protected] @chkal