SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Dominik Mathmann & Hendrik Jungnitsch
GEDOPLAN GmbH
Wie viel Client braucht das
Web?
JSF, Vaadin und AngularJS im
Vergleich
Ziele / Inhalt
Einführung in die Anwendung / Java EE Backend
Vorstellung der Frameworks
Java Server Faces (JSF)
Vaadin
AngularJS
Check Up
Fazit
Wie viel Client braucht das Web? 2
Einführung in die Anwendung
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
Wie viel Client braucht das Web? 4
Einführung in die Anwendung / Java EE Backend
Browser
JavaServer Faces
Webservice
(JAX-RS)
Vaadin
Services
Respositories
Präsentationsschic
ht
/ Schnittstellen
Geschäftslogik
Datenbank
JavaEEServer
AngularJS (Browser)
Client
Wie viel Client braucht das Web? 5
Vorstellung der Frameworks
Java Server Faces (JSF)
Model-View-Controller-Pattern
Im Java-EE-Standard seit 2004
Komponentenmodell für das GUI von Web-Anwendungen
Application-Server
Renderer
Views, xhtml
Browser
Controller, CDI Beans
HTML, JavaScript
Services
Wie viel Client braucht das Web? 7
JSF - View
<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>
Wie viel Client braucht das Web? 8
JSF - Controller
@Named
@RequestScoped
public class AuthenticateController {
private String loginname;
private Sring password;
public String login() {
...
return "home";
}
}
Wie viel Client braucht das Web? 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
Wie viel Client braucht das Web? 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
Wie viel Client braucht das Web? 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
Application-Server
Services
Views, Java
Client, Browser
JavaScript
Engine
Widgets
Komponenten
Daten, Java Beans
Synchronisiert
durch
Framework
(JSON)
Wie viel Client braucht das Web? 12
Vaadin - UI
Wie viel Client braucht das Web? 13
@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);
}
}
Vaadin – Databinding (optional)
Wie viel Client braucht das Web? 14
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
}
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
Wie viel Client braucht das Web? 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)
Wie viel Client braucht das Web? 16
Angular JS
Open Source JavaScript-Webframework
RIA - Rich Internet Application
SPA – Single Page Application
entwickelt von Google
Browser
JAX-RS
Services
Application-Server
Views, html
Controller, JavaScript
JSON
Wie viel Client braucht das Web? 17
AngularJS - View
<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>
Wie viel Client braucht das Web? 18
Angular – Controller, Navigation
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'
})
Wie viel Client braucht das Web? 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
Wie viel Client braucht das Web? 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
Wie viel Client braucht das Web? 21
Check Up
Technologie Mix
JSF
HTML-ähnliche Templatesprache, Facelets
CSS-Kenntnisse in aller Regel notwendig
Vaadin
programmatische GUI Entwicklung (ähnlich Swing)
CSS- und JavaScript-Kenntnisse nur optional und für eigene
Komponenten
AngularJS
tiefe Kenntnisse in JavaScript, CSS, HTML
Wie viel Client braucht das Web? 23
Trennung GUI - Logik
JSF
Templates mit JSF-eigenen Tags
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
Wie viel Client braucht das Web? 24
Erweiterbarkeit
JSF
eigene Composite Components
Komponenten-Frameworks (z.B. Richfaces, PrimeFaces)
Vaadin
Komposition durch Erweiterung der Standardklassen
eigene Komponenten bspw. durch JavaScript Extensions
AngularJS
JavaScript-Komponenten
Wie viel Client braucht das Web? 25
Backend Integration
JSF / Vaadin
Controller im Server
Zugriff auf Services durch CDI Injection
keine eigene Schnittstelle notwendig
AngularJS
Zugriff über Schnittstellen
Datenaustausch z.B. über JAX-RS im JSON-Format
Wie viel Client braucht das Web? 26
Investitionssicherheit
JSF
Standard Java EE
Abwärtskompatibel bis Version 1.0
Ausgenommen: Komponentenframeworks
Vaadin / AngularJS
proprietär
bei großen Versionssprüngen keine stabile API
Wie viel Client braucht das Web? 27
Kommunikation
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
Wie viel Client braucht das Web? 28
Ressourcen Nutzung
JSF
Rendering / View-Aufbau: Serverseitig
Request-Größe durch HTML-Fragmente
Vaadin
View-Aufbau: Server, Rendering: Clientseitig
Request-Größe durch View-Informationen
AngularJS
Rendering / „View-Aufbau“: Clientseitig
JSON Daten-Requests + eigener HTML-Template-Cache
Wie viel Client braucht das Web? 29
Ressourcen Nutzung
Wie viel Client braucht das Web? 30
Build-Prozess
JSF / Vaadin
gleiche Build-Tools wie für das Backend
Maven, Gradle
AngularJS
eigenständige Build-Tools / Scripte
größere Anzahl an Möglichkeiten
NPM, Bower, Grunt, Gulp, Webpack, Browsify
Wie viel Client braucht das Web? 31
Lernkurve
JSF
Facelets
Komponenten-Bibliotheken
Vaadin
Spezifische API
AngularJS
JavaScript, HTML, CSS
Build Tools
Wie viel Client braucht das Web? 32
Testing
JSF / Vaadin
komplexes Test-Setup
Deployment auf Application Server notwendig
AngularJS
schnelles Setup dank Angular-spezifischem Test Framework
einfaches Mocken von HTTP Requests
HTTP Server ausreichend
Wie viel Client braucht das Web? 33
Fazit
Entwickler-Skills
technische Anforderungen
Flexibilität
Wie viel Client braucht das Web? 34
Folien zum Vortrag
http://gedoplan-it-consulting.de/expertenkreis-java/
Demo Projekt:
https://github.com/GEDOPLAN/webclients-check
Noch mehr Themen
http://javaeeblog.wordpress.com/
dominik.mathmann@gedoplan.de
hendrik.jungnitsch@gedoplan.de
Wie viel Client braucht das Web?

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
 
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...
 
