SlideShare ist ein Scribd-Unternehmen logo
Enterprise UI
Wie schlau soll mein Browser sein?
Dirk Weil, GEDOPLAN GmbH
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
Enterprise UI - Wie schlau soll mein Browser sein? 2gedoplan.de
Ziele / Inhalt
Einführung in die Anwendung / Java EE Backend
Vorstellung der Frameworks
Java Server Faces (JSF)
Vaadin
AngularJS
Check Up
Fazit
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 4gedoplan.de
Einführung in die Anwendung / Java EE Backend
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 6gedoplan.de
Application-Server
Renderer
Views, xhtml
Browser
Controller, CDI Beans
HTML, JavaScript
Services
JSF - View
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 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)
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 11gedoplan.de
Application-Server
Services
Views, Java
Client, Browser
JavaScript
Engine
Widgets
Komponenten
Daten, Java Beans
Synchronisiert
durch Framework
(JSON)
Vaadin - UI
Enterprise UI - Wie schlau soll mein Browser sein? 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)
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 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)
Enterprise UI - Wie schlau soll mein Browser sein? 15gedoplan.de
Angular JS
Open Source JavaScript-Webframework
RIA - Rich Internet Application
SPA – Single Page Application
entwickelt von Google
Enterprise UI - Wie schlau soll mein Browser sein? 16gedoplan.de
Browser
JAX-RS
Services
Application-Server
Views, html
Controller, JavaScript
JSON
AngularJS - View
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 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
Enterprise UI - Wie schlau soll mein Browser sein? 20gedoplan.de
Technologie-Mix
Enterprise UI - Wie schlau soll mein Browser sein? 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
Trennung Design / Präsentationslogik
Enterprise UI - Wie schlau soll mein Browser sein? 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
Erweiterbarkeit
Enterprise UI - Wie schlau soll mein Browser sein? 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
Backend Integration
Enterprise UI - Wie schlau soll mein Browser sein? 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
Investitionssicherheit
Enterprise UI - Wie schlau soll mein Browser sein? 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
Kommunikation
Enterprise UI - Wie schlau soll mein Browser sein? 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
Ressourcen-Nutzung
Enterprise UI - Wie schlau soll mein Browser sein? 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
Build-Prozess
Enterprise UI - Wie schlau soll mein Browser sein? 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
Lernkurve (on top of Java EE)
Enterprise UI - Wie schlau soll mein Browser sein? 29
JSF • Facelets
• Komponenten-Bibliotheken
Vaadin • Spezifische API
AngularJS • JavaScript, HTML, CSS
• Build Tools
1 2 3
gedoplan.de
UI Testing
Enterprise UI - Wie schlau soll mein Browser sein? 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
Demo-Projekt
https://github.com/GEDOPLAN/webclients-check
Enterprise UI - Wie schlau soll mein Browser sein? 31gedoplan.de
More
http://www.slideshare.net/gedoplan/enterprise-ui
Präsentation zum Download
http://www.gedoplan-it-training.de
Seminare in Berlin, Bielefeld, Inhouse
http://gedoplan-it-training.de/BEDCON/
Aktion zum Thema
http://www.gedoplan-it-consulting.de
Reviews, Coaching, …
Blog
 dirk.weil@gedoplan.de
@dirkweil
Enterprise UI - Wie schlau soll mein Browser sein? 32gedoplan.de

Weitere ähnliche Inhalte

Was ist angesagt?

Installation von Composite C1 auf Windows Azure
Installation von Composite C1 auf Windows AzureInstallation von Composite C1 auf Windows Azure
Installation von Composite C1 auf Windows AzureCGN Cloud Company
 
Echtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisierenEchtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisieren
MT AG
 
ObserveIt -Record and replay SSH, RDP & Citrix sessions-German
ObserveIt -Record and replay SSH, RDP & Citrix sessions-GermanObserveIt -Record and replay SSH, RDP & Citrix sessions-German
ObserveIt -Record and replay SSH, RDP & Citrix sessions-German
ObserveIT
 
Windows Azure Platform WAMS v.0.5
Windows Azure Platform   WAMS v.0.5Windows Azure Platform   WAMS v.0.5
Windows Azure Platform WAMS v.0.5
Oliver Michalski
 
Jug nbg containerplattform dcos
Jug nbg containerplattform dcosJug nbg containerplattform dcos
Jug nbg containerplattform dcos
Ralf Ernst
 
Echtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisierenEchtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisieren
MT AG
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile ServicesSascha Dittmann
 
Citrix XenServer 5.6: Die Neuerungen
Citrix XenServer 5.6: Die NeuerungenCitrix XenServer 5.6: Die Neuerungen
Citrix XenServer 5.6: Die Neuerungen
netlogix
 
Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
Digicomp Academy AG
 
Keine Angst vor Sametime 8.5.1
Keine Angst vor Sametime 8.5.1Keine Angst vor Sametime 8.5.1
Keine Angst vor Sametime 8.5.1
Ulrich Krause
 

Was ist angesagt? (10)

Installation von Composite C1 auf Windows Azure
Installation von Composite C1 auf Windows AzureInstallation von Composite C1 auf Windows Azure
Installation von Composite C1 auf Windows Azure
 
Echtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisierenEchtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisieren
 
ObserveIt -Record and replay SSH, RDP & Citrix sessions-German
ObserveIt -Record and replay SSH, RDP & Citrix sessions-GermanObserveIt -Record and replay SSH, RDP & Citrix sessions-German
ObserveIt -Record and replay SSH, RDP & Citrix sessions-German
 
Windows Azure Platform WAMS v.0.5
Windows Azure Platform   WAMS v.0.5Windows Azure Platform   WAMS v.0.5
Windows Azure Platform WAMS v.0.5
 
Jug nbg containerplattform dcos
Jug nbg containerplattform dcosJug nbg containerplattform dcos
Jug nbg containerplattform dcos
 
Echtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisierenEchtes Single Sign-On mit APEX realisieren
Echtes Single Sign-On mit APEX realisieren
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Services
 
Citrix XenServer 5.6: Die Neuerungen
Citrix XenServer 5.6: Die NeuerungenCitrix XenServer 5.6: Die Neuerungen
Citrix XenServer 5.6: Die Neuerungen
 
Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
Keine Angst vor Sametime 8.5.1
Keine Angst vor Sametime 8.5.1Keine Angst vor Sametime 8.5.1
Keine Angst vor Sametime 8.5.1
 

Ähnlich wie Enterprise UI

Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
gedoplan
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
gedoplan
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
gedoplan
 
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)?
gedoplan
 
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
André Fleischer
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
persillie
 
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)?
gedoplan
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
gedoplan
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
Predrag61
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
adesso AG
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
Torsten Fink
 
B1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid DevelopmentB1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid Development
Andreas Schulte
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
Georg Schmidl
 
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
Cenarion Information Systems GmbH
 
.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
Manfred Steyer
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
adesso AG
 

Ähnlich wie Enterprise UI (20)

Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
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
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Jax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and FlashJax07 - Mixing Ajax Swing and Flash
Jax07 - Mixing Ajax Swing and Flash
 
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)?
 
Web-GUIs mit Vaadin
 Web-GUIs mit Vaadin Web-GUIs mit Vaadin
Web-GUIs mit Vaadin
 
GWT
GWTGWT
GWT
 
Ivory Soa Suite
Ivory Soa SuiteIvory Soa Suite
Ivory Soa Suite
 
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDISchlanke Webarchitekturen nicht nur mit JSF 2 und CDI
Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI
 
MEAN SCS in der Cloud
MEAN SCS in der CloudMEAN SCS in der Cloud
MEAN SCS in der Cloud
 
B1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid DevelopmentB1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid Development
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
 
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
 
.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
 
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
Wozu Portlets – reichen HTML5 und Rest nicht aus für moderne Portale?
 

Enterprise UI

  • 1. Enterprise UI Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 4gedoplan.de
  • 5. Einführung in die Anwendung / Java EE Backend Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 6gedoplan.de Application-Server Renderer Views, xhtml Browser Controller, CDI Beans HTML, JavaScript Services
  • 7. JSF - View Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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) Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 11gedoplan.de Application-Server Services Views, Java Client, Browser JavaScript Engine Widgets Komponenten Daten, Java Beans Synchronisiert durch Framework (JSON)
  • 12. Vaadin - UI Enterprise UI - Wie schlau soll mein Browser sein? 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) Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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) Enterprise UI - Wie schlau soll mein Browser sein? 15gedoplan.de
  • 16. Angular JS Open Source JavaScript-Webframework RIA - Rich Internet Application SPA – Single Page Application entwickelt von Google Enterprise UI - Wie schlau soll mein Browser sein? 16gedoplan.de Browser JAX-RS Services Application-Server Views, html Controller, JavaScript JSON
  • 17. AngularJS - View Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 20gedoplan.de
  • 21. Technologie-Mix Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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 Enterprise UI - Wie schlau soll mein Browser sein? 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. Ressourcen-Nutzung Enterprise UI - Wie schlau soll mein Browser sein? 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. Build-Prozess Enterprise UI - Wie schlau soll mein Browser sein? 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. Lernkurve (on top of Java EE) Enterprise UI - Wie schlau soll mein Browser sein? 29 JSF • Facelets • Komponenten-Bibliotheken Vaadin • Spezifische API AngularJS • JavaScript, HTML, CSS • Build Tools 1 2 3 gedoplan.de
  • 30. UI Testing Enterprise UI - Wie schlau soll mein Browser sein? 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. Demo-Projekt https://github.com/GEDOPLAN/webclients-check Enterprise UI - Wie schlau soll mein Browser sein? 31gedoplan.de
  • 32. More http://www.slideshare.net/gedoplan/enterprise-ui Präsentation zum Download http://www.gedoplan-it-training.de Seminare in Berlin, Bielefeld, Inhouse http://gedoplan-it-training.de/BEDCON/ Aktion zum Thema http://www.gedoplan-it-consulting.de Reviews, Coaching, … Blog  dirk.weil@gedoplan.de @dirkweil Enterprise UI - Wie schlau soll mein Browser sein? 32gedoplan.de