REALTIME WEB APPLICATIONS WITH ORACLE APEX

Size: px

Start display at page:

Download "REALTIME WEB APPLICATIONS WITH ORACLE APEX"

Caren Holmes
6 years ago
Views:

1 REALTIME WEB APPLICATIONS WITH ORACLE APEX DOAG Conference 2012 Johannes Mangold Senior Consultant, Trivadis AG BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN 1

Trivadis locations in CH, DE and AT with more

sustainably profitable Revenue CHF 104 / EUR 84

1,900 projects 200 Service Level Agreements More

development budget: CHF 5.0 / EUR 4 Mio.

2 Trivadis makes IT easier. Dusseldorf Frankfurt Hamburg ~200 employees 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. Stuttgart Freiburg Munich Vienna Basel Bern Zurich Lausanne ~380 employees ~30 employees 2

wide-ranging Toolbox Infrastructure Care Application Care Comprehensive Application Development

3 Application Development Business Intelligence Business Integration Services Infrastructure Engineering Managed Services Training Compliance translated optimized wide-ranging bigenius fast simple wide-ranging Toolbox Infrastructure Care Application Care Comprehensive Application Development standardized generated automated optimized sustainable modular plannable efficient sustainable independent expert streamlined

Software Architecture Web- and Mobile Solutions Dipl.

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

5 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

6 Modern Enterprise Web Applications with APEX HTTP BROWSER WEB HTML WEB LISTENER ORACLE DATABASE WITH APEX 6

7 Modern Enterprise Web Applications with APEX Challenges with modern enterprise applications User expectations 7

8 Modern Enterprise Web Applications with APEX Challenges with modern enterprise applications Unreliable connections 8

9 Modern Enterprise Web Applications with APEX Challenges with modern enterprise applications Scalability 9

10 Modern Enterprise Web Applications with APEX HTTP BROWSER WEB HTML WEB LISTENER ORACLE DATABASE WITH APEX 10

11 Modern Enterprise Web Applications with APEX HTTP BROWSER WEB HTML WEB LISTENER 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

12 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

13 Next Generation Web Standards: HTML5 13

14 Next Generation Web Standards: HTML5 14

15 Next Generation Web Standards: HTML5 Cross Document Messaging XMLHTTPRequest Level 2 Server-Sent Events WebSocket 15

16 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

17 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

Realtime Web Applications with HTML5 WebSocket

remote host W3C API and IETF Protocol Full-Duplex,

Shares port with existing HTTP content Two schemes

18 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

19 Realtime Web Applications with HTML5 WebSocket How WebSockets work 1 2 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 TCP-Sockets for the Web 19

20 Realtime Web Applications with HTML5 WebSocket WebSocket handshake: Upgrade from HTTP to WS protocol Client wants: ws://trivadis.com/triwebtrain Server accepts connection upgrade 1 Browser HTTP(S) GET /triwebtrain HTTP/1.1 Host: trivadis.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: 16-byte nonce, base64 encoded Sec-WebSocket-Version: 13 Server HTTP/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: 20-byte MD5 hash in base64 20

21 Realtime Web Applications with HTML5 WebSocket WebSocket connection established full-duplex message exchange 2 Browser WS(S) Server opcode length extended length mask data payload 2-14 bytes overhead per websocket frame 21

22 Realtime Web Applications with HTML5 WebSocket Real-time & full-duplex approaches: HTTP workarounds vs. WebSocket HTTP Polling Browser t Server WebSocket Browser HTTP Long polling Browser t Server t Server 22

23 Realtime Web Applications with HTML5 WebSocket WebSocket API //Create new WebSocket var mysocket = new WebSocket("ws:// // 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

24 Realtime Web Applications with HTML5 WebSocket WebSocket API //Create new WebSocket var mysocket = new WebSocket("ws:// // 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 24

25 Realtime Web Applications with HTML5 WebSocket Current WebSocket browser and server support Desktop Browsers Mobile Browsers phpwebsocket 25

26 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 26

27 HTML5 WebSocket and APEX HTTP BROWSER HTML HTTP LISTENER WEB JMS WS WEBSOCKET GATEWAY TCP ADVANCED QUEUING ORACLE DATENBANK MIT APEX 27

28 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 28

29 Showcase Demo «Trivadis WebTrain» 29

30 Showcase Architecture and Technology Stack HTML HTTP HTTP LISTENER HTTP WEBSOCKET JMS WEB GATEWAY AQ WS TCP JMS JMS APEX APEX 30

31 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 32

32 Realtime HTML5 Enterprise Application Showcase 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

33 More about Cloud, Next Generation Data Warehouse and Tools for efficient and safe operation of Oracle? FLOOR 3, STAND NO. 304 Trivadis AG Johannes Mangold Elisabethenanlage 9 CH-4051 Basel Tel Fax johannes.mangold@trivadis.com BASEL BERN LAUSANNE ZÜRICH DÜSSELDORF FRANKFURT A.M. FREIBURG I.BR. HAMBURG MÜNCHEN STUTTGART WIEN 34

Building next-gen Web Apps with WebSocket. Copyright Kaazing Corporation. All rights reserved.

Building next-gen Web Apps with WebSocket Copyright 2011 - Kaazing Corporation. All rights reserved. Who am I? Graham Gear Solution Architect, with Kaazing, purveyors of HTML5 enabling tech Based in London,