REALTIME WEB APPLICATIONS with ORACLE APEX 21.11.2012 Trivadis Makes IT Easier

Home , Web standards

REALTIME WEB DOAG Conference 2012 APPLICATIONS WITH ORACLE Johannes Mangold Senior Consultant, APEX Trivadis AG 21.11.2012

BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN

1 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Trivadis makes IT easier.

. 11 Trivadis locations in CH, DE and AT with more than Hamburg 600 employees . Financially independent and sustainably profitable . Revenue CHF 104 / EUR 84 Mio. . Services for more than 800 clients in over 1,900 projects . 200 Service Level Agreements Dusseldorf ~200 employees . More than 4,000 training participants . Research and development budget: Frankfurt CHF 5.0 / EUR 4 Mio.

Stuttgart

Vienna Munich Freiburg

Basel Zurich ~30 employees Bern Lausanne ~380 employees

2 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Application Development Compliance biGenius

Business Intelligence

Business Integration Services Infrastructure Engineering translated fast Managed Services optimized simple Training wide-ranging wide-ranging

Toolbox Infrastructure Application Care Comprehensive Care Application Development

standardized optimized plannable independent generated sustainable efficient expert automated2012 © Trivadis modular sustainable streamlined Johannes Mangold Daniel Maier

. Dipl. Wirtschaftsinformatiker (BA) . Dipl. Informatiker (FH) . Senior Consultant . Senior Consultant . Focus . Focus on . Integration Solutions . Software Architecture . Software Architecture . Web- and Mobile Solutions . Web- and Mobile Solutions

[email protected] [email protected]

4 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Agenda

1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion

5 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Modern Enterprise Web Applications with APEX

HTTP

BROWSER WEB HTML LISTENER WEB

ORACLE DATABASE WITH APEX

6 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Modern Enterprise Web Applications with APEX

Challenges with modern enterprise applications

User expectations

7 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Modern Enterprise Web Applications with APEX

Challenges with modern enterprise applications

Unreliable connections

8 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Modern Enterprise Web Applications with APEX

Challenges with modern enterprise applications

Scalability

9 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Modern Enterprise Web Applications with APEX

HTTP

BROWSER WEB HTML LISTENER WEB

ORACLE DATABASE WITH APEX

10 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Modern Enterprise Web Applications with APEX

HTTP

BROWSER WEB HTML LISTENER WEB

Web «1.0» Architecture Challenge . Built for document exchange not as dynamic application platform . The Web is stateless and «half-duplex» ORACLE DATABASE WITH APEX

PLUGINS & WORKAROUNDS PROBLEMS & COMPLEXITY

11 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012

Agenda

1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion

12 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Next Generation Web Standards: HTML5

13 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Next Generation Web Standards: HTML5

14 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Next Generation Web Standards: HTML5

. Cross Document Messaging . XMLHTTPRequest Level 2 . Server-Sent Events . WebSocket

15 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Next Generation Web Standards: HTML5

. Cross Document Messaging . XMLHTTPRequest Level 2 . Server-Sent Events . WebSocket Our focus today

To enable Web applications to maintain bidirectional communications with server-side processes…

Source: WebSocket API Spec, w3.org

16 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Agenda

1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion

17 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

Bi-directional communication between a web page and remote host

. W3C API and IETF Protocol . Full-Duplex, single socket . Leverages Cross-Origin Resource Sharing . Shares port with existing HTTP content . Two schemes . ws:// and wss://

WebSocket to be natively supported in Web browser

18 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

How WebSockets work

Upgrade from HTTP protocol to WebSocket protocol using the 1 same TCP Connection Once upgraded, WebSocket data frames can be sent back and 2 forth between the client and the server in full-duplex mode

TCP-Sockets for the Web

19 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

WebSocket handshake: Upgrade from HTTP to WS protocol

Client wants: ws://trivadis.com/triWebTrain Server accepts connection upgrade

HTTP(S) 1 Browser

Server GET /triWebTrain HTTP/1.1 Host: trivadis.com Upgrade: websocket HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade: websocket Sec-WebSocket-Key: 16-byte nonce, Connection: Upgrade base64 encoded Sec-WebSocket-Accept: 20-byte MD5 hash in Sec-WebSocket-Version: 13 base64

20 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

WebSocket connection established – full-duplex message exchange

WS(S) 2 Browser

Server

op- extended length mask data payload code length

2- 14 bytes overhead per websocket frame

21 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

Real-time & full-duplex approaches: HTTP workarounds vs. WebSocket

HTTP Polling Browser

WebSocket Server Browser t

HTTP Long polling Server Browser t

Server t

22 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

WebSocket API

//Create new WebSocket

var mySocket = new WebSocket("ws://www.trivadis.com");

// Associate listeners

mySocket.onopen = function(evt) { alert("Connection open…"); };

mySocket.onmessage = function(evt) { alert("Received message: " + evt.data); };

mySocket.onclose = function(evt) { alert("Connection closed…"); };

// Sending data

mySocket.send("WebSocket Rocks!");

// Close WebSocket

mySocket.close();

23 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 Realtime Web Applications with HTML5 WebSocket

WebSocket API

//Create new WebSocket

var mySocket = new WebSocket("ws://www.trivadis.com");

// Associate listeners

mySocket.onopen = function(evt) { alert("Connection open…"); };

mySocket.onmessage = function(evt) { alert("Received message: " + evt.data); };

mySocket.onclose = function(evt) { alert("Connection closed…"); };

// Sending data

mySocket.send("WebSocket Rocks!"); Communicate directly via higher level protocols: // Close WebSocket . JMS / STOMP mySocket.close(); . XMPP . …

Current WebSocket browser and server support

Desktop Browsers

Mobile Browsers phpwebsocket

…

1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion

HTTP

BROWSER HTTP HTML LISTENER

WEB

JMS WS TCP WEBSOCKET ADVANCED GATEWAY QUEUING

ORACLE DATENBANK MIT APEX

1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion

««TrivadisTrivadis WebTrainWebTrain»»

HTTP HTTP LISTENER HTTP HTML

WEBSOCKET TCP WEB AQ JMS WS GATEWAY

JMS

JMS APEX

APEX

1. Modern Enterprise Web Applications with APEX 2. Next Generation Web Standards: HTML5 3. Realtime Web Applications with HTML5 WebSocket 4. HTML5 WebSocket and APEX 5. Showcase Demo 6. Conclusion

Conclusion

. WebSocket brings duplex and realtime capability to Web Applications, based on new standards . Not a replacement for existing protocols and APIs - it’s the addon of choice when duplex and realtime is needed in a Web Application . Easy to integrate into APEX Web Applications . Standards based end-to-end transactions over the web . Concepts for concurrent and realtime updates in UI needed . Technology is in a early stage

33 2012 © Trivadis REALTIME WEB APPLICATIONS WITH ORACLE APEX 21.11.2012 More about Cloud, Next Generation Data Warehouse and Trivadis AG Tools for efficient and safe Johannes Mangold Elisabethenanlage 9 operation of Oracle? CH-4051 Basel

Tel. +41-61-279 97 55 FLOOR 3, Fax +41-61-279 97 56 [email protected] STAND NO. 304 www.trivadis.com

BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN