Con5133

Techniques For Responsive
Real-Time Web User Interfaces

Roger Kitain
Principal Member Technical Staff

1 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!


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.


Program Agenda

 Introduction
 The Real-Time Web
 User Interface Techniques
 Demos
 Summary


“Twitter is just a multiplayer notepad.”
Ben Maddux

“The internet: Transforming Society
And Shaping the Future Through Chat”
Dave Barry


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, Ajax


The Real-time Web
Traditional Patterns


The Real-time Web
Traditional Technologies

Partial Page Refresh No standard implementation

Real-time through polling Complex: HTTP not designed to
send unrequested server
responses


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/


Server Sent Events : Client


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-8


Web Sockets : Client


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 Socket


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 scope


DEMO


Real-time Web
Use Case: Device Control

Web Socket Physical
Server Device


DEMO


Real-time Web
Use Case: Device Control

Browser Web Socket Physical
Client Server Device

Bean
Socket Device
JavaScript Handler SDK
API


HTML5 Technology Availability
Useful Resources

 http://caniuse.com
 http://feeds.feedburner.com/WhenCanIUse


HTML5 Technology
Availability


Summary

 Traditional web / dynamic web
 Traditional patterns / technologies
 Real-time communication (HTML5)
 User interface techniques
 Use cases


References

 http://thethirdstone.com
 http://java.net/projects/websocket-spec
 http://jcp.org/en/jsr/detail?id=356


Q&A


Graphic Section Divider


Con5133

More Related Content

What's hot (11)

Similar to Con5133 (20)

Recently uploaded (20)

Con5133