Page 1
2012 © Trivadis
BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN
REALTIME WEB
APPLICATIONS
WITH ORACLE
APEX
DOAG Conference 2012
Johannes Mangold
Senior Consultant,
Trivadis AG
21.11.2012
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
1
Page 2
2012 © Trivadis
Hamburg
Dusseldorf
Frankfurt
Stuttgart
Munich Freiburg
Vienna
Basel
Bern
Zurich
Lausanne ~380 employees
~200 employees
~30 employees
Trivadis makes IT easier.
2
11 Trivadis locations in CH, DE and AT with more than
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
More than 4,000 training participants
Research and development budget:
CHF 5.0 / EUR 4 Mio.
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
Page 3
2012 © Trivadis
Compliance
translated
optimized
wide-ranging
Toolbox
standardized
generated
automated
biGenius
fast
simple
wide-ranging
Infrastructure
Care
optimized
sustainable
modular
Comprehensive
Application
Development
independent
expert
streamlined
Application Care
plannable
efficient
sustainable
Application Development
Business Intelligence
Business Integration Services
Infrastructure Engineering
Managed Services
Training
Page 4
2012 © Trivadis
Johannes Mangold
Dipl. Wirtschaftsinformatiker (BA)
Senior Consultant
Focus
Integration Solutions
Software Architecture
Web- and Mobile Solutions
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
4
Daniel Maier
Dipl. Informatiker (FH)
Senior Consultant
Focus on
Software Architecture
Web- and Mobile Solutions
[email protected] [email protected]
Page 5
2012 © Trivadis
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
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
5
Page 6
2012 © Trivadis
Modern Enterprise Web Applications with APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
6
WEB
BROWSER WEB
LISTENER
ORACLE DATABASE WITH APEX
HTTP
HTML
Page 7
2012 © Trivadis
Modern Enterprise Web Applications with APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
7
User expectations
Challenges with modern enterprise applications
Page 8
2012 © Trivadis
Modern Enterprise Web Applications with APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
8
Unreliable connections
Challenges with modern enterprise applications
Page 9
2012 © Trivadis
Modern Enterprise Web Applications with APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
9
Challenges with modern enterprise applications
Scalability
Page 10
2012 © Trivadis
Modern Enterprise Web Applications with APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
10
WEB
BROWSER WEB
LISTENER
ORACLE DATABASE WITH APEX
HTTP
HTML
Page 11
2012 © Trivadis
Modern Enterprise Web Applications with APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
11
WEB
BROWSER WEB
LISTENER
ORACLE DATABASE WITH APEX
HTTP
HTML
Web «1.0» Architecture Challenge
Built for document exchange not as dynamic
application platform
The Web is stateless and «half-duplex»
PROBLEMS & COMPLEXITY PLUGINS & WORKAROUNDS
Page 12
2012 © Trivadis
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
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
12
Page 13
2012 © Trivadis
Next Generation Web Standards: HTML5
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
13
Page 14
2012 © Trivadis
Next Generation Web Standards: HTML5
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
14
Page 15
2012 © Trivadis
Next Generation Web Standards: HTML5
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
15
Cross Document Messaging
XMLHTTPRequest Level 2
Server-Sent Events
WebSocket
Page 16
2012 © Trivadis
Next Generation Web Standards: HTML5
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
16
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
Page 17
2012 © Trivadis
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
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
17
Page 18
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
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://
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
18
Bi-directional communication between a web page and remote host
WebSocket to be natively supported in Web browser
Page 19
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
Upgrade from HTTP protocol to WebSocket protocol using the
same TCP Connection
Once upgraded, WebSocket data frames can be sent back and
forth between the client and the server in full-duplex mode
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
19
How WebSockets work
TCP-Sockets for the Web
1
2
Page 20
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
20
WebSocket handshake: Upgrade from HTTP to WS protocol
HTTP(S) Browser
Server
GET /triWebTrain HTTP/1.1
Host: trivadis.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: 16-byte nonce,
base64 encoded
Sec-WebSocket-Version: 13
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 20-byte MD5 hash in
base64
Client wants: ws://trivadis.com/triWebTrain Server accepts connection upgrade
1
Page 21
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
21
WebSocket connection established – full-duplex message exchange
WS(S) Browser
Server
op-
code length
extended
length mask data payload
2- 14 bytes overhead per websocket frame
2
Page 22
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
22
Real-time & full-duplex approaches: HTTP workarounds vs. WebSocket
Browser
Server
Browser
Server
Browser
Server
HTTP Polling
HTTP Long polling
WebSocket
t
t
t
Page 23
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
23
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();
Page 24
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
24
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();
Communicate directly via higher level protocols:
JMS / STOMP
XMPP
…
Page 25
2012 © Trivadis
Realtime Web Applications with HTML5 WebSocket
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
25
Current WebSocket browser and server support
Desktop Browsers
Mobile Browsers phpwebsocket
…
Page 26
2012 © Trivadis
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
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
26
Page 27
2012 © Trivadis
HTML5 WebSocket and APEX
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
27
WEB
WEBSOCKET
GATEWAY
BROWSER
ADVANCED
QUEUING
HTTP
LISTENER
ORACLE DATENBANK MIT APEX
HTTP
WS TCP
JMS
HTML
Page 28
2012 © Trivadis
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
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
28
Page 29
2012 © Trivadis
Showcase Demo
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
29
«Trivadis WebTrain» «Trivadis WebTrain»
Page 30
2012 © Trivadis
Showcase Architecture and Technology Stack
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
30
JMS
WEBSOCKET
GATEWAY WS
TCP
JMS WEB AQ
HTTP HTML
JMS
APEX
HTTP
LISTENER
APEX
HTTP
Page 31
2012 © Trivadis
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
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
32
Page 32
2012 © Trivadis
Realtime HTML5 Enterprise Application Showcase
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
33
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
Page 33
2012 © Trivadis
BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN
Trivadis AG
Johannes Mangold
Elisabethenanlage 9
CH-4051 Basel
Tel. +41-61-279 97 55
Fax +41-61-279 97 56
[email protected]
www.trivadis.com
21.11.2012
REALTIME WEB APPLICATIONS WITH ORACLE APEX
34
More about Cloud,
Next Generation Data
Warehouse and
Tools for efficient and safe
operation of Oracle?
FLOOR 3,
STAND NO. 304