JSF vs. GWT? JSF und GWT!

1.669 Aufrufe

Veröffentlicht am

Slides of the JAX 2014 talk

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.669
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
14
Aktionen
Geteilt
0
Downloads
13
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

JSF vs. GWT? JSF und GWT!

  1. 1. Christian Kaltepoth | ingenit GmbH & Co. KG JSF vs. GWT? JSF und GWT!
  2. 2. JavaServer Faces • „Bodenständige Technologie“ • Formularbasierte Anwendungen • Data Lifecycle – z.B. Konvertierung + Validierung • Mächtige Komponenten • Support für AJAX, HTML5, etc.
  3. 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. 4. Ein Blick über den Tellerrand...
  5. 5. GWT [ i t]ɡʉˑ ˑ
  6. 6. GWT • „Development toolkit for building [...] complex browser-based applications“ • Veröffentlicht 2006 • Geleitet von: – 2006-2012: Google – Seit 2012: Steering Committee
  7. 7. GWT Compiler Was ist GWT?
  8. 8. 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
  9. 9. Server Client Shared Code!
  10. 10. GWT • GWT Compiler • Client Bundles • Deferred Binding • RequestBuilder • I18N • Logging • UI Components • RequestFactory • Testing • GWT-RPC • UI Binder • Editors • JSNI • Code Splitting
  11. 11. GWT • GWT Compiler • Client Bundles • Deferred Binding • RequestBuilder • I18N • Logging • UI Components • RequestFactory • Testing • GWT-RPC • UI Binder • Editors • JSNI • Code Splitting
  12. 12. Ist GWT überhaupt noch „State of the Art“?
  13. 13. Google Sheets
  14. 14. Google Shopping Express
  15. 15. Evernote
  16. 16. „Hello World!“ mit GWT DEMO
  17. 17. Kann man JSF und GWT kombinieren? Ja, das geht! ☺
  18. 18. JSF & GWT • Das Ziel: – Clientseitige Funktionalität – Mehr Interaktivität – User Experience • Die Herausforderung: – Interaktion mit JSF Komponenten – JSF Lifecycle nicht beeinflussen
  19. 19. JSF + GWT Eine Beispielanwendung
  20. 20. Was ist das BMS? • Bäckerei Verwaltungssoftware • JEE7 Anwendung mit JSF 2.2 • Artikelmanagement – Stammdaten, Kosten, Preise, ... • Rezeptverwaltung • Berechnung der Produktionskosten
  21. 21. Sprint 23: Einkaufspreise
  22. 22. Featurewunsch „Graphische Aufbereitung der Auswirkungen von Einkaufspreisveränderung auf die Herstellungskosten der betroffenen Artikel.“
  23. 23. Probleme • Kostenberechnung im Backend! • JavaScript Komponente sinnvoll! – Interaktivität (Tooltips, etc.) • Berechnung auf dem Server? – RTT problematisch! • Neuimplementierung der Berechnungslogik in JavaScript?
  24. 24. 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)
  25. 25. BMS DEMO
  26. 26. Was brauchen wir? • Interaktion mit JSF Komponenten ➡ GWT Components • Integration der JavaScript Library ➡ JSNI • Kommunikation mit Server ➡ Remoting
  27. 27. GWT Components
  28. 28. GWT Components • Realisiert als „einfache“ Klassen • Unterklassen von Widget • Tiefe Vererbungshierarchie • Verschiedene Typen: – Widgets / Panels / Composites • Component > DOM Element + Kinder
  29. 29. Klassenhierarchie Quelle: Book of Vaadin - https://vaadin.com/book/
  30. 30. Beispiel: PasswordTextBox
  31. 31. GWT Components • Basic: – Button – RadioButton – Checkbox – Textbox – Textarea – Listbox – ... • Advanced: – DatePicker – MenuBar – Tree – SuggestBox – CellTable – Dialog – ...
  32. 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. 33. Eigene Komponenten <input type="input" placeholder="Enter email" />
  34. 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. 35. 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) { // ... } });
  36. 36. 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
  37. 37. JSNI (JavaScript Native Interface)
  38. 38. „We think of JSNI as the web equivalent of inline assembly code.“ Quelle: http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html
  39. 39. JSNI Beispiel public void someMethod() { sayHello(); } private native void sayHello() /*-{ alert('Hello World!'); }-*/;
  40. 40. Beispiel: jQuery Integration public void someMethod() { fadeOut("foobar"); } private native void fadeOut(String className) /*-{ $wnd.jQuery('.' + className).hide(800); }-*/;
  41. 41. Overlay Types public native <????????> getKonferenz() /*-{ var konferenz = { name : 'JAX', jahr : 2014 }; return konferenz; }-*/;
  42. 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. 43. Overlay Types public native Konferenz getKonferenz() /*-{ // ... }-*/; public void someMethod() { Konferenz konferenz = getKonferenz(); Window.alert("Hello " + konferenz.getName()); }
  44. 44. Was heißt das? • Einbindung von JavaScript Komponenten problemlos möglich • Overlay Types erlauben: – Zugriff auf JavaScript Objekte – „Parsen“ von JSON Dokumenten
  45. 45. Remoting
  46. 46. Optionen für Remoting • Standard GWT – GWT RPC – RequestBuilder – ... • 3rd Party Bibliotheken – RestyGWT – ...
  47. 47. GWT RPC • RPC Framework auf Basis von Servlets • Pro: – Standard GWT – Geteilte Modellobjekte • Contra: – Proprietäres Datenformat (kein JSON) – Relativ viele Klassen – Performance
  48. 48. RequestBuilder • Für GWT optimierter HTTP Client • Pro: – Standard GWT – Nutzung von Standard JSON APIs • Contra: – Benötigt Overlay Types – Manuelles Erstellen der URL
  49. 49. JAX-RS Resource @Path("/") public class ZutatenResource { @GET @Path("/zutat/{name}") @Produces("application/json") public Zutat getByName( @PathParam("name") String name) { // ... } }
  50. 50. JAX-RS Resource
  51. 51. RestyGWT Client public interface ZutatenClient extends RestService { @GET @Path("/zutat/{name}") public void getByName( @PathParam("name") String name, MethodCallback<Zutat> callback); }
  52. 52. 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) { // ... } });
  53. 53. Zusammenfassung GWT RPC Request Builder Resty GWT Standard GWT + + - Shared Model Classes + - + JSON via JAX-RS - + +
  54. 54. 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
  55. 55. Time for... Source Code!
  56. 56. 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
  57. 57. Vielen Dank für die Aufmerksamkeit! https://github.com/chkal/jax14-jsf-gwt Christian Kaltepoth kaltepoth@ingenit.com @chkal

×