Das Dokument bietet eine umfassende Übersicht über Webtechnologien wie Java Server Faces (JSF) und Angular sowie deren Vor- und Nachteile. Es behandelt Aspekte wie die Implementierung, Architektur und Tooling für die Entwicklung von Webanwendungen unter Verwendung von Angular und Java EE. Zudem werden verschiedene Technologien und Tools zur JSON-Verarbeitung, API-Dokumentation und Mapping angesprochen.

1. 1
gedoplan.
de
Expertenkreis Java, 08.11.2018, GEDOPLAN
Dominik Mathmann, GEDOPLAN GmbH

2. 2
gedoplan.
de
Web Techniken, Allgemein
Webanwendung, serverseitig
Programmlogik auf dem Server
Aufbau der UI auf dem Server
z.B. JSF
Webanwendung, clientseitig
Programmlogik (teilweise) auf dem Client
Aufbau der UI auf dem Client (JavaScript)
z.B. Angular

3. 3
gedoplan.
de
Java Server Faces (JSF)
Server Browser
<ul>
<li>JSF</li>
<li>Vaadin</li>
<li>Angular</li>
</ul>
Anzahl: 3
<ul>
<ui:repeat value="#{demoBeanJSF.details}"
var="entry">
<li>#{entry}</li>
</ui:repeat>
</ul>
Anzahl: #{demoBeanJSF.details.size()}

4. 4
gedoplan.
de
JSF – Vorgehensweise / Besonderheiten
Model und 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
Request / Rendering partiell mit AJAX

5. 5
gedoplan.
de
Angular
["JSF","Vaadin","Angular"]
Server Browser
<ul>
<li *ngFor="let entry of entries">
{{entry}}
</li>
</ul>
Anzahl: {{entries.length}}
<ul>
<li *ngFor="let entry of entries">
{{entry}}
</li>
</ul>
Anzahl: {{entries.length}}
Angular

6. 6
gedoplan.
de
Angular – Vorgehensweise / Besonderheiten
Model-View-Controller im Browser
JavaScript / TypeScript
Einbindung des Backends über Schnittstelle (REST)
Clientseitiges Rendering auf Basis statischer HTML-Seiten
dynamische Manipulation durch Controller-Bindings

7. 7
gedoplan.
de
Pro Contra
Angular

8. 8
gedoplan.
de
Angular / JavaScript – Pro
Performance
weniger Server-Ressourcen
kleinere Requests

9. 9
gedoplan.
de
Angular / JavaScript – Pro
Flexibilität
Trennung UI und Backend
Entwicklung
Laufzeit
Releasemanagement
REST als Schnittstelle
UIs
Mobile
Fremdsysteme

10. 10
gedoplan.
de
Angular / JavaScript – Pro
Webtechnologien
keine Abstraktion
JavaScript Frameworks und Tools
Utils
UI Komponenten

11. 11
gedoplan.
de
Angular / JavaScript – Contra
Lernkurve
Webtechnologien
HTML, CSS
TypeScript
"JavaScript Welt"
Angular …

12. 12
gedoplan.
de
Angular / JavaScript – Contra
kein Standard
Versions Kompatibilität
Support
Schnittstelle
JSON - Mapping

13. 13
gedoplan.
de
Pro Contra
Performance Lernkurve
Webtechnologien Webtechnologien
Flexibilität JSON
kein Standard
Angular

14. 14
gedoplan.
de

15. 15
gedoplan.
de

16. 16
gedoplan.
de
Angular + JEE (Jackson) – "Stolpersteine"
LazyLoading
jackson-datatype-hibernate
DTOs
Bidirektionale Verbindungen
@JsonIgnore / @JsonView
@JsonIdentityInfo
@JsonManagedReference
DTOs

17. 17
gedoplan.
de
Angular + JEE - Tooling
Angular-CLI (angular/angular-cli )
Kommandozeilen-Tool für die Generierung von:
Projekten
Komponenten
Services
….
einheitliche Projektstruktur
ANGULAR

18. 18
gedoplan.
de
Angular + JEE - Tooling
JSON-Server ( typicode/json-server )
REST-API für
Entwicklungszeit
Testing
Konfiguration über einface JSON-Strucktur
GET, POST, PUT, DELETE ….
ANGULAR

19. 19
gedoplan.
de
Angular + JEE - Tooling
Jackson (FasterXML/jackson )
JSON-Verarbeitung
Serialisierung / Deserialisierung
Annotation
Converter
…
Alternativen:
google/gson
JSON-B (JSR 367)
JAVA

20. 20
gedoplan.
de
Angular + JEE - Tooling
MapStruct
Entity -> DTO-Mapper
Annotation Processor
Implementierung über Interfaces
Alternativen:
ModelMapper
Mapping API
Dozer
Mapping über XML
JAVA

21. 21
gedoplan.
de
Angular + JEE - Tooling
Swagger (swagger-maven-plugin )
API Tooling
Dokumentation
Design
Testing
Code-Generierung (z.B. TypeScript Models)
Alternativen:
typescript-generator-maven-plugin
Generierung von TypeScript Models
JAVA

22. 22
gedoplan.
de
Demos
Github
https://github.com/GEDOPLAN/ekj-angular-www
Hinweise bzgl. Demos betreffend der gezeigten Themen /
Tools / Utils, siehe ReadMe.md