ui architectures with jsf - iriandownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_andy_bosch-ui... · ui...
TRANSCRIPT
![Page 1: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/1.jpg)
UI Architectures with JSF Andy Bosch, www.jsf-academy.com
![Page 2: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/2.jpg)
Agenda
• Why should we talk about UI architecture?
• Technology and architecture – how does that fit together?
• Design principles and design patterns
• Concepts and ideals for an UI architecture (based on JSF)
• Conclusion
![Page 3: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/3.jpg)
About myself
• Name: Andy Bosch • Freelance IT architect, trainer, developer, … • Own training programme for JSF, CDI and Portlets
• Focus on JSF, Portlets and “related technologies” • Member of the Expert Group for JSR-301, JSR-329, and JSR-344 (JSF 2.2)
• Editor and trainer on www.jsf-academy.com
![Page 4: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/4.jpg)
Our big goal
• Realise the UI layer based on a stable and sensible overall architecture
• The UI layer should smoothly fit into the overall architecture
![Page 5: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/5.jpg)
UI and architecture?
• „UI, aren‘t that just colourful pixels!”
• “There is no programming regarding UI, only painting and graphical design. Why should I need an architecture here?”
• “Hey you, frontend guys. Let the “real men” do the architecture!”
![Page 6: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/6.jpg)
UI and architecture? Yes indeed!
• The UI layer is a separate layer within an overall architecture.
• In a UI layer happens much more than you might probably think: • Bean handling • Page flow • Conversion and validation • Visualisation of errors • Calling the service layer • Processing the response of the service call
![Page 7: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/7.jpg)
The frontend of the frontend
• When talking about frontends, misunderstandings often arise. • Reason for that: There is a frontend of the frontend and a backend of the frontend ;-)
• JSF is predominant in the backend of the frontend.
• (Are you now entirely perplexed?)
![Page 8: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/8.jpg)
Frontend-Frontend
• Webdesign
• Html / Html5
• CSS
• Images, font
• Partly JavaScript as well
![Page 9: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/9.jpg)
Backend-Frontend
• Processing on the server side
• Conversion and validation
• Management of beans
• Model updates
• Service calls
![Page 10: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/10.jpg)
UI architecture in the backend-frontend
• Backend-frontend: This is where the action takes place.
• In the backend-frontend, the transfer from UI to service happens (and vice versa of course).
• Regarding JSF, everything happens on the server (not in the browser).
à For this part, we need a good UI architecture.
![Page 11: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/11.jpg)
Well, get to the point: How do I start?
• How can I build a good UI architecture?
• Where should I start?
à Best recommendation ever: Start as soon as possible thinking about that. Do not start when it is too late.
![Page 12: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/12.jpg)
Software design principles as a starter
• Separation of concerns • Each class has its specific responsibility and can be clearly separated from other classes
• DRY / DIE • No code duplication
• Loose coupling • Various software components are to be arranged so that changes can be easily applied and no tight coupling exists
![Page 13: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/13.jpg)
Design Patterns - the next step
• MVC - Model View Controller MVP - Model View Presenter
• Sandbox pattern
• Facade
• Blackboard pattern
![Page 14: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/14.jpg)
Very basically: Overall architecture
UI layer
Service layer
Backend layer
![Page 15: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/15.jpg)
Architecture and technologies
• Technology is not an architecture!
• But technologies can help you forming an architecture.
• Some technologies clearly can be assigned to a specific layer.
![Page 16: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/16.jpg)
Overall architecture with technologies
UI layer
Service layer
Backend layer
JSF GWT
Wicket
Spring IoC (!?)
CDI (!?)
JPA
Hibernate
![Page 17: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/17.jpg)
Patterns in the UI layer
• MVC • Model View Controller pattern • Realises the principle of separation of concerns • Specialised artefacts for the model, the view, and the controller
• MVP • Model View Presenter pattern • MVC is the basis, except for the M and the V being completely separated from each other
• The presenter controls the entire processing logic (control model, fill view, …)
![Page 18: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/18.jpg)
JSF and MVC
• JSF only knows managed beans
• The specification says nothing about controller or models
à Well, then let us do it: We create a model-managed bean and a controller-managed bean
à You can perfectly realize a clean MVC with JSF.
![Page 19: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/19.jpg)
Functionality in the model?
Why do I have to distinguish between a model and a controller? • Separation of concerns • Clarity, maintenance
• But also: central exception handling (sandboxing)
![Page 20: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/20.jpg)
Recommendation: MVC in JSF
UI layer
Service layer
Backend layer
M
V C
![Page 21: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/21.jpg)
Exception handling in JSF
• JSF 1.x: No central spot / class available.
à Try / catch in phase 5 (invoke application) à Sandboxing approach
à Never ever functionality in the model (catchword lazy loading); who could ever catch an exception here?
• JSF 2.x: central exception handler available
![Page 22: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/22.jpg)
Recommendation: Sandboxing in “C”
UI layer
Service layer
Backend layer
M
V C
![Page 23: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/23.jpg)
Calling the service layer
• Domain specific tasks are not (emphasis on “not”) part of the UI layer, but of the service layer
• You can call the service layer by • Simple method call • Web service call (SOAP) • REST • Remoting (RMI, HttpInvoker, …)
• Response • Exceptions? Checked? Unchecked? • Return object • Simple data object?
![Page 24: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/24.jpg)
From JSF to the service layer
• Call should happen only in phase 5 (invoke application)
• Or is this wrong? Can I not call the service lazy in getter-methods? (ugh ...).
• Call in ValueChangelistener? Triggered by system events?
à Recommendation: Define clear and strict call points. No spaghetti by calling the service from the UI.
![Page 25: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/25.jpg)
Spaghetti from the UI to the service
UI controller
ValueChangeListener
XHtml page
GeGer method SystemEvent
Service layer
Don’t do it this way!
![Page 26: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/26.jpg)
Recommendation: Service call starting from “C”
UI layer
Service layer
Backend layer
M
V C
Service
![Page 27: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/27.jpg)
How to realise the service call
• Local method call?
• Injection via CDI?
• Remote call? REST or SOAP?
• What does the response look like?
Recommendation: - Clear and strict separation and decoupling
![Page 28: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/28.jpg)
Status: So far so good ...
UI layer
Service layer
Backend layer
M
V C
Service
![Page 29: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/29.jpg)
Another issue: Let‘s talk about the model
• Is the M in MVC a plain view model?
• Or is it a database entity that I should pass from the database onto the UI?
• DTO’s?
• Detached or attached objects in the UI?
![Page 30: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/30.jpg)
Where is the model?
UI layer
Service layer
Backend layer Person
![Page 31: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/31.jpg)
Working on detached objects
• Load using JPA • Detach it and return it to JSF
à Entities can have relations. Should these relations be called immediately?
à Load everything over all relations? à Or just return “null” for relations?
![Page 32: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/32.jpg)
Working on attached objects
• Servlet filter Open the database session in a filter. Common practice is to open and close it before and after the JSF request.
à OpenSessionInView pattern à Does anyone have control over the generated SQL statements? à Separation of the layers?
![Page 33: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/33.jpg)
Classic approach: DTOs
• A lower layer loads all necessary data
• Data will be packed in a specific “format” or “structure”
• This “structure” (DTO) will be returned to the UI
• Martin Fowler calls them domain objects and presentation objects
![Page 34: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/34.jpg)
One possible result
UI layer
Service layer
Backend layer
M
V C
PersonEnLty
PersonDTO
![Page 35: UI Architectures with JSF - IRIANdownload.irian.at/2012/f9u4mq2xdg/d2_m_1400_Andy_Bosch-ui... · UI Architectures with JSF Andy Bosch, ... (JSF 2.2) • Editor and ... You can write](https://reader034.vdocuments.us/reader034/viewer/2022042619/5a7129097f8b9a98538ca791/html5/thumbnails/35.jpg)
Conclusion
• UI architecture is a very important topic.
• And now WE know: UI architecture exists. It is not just talking about pictures.
• There are different approaches to solve the problems. But it is important to know and understand the various approaches in detail.