Oracle JET and ADF Faces Integration in ADF

Method and information outlined below describes my personal research and doesn't define best practice. Such approach is not recommended/supported by Oracle and should be used at your own risk. Oracle is working on JET Composite components for ADF, to be available in the future. Limitations and caveats for this approach are described by Duncan Mills:

1. No session sharing between ADF and JET 
2. ADF and JET can’t use the same cache 
3. No shared transaction 
4. Separate timeouts 
5. Geometry management 
6. Drag&drop not possible between ADF and JET 
7. Different maintenance and different libraries 
8. Different popup’s and glasspane

Oracle JET provides a set of UI components, based on a combination of HTML and JavaScript. ADF Faces is an Ajax-enabled rich JavaServer Faces component framework that uses JavaScript to render client-side components, implement rich component functionality, validate user input and convert user data input. Although it is not officially documented, but obviously Oracle JET components can be integrated into JSF pages implemented with ADF Faces. I think such integration provides many benefits to ADF Faces. Use cases where performance is critically important can be implemented with Oracle JET client components and rich functionality can be implemented with ADF Faces, all in the same ADF application. Probably I would not create dependencies between Oracle JET and ADF Faces components rendered on the same page. Oracle JET should render data coming from REST services, while ADF Faces should work with data obtained from ADF Bindings layer.

I have managed to implement Oracle JET component and ADF Faces UI in the same physical ADF page. Oracle JET group renders input text, user types text and this text appears in the output below (use case is described here - Getting Started Quickly without the JET QuickStart). ADF Faces UI group renders regular ADF data entry form with navigation and save/cancel buttons. It all works together on the same page:

Download sample application implemented with JDeveloper 12.2.1 - SimpleADFApp.zip. I did not delete Oracle JET libraries from the sample application, so you could download and directly run it. Download size is a drawback, Oracle JET is part of application and it occupies around 11 MB.

Some text is entered into Oracle JET field, on enter it is copied into output below:

ADF also works as expected, for example I can change Salary value and commit changes with Save button:

ADF validation also works fine, I remove value for mandatory field and try to save. Required validation message will popup:

Take a look into ADF application structure with Oracle JET elements inside. Basically I just copied Oracle JET files into ADF ViewController public_html folder:

There is Oracle JET JavaScript file, where function is implemented to handle text entry and output update, pretty simple one:

Here it comes the most important part - ADF page. Instead of using HTML page to implement Oracle JET, I'm using regular ADF page based on JSF and ADF Faces. Oracle JET CSS and RequireJS script for Oracle JET are defined in the top of the page, just above the form - this will make sure correct initialisation for Oracle JET:

Oracle JET UI (input text, together with output text) is defined inside ADF Faces Panel Header with HTML div. This is how Oracle JET is rendered inside ADF page, using HTML:

Stay tuned and I will be posting more use cases on Oracle JET integration topic.