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

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

Datenbasis:
Microsoft Northwind
Technische Basis: Java EE 7
Fachobjekte (Customer, Order, …): JPA
DB-Zugriff (CustomerRepository, …): CDI
Services (OrderService, …): EJB mit Role based Security

Browser
JavaServer Faces
Webservice
(JAX-RS)
Vaadin
Services
Respositories
Präsentationsschic
ht
/ Schnittstellen
Geschäftslogik
Datenbank
JavaEEServer
AngularJS (Browser)
Client

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

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>

JSF - Controller
@Named
@RequestScoped
public class AuthenticateController {
private String loginname;
private Sring password;
public String login() {
...
return "home";
}
}

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

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

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)

Vaadin - UI
@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)
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

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)

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

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>

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'
})

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

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

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

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

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

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

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

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

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

Ressourcen Nutzung

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

Lernkurve
JSF
Facelets
Komponenten-Bibliotheken
Vaadin
Spezifische API
AngularJS
JavaScript, HTML, CSS
Build Tools

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

Fazit
Entwickler-Skills
technische Anforderungen
Flexibilität

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?

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

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

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

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

Hinweis der Redaktion