Keep pushing: How we rebuilt Y! Mail and Facebook using JSF and survived. George Maggessy & Maiko Rocha Solutions Architec...
Why are we speaking here? <ul><li>30+ years of combined experience in TI. </li></ul><ul><li>Productivity freaks. </li></ul...
Maiko & George strange world <ul><li>+2,000 JEE Developers around the world </li></ul><ul><li>+11,000 UI Flows </li></ul><...
These are the UIs we’re building
What we want you to know   What are the challenges and lessons learned from rebuilding well known websites using JSF compo...
Agenda <ul><li>JSF UI layout sucks. Yes, we are going there. </li></ul><ul><li>How to make JSF better. </li></ul><ul><li>U...
Why JSF UI layout sucks <ul><li>I’m not a web designer! </li></ul><ul><li>Lack of a templating mechanism. </li></ul><ul><l...
How to make JSF better? <ul><li>Create a better component set! </li></ul><ul><li>Oracle ADF Faces </li></ul><ul><ul><li>Mo...
QUICK DEMO! ADF Faces component set, “Orabook”, and “Oahoo! Mail”
JSF UI Layout Challenges <ul><li>Cross browser support is still tough. </li></ul><ul><li>% dimensions mean different thing...
UI Layout with JSF – General Tips <ul><li>Thou shall not embed raw HTML in your pages. </li></ul><ul><li>Avoid  inlineStyl...
UI Pattern Example
Working with Layout Managers <ul><li>To stretch or to flow? </li></ul><ul><ul><li>Stretching maximizes browser’s viewport ...
Stretchable Layout Managers af:panelStretchLayout af:panelSplitter af:panelGroupLayout af:panelDashboard
Demo ADF Faces Stretchable Layout Managers panelStrechLayout, panelGroupLayout, panelSplitter, panelDashboard
Deconstructing Facebook Outer shell: three row layout Inner shell: three column layout Custom Components
Reconstructing Facebook From Facebook… … to ADF Faces.
Declarative Component af:panelBorderLayout + af:panelGroupLayout + af:image + af:commandLink + af:outputText
Reconstructing Facebook af:facetRef = mainCenter af:facetRef = mainBottom Outer Template af:panelStretchLayout af:panelGro...
Deconstructing Yahoo! Mail Outer shell: two column layout Dynamic region Custom Components
Reconstructing Yahoo! Mail From Yahoo! Mail… … to ADF Faces.
Task Flows
Reconstructing Yahoo! Mail af:facetRef = navigation af:facetRef = top af:panelStretchLayout af:facetRef = content Main Tem...
Make JSF layout even easier
Demo! Orabook (JSF based Facebook) O! Mail (JSF based Yahoo! Mail)
Summary <ul><li>JSF is a system of components. Learn how to put them together. </li></ul><ul><li>Work in a tandem with a w...
Questions
Thanks for your attention! Where to find more stuff? <ul><li>Rich Enterprise Applications Home Page: http://rea.oracle.com...
Upcoming SlideShare
Loading in …5
×

Keep Pushing: How We Rebuilt Y!Mail and Facebook Using JSF and Survived

2,046 views
1,949 views

Published on

Friday, March 19 - 2:10 p.m.
Presented By: George Maggessy and Maiko Rocha

