oracle jet and websocket

Oracle JET and WebSocket

Andrejus BaranovskisTechnical Expert

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

Agenda

Oracle JET and WebSocket Overview

WebSocket Implementation

Oracle JET Implementation

Oracle JET and WebSocket Integration

Live Data Demo

Oracle JET Rendering in ADF

Oracle JET and WebSocket Overview

Oracle JET OverviewOracle 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

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

WebSocket Overview

Direct communication

Scalable and fast

Notifications from back-end

Notifications from client

HTTP traffic reduction

No Pooling

http://www.websocket.org

WebSocket Overview HTTP Performance – police metaphor

Anything new?

NoNoNoNoNo

WebSocket Overview WebSocket Performance – police metaphor

Listening radioand receive order

Delivers order

WebSocket Implementation

WebSocket Implementation Supported by WebLogic 12

Straightforward API – sendObject method

Message encoder/decoder

WebSocket configuration

WebSocket Implementation

WebSocket Implementation Client Side JavaScript

Oracle JET Implementation

Oracle JET Implementation Top level require call executed by application in main.js

Bindings are initialized on page load in ViewModel JS function

Oracle JET Implementation Pie Chart collection and observable array

Automatic UI data re-load through observable

Oracle JET Implementation List observable array and table data source

Automatic UI data re-load through observable

Rate limit configuration

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

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

Oracle JET and WebSocket Integration

Oracle JET and WebSocket Integration WebSocket client JavaScript integration into JET page

Oracle JET and WebSocket Integration WebSocket connection is initiated on JET load

WebSocket onMessage calls method in JET context

Oracle JET and WebSocket Integration Live data update in JET

Live Data Demo

Live Data Demo DB is updated from separate thread

Each 4 seconds update arrives

JET Chart UI refresh

JET List UI refresh

Oracle JET Rendering in ADF

Oracle JET Rendering in ADF

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

Oracle JET Rendering in ADF Place JET UI code into ADF Fragment

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

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

Contacts

Andrejus Baranovskis

Blog: http://andrejusb.blogspot.com

Web: http://redsamuraiconsulting.com

Email: abaranovskis@redsamuraiconsulting.com

Phone: +370 640 14737