Wieviel Client braucht das Web?
Enterprise UI mit JSF, Vaadin und AngularJS
Java User Group Hamburg
07.12.2016
Dirk Weil, ...
Dirk Weil
GEDOPLAN GmbH, Bielefeld
GEDOPLAN IT Consulting
Konzeption, Realisierung von IT-Lösungen
GEDOPLAN IT Training
Se...
Ziele / Inhalt
Einführung in die Anwendung / Java EE Backend
Vorstellung der Frameworks
Java Server Faces (JSF)
Vaadin
Ang...
Einführung in die Anwendung / Java EE Backend
Datenbasis:
Microsoft Northwind
Technische Basis: Java EE 7
Fachobjekte (Cus...
Einführung in die Anwendung / Java EE Backend
Wieviel Client braucht das Web? 5
Browser
JavaServer Faces
Webservice
(JAX-R...
Java Server Faces (JSF)
Model-View-Controller-Pattern
Im Java-EE-Standard seit 2004
Komponentenmodell für das GUI von Web-...
JSF - View
Wieviel Client braucht das Web? 7
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/...
JSF - Controller
Wieviel Client braucht das Web? 8
@Named
@RequestScoped
public class AuthenticateController {
private Str...
JSF – Vorgehensweise / Besonderheiten
Model-Controller als Bindeglied zu Views
CDI Beans
Diverse Scopes verfügbar (Request...
JSF – Vorgehensweise / Besonderheiten
Domänenobjekte können direkt genutzt werden ( DTOs unnötig)
Zentrales Error Handlin...
Vaadin
Open Source Java Framework für Rich-Internet-Applications
Entwickelt von der Firma Vaadin Ltd.
Aufbau der Oberfläch...
Vaadin - UI
Wieviel Client braucht das Web? 12
@CDIUI("login")
public class LoginUi extends UI {
protected void init(Vaadi...
Vaadin – Databinding (optional)
Wieviel Client braucht das Web? 13
public class LoginUi extends UI {
@PropertyId("user")
p...
Vaadin – Vorgehensweise / Besonderheiten
UI-Aufbau durch UI-Klassen
Aggregation von Widget-Objekten
URL-Mapping per Annota...
Vaadin – Vorgehensweise / Besonderheiten
SPA im Browser-Tab
Navigation zwischen Views mit bookmarkfähigen URLs
Error Handl...
Angular JS
Open Source JavaScript-Webframework
RIA - Rich Internet Application
SPA – Single Page Application
entwickelt vo...
AngularJS - View
Wieviel Client braucht das Web? 17
<form class="form-signin">
<input type="text" ng-model="vm.username"
p...
Angular – Controller, Navigation
Wieviel Client braucht das Web? 18
angular.module('GedoplanWebClients.login', [])
.contro...
Angular – Vorgehensweise / Besonderheiten
UI-Aufbau durch HTML-Dateien
Verwendung von Expressions
Aggregation durch Direct...
Angular – Vorgehensweise / Besonderheiten
SPA
Navigation zwischen Views mit bookmarkfähigen URLs
Zustandstandslos
Erweiter...
Technologie-Mix
Wieviel Client braucht das Web? 21
1 2 3
Backend GUI
JSF
Java EE
• HTML-ähnliche Templatesprache, Facelets...
Trennung Design / Präsentationslogik
Wieviel Client braucht das Web? 22
JSF • JSF-eigene Tags
• Templates
Vaadin • enge Ve...
Erweiterbarkeit
Wieviel Client braucht das Web? 23
JSF • eigene Composite Components
• Komponenten-Frameworks (z.B. PrimeF...
Backend Integration
Wieviel Client braucht das Web? 24
JSF • Controller im Backend-Prozess
• Zugriff auf Services durch CD...
Investitionssicherheit
Wieviel Client braucht das Web? 25
JSF • Standard Java EE
• Abwärtskompatibel bis Version 1.0
• Aus...
Kommunikation
Wieviel Client braucht das Web? 26
JSF • Format: HTML / XML
• User-Interaktionen lösen Requests aus
Vaadin •...
Ressourcen-Nutzung
Wieviel Client braucht das Web? 27
1 2 2
gedoplan.de
JSF • Rendering / View-Aufbau: Serverseitig
• Requ...
Build-Prozess
Wieviel Client braucht das Web? 28
JSF • gleiche Build-Tools wie für das Backend
• Maven, Gradle, …Vaadin
An...
Lernkurve (on top of Java EE)
Wieviel Client braucht das Web? 29
JSF • Facelets
• Komponenten-Bibliotheken
Vaadin • Spezif...
UI Testing
Wieviel Client braucht das Web? 30
JSF • Deployment auf Application Server notwendig
• komplexes Test-Setup (z....
Demo-Projekt
https://github.com/GEDOPLAN/webclients-check
Wieviel Client braucht das Web? 31gedoplan.de
More
https://www.slideshare.net/gedoplan/wieviel-client-
braucht-das-web-69901049
Präsentation zum Download
http://www.ged...
Nächste SlideShare
Wird geladen in …5
×

Wieviel Client braucht das Web?

91 Aufrufe

Veröffentlicht am

Präsentation zum Vortrag
Java User Group Hamburg
2016-12-07

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

  • Gehören Sie zu den Ersten, denen das gefällt!

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

Keine Notizen für die Folie

Wieviel Client braucht das Web?

  1. 1. Wieviel Client braucht das Web? Enterprise UI mit JSF, Vaadin und AngularJS Java User Group Hamburg 07.12.2016 Dirk Weil, GEDOPLAN GmbH
  2. 2. Dirk Weil GEDOPLAN GmbH, Bielefeld GEDOPLAN IT Consulting Konzeption, Realisierung von IT-Lösungen GEDOPLAN IT Training Seminare in Berlin, Bielefeld, on-site Java EE seit 1998 Vorträge, Veröffentlichungen Wieviel Client braucht das Web? 2gedoplan.de
  3. 3. Ziele / Inhalt Einführung in die Anwendung / Java EE Backend Vorstellung der Frameworks Java Server Faces (JSF) Vaadin AngularJS Check Up Fazit Wieviel Client braucht das Web? 3gedoplan.de
  4. 4. Einführung in die Anwendung / Java EE Backend Datenbasis: Microsoft Northwind Technische Basis: Java EE 7 Fachobjekte (Customer, Order, …): JPA DB-Zugriff (CustomerRepository, …): CDI Services (OrderService, …): EJB mit Role based Security Wieviel Client braucht das Web? 4gedoplan.de
  5. 5. Einführung in die Anwendung / Java EE Backend Wieviel Client braucht das Web? 5 Browser JavaServer Faces Webservice (JAX-RS) Vaadin Services Respositories Präsentationsschicht / Schnittstellen Geschäftslogik Datenbank JavaEEServer AngularJS (Browser) Client gedoplan.de
  6. 6. Java Server Faces (JSF) Model-View-Controller-Pattern Im Java-EE-Standard seit 2004 Komponentenmodell für das GUI von Web-Anwendungen Wieviel Client braucht das Web? 6gedoplan.de Application-Server Renderer Views, xhtml Browser Controller, CDI Beans HTML, JavaScript Services
  7. 7. JSF - View Wieviel Client braucht das Web? 7 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:form> <h:outputLabel value="#{msg.login_name}"/> <h:inputText value="#{authenticateController.loginname}"/> <h:outputLabel value="#{msg.login_password}"/> <h:inputSecret value="#{authenticateController.password}"/> <h:commandButton action="#{authenticateController.login}" value="#{msg.login_submit}" /> </h:form> </html> gedoplan.de
  8. 8. JSF - Controller Wieviel Client braucht das Web? 8 @Named @RequestScoped public class AuthenticateController { private String loginname; private Sring password; public String login() { ... return "home"; } gedoplan.de
  9. 9. JSF – Vorgehensweise / Besonderheiten Model-Controller als Bindeglied zu Views CDI Beans Diverse Scopes verfügbar (Request, Session, Flow, View, …) Einbindung des Backends mittels Injektion Serverseitige View Definition Facelets (austauschbar) Bindung an Model-Controller mit EL Multipage Navigation mit zentralem Handler, wenn gewünscht Request / Rendering partiell mit AJAX ( auch SPA möglich) Wieviel Client braucht das Web? 9gedoplan.de
  10. 10. JSF – Vorgehensweise / Besonderheiten Domänenobjekte können direkt genutzt werden ( DTOs unnötig) Zentrales Error Handling möglich I.d.R. zusätzliche Komponentenbibliotheken nötig Addieren Komplexität Addieren proprietäre Stile, JS, … JS im Browser möglich Nicht speziell unterstützt Wieviel Client braucht das Web? 10gedoplan.de
  11. 11. Vaadin Open Source Java Framework für Rich-Internet-Applications Entwickelt von der Firma Vaadin Ltd. Aufbau der Oberflächen auf Serverseite in Java (ähnlich wie Swing) JavaScript-Engine im Browser als Thin-Client Wieviel Client braucht das Web? 11gedoplan.de Application-Server Services Views, Java Client, Browser JavaScript Engine Widgets Komponenten Daten, Java Beans Synchronisiert durch Framework (JSON)
  12. 12. Vaadin - UI Wieviel Client braucht das Web? 12 @CDIUI("login") public class LoginUi extends UI { protected void init(VaadinRequest request) { TextField name = new TextField(…); PasswordField password = new PasswordField(…); Button login = new Button(…, e -> {login… }); FormLayout fieldLayout = new FormLayout(name, password, login); Panel loginPanel = new Panel(…, fieldLayout); VerticalLayout page = new VerticalLayout(); page.addComponent(loginPanel); setContent(page); } } gedoplan.de
  13. 13. Vaadin – Databinding (optional) Wieviel Client braucht das Web? 13 public class LoginUi extends UI { @PropertyId("user") private TextField loginUser; @PropertyId("password") private PasswordField loginPassword; private LoginBean loginBean = new LoginBean(); protected void init(VaadinRequest request) { BeanFieldGroup<LoginBean> bfg = new BeanFieldGroup<>(LoginBean.class); bfg.buildAndBindMemberFields(this); bfg.setItemDataSource(loginBean); } } public class LoginBean { private String user; private String password; // Getter + Setter } gedoplan.de
  14. 14. Vaadin – Vorgehensweise / Besonderheiten UI-Aufbau durch UI-Klassen Aggregation von Widget-Objekten URL-Mapping per Annotation / Servlet Listener-Konzept Service-Einbindung mittels Injektion Direkte Bindung an Domänenobjekte möglich (ohne DTOs) Clientseitiges Rendering auf Basis serverseitiger Präsentationsdaten Widgets werden initial in Browser (Tab) geladen Anschließend nur Aktualisierung von Struktur und Daten Wieviel Client braucht das Web? 14gedoplan.de
  15. 15. Vaadin – Vorgehensweise / Besonderheiten SPA im Browser-Tab Navigation zwischen Views mit bookmarkfähigen URLs Error Handling, Converter etc. können zentral registriert werden Erweiterbarkeit über eigene Aggregationen von vorhandenen Komponenten durch Entwurf zusätzliche GWT-basierter Widgets mittels Skripting und HTML-Templates durch Komponentenbibliotheken (teilweise kommerziell) Wieviel Client braucht das Web? 15gedoplan.de
  16. 16. Angular JS Open Source JavaScript-Webframework RIA - Rich Internet Application SPA – Single Page Application entwickelt von Google Wieviel Client braucht das Web? 16gedoplan.de Browser JAX-RS Services Application-Server Views, html Controller, JavaScript JSON
  17. 17. AngularJS - View Wieviel Client braucht das Web? 17 <form class="form-signin"> <input type="text" ng-model="vm.username" placeholder="{{'login.username' | translate}}" /> <input type="password" ng-model="vm.password" placeholder="{{'login.password' | translate}}" /> <button ng-click="vm.login()"> {{'actions.login' | translate}} </button> </form> gedoplan.de
  18. 18. Angular – Controller, Navigation Wieviel Client braucht das Web? 18 angular.module('GedoplanWebClients.login', []) .controller("login", function (userService, $translate, $state, $timeout) { var vm = this; vm.login = function () {…}; vm.logout = function () {…}; } $stateProvider .state('login', { url: '/login', templateUrl: 'components/login/login.html', controller: 'login', controllerAs: 'vm' }) gedoplan.de
  19. 19. Angular – Vorgehensweise / Besonderheiten UI-Aufbau durch HTML-Dateien Verwendung von Expressions Aggregation durch Directives Service-Einbindung mittels Schnittstelle (z.B. REST) DTOs oder JSON-Mapper notwendig Clientseitiges Rendering auf Basis statischer HTML-Seiten dynamische Manipulation durch Controller-Bindings Wieviel Client braucht das Web? 19gedoplan.de
  20. 20. Angular – Vorgehensweise / Besonderheiten SPA Navigation zwischen Views mit bookmarkfähigen URLs Zustandstandslos Erweiterbarkeit über eigene Aggregationen von vorhandenen Komponenten durch Angular-spezifische Komponenten durch JavaScript-Komponenten Wieviel Client braucht das Web? 20gedoplan.de
  21. 21. Technologie-Mix Wieviel Client braucht das Web? 21 1 2 3 Backend GUI JSF Java EE • HTML-ähnliche Templatesprache, Facelets • CSS-Kenntnisse in aller Regel notwendig Vaadin • Java (ähnlich Swing/JavaFX) • CSS- und JavaScript-Kenntnisse nur optional und für eigene Komponenten AngularJS • tiefe Kenntnisse in JavaScript, CSS, HTML nötig gedoplan.de
  22. 22. Trennung Design / Präsentationslogik Wieviel Client braucht das Web? 22 JSF • JSF-eigene Tags • Templates Vaadin • enge Verbindung durch programmatischen Ansatz • Abstraktion durch Vaadin-Designer (kostenpflichtig) AngularJS • reine HTML-Templates mit Angular Markup • Controller der View konfigurierbar • vollständige Projekt-Trennung möglich 1 2 2 gedoplan.de
  23. 23. Erweiterbarkeit Wieviel Client braucht das Web? 23 JSF • eigene Composite Components • Komponenten-Frameworks (z.B. PrimeFaces) Vaadin • Komposition durch Erweiterung der Standardklassen • eigene Komponenten bspw. durch JavaScript Extensions AngularJS • beliebige JavaScript-Komponenten (z. B. Bootstrap, JQuery) 1 2 2 gedoplan.de
  24. 24. Backend Integration Wieviel Client braucht das Web? 24 JSF • Controller im Backend-Prozess • Zugriff auf Services durch CDI Injection • keine externe Schnittstelle notwendig Vaadin AngularJS • Zugriff über externe Schnittstellen • Datenaustausch z.B. über JAX-RS in JSON 1 1 2 gedoplan.de
  25. 25. Investitionssicherheit Wieviel Client braucht das Web? 25 JSF • Standard Java EE • Abwärtskompatibel bis Version 1.0 • Ausgenommen: Komponentenframeworks Vaadin • proprietär • bei großen Versionssprüngen keine stabile APIAngularJS 1 2 2 gedoplan.de
  26. 26. Kommunikation Wieviel Client braucht das Web? 26 JSF • Format: HTML / XML • User-Interaktionen lösen Requests aus Vaadin • Format: JSON (inklusive View-Informationen) • User-Interaktionen lösen Requests aus AngularJS • Format: JSON (reine Daten) • keine Requests bei Validierung und GUI-Logik 1 2 2 gedoplan.de
  27. 27. Ressourcen-Nutzung Wieviel Client braucht das Web? 27 1 2 2 gedoplan.de JSF • Rendering / View-Aufbau: Serverseitig • Request-Größe ~ HTML-Fragmente Vaadin • View-Aufbau: Server • Rendering: Clientseitig • Request-Größe ~ View-Informationen AngularJS • Rendering / „View-Aufbau“: Clientseitig • JSON Daten-Requests + eigener HTML-Template-Cache
  28. 28. Build-Prozess Wieviel Client braucht das Web? 28 JSF • gleiche Build-Tools wie für das Backend • Maven, Gradle, …Vaadin AngularJS • eigenständige Build-Tools / Scripte • größere Anzahl an Möglichkeiten • NPM, Bower, Grunt, Gulp, Webpack, Browsify, … 1 1 2 gedoplan.de
  29. 29. Lernkurve (on top of Java EE) Wieviel Client braucht das Web? 29 JSF • Facelets • Komponenten-Bibliotheken Vaadin • Spezifische API AngularJS • JavaScript, HTML, CSS • Build Tools 1 2 3 gedoplan.de
  30. 30. UI Testing Wieviel Client braucht das Web? 30 JSF • Deployment auf Application Server notwendig • komplexes Test-Setup (z. B. Arquillian)Vaadin AngularJS • schnelles Setup dank Angular-spezifischem Test Framework • einfaches Mocken von HTTP Requests • HTTP Server reicht 1 2 2 gedoplan.de
  31. 31. Demo-Projekt https://github.com/GEDOPLAN/webclients-check Wieviel Client braucht das Web? 31gedoplan.de
  32. 32. More https://www.slideshare.net/gedoplan/wieviel-client- braucht-das-web-69901049 Präsentation zum Download http://www.gedoplan-it-training.de Seminare in Berlin, Bielefeld, Inhouse http://www.gedoplan-it-consulting.de Reviews, Coaching, … Blog  dirk.weil@gedoplan.de @dirkweil Wieviel Client braucht das Web? 32gedoplan.de

×