Gain a solid understanding of JavaServer Faces (JSF) best practices and tips for better collaboration between web developers and designers with two Java solutions architects who will take a look at the building blocks of JSF and how they pushed the boundaries of the provided UI components and layout managers to rebuild two well-known websites from scratch: Yahoo! Mail and Facebook. JSF is the current Java standard for building web-based UIs, but its reception and adoption by the Java community has been mixed. This case study discusses the challenges, limitations, and advantages of using JSF that were found throughout the development process of Y! Mail and Facebook. George Maggessy and Maiko Rocha take you step-by-step through the development process to reveal JSF best practices and pitfalls to avoid.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,046
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Keep Pushing: How We Rebuilt Y!Mail and Facebook Using JSF and Survived

  1. 1. Keep pushing: How we rebuilt Y! Mail and Facebook using JSF and survived. George Maggessy & Maiko Rocha Solutions Architects Oracle Corp.
  2. 2. Why are we speaking here? <ul><li>30+ years of combined experience in TI. </li></ul><ul><li>Productivity freaks. </li></ul><ul><li>Part of Fusion Middleware Solutions Architect Team – “The A-Team”. </li></ul><ul><li>Outbound: PoCs, prototypes, escalations, presentations. Inbound: Bootcamps, E2E scenarios, product roadmap, developer whipping. </li></ul><ul><li>Yes, we work with other stuff too: Eclipse, Python, Grails, JQuery, etc. </li></ul>
  3. 3. Maiko & George strange world <ul><li>+2,000 JEE Developers around the world </li></ul><ul><li>+11,000 UI Flows </li></ul><ul><li>+5,000 Tables </li></ul><ul><li>+6,000 Business Objects </li></ul><ul><li>+18,000 Queries (Projections) </li></ul><ul><li>+2,500 Business Modules (Facades) </li></ul><ul><li>+1,200 Services </li></ul><ul><li>+20Gb Codebase </li></ul><ul><li>… and growing fast. </li></ul>
  4. 4. These are the UIs we’re building
  5. 5. What we want you to know What are the challenges and lessons learned from rebuilding well known websites using JSF components. The good, the bad and the ugly.
  6. 6. Agenda <ul><li>JSF UI layout sucks. Yes, we are going there. </li></ul><ul><li>How to make JSF better. </li></ul><ul><li>UI layout with JSF. </li></ul><ul><li>Deconstructing and reconstructing Facebook and Yahoo! Mail. </li></ul>
  7. 7. Why JSF UI layout sucks <ul><li>I’m not a web designer! </li></ul><ul><li>Lack of a templating mechanism. </li></ul><ul><li>Lack of higher level layout managers to abstract underlying representation (HTML). </li></ul><ul><li>Restricted component set. </li></ul><ul><li>Creating a new component is somewhat painful. </li></ul>
  8. 8. How to make JSF better? <ul><li>Create a better component set! </li></ul><ul><li>Oracle ADF Faces </li></ul><ul><ul><li>More (+150), better components. </li></ul></ul><ul><ul><li>Declarative component creation. </li></ul></ul><ul><ul><li>Advanced, component-level skinning. </li></ul></ul><ul><ul><li>Specialized layout managers. </li></ul></ul><ul><ul><li>Declarative templating engine. </li></ul></ul><ul><ul><li>Facelets support. </li></ul></ul>
  9. 9. QUICK DEMO! ADF Faces component set, “Orabook”, and “Oahoo! Mail”
  10. 10. JSF UI Layout Challenges <ul><li>Cross browser support is still tough. </li></ul><ul><li>% dimensions mean different things. </li></ul><ul><li>W3C CSS Box model makes it hard to combine margins, borders and padding with width and height dimensions. </li></ul><ul><li>Workarounds include nesting multiple components to achieve desired effect. </li></ul><ul><li>Developers are not web designers. </li></ul><ul><li>Web Designers are not developers. </li></ul>
  11. 11. UI Layout with JSF – General Tips <ul><li>Thou shall not embed raw HTML in your pages. </li></ul><ul><li>Avoid inlineStyle like the plague. Use skinning instead. </li></ul><ul><li>Mockups are still valid, but let the web designer know the JSF component set. </li></ul><ul><li>Learn to see beyond the UI itself and break it down to match the component set. </li></ul><ul><li>Establish a set of patterns to your most common scenarios so developers can refer to them. Improves productivity, reusability, and standardization. </li></ul>
  12. 12. UI Pattern Example
  13. 13. Working with Layout Managers <ul><li>To stretch or to flow? </li></ul><ul><ul><li>Stretching maximizes browser’s viewport usage (geometry management). </li></ul></ul><ul><ul><li>It can also stretch it’s children automatically. </li></ul></ul><ul><ul><li>Flowing isolates components that should not stretch. </li></ul></ul><ul><li>Where to start? </li></ul><ul><ul><li>Start with a stretchable outer frame. </li></ul></ul><ul><ul><li>Inside this frame, have flowing islands (i.e., scrollable areas). </li></ul></ul>
  14. 14. Stretchable Layout Managers af:panelStretchLayout af:panelSplitter af:panelGroupLayout af:panelDashboard
  15. 15. Demo ADF Faces Stretchable Layout Managers panelStrechLayout, panelGroupLayout, panelSplitter, panelDashboard
  16. 16. Deconstructing Facebook Outer shell: three row layout Inner shell: three column layout Custom Components
  17. 17. Reconstructing Facebook From Facebook… … to ADF Faces.
  18. 18. Declarative Component af:panelBorderLayout + af:panelGroupLayout + af:image + af:commandLink + af:outputText
  19. 19. Reconstructing Facebook af:facetRef = mainCenter af:facetRef = mainBottom Outer Template af:panelStretchLayout af:panelGroupLayout=vertical af:facetRef = topNavigationBarArea Inner Template: panelGoupLayout (scroll) af:panelGroupLayout = horizontal af:facetRef=newsFeedArea af:facetRef= highlightsArea af:facetRef= filtersArea af:panelGroupLayout=vertical
  20. 20. Deconstructing Yahoo! Mail Outer shell: two column layout Dynamic region Custom Components
  21. 21. Reconstructing Yahoo! Mail From Yahoo! Mail… … to ADF Faces.
  22. 22. Task Flows
  23. 23. Reconstructing Yahoo! Mail af:facetRef = navigation af:facetRef = top af:panelStretchLayout af:facetRef = content Main Template Header Template af:panelStretchLayout Dynamic Region Home or Inbox Task Flows center top Home Task Flow: panelStretchLayout bottom Calendar Template Panel Dashboard Panel Group Layout: Vertical Calendar Region af:region – Mail Task Flow af:region – Calendar Task Flow
  24. 24. Make JSF layout even easier
  25. 25. Demo! Orabook (JSF based Facebook) O! Mail (JSF based Yahoo! Mail)
  26. 26. Summary <ul><li>JSF is a system of components. Learn how to put them together. </li></ul><ul><li>Work in a tandem with a web designer. </li></ul><ul><li>Learn how to map Uis to existing components. </li></ul><ul><li>Find a JSF compatible templating mechanism. </li></ul><ul><li>Forget HTML. CSS is your best friend. </li></ul>
  27. 27. Questions
  28. 28. Thanks for your attention! Where to find more stuff? <ul><li>Rich Enterprise Applications Home Page: http://rea.oracle.com/ </li></ul><ul><li>ADF Faces Online Demo (components, skins, layout): http://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx </li></ul><ul><li>ADF Faces Rich Client on OTN: http://www.oracle.com/technology/products/adf/adffaces/index.html </li></ul><ul><li>ADF Functional Patterns and Best Practices: http://www.oracle.com/technology/products/adf/patterns/index.html </li></ul><ul><li>Forum: http://forums.oracle.com/forums/forum.jspa?forumID=83 </li></ul><ul><li>Blogs: </li></ul><ul><ul><li>Maiko - http://adfgarage.blogspot.com </li></ul></ul><ul><ul><li>George - http://georgemaggessy.blogspot.com/ </li></ul></ul>

×