0
Techniques For ResponsiveReal-Time Web User InterfacesRoger KitainPrincipal Member Technical Staff1   Copyright © 2012, Or...
Background        Who Am I?           Primary responsibility: JSF at Oracle           JSF Co-spec lead for 1.2, 2.0     ...
The following is intended to outline our general product direction. It is          intended          for information purpo...
Program Agenda         Introduction         The Real-Time Web         User Interface Techniques         Demos        ...
“Twitter is just a multiplayer notepad.”           Ben Maddux        “The internet: Transforming Society        And Shapin...
Introduction            Traditional web: request / response model                      – Based on HTTP                   ...
The Real-time Web        Traditional Patterns7   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   In...
The Real-time Web        Traditional Technologies                             Partial Page Refresh                        ...
Real-time Communication        Server Sent Events : HTML5 “Streaming”           Web page subscribes to a stream of DOM ev...
Real-time Communication         Server Sent Events : Client10   Copyright © 2012, Oracle and/or its affiliates. All rights...
Real-time Communication         Web Sockets: HTML5 “Full Duplex”            Bidirectional client / server connection     ...
Real-time Communication         Web Sockets : Client12   Copyright © 2012, Oracle and/or its affiliates. All rights reserv...
User Interface Techniques         Component Pattern            Based on JSF 2.x component model and JavaScript           ...
User Interface Techniques         Model Pattern            Use Java API to start a connection from a model bean action me...
DEMO15   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   Insert Information Protection Policy Class...
Real-time Web         Use Case: Device Control                                                                            ...
DEMO17   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   Insert Information Protection Policy Class...
Real-time Web         Use Case: Device Control        Browser                                                             ...
HTML5 Technology Availability         Useful Resources            http://caniuse.com            http://feeds.feedburner....
HTML5 Technology         Availability20   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   Insert In...
HTML5 Technology         Availability21   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   Insert In...
Summary            Traditional web / dynamic web            Traditional patterns / technologies            Real-time co...
References            http://thethirdstone.com            http://java.net/projects/websocket-spec            http://jcp...
Q&A24   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   Insert Information Protection Policy Classi...
Graphic Section Divider25   Copyright © 2012, Oracle and/or its affiliates. All rights reserved.   Insert Information Prot...
Upcoming SlideShare
Loading in...5
×

Con5133

696

Published on

JavaOne 2012 Real-time (HTML5) presentation.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
696
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Con5133"

  1. 1. 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
  2. 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. 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. 4. 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
  5. 5. “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
  6. 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, Ajax6 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  7. 7. The Real-time Web Traditional Patterns7 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  8. 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 responses8 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  9. 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. 10. 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
  11. 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-811 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  12. 12. Real-time Communication Web Sockets : Client12 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  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 Socket13 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  14. 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 scope14 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  15. 15. DEMO15 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  16. 16. 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
  17. 17. DEMO17 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  18. 18. 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
  19. 19. 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
  20. 20. HTML5 Technology Availability20 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  21. 21. HTML5 Technology Availability21 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  22. 22. 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
  23. 23. 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
  24. 24. Q&A24 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  25. 25. Graphic Section Divider25 Copyright © 2012, Oracle and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×