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