Con5133
Upcoming SlideShare
Loading in...5
×
 

Con5133

on

  • 1,020 views

JavaOne 2012 Real-time (HTML5) presentation.

JavaOne 2012 Real-time (HTML5) presentation.

Statistics

Views

Total Views
1,020
Views on SlideShare
1,017
Embed Views
3

Actions

Likes
0
Downloads
6
Comments
0

2 Embeds 3

https://twitter.com 2
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Con5133 Con5133 Presentation Transcript

  • Techniques For ResponsiveReal-Time Web User InterfacesRoger KitainPrincipal Member Technical Staff1 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Background Who Am I?  Primary responsibility: JSF at Oracle  JSF Co-spec lead for 1.2, 2.0  Work related passion: Client side, JavaScript, Real-time web communication  Hobbies: Music (Guitar), Hockey, Robotics, code slinger, all things cool!2 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • The following is intended to outline our general product direction. It is intended for information purposes only, and may not be incorporated into any contract. It is not a commitment to deliver any material, code, or functionality, and should not be relied upon in making purchasing decisions. The development, release, and timing of any features or functionality described for Oracle’s products remains at the sole discretion of Oracle.3 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Program Agenda  Introduction  The Real-Time Web  User Interface Techniques  Demos  Summary4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • “Twitter is just a multiplayer notepad.” Ben Maddux “The internet: Transforming Society And Shaping the Future Through Chat” Dave Barry5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Introduction  Traditional web: request / response model – Based on HTTP – No server initiated events  Dynamic web: – Web more dynamic since 1990’s – Java Applets (1995), iframe (1996), JavaScript, DHTML, Ajax6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • The Real-time Web Traditional Patterns7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • The Real-time Web Traditional Technologies Partial Page Refresh No standard implementation Real-time through polling Complex: HTTP not designed to send unrequested server responses8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Real-time Communication Server Sent Events : HTML5 “Streaming”  Web page subscribes to a stream of DOM events from server  Unidirectional: events form server to client (over HTTP)  Evolved from April 2004 proposal: – http://ln.hixie.ch/?count=1&start=1083167110  Specification: – http://www.w3.org/TR/eventsource/9 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Real-time Communication Server Sent Events : Client10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Real-time Communication Web Sockets: HTML5 “Full Duplex”  Bidirectional client / server connection  HTTP for initial handshake  Connection: upgrade from HTTP to WS protocol  Data sent in frames – Each frame (example): 0x00Hello World0xff Data (Hello World) is UTF-811 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Real-time Communication Web Sockets : Client12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • User Interface Techniques Component Pattern  Based on JSF 2.x component model and JavaScript  Encapsulate HTML5 JavaScript API within JSF component.  Connection established when page loads  JSF component may also render “placeholder” markup for receiving message data.  Works for Server Sent Events, Web Socket13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • User Interface Techniques Model Pattern  Use Java API to start a connection from a model bean action method  Connection established as the result of some user action  JSF component may also render “placeholder” markup for receiving message data.  Consider how to handle connection when bean goes out of scope14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • DEMO15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Real-time Web Use Case: Device Control Web Socket Physical Server Device16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • DEMO17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Real-time Web Use Case: Device Control Browser Web Socket Physical Client Server Device Bean Socket Device JavaScript Handler SDK API18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • HTML5 Technology Availability Useful Resources  http://caniuse.com  http://feeds.feedburner.com/WhenCanIUse19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • HTML5 Technology Availability20 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • HTML5 Technology Availability21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Summary  Traditional web / dynamic web  Traditional patterns / technologies  Real-time communication (HTML5)  User interface techniques  Use cases22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • References  http://thethirdstone.com  http://java.net/projects/websocket-spec  http://jcp.org/en/jsr/detail?id=35623 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Q&A24 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  • Graphic Section Divider25 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13