SlideShare ist ein Scribd-Unternehmen logo
1 von 33
Downloaden Sie, um offline zu lesen
Wieviel Client braucht das Web
JSF, Vaadin und AngularJS im Vergleich
Dominik Mathmann, GEDOPLAN GmbH
Dominik Mathmann
GEDOPLAN GmbH, Bielefeld
GEDOPLAN IT Consulting
Konzeption, Realisierung von IT-Lösungen
GEDOPLAN IT Training
Seminare in Berlin, Bielefeld, on-site
Vorträge, Veröffentlichungen
Wieviel Client braucht das Web? 2gedoplan.de
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
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
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
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
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
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
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
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
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)
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
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
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
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
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
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
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
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
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
32
Check Up
Wieviel Client braucht das Web? 21gedoplan.de
1
Technologie-Mix
Wieviel Client braucht das Web? 22
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
Trennung Design / Präsentationslogik
Wieviel Client braucht das Web? 23
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
Erweiterbarkeit
Wieviel Client braucht das Web? 24
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
Backend Integration
Wieviel Client braucht das Web? 25
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
Investitionssicherheit
Wieviel Client braucht das Web? 26
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
Kommunikation
Wieviel Client braucht das Web? 27
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
Ressourcen-Nutzung
Wieviel Client braucht das Web? 28
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
Build-Prozess
Wieviel Client braucht das Web? 29
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
Lernkurve (on top of Java EE)
Wieviel Client braucht das Web? 30
JSF • Facelets
• Komponenten-Bibliotheken
Vaadin • Spezifische API
AngularJS • JavaScript, HTML, CSS
• Build Tools
1 2 3
gedoplan.de
UI Testing
Wieviel Client braucht das Web? 31
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
Demo-Projekt
https://github.com/GEDOPLAN/webclients-check
Wieviel Client braucht das Web? 32gedoplan.de
More
http://www.gedoplan-it-training.de
Seminare in Berlin, Bielefeld, Inhouse
http://www.gedoplan-it-consulting.de
Reviews, Coaching, …
https://javaeeblog.wordpress.com/
Blog zum Thema Java EE und Angular
 dominik.mathmann@gedoplan.de
@dominikmathmann
Wieviel Client braucht das Web? 33gedoplan.de

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
PHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework IntroductionPHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework Introduction
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
Metadatenbasierte Validierung
Metadatenbasierte ValidierungMetadatenbasierte Validierung
Metadatenbasierte Validierung
 
Web Components
Web ComponentsWeb Components
Web Components
 
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon MeggleOSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
OSMC 2012 | End2End-Monitoring von Webapplikationen mit SAHI by Simon Meggle
 
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScriptJSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
JSF meets JS (2. ed.) - JSF-Komponenten mit JavaScript
 
OAuth 2.0 und OpenId Connect
OAuth 2.0 und OpenId ConnectOAuth 2.0 und OpenId Connect
OAuth 2.0 und OpenId Connect
 
AngularJS
AngularJSAngularJS
AngularJS
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)JSF und JPA effizient kombinieren (W-JAX 2011)
JSF und JPA effizient kombinieren (W-JAX 2011)
 
IHK GfI
IHK GfIIHK GfI
IHK GfI
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJSWebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
WebGL - 3D im Browser - Erfahrungsbericht mit BabylonJS
 
Echtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & CoEchtzeitvisualisierung von Twitter & Co
Echtzeitvisualisierung von Twitter & Co
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
 
AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015
AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015
AngularJS mit OAuth 2 und OpenId Connect, w-jax 2015
 
PrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSFPrettyFaces: RESTful URLs für JSF
PrettyFaces: RESTful URLs für JSF
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und Internationalisierung
 

Andere mochten auch

Andere mochten auch (11)

Presentation Erfolgreiche Software mit großartiger Dokumentation - Asciidoctor
Presentation Erfolgreiche Software mit großartiger Dokumentation - AsciidoctorPresentation Erfolgreiche Software mit großartiger Dokumentation - Asciidoctor
Presentation Erfolgreiche Software mit großartiger Dokumentation - Asciidoctor
 
Ein Prozess lernt laufen – LEGO® MINDSTORMS® Steuerung mit BPMN
Ein Prozess lernt laufen – LEGO® MINDSTORMS® Steuerung mit BPMNEin Prozess lernt laufen – LEGO® MINDSTORMS® Steuerung mit BPMN
Ein Prozess lernt laufen – LEGO® MINDSTORMS® Steuerung mit BPMN
 
Going Resilient...
Going Resilient...Going Resilient...
Going Resilient...
 
Technische Schulden in Architekturen erkennen und beseitigen
Technische Schulden in Architekturen erkennen und beseitigenTechnische Schulden in Architekturen erkennen und beseitigen
Technische Schulden in Architekturen erkennen und beseitigen
 
A Post-Apocalyptic sun.misc.Unsafe World
A Post-Apocalyptic sun.misc.Unsafe WorldA Post-Apocalyptic sun.misc.Unsafe World
A Post-Apocalyptic sun.misc.Unsafe World
 
