OFM Forum 2016 slides for Oracle JET and WebSocket

1. Oracle JET and WebSocket
Andrejus Baranovskis
Technical Expert

2. ADF, MAF, JET, BPM, ACM, SOA, WebCenter, Cloud
Small Team of Experts, Focused on Technical Quality
Customers – Global Corporations, Medium and Small Business
Oracle Technical Blog – 10 Years (~800 posts)
Oracle Fusion Middleware Partner Community Award for Outstanding
ACM/BPM Contribution 2015, Oracle Fusion Middleware Innovation
Award 2010, SOA Partner Community Award for Outstanding
Contribution Across the Globe 2010
Company Profile

3. Agenda
Oracle JET and WebSocket Overview
WebSocket Implementation
Oracle JET Implementation
Oracle JET and WebSocket Integration
Live Data Demo
Oracle JET Rendering in ADF

4. Oracle JET and
WebSocket Overview

5. Oracle JET Overview
Oracle JET (JavaScript Extension Toolkit) – a modular toolkit based on modern JavaScript, CSS3, and
HTML5 design and development principles. Leverages popular Open-Source frameworks and adds
advanced functionality:
 Rich set of UI components
 Advanced two-way binding
 Advanced Routing System
 Smart Resource Management
 Validation framework
 Open Source

6. WebSocket Overview
 WebSocket is a protocol providing full-duplex communication over a single TCP connection
 Allows to open an interactive communication session between the browser and the server
 Sends messages to the server and receives responses without having to poll the server for a reply
 Low latency, near real time connection between the client and the server
 Designed to work well with existing Web infrastructure
 Standardized by the IETF as RFC 6455 in 2011
 Supports secure connections and allows bi-directional client/server communication
 Supported by WebLogic 12c
 Supported by Firefox, Google Chrome, Safari, Internet Explorer and Opera

7. WebSocket Overview
 Direct communication
 Scalable and fast
 Notifications from back-end
 Notifications from client
 HTTP traffic reduction
 No Pooling
http://www.websocket.org

8. WebSocket Overview
 HTTP Performance – police metaphor
Anything new?
No
No
No
No
No

9. WebSocket Overview
 WebSocket Performance – police metaphor
Listening radio
and receive
order
Delivers order

10. WebSocket
Implementation

11. WebSocket Implementation
 Supported by WebLogic 12
 Straightforward API – sendObject method

12.  Message encoder/decoder
 WebSocket configuration
WebSocket Implementation

13. WebSocket Implementation
 Client Side JavaScript

14. Oracle JET
Implementation

15. Oracle JET Implementation
 Top level require call executed by application in main.js
 Bindings are initialized on page load in ViewModel JS function

16. Oracle JET Implementation
 Pie Chart collection and observable array
 Automatic UI data re-load through observable

17. Oracle JET Implementation
 List observable array and table data source
 Automatic UI data re-load through observable
 Rate limit configuration

18. Oracle JET Implementation
 Pie Chart UI implementation – referencing binding value and format

19. Oracle JET Implementation
 List UI implementation – referencing binding value and layout template

20. Oracle JET and
WebSocket Integration

21. Oracle JET and WebSocket Integration
 WebSocket client JavaScript integration into JET page

22. Oracle JET and WebSocket Integration
 WebSocket connection is initiated on JET load
 WebSocket onMessage calls method in JET context

23. Oracle JET and WebSocket Integration
 Live data update in JET

24. Live Data Demo

25. Live Data Demo
 DB is updated from separate thread
 Each 4 seconds update arrives
 JET Chart UI refresh
 JET List UI refresh

26. Oracle JET Rendering in
ADF

27. Oracle JET Rendering in ADF

28. Oracle JET Rendering in ADF
 Use cases:
Render live data in ADF through JET island
Build public facing scalable sites with JET and back-office systems with ADF
 Possible to use JET island in ADF
 ADF timeout does not count activity in JET island
 Oracle statement: Should not mix ADF and JET, only in special use cases
 No official Oracle support

29. Oracle JET Rendering in ADF
 Place JET UI code into ADF Fragment

30. Oracle JET Rendering in ADF
 ADF Fragment with JET UI code add into main ADF page with simple Include

31. Oracle JET Rendering in ADF
 Add JET CSS into main ADF page using af:resource tag

32. Contacts
Andrejus Baranovskis
Blog: http://andrejusb.blogspot.com
Web: http://redsamuraiconsulting.com
Email: abaranovskis@redsamuraiconsulting.com
Phone: +370 640 14737