JSF2 and Server-Side-Pushjj

JavaServer Faces and SSP (server-side-push) Matthias Wessendorf | Oracle Corp. http://matthiaswessendorf.wordpress.com http://twitter.com/mwessendorf

Matthias Wessendorf
Oracle Corporation
Apache Software Foundation
ASF Member
Committer and PMC @Apache MyFaces
Incubator (Mentor for some projects)
Author
(German) Java- and Eclipse-Magazine
Books on Struts, J2ME & WebServices
Speaker
AjaxWorld
JAX, W-JAX
Oracle Open World
ApacheCon
JavaOne
Ajax World

Agenda
Introduction
Comet / Server-Side Push
Comet solutions
Bayeux
Generic
JavaServer Faces
comet.NEXT
Discussion

Agenda
(Quick) Introduction
Comet solutions
Bayeux
Generic
JavaServer Faces
comet.NEXT
Discussion

Why push ?

Google Wave – comet enabler ?

Introduction
Polling
annoying..., traffic on the server  chatty solution
Push
Don‘t call us, we call you !
Use Cases
collaborative tooling
sharing documents
chat
streaming data (  football/soccer, ...)
trading systems (  auctions)
live reporting
monitoring (  server console)
pushing async data into the client (  credit card verification)

collaborative tooling Push when you need it

Agenda
Introduction
Comet solutions
Bayeux
Generic
JavaServer Faces
comet.NEXT
Discussion

Comet / server side push

Comet / server side push
polling VS long-polling VS streaming
*  depends on the interval... **  fallback to long-polling polling long-poll push latency - * + + + proxy servers OK OK some issues ** live connection ++ - -

Comet – Some problems...
Scalability
Java NIO ...
Container specific APIs FIXED with Servlet 3.0
Hard part: Client side architecture
How to integrate the pushed data ?
pushed data callback:
<script> _update_function(“ html_id “, JSONpayload); </script>
client side framework

Comet – simpler integration

Agenda
Introduction
Comet solutions
Bayeux
Generic
JavaServer Faces
comet.NEXT
Discussion

Agenda Bayeux