Web Components
Web ComponentsWeb Components
Web Components
 
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)?
 
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
Go Fullstack: Webanwendungen mit Java EE 6 bauen (W-JAX 2011)
 
AngularJS
AngularJSAngularJS
AngularJS
 
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
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Metadatenbasierte Validierung
Metadatenbasierte ValidierungMetadatenbasierte Validierung
Metadatenbasierte Validierung
 
OAuth 2.0 und OpenId Connect
OAuth 2.0 und OpenId ConnectOAuth 2.0 und OpenId Connect
OAuth 2.0 und OpenId Connect
 
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)?
 
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
 
GWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und InternationalisierungGWT: Eintauchen in MVP und Internationalisierung
GWT: Eintauchen in MVP und Internationalisierung
 
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
 
JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)JSF 2 Kompositkomponenten (JAX 2012)
JSF 2 Kompositkomponenten (JAX 2012)
 
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
 
PHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework IntroductionPHP UG Karlsruhe - Zend Framework Introduction
PHP UG Karlsruhe - Zend Framework Introduction
 
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
Vaadin - Yet another Java Web Framework? (Google DevFest Karlsruhe 2012)
 
MVP mit dem Google Web Toolkit
MVP mit dem Google Web ToolkitMVP mit dem Google Web Toolkit
MVP mit dem Google Web Toolkit
 
Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT Eintauchen in MVP mit GWT
Eintauchen in MVP mit GWT
 

Ähnlich wie Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich

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 Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich (20)

Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
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?
 
Web 2.0 revisited
Web 2.0 revisitedWeb 2.0 revisited
Web 2.0 revisited
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
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
 
GWT
GWTGWT
GWT
 
Ein Blick in die Zukunft von in-STEP RED und objectiF RM
Ein Blick in die Zukunft von in-STEP RED und objectiF RMEin Blick in die Zukunft von in-STEP RED und objectiF RM
Ein Blick in die Zukunft von in-STEP RED und objectiF RM
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1Web APIs mit ASP.NET Core 1
Web APIs mit ASP.NET Core 1
 
Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4Mobile Development mit ASP.NET MVC 4
Mobile Development mit ASP.NET MVC 4
 
.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
 
AngularJs
AngularJsAngularJs
AngularJs
 
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)
 
Atlantismedia meet-magento-#5.11
Atlantismedia meet-magento-#5.11Atlantismedia meet-magento-#5.11
Atlantismedia meet-magento-#5.11
 
