JSF2 and Server-Side-Pushjj

  • 4,015 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,015
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
47
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaServer Faces and SSP (server-side-push) Matthias Wessendorf | Oracle Corp. http://matthiaswessendorf.wordpress.com http://twitter.com/mwessendorf
  • 2. 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
  • 3. Agenda
    • Introduction
    • Comet / Server-Side Push
    • Comet solutions
      • Bayeux
      • Generic
      • JavaServer Faces
    • comet.NEXT
    • Discussion
  • 4. Agenda
    • (Quick) Introduction
    • Comet / Server-Side Push
    • Comet solutions
      • Bayeux
      • Generic
      • JavaServer Faces
    • comet.NEXT
    • Discussion
  • 5. Why push ?
  • 6. Google Wave – comet enabler ?
  • 7. 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)
  • 8. collaborative tooling Push when you need it
  • 9. Agenda
    • Introduction
    • Comet / Server-Side Push
    • Comet solutions
      • Bayeux
      • Generic
      • JavaServer Faces
    • comet.NEXT
    • Discussion
  • 10. Comet / server side push
  • 11. 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 ++ - -
  • 12. 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
  • 13. Comet – simpler integration
  • 14. Agenda
    • Introduction
    • Comet / Server-Side Push
    • Comet solutions
      • Bayeux
      • Generic
      • JavaServer Faces
    • comet.NEXT
    • Discussion
  • 15. Agenda Bayeux
  • 16. Bayeux
    • 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;/someChannel&quot;, javaScriptCallback);
    • Server:
    • Channel channel = bayeux .getChannel(&quot;/someChannel“);
    • Message msg = bayeux.newMessage(client);
    • msg.put(„ city &quot;, &quot;Poznan&quot;);
    • msg.put(&quot; event &quot;, &quot;GeeCon 2010&quot;);
    • channel.publish(message);
  • 17. 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...
  • 18. 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=&quot;/someChannel&quot; callback=&quot; myCallbackJavaScriptFunction &quot;
    • ... />
    * Servlet 3.0 will help here...
  • 19. Agenda Generic solution
  • 20. 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)
  • 21. Atmosphere * URL  https://atmosphere.dev.java.net/  DEMO  ...later
  • 22. Agenda JavaServer Faces
  • 23. 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
  • 24. 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
  • 25. 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“
  • 26. JavaServer Faces and Comet
  • 27. 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
  • 28. JSF2 and Atmosphere  DEMO 
  • 29. 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
  • 30. RIA – Rich Internet Applications http://tinyurl.com/adf-faces-live
  • 31. 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
  • 32. 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
  • 33. ADF Faces - 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
  • 34. 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
  • 35. ADF Faces – server-side Push  DEMO 
  • 36. Agenda
    • Introduction
    • Comet / Server-Side Push
    • Comet solutions
      • Bayeux
      • Generic
      • JavaServer Faces
    • comet.NEXT
    • Discussion
  • 37. 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
  • 38. 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();
  • 39. 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();
  • 40. 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: {'conference' : {'city': 'Poznan', 'event': 'GeeCon-2010'}, 'id' : '12345679' }
  • 41. comet.NEXT – HTML 5
    • 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
  • 42. Agenda
    • Introduction
    • Comet / Server-Side Push
    • Comet solutions
      • Bayeux
      • Generic
      • JavaServer Faces
    • comet.NEXT
    • Discussion
  • 43. Discussion
    • Where are we today?
    • Improving the UI experience
      • Are you using “push”? Today ?
    • Simulating FAT clients (WebSockets)
    • XMPP ??
    • The browser == Application Platform
  • 44. Questions
    • and (maybe) answers
  • 45. 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
  • 46. Thank you! [email_address] BLOG: matthiaswessendorf.wordpress.com