ADF Faces R ich C lient F ramework Doing Server-Side Push with RCF 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 Oracle Open World ApacheCon JavaOne JAX, WJAX

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

Oracle Open World

ApacheCon

JavaOne

JAX, WJAX

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

comet.NEXT

Discussion

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

comet.NEXT

Discussion

Introduction 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 *

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 *

RIA – Rich Internet Applications

Introduction 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 * Apache MyFaces Trinidad *

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 *

Apache MyFaces Trinidad *

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

comet.NEXT

Discussion

Overview  DEMO  http://tinyurl.com/adf-faces-live

 DEMO 

http://tinyurl.com/adf-faces-live

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

comet.NEXT

Discussion

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

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

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

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

polling VS long-polling VS streaming

Comet / server side push Integration into JSF... Polling: JSF lifecycle Push and long-polling: extra „channel“ for comet client architecture ... „ client side rendering“

Integration into JSF...

Polling:

JSF lifecycle

Push and long-polling:

extra „channel“ for comet

client architecture ...

„ client side rendering“

Comet / server side push

Comet / server side push Bayeux Specification JSON-based protocol for transporting asynchronous msgs pub/sub  „JMS over http“ Client and Server APIs Client: connect (&quot;/context/servlet&quot;); subscribe (&quot;/buli/BVB&quot;, javaScriptCallback); Server: Channel channel = bayeux .getChannel(&quot;/buli/BVB“); Message msg = bayeux.newMessage(client); msg.put(&quot; currentResult &quot;, &quot;BVB-Schalke 9:0&quot;); msg.put(&quot; player &quot;, &quot;Alexander Frei&quot;); channel.publish(message);

Bayeux Specification

JSON-based protocol for transporting asynchronous msgs

pub/sub  „JMS over http“

Client and Server APIs

Client:

connect (&quot;/context/servlet&quot;);

subscribe (&quot;/buli/BVB&quot;, javaScriptCallback);

Server:

Channel channel = bayeux .getChannel(&quot;/buli/BVB“);

Message msg = bayeux.newMessage(client);

msg.put(&quot; currentResult &quot;, &quot;BVB-Schalke 9:0&quot;);

msg.put(&quot; player &quot;, &quot;Alexander Frei&quot;);

channel.publish(message);

Comet / server side push Bayeux Implementations Server: Jetty Tomcat (smaller and cleaner API) 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 Implementations

Server:

Jetty

Tomcat (smaller and cleaner API)

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

Comet / server side push Possible integration for JSF: Server-side API  doing it again ? Client-side API resue jQuery ? reuse dojo ? Offer a (behavioral) tag: <mylib:bayeux channel=&quot;/bvbticker&quot; callback=&quot; myCallbackJavaScriptFunction &quot; ... /> Server-code needs to be done... I am waiting for Servlet 3 

Possible integration for JSF:

Server-side API  doing it again ?

Client-side API

resue jQuery ?

reuse dojo ?

Offer a (behavioral) tag:

<mylib:bayeux channel=&quot;/bvbticker&quot; callback=&quot; myCallbackJavaScriptFunction &quot;

... />

Server-code needs to be done...

I am waiting for Servlet 3 

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

comet.NEXT

Discussion

ADS  Active Data Support 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 BAM important interface(s): ActiveDataModel ActiveDataListener custom implementation possible ... based on JSF‘s declarative model no special handling in the view

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

BAM

important interface(s):

ActiveDataModel

ActiveDataListener

custom implementation possible ...

based on JSF‘s declarative model

no special handling in the view

ADS  Active Data Support supports different servers Weblogic: AdsServlet (extends AbstractAsyncServlet ) Optimized version, leverages: FutureResponseModel @WLServlet annotation  no issues on other containers Similar thing is part of Servlet 3.0 Non-Weblogic: AdsFilter Basically decoration to wait() and notify() does not scale, but works... Servlet 3.0 will help here... support for HA / failover shared connection on the client

supports different servers

Weblogic: AdsServlet (extends AbstractAsyncServlet )

Optimized version, leverages: FutureResponseModel

@WLServlet annotation  no issues on other containers

Similar thing is part of Servlet 3.0

Non-Weblogic: AdsFilter

Basically decoration to wait() and notify()

does not scale, but works...

Servlet 3.0 will help here...

support for HA / failover

shared connection on the client

ADS  Active Data Support  DEMO 

 DEMO 

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

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

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 – HTML 5 WebSockets var socket = new WebSocket(&quot;ws://myserver.com&quot;); socket.onopen = function(evt) {...}; socket.onmessage = function(evt) { alert( &quot;Received Message: &quot; + evt.data); }; socket.onclose = function(evt) {...}; Usage socket.postMsg(„Hallo Server“); socket.disconnect();

WebSockets

var socket = new WebSocket(&quot;ws://myserver.com&quot;);

socket.onopen = function(evt) {...};

socket.onmessage = function(evt) { alert( &quot;Received Message: &quot; + evt.data);

};

socket.onclose = function(evt) {...};

Usage

socket.postMsg(„Hallo Server“);

socket.disconnect();

comet.NEXT – HTML 5 Server-Send-Events standardizes the format of (continuous) data stream native in the browser; cross-browser ... new HTML element „eventsource“: <eventsource src=&quot;http://my.server.com&quot; onmessage=&quot;alert(event.data)&quot; /> Data property, contains JSON: data: {'game' : {'currentResult': 'BVB – S04 9:0', 'player': 'Alexander Frei'}, 'id' : '12345432' }

Server-Send-Events

standardizes the format of (continuous) data stream

native in the browser; cross-browser ...

new HTML element „eventsource“:

<eventsource src=&quot;http://my.server.com&quot; onmessage=&quot;alert(event.data)&quot; />

Data property, contains JSON:

data: {'game' : {'currentResult': 'BVB – S04 9:0', 'player': 'Alexander Frei'}, 'id' : '12345432' }

comet.NEXT – HTML 5 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

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

Agenda Introduction Overview Architecture Comet / Server-Side Push ADS  Active Data Service comet.NEXT Discussion

Introduction

Overview

Architecture

Comet / Server-Side Push

ADS  Active Data Service

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

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

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

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