Comet_where_are_we_now_where_we_headed

Comet - Where Are We Now? Where Are We Headed? Matthias Wessendorf | matzew@apache.org http://matthiaswessendorf.wordpress.com http://twitter.com/mwessendorf

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

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

Why push ?

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 - - ++ live connection some issues ** OK OK proxy servers + + + - * latency push long-poll polling

Comet – Some problems...
Scalability
Java NIO ...
Container specific APIs
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 ", "New York City");
msg.put(" event ", "AjaxWorld 2009");
channel.publish(message);

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
 DEMO 
* Jetty  http://eclipse.org/jetty

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“
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 

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
Caucho Resin
OperaMasks.org

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
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
Oracle  ADF Faces Rich Client

IceFaces  reverse ajax
Rich JSF and Web 2.0 component suite
„ RIA toolkit“
50+ widgets
Support for iPhone, etc.
OpenSource
CSS Themes
and more
Push / Poll model
Glassfish / Grizzly
SessionRenderer
SessionRenderer.render(...)
SessionRenderer.addCurrentSession(...)

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
ready in September 2009 ???
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': 'New York', 'event': 'AjaxWorld 2009'}, 'id' : '12345679' }

Today
Lift Framework
Kaazing Gateway
Opera / Safari 4* / WebKit / Firefox Minefield *
Firefox-Plugin
Future
IE 11 
UPDATE -> 2009/03/28
Shrinking of HTML5 spec:
http://annevankesteren.nl/2009/03/more-shrinking-html5
* 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 ?
Web 2.0 Applications  RIA
more application, than WEB
Adding „Hacks“  Comet
Improving the UI experience
Simulating FAT clients
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/
Blog
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

Comet_where_are_we_now_where_we_headed

by mwessendorf

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 72

Statistics

Comet_where_are_we_now_where_we_headed Presentation Transcript

http://aseng-wiki.us.oracle.com	68
http://www.slideshare.net	4