Oracle JET: Real usage in ADF application – part 1

Oracle JET is the new kid on the block, as you might have heard. I’ve started diving in Oracle JET with the aim to develop some modules and later on to have them integrated in an ADF application. At first I had to understand how JET works so I’ve started the installation using the instructions from here. The downloaded instructions also include the information on how to create your first Oracle JET project. This was quite easy to do and, honestly, I didn’t expect it to be so easy. After surfing around the created projects I’ve identified some key points:

• index.html – is the “main” entrance for your JET application; usually JET applications are single page applications;
• js/main.js – is the JS file that is referenced by index.html and contains the Router for the JET application; in other words here you define the navigation for your application;
• js/viewModels/<your_module.js> –  is the JS file for your specific module, your application page if you like; here you code the specific model for your view, you define your “knockout” observables, which are bounded to the view, your REST calls etc.;
• js/views/<your_module.html> – is the HTML file where you code your view part for the module; here you will use the “knockout” bindings defined in the <your_module.js>;
• css/override.css – is the CSS file you use to change the default Alta skin that comes with Oracle JET;

I’ve iterated the above key points as those will be used also in the ADF application. At this moment the biggest concern I have is that the Oracle JET JS library is quite huge (approx. 11 MB in a minimized form and reduced to maximum the resources). But as you might know each module will load only the needed components as Oracle JET is using RequireJS, see more details about it here. Still your ADF application will end up having this 11MB in the EAR file.

Before you start working with Oracle JET, I recommend you go over the knockout tutorial, as this is a core part of Oracle JET. After you master knockout then just browse the awesome Oracle JET components gallery and pick up the component you need to build your application.

Before I started diving in Oracle JET, I had to ask myself the following:

Why integrate Oracle JET in ADF? 

I still believe Oracle ADF is a great J2EE framework, but sometimes it lacks in responsiveness and when you need your user interface to work very fast without too many round trips to the server then you need to use more JS client code, so why not use Oracle JET?

Why not use Angular or other JS frameworks?

That was another question that came to my mind. Firstly, Oracle JET has the same look and feel like ADF, but it is more responsive. Then it comes with a lot of ready to use components which also looks similar to Oracle ADF components. So I just need to figure out a way to safely integrate those two together without too much effort and without breaking ADF.

In the second part I will discuss about how to fix the Font reference used by Oracle JET, the font for ‘Alta Icon Font’, and how to deal with some undesired UI effects when using date time/select box components.