Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Wieviel Client braucht das Web?
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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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. 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. 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. 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