The document discusses techniques for building responsive real-time web user interfaces. It introduces Server Sent Events and Web Sockets as technologies for real-time communication between client and server. It then describes component and model patterns for implementing user interfaces that utilize these technologies. The document also provides examples of use cases like device control and demos code for building real-time applications.

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

2. 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

3. 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

4. Program Agenda
 Introduction
 The Real-Time Web
 User Interface Techniques
 Demos
 Summary
4 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

5. “Twitter is just a multiplayer notepad.”
Ben Maddux
“The internet: Transforming Society
And Shaping the Future Through Chat”
Dave Barry
5 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

6. 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
6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

7. The Real-time Web
Traditional Patterns
7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

8. 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
8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

9. 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

10. Real-time Communication
Server Sent Events : Client
10 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

11. 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-8
11 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

12. Real-time Communication
Web Sockets : Client
12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

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 Socket
13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

14. 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
14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

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

16. Real-time Web
Use Case: Device Control
Web Socket Physical
Server Device
16 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

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

18. Real-time Web
Use Case: Device Control
Browser Web Socket Physical
Client Server Device
Bean
Socket Device
JavaScript Handler SDK
API
18 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

19. HTML5 Technology Availability
Useful Resources
 http://caniuse.com
 http://feeds.feedburner.com/WhenCanIUse
19 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

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

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

22. Summary
 Traditional web / dynamic web
 Traditional patterns / technologies
 Real-time communication (HTML5)
 User interface techniques
 Use cases
22 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

23. References
 http://thethirdstone.com
 http://java.net/projects/websocket-spec
 http://jcp.org/en/jsr/detail?id=356
23 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13

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

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