Con5133

Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13 1

Techniques For Responsive Real-Time Web User Interfaces

Roger Kitain

Principal Member Technical Staff


Background

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!

Who Am I?


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


Ben Maddux

Dave Barry

“Twitter is just a multiplayer notepad.”

“The internet: Transforming Society

And Shaping the Future Through Chat”


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

Real-time through polling

No standard implementation

Complex: HTTP not designed to

send unrequested server

responses


Real-time Communication

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 : HTML5 “Streaming”

http://ln.hixie.ch/?count=1&start=1083167110

http://ln.hixie.ch/?count=1&start=1083167110

http://www.w3.org/TR/eventsource/

http://www.w3.org/TR/eventsource/



Server Sent Events : Client



Bidirectional client / server connection

HTTP for initial handshake

Connection: upgrade from HTTP to WS protocol

Data sent in frames – Each frame (example):

\0x00Hello World\0xff Data (Hello World) is UTF-8

Web Sockets: HTML5 “Full Duplex”



Web Sockets : Client



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

Component 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

Model Pattern


DEMO


Real-time Web

Use Case: Device Control

Physical

Device Web Socket

Server


DEMO


Real-time Web

Use Case: Device Control

Physical

Device

Web Socket

Server

Socket

Handler Bean Device

SDK

Browser

Client

JavaScript

API


HTML5 Technology Availability

http://caniuse.com

http://feeds.feedburner.com/WhenCanIUse

Useful Resources

http://caniuse.com/

http://caniuse.com/




HTML5 Technology

Availability


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

http://thethirdstone.com/




http://jcp.org/en/jsr/detail?id=356


Q & A


Graphic Section Divider