The slides are from a talk I had together with Manuel Amoabeng, an architect at a customer of mine dreamit.de. It shows how simple crawlable AJAX websites can be built with JSF.
2. Modern Websites with JSF
and jQuery
presented by Frank Caputo
and Manuel Amoabeng
3. The speakers
• Frank Caputo
Freelance Software Architect, JSF EG Member, Author of
JSF Resource Library Contracts, Passthrough Elements
frankcaputo.de
• Manuel Amoabeng
Softwarearchitect and interim PO at dreamIT in Ottensen
dreamit.de
4. The scenario
• Simple website, which must be crawled by bots
• Users want AJAX
• We must dynamically toggle content
• We must scale over multiple servers
5. Why JavaServerFaces
• Standard Java Web Framework
• Mature
• Designed for extensibility
• AJAX built in
• Continued development
• Many developers available
• Scalable
6. Why jQuery
• Mature
• De Facto Standard JavaScript Framework
• Designed for extensibility
• AJAX built in
• Continued development
• Many developers available
8. JSF Stateless Mode
• Disables JSF state saving
• Every form element needs
an ID
• Session must be restorable on any cluster node
• Still use session affinity
<f:view transient="true">
…
</f:view>
10. jQuery Click Handlers
$('header nav a').on('click', function (e) {
jsf.ajax.navigate(e.currentTarget.href);
e.preventDefault();
});
11. JSF AJAX Events
jsf.ajax.addOnEvent(function (data) {
if (data.status == 'success' &&
data.responseCode == 200) {
var x = $(data.responseXML);
x.find('update').each(function (i, e) {
e = document.getElementById(e.id);
$(e).trigger('jsf:ajaxUpdate');
});
}
});
12. Browser Location Bar
$(document).on('jsf:ajaxUpdate', '#main',
function (e) {
var element = $(e.currentTarget);
var url = element.data('url');
var pathname = window.location.pathname;
if (pathname != url) {
window.history.pushState(null, null, url);
}
$(window).trigger('page:change');
});
Manuel
Einfache eCommerce-Seite
Im Shopping Cart wird alles verwirrende ausgeblendet
Wir wollen Continous Delivery (keine Zeit Sessions ausidlen zu lassen)
Teil des Java EE Standards
Existiert seit März 2004
Es gibt für alles Factories, die man dekorieren kann
Seit 2.0 Facelets enthalten, AJAX
ständige Weiterentwicklung wie z.B. Resource Library Contracts und Passthrough Elements
seit 2.2 gibt es den stateless mode
Existiert seit August 2006
hat überlebt
jeden Monat eine neue Sau durchs Dorf in der JS-Welt
ständige Weiterentwicklung
JSF speichert normalerweise ganz viel in der Session
State saving bietet autogenerierte IDs
Die Session muss aus irgendeinem Cookie != JSESSIONID wiederherstellbar sein
Nutzt weiterhin Sessionaffinity, um zu viel Last auf der DB zu vermeiden
JSF braucht normalerweise ein Formular
Dank der Dynamik von JS können wir ein Formular faken
Serverseiting guckt JSF nur nach javax.faces.partial.ajax:true
wir rendern das Element mit der ID „main“
Alle Navilinks rufen nun jsf.ajax.navigate
und unterdrücken das default Verhalten
Man kann sich global an JSF AJAX events hängen
„success“ kommt, wenn das DOM erfolgreich ausgetauscht wurde
wir suchen alle update element im responseXML
holen das passende DOM element per document.getElementById wegen des Doppelpunktes
und triggern einen custom Event darauf
Hier reagieren wir auf den Custom Event von eben jsf:ajaxUpdate
an dem main element haben wir ein data-Attribut „url“
wenn die anders ist, als das was grade in der Adresszeile steht, ändern wir die Adresszeile
falls es sonst noch jemanden interessiert, feuern wir den custom event „page:change“
popstate wird
an dem main element haben wir ein data-Attribut „url“
wenn die anders ist, als das was grade in der Adresszeile steht, ändern wir die Adresszeile
falls es sonst noch jemanden interessiert, feuern wir den custom event „page:change“
Wir dekorieren den PartialViewContext
Wenn serverseitig navigiert wird (als Ergebnis einer Action), rendert JSF alles.
wir wollen aber nur unser „main“ Element rendern
- also löschen wir alle renderids