Bayeux
Bayeux Specification
JSON-based protocol for transporting asynchronous msgs
pub/sub  „JMS over http“
Client and Server APIs
Client:
connect ("/context/servlet");
subscribe ("/someChannel", javaScriptCallback);
Server:
Channel channel = bayeux .getChannel("/someChannel“);
Message msg = bayeux.newMessage(client);
msg.put(„ city ", "Poznan");
msg.put(" event ", "GeeCon 2010");
channel.publish(message);

What the Bayeux ???
Bayeux Implementations
Server:
Jetty
Tomcat (smaller and cleaner API)
Glassfish / Grizzly
Weblogic (HTTP Publish-Subscribe Server) Perl, Pyhton,...
Client:
dojo toolkit
jQuery-based (two are there)
Issues
not a real Java standard (e.g. JSF / Servlet)
different APIs for all implementations...

Bayeux with JSF ?
Not yet there
Steps for a possible JSF-Bayeux integration:
pick a server-side API
doing it again ? *
pick a client-side API
resue jQuery ?
reuse dojo ?
Avoid users from writing JavaScript
Offer a (behavioral) tag:
<mylib:bayeux channel="/someChannel" callback=" myCallbackJavaScriptFunction "
... />
* Servlet 3.0 will help here...

Agenda Generic solution

Atmosphere
An Ajax Push (Comet) Framework
„ Comet for the masses“ It is simple!
Solves the problem of different container APIs
Servlet 3.0 will help, but ...
Atmosphere provides a generic API for different containers
No need to port your application to a specific server
Runs on any Servlet 2.5 container (  Apache Tomcat 6)
Uses Java 5 @nnotations
Supports REST (JSR 311)
Jersey implementation
Open Source Framework (CDDL)

Atmosphere * URL  https://atmosphere.dev.java.net/  DEMO  ...later

Agenda JavaServer Faces

JavaServer Faces What is it really ?
Lightweight and extensible Web-Framework
POJO, replace the bits (navigation, view-technology,...)
API for UI Component Development
Several 3rd party component suites available
Goals
Make Java-Web-Development simple
Tooling (JDeveloper, Netbeans, Eclipse, ...)
Implementations
Mojarra  RI, hosted on java.net
Apache MyFaces

JavaServer Faces Page Template Server Side <f:view> <h:form> <h:inputText value=“#{b.value}” /> <h:inputText … /> <h:inputText …. /> … <h:commandButton … /> </h:form> </f:view> Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer

JavaServer Faces and Comet
Integration into JSF...
Polling:
JSF lifecycle
Push and long-polling:
extra „channel“ for comet (long-living connections)
client architecture ...
„ client side rendering“

JavaServer Faces and Comet

Comet solutions for JSF
Good news!
There are some JSF/Comet solutions already today!
more to come ?
IceSoft  IceFaces
PrimeFaces (OpenSource community)
Do it yourself (with Atmosphere)
Oracle  ADF Faces Rich Client

JSF2 and Atmosphere  DEMO 

ADF Faces
ADF Faces Rich Client
Rich Widgets, Web 2.0 components
more than 90 JSF components
No InputSuggest ...
more than 30 helpers
printable view, validators, excel export, ...
Ajax
Ajax integration, API for server AND client
Requirements
JavaServer Faces 1.2
Apache MyFaces Trinidad 1.2.x

RIA – Rich Internet Applications http://tinyurl.com/adf-faces-live

ADF Faces
ADF Faces Rich Client
Rich Widgets, Web 2.0 components
more than 90 JSF components
No (yet) InputSuggest ...
more than 30 helpers
printable view, validators, excel export, ...
Ajax
Ajax integration, API for server AND client
Requirements
JavaServer Faces 1.2_x
Apache MyFaces Trinidad 1.2.x

ADF Faces - Architecture Client Side Server Side Label1 Label2 Label3 OK DOM Peer Objects Document Form Element Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer

ADF Faces - Architecture client-side components Label1 Label2 OK <af:panelLabelAndMessage labelAndAccessKey="Label 2"> <af:inputText autoTab="true" simple="true" id="id1" maximumLength="3" columns="3" label="first"/> <af:inputText autoTab="true" simple="true" id="id2" maximumLength="3" columns="3" label="second"/> <af:inputText autoTab="true" simple="true" id="id3" maximumLength="3" columns="3" label="third"/> </af:panelLabelAndMessage> <af:inputText id="idInputText" label="Label 1" value="#{myBean.value}"/> id1 id2 Id3

ADF Faces – server-side Push
Doing „comet“ is hard
JavaScript guy...
Server-side guy...
Tomcat vs. Jetty vs. WLS vs. Glashfish vs. WhatNot
Active Data Support is integrated into ADF
important interface(s):
ActiveDataModel
ActiveDataListener
custom implementation possible ...
based on JSF‘s declarative model
no special handling in the view

ADF Faces – server-side Push  DEMO 

Agenda
Introduction
Comet solutions
Bayeux
Generic
JavaServer Faces
comet.NEXT
Discussion

comet.NEXT – Servlet 3.0
Part of Java EE 6
ServletRequest interface
startAsync() : AsyncContext
startAsync(request, response) : AsyncContext
isAsyncSupported() : boolean
AsyncListener interface
onComplete(asyncEvent) : void
onTimeout(asyncEvent) : void

comet.NEXT – Servlet 3.0
Async example:
service(Request req, Response res) {
AsyncContext actx = req.startAsync();
Runnable runnable = new Runnable() {
public void run() {
Message m = jmsTemplate.receive();
res.write(m);
req.complete();
}
};
executor.submit(runnable);
}
Defensive programming: request.isAsyncSupported(); request.isAsyncStarted(); request.getAsyncContext();

comet.NEXT – HTML 5
WebSockets
var socket = new WebSocket("ws://myserver.com");
socket.onopen = function(evt) {...};
socket.onmessage = function(evt) { alert( "Received Message: " + evt.data);
};
socket.onclose = function(evt) {...};
Usage
socket.postMsg(„Hallo Server“);
socket.disconnect();

Server-Send-Events
standardizes the format of (continuous) data stream
native in the browser; cross-browser ...
new HTML element „eventsource“:
<eventsource src="http://my.server.com" onmessage="alert(event.data)" />
Data property, contains JSON:
data: {'conference' : {'city': 'Poznan', 'event': 'GeeCon-2010'}, 'id' : '12345679' }

Today
Lift Framework
Kaazing Gateway
Opera / Safari 4* / WebKit / Firefox Minefield *
Jetty 7.x.y / 8
Atmosphere (trunk)
Glassfish 3.x (trunk/branch)
Future
More servers...
IE 11 ?? :-)
* https://bugzilla.mozilla.org/show_bug.cgi?id=472529

Agenda
Introduction
Comet solutions
Bayeux
Generic
JavaServer Faces
comet.NEXT
Discussion

Discussion
Where are we today?
Improving the UI experience
Are you using “push”? Today ?
Simulating FAT clients (WebSockets)
XMPP ??
The browser == Application Platform

Questions
and (maybe) answers

Links and Resources
ADF
http://www.oracle.com/technology/products/adf/adffaces/index.html
http://tinyurl.com/adf-faces-live
Bayeux / Cometd
http://cometdproject.dojotoolkit.org/
HTML 5 WebSockets
http://dev.w3.org/html5/spec/Overview.html#comms
Slides:
http://www.slideshare.net/mwessendorf

Thank you! [email_address] BLOG: matthiaswessendorf.wordpress.com

http://www.techgig.com	41
http://www.slideshare.net	24
http://www.techgig.timesjobs.com	3

JSF2 and Server-Side-Pushjj

by mwessendorf

Accessibility

Upload Details

Usage Rights

3 Embeds 68

Statistics

JSF2 and Server-Side-Pushjj Presentation Transcript