Kommunikation und Qualität - Java Forum Nord 2016
Kommunikation und Qualität - Java Forum Nord 2016Kommunikation und Qualität - Java Forum Nord 2016
Kommunikation und Qualität - Java Forum Nord 2016
 
Was jeder Java-Entwickler über Strings wissen sollte
Was jeder Java-Entwickler über Strings wissen sollteWas jeder Java-Entwickler über Strings wissen sollte
Was jeder Java-Entwickler über Strings wissen sollte
 
Anforderungen haben immer Schuld
Anforderungen haben immer SchuldAnforderungen haben immer Schuld
Anforderungen haben immer Schuld
 
Björn Müller (CaptainCasa GmbH);Von Java Swing über JavaFX nach HTML
Björn Müller (CaptainCasa GmbH);Von Java Swing über JavaFX nach HTMLBjörn Müller (CaptainCasa GmbH);Von Java Swing über JavaFX nach HTML
Björn Müller (CaptainCasa GmbH);Von Java Swing über JavaFX nach HTML
 
Ein Prozess lernt laufen: LEGO Mindstorms Steuerung mit BPMN
Ein Prozess lernt laufen: LEGO Mindstorms Steuerung mit BPMNEin Prozess lernt laufen: LEGO Mindstorms Steuerung mit BPMN
Ein Prozess lernt laufen: LEGO Mindstorms Steuerung mit BPMN
 
Hurra wir werden agil - aber wie?
Hurra wir werden agil - aber wie?Hurra wir werden agil - aber wie?
Hurra wir werden agil - aber wie?
 

Ähnlich wie Wieviel client braucht das web

HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
Mayflower GmbH
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG
 

Ähnlich wie Wieviel client braucht das web (20)

Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
Legacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpenLegacy WebApps mit AngularJS pimpen
Legacy WebApps mit AngularJS pimpen
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajaxMT AG: Ajax Rezepte fuer web services mit jquery und ajax
MT AG: Ajax Rezepte fuer web services mit jquery und ajax
 
Banking portal
Banking portalBanking portal
Banking portal
 
Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?Angular und JEE - Wieso, weshalb, warum (und wie)?
Angular und JEE - Wieso, weshalb, warum (und wie)?
 
Back to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit MicroservicesBack to the Frontend – aber nun mit Microservices
Back to the Frontend – aber nun mit Microservices
 
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
Android Entwicklung (App Entwickler Konferenz 2010 der Telekom)
 
GWT
GWTGWT
GWT
 
Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.Echtzeitvisualisierung von Twitter und Co.
Echtzeitvisualisierung von Twitter und Co.
 
Web-API Design in Java
Web-API Design in JavaWeb-API Design in Java
Web-API Design in Java
 
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
 
Integrations-Pattern für OpenID Connect
Integrations-Pattern für OpenID ConnectIntegrations-Pattern für OpenID Connect
Integrations-Pattern für OpenID Connect
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
 
PHP im High End
PHP im High EndPHP im High End
PHP im High End
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
 
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
Anwendungsübergreifende Authentifizierung: Integrations-Pattern für OpenID Co...
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 

Wieviel client braucht das web

  • 1. Wieviel Client braucht das Web JSF, Vaadin und AngularJS im Vergleich Dominik Mathmann, GEDOPLAN GmbH
  • 2. Dominik Mathmann GEDOPLAN GmbH, Bielefeld GEDOPLAN IT Consulting Konzeption, Realisierung von IT-Lösungen GEDOPLAN IT Training Seminare in Berlin, Bielefeld, on-site 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
  • 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. 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
  • 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. 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. 32 Check Up Wieviel Client braucht das Web? 21gedoplan.de 1
  • 22. Technologie-Mix Wieviel Client braucht das Web? 22 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
  • 23. Trennung Design / Präsentationslogik Wieviel Client braucht das Web? 23 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
  • 24. Erweiterbarkeit Wieviel Client braucht das Web? 24 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
  • 25. Backend Integration Wieviel Client braucht das Web? 25 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
  • 26. Investitionssicherheit Wieviel Client braucht das Web? 26 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
  • 27. Kommunikation Wieviel Client braucht das Web? 27 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
  • 28. Ressourcen-Nutzung Wieviel Client braucht das Web? 28 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
  • 29. Build-Prozess Wieviel Client braucht das Web? 29 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
  • 30. Lernkurve (on top of Java EE) Wieviel Client braucht das Web? 30 JSF • Facelets • Komponenten-Bibliotheken Vaadin • Spezifische API AngularJS • JavaScript, HTML, CSS • Build Tools 1 2 3 gedoplan.de
  • 31. UI Testing Wieviel Client braucht das Web? 31 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
  • 33. More http://www.gedoplan-it-training.de Seminare in Berlin, Bielefeld, Inhouse http://www.gedoplan-it-consulting.de Reviews, Coaching, … https://javaeeblog.wordpress.com/ Blog zum Thema Java EE und Angular  dominik.mathmann@gedoplan.de @dominikmathmann Wieviel Client braucht das Web? 33gedoplan.de