· title: microsoft powerpoint - andy-bosch-jsf-architektur.pptx author: bosch created date:...
TRANSCRIPT
www.jsf-academy.com
UI-Architekturen mit JSF
- JSF ist mehr als nur Syntax –
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 1
Andy Bosch
Agenda
• Warum reden wir überhaupt über UI-Architektur?• Warum reden wir überhaupt über UI-Architektur?
• Technologien und Architekturen – wie passt das zusammen?
• Design Prinzipien und Design Patterns
• Verschiedene UI-Architektur-Ansätze (mit JSF)
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 2
• Verschiedene UI-Architektur-Ansätze (mit JSF)
• Fazit
Ein paar Worte zu mir
• Name: Andy Bosch
• Freiberuflicher Architekt, Trainer, Entwickler, …• Freiberuflicher Architekt, Trainer, Entwickler, …
• Eigenes Trainingsprogramm zu JSF, CDI und Portlets
• Fokus auf JSF, Portlets und „angrenzenden Technologien“
• Mitglied der Expert Groups des JSR-301, JSR-329und JSR-344 (JSF 2.2)
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 3
und JSR-344 (JSF 2.2)
• Betreiber der Plattform www.jsf-academy.com
Unsere Wunschvorstellung
• Realisierung des UI-Layers auf • Realisierung des UI-Layers auf einer tragfähige Gesamtarchitektur
• Das UI-Layer soll nahtlos in die Gesamtarchitektur passen
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 4
UI und Architektur?
• „UI, das sind doch nur bunte Pixel !“
• „Im UI wird doch nichts programmiert, sondern nur gemalt. Also brauche ich keine Architektur.“
• „Hey ihr Frontend‘ler, lasst die Architektur die richtigen Entwickler machen!“
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 5
UI und Architektur? Sehr wohl!
• Das UI ist eine eigene Schicht in einem Gesamt-Schichtenmodell, folglich Bestandteil der Gesamt-ArchitekturArchitektur
• Im UI-Layer passiert mehr, als manch einer denkt: – Bean-Handling
– Page-Flow
– Konvertierung und Validierung
– Visualisierung von Fehlern
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 6
– Visualisierung von Fehlern
– Aufruf des Service-Layers
– Rückantwort des Service-Layers
Das Frontend des Frontends?
• Wenn man von Frontend-Entwicklung spricht, ist hier meist ein Verständnisproblem vorprogrammiert.ein Verständnisproblem vorprogrammiert.
• Denn: Es gibt eine Frontend im Frontend ;-) und ein Backend im Frontend.
• JSF ist überwiegend für das Backend im Frontend gedacht
(na, jetzt alles klar oder vollkommen verwirrt?)
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 7
• (na, jetzt alles klar oder vollkommen verwirrt?)
Frontend-Frontend
• Webdesign
• Html / Html5
• CSS
• Bilder, Transparenz, Schriftarten
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 8
Schriftarten
• z.T. auch JavaScript
Backend-Frontend
• i.d.R. Verarbeitung auf ServerseiteServerseite
• Konvertierung und Validierung
• Verwaltung von Beans
• Modellupdates
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 9
• Modellupdates
• Funtionsaufrufe / Service Calls
UI Architektur imBackend-Frontend
• Im Backend-Frontend findet die Musik statt
• Im Backend-Frontend findet der Übergang von UI zum Service statt (und der Rückweg natürlich).
• Im Falle von JSF ist dieser Part komplett serverseitig.
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 10
� Hier ist somit eine ordentliche Architektur zu definieren.
Jetzt mal Butter bei die Fische: Wie fange ich an?
• Wie baue ich eine gute (UI-) Architektur?
• Wo fange ich an?
� Frühzeitig darüber nachdenken, nicht erst
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 11
nachdenken, nicht erstdann, wenn es zu spät ist (wie im rechten Bild)
Software Design Prinzipien als Grundlage
• Separation of Concerns• Separation of Concerns– Jede Klasse hat ihre spezifische Zuständigkeit und ist damit klar von
anderen Klassen abgrenzbar
• DRY / DIE– Keine Code-Duplizierung
• Lose Kopplung
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 12
• Lose Kopplung– Verschiedene Komponenten sollten so gestaltet sein, dass Änderungen
einfach möglich sind und keine harte Verdrahtung zu anderen Komponenten vorhanden ist
Design Patterns – die nächste Stufe
• MVC - Model View ControllerMVP - Model View Presenter
• Sandbox-Pattern
• Facade
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 13
• Blackboard-Pattern
Gesamt-Architektur
UI-LayerUI-Layer
Service-Layer
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 14
Backend-Layer
Architektur und Technologien
• Technologien sind keine Architektur!• Technologien sind keine Architektur!
• Allerdings helfen Technologien, eine Architektur zu realisieren.
• Spezielle Technologien lassen sich eindeutig einem Bestandteil einer Architektur zuordnen.
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 15
Gesamt-Architektur mit Technologien
JSFUI-Layer
Service-Layer
JSFGWT
Wicket
Spring IoC (!?)
CDI (!?)
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 16
Backend-LayerJPA
Hibernate
Patterns im UI-Layer
• MVC– Model-View-Controller Pattern– Model-View-Controller Pattern
– Realisiert das Separation-of-Concerns Prinzip
– Spezialisierte Artefakte für das Modell, die View und den Controller
• MVP– Model View Presenter Pattern
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 17
– Model View Presenter Pattern
– Basis ist MVC, nur dass M und V komplett getrennt sind
– Der Presentor regelt sämtliche Verarbeitungslogik (Modell steuern, View befüllen, …)
JSF und MVC
• JSF kennt lediglich Managed Beans
• Die Spezifikation sagt nichts über Model oder Controller
� Dann eben selbst gemacht: Model Managed Beans und Controller Managed Beans
� MVC lässt sich mit JSF hervorragend umsetzen
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 18
� MVC lässt sich mit JSF hervorragend umsetzen
Funktionalität im Modell?
Warum sollte ich überhaupt zwischen Modell und
Controller unterscheiden?
• Separation of Concerns
• Übersichtlichkeit, Wartbarkeit
• Aber auch: Zentrales Exception Handling (Sandboxing) möglich
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 19
(Sandboxing) möglich
Empfehlung: MVC in JSF
UI-Layer M
V C
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 20
Service-Layer
Backend-Layer
Exception Handling in JSF
• JSF 1.x: Kein zentrales Ansatzpunkt möglich.
� Try / catch in Phase 5 (Invoke Application)
� Sandboxing Verfahren
� Never ever Funktionalität (Stichwort Lazy Loading) im Modell; wer soll hier eine Exception abfangen?
JSF 2.x: Zentraler Exception Handler Mechanismus
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 21
• JSF 2.x: Zentraler Exception Handler Mechanismus
Empfehlung: Sandboxing bei „C“
M
UI-LayerM
VC
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 22
Service-Layer
Backend-Layer
Aufruf des Service-Layers
• Fachlichkeit gehört nicht (Betonung auf „nicht“) in den UI-Layer, sondern in den Service-Layer
• Aufruf aus dem UI-Layer mittels– Einfacher Methoden-Call
– Webservice-Call (SOAP)
– REST
– Remoting (RMI, HttpInvoker, …)
Rückgabe
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 23
• Rückgabe– Exceptions? Checked? Unchecked?
– Return-Objekt
– Nur ein reines Datenobjekt?
Über JSF zum Service-Layer
• Aufruf nur in Phase 5 (Invoke Application)
• Oder doch nicht? Geht doch auch lazy in Getter-Methoden in Beans (bäh).
• Zugriff in ValueChangelistener? Angetriggert durch SystemEvents?
� Empfehlung: Klare Übergänge regeln, kein wilder
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 24
� Empfehlung: Klare Übergänge regeln, kein wilder Durchgriff aus dem UI-Layer heraus.
Spaghetti von UI nach Service
UI-ControllerXHtml-Seite So natürlich
UI-Controller
ValueChangeListener
XHtml-Seite
Getter-MethodeSystemEvent
So natürlich
nicht!
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 25
Service-Layer
Empfehlung: Service-Aufruf im „C“
M
UI-Layer
Service-Layer
M
VC
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 26
Service-Layer
Backend-Layer
Service
Anderes Thema: Das Modell
• Ist das M in MVC ein reines View-Modell?• Ist das M in MVC ein reines View-Modell?
• Nehme ich die Datenbank-Entity und reiche sie nach oben?
• DTO‘s?
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 27
• DTO‘s?
• Detached oder attached Objekte ins UI?
Wo liegt das Modell?
UI-LayerUI-Layer
Service-Layer
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 28
Backend-Layer Person
Arbeiten auf detached Objekten
• Per JPA laden
• In Invoke Application laden (in DB-Layer) und detachen• In Invoke Application laden (in DB-Layer) und detachen
• Von DB nach JSF hochliefern
� Entitäten können Relationen aufweisen. Sollen diese gleich mitgeladen werden?
� Komplett tief laden?
� Oder dann einfach „null“ zurückliefern?
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 29
� Oder dann einfach „null“ zurückliefern?
Arbeiten auf attached Objekten
• Servlet Filter
Öffnen der Datenbank-Session in einem Filter, am besten VOR dem JSF-Request und DANACH
� OpenSessionInView-Pattern
� Hat irgendjemand noch eine Kontrolle über die SQLs?
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 30
über die SQLs?� Schichtentrennung?
Klassisch: DTOs
• Eine tiefere Schicht lädt alle notwendigen Daten
• Die Daten werden in eine gesonderte Struktur gepackt
• Die Struktur (das DTO) wird nach oben gereicht
• Martin Fowler spricht z.T. von Domain Objects und Presentation Objects
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 31
Ein mögliches Ergebnis
UI-LayerM
UI-Layer
Service-Layer
V C
PersonDTO
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 32
Backend-Layer PersonEntity
Fazit
• UI-Architektur ist ein wichtiges Thema.wichtiges Thema.
• Und wir wissen jetzt: Es gibt überhaupt eine UI-Architektur, nicht nur bunte Bilder im UI-Layer
• Es gibt verschiedene
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 33
• Es gibt verschiedene Ansätze für eine UI-Architektur, die jeweils ihre Vor- und Nachteile haben. Eine genaue Konzeption im Vorfeld ist daher unbedingt ratsam.
Fragen?
Gerne E-Mail an mich:Gerne E-Mail an mich:[email protected]
Twitter@andybosch
Webwww.jsf-academy.com
© Copyright 2012, Andy Bosch, www.jsf-academy.com Slide 34