Atlantismedia meet-magento-#5.11
Atlantismedia meet-magento-#5.11Atlantismedia meet-magento-#5.11
Atlantismedia meet-magento-#5.11
 
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
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
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
 

Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich

  • 1. Dominik Mathmann & Hendrik Jungnitsch GEDOPLAN GmbH Wie viel Client braucht das Web? JSF, Vaadin und AngularJS im Vergleich
  • 2. Ziele / Inhalt Einführung in die Anwendung / Java EE Backend Vorstellung der Frameworks Java Server Faces (JSF) Vaadin AngularJS Check Up Fazit Wie viel Client braucht das Web? 2
  • 3. Einführung in die Anwendung
  • 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 Wie viel Client braucht das Web? 4
  • 5. Einführung in die Anwendung / Java EE Backend Browser JavaServer Faces Webservice (JAX-RS) Vaadin Services Respositories Präsentationsschic ht / Schnittstellen Geschäftslogik Datenbank JavaEEServer AngularJS (Browser) Client Wie viel Client braucht das Web? 5
  • 7. Java Server Faces (JSF) Model-View-Controller-Pattern Im Java-EE-Standard seit 2004 Komponentenmodell für das GUI von Web-Anwendungen Application-Server Renderer Views, xhtml Browser Controller, CDI Beans HTML, JavaScript Services Wie viel Client braucht das Web? 7
  • 8. JSF - View <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> Wie viel Client braucht das Web? 8
  • 9. JSF - Controller @Named @RequestScoped public class AuthenticateController { private String loginname; private Sring password; public String login() { ... return "home"; } } Wie viel Client braucht das Web? 9
  • 10. 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 Wie viel Client braucht das Web? 10
  • 11. 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 Wie viel Client braucht das Web? 11
  • 12. 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 Application-Server Services Views, Java Client, Browser JavaScript Engine Widgets Komponenten Daten, Java Beans Synchronisiert durch Framework (JSON) Wie viel Client braucht das Web? 12
  • 13. Vaadin - UI Wie viel Client braucht das Web? 13 @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); } }
  • 14. Vaadin – Databinding (optional) Wie viel Client braucht das Web? 14 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 }
  • 15. 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 Wie viel Client braucht das Web? 15
  • 16. 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) Wie viel Client braucht das Web? 16
  • 17. Angular JS Open Source JavaScript-Webframework RIA - Rich Internet Application SPA – Single Page Application entwickelt von Google Browser JAX-RS Services Application-Server Views, html Controller, JavaScript JSON Wie viel Client braucht das Web? 17
  • 18. AngularJS - View <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> Wie viel Client braucht das Web? 18
  • 19. Angular – Controller, Navigation 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' }) Wie viel Client braucht das Web? 19
  • 20. 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 Wie viel Client braucht das Web? 20
  • 21. 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 Wie viel Client braucht das Web? 21
  • 23. Technologie Mix JSF HTML-ähnliche Templatesprache, Facelets CSS-Kenntnisse in aller Regel notwendig Vaadin programmatische GUI Entwicklung (ähnlich Swing) CSS- und JavaScript-Kenntnisse nur optional und für eigene Komponenten AngularJS tiefe Kenntnisse in JavaScript, CSS, HTML Wie viel Client braucht das Web? 23
  • 24. Trennung GUI - Logik JSF Templates mit JSF-eigenen Tags 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 Wie viel Client braucht das Web? 24
  • 25. Erweiterbarkeit JSF eigene Composite Components Komponenten-Frameworks (z.B. Richfaces, PrimeFaces) Vaadin Komposition durch Erweiterung der Standardklassen eigene Komponenten bspw. durch JavaScript Extensions AngularJS JavaScript-Komponenten Wie viel Client braucht das Web? 25
  • 26. Backend Integration JSF / Vaadin Controller im Server Zugriff auf Services durch CDI Injection keine eigene Schnittstelle notwendig AngularJS Zugriff über Schnittstellen Datenaustausch z.B. über JAX-RS im JSON-Format Wie viel Client braucht das Web? 26
  • 27. Investitionssicherheit JSF Standard Java EE Abwärtskompatibel bis Version 1.0 Ausgenommen: Komponentenframeworks Vaadin / AngularJS proprietär bei großen Versionssprüngen keine stabile API Wie viel Client braucht das Web? 27
  • 28. Kommunikation 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 Wie viel Client braucht das Web? 28
  • 29. Ressourcen Nutzung JSF Rendering / View-Aufbau: Serverseitig Request-Größe durch HTML-Fragmente Vaadin View-Aufbau: Server, Rendering: Clientseitig Request-Größe durch View-Informationen AngularJS Rendering / „View-Aufbau“: Clientseitig JSON Daten-Requests + eigener HTML-Template-Cache Wie viel Client braucht das Web? 29
  • 30. Ressourcen Nutzung Wie viel Client braucht das Web? 30
  • 31. Build-Prozess JSF / Vaadin gleiche Build-Tools wie für das Backend Maven, Gradle AngularJS eigenständige Build-Tools / Scripte größere Anzahl an Möglichkeiten NPM, Bower, Grunt, Gulp, Webpack, Browsify Wie viel Client braucht das Web? 31
  • 33. Testing JSF / Vaadin komplexes Test-Setup Deployment auf Application Server notwendig AngularJS schnelles Setup dank Angular-spezifischem Test Framework einfaches Mocken von HTTP Requests HTTP Server ausreichend Wie viel Client braucht das Web? 33
  • 35. Folien zum Vortrag http://gedoplan-it-consulting.de/expertenkreis-java/ Demo Projekt: https://github.com/GEDOPLAN/webclients-check Noch mehr Themen http://javaeeblog.wordpress.com/ dominik.mathmann@gedoplan.de hendrik.jungnitsch@gedoplan.de Wie viel Client braucht das Web?

Hinweis der Redaktion

  1. 35