Skip navigation
  • Von: John Brock
  • 09/06/2018

A New JavaScript UI to Go with Your Cloud

As more and more of Oracle’s software is being moved to the Cloud, and service API’s are being exposed for existing products, there has also been a steady change in the architecture of those applications. The move from a server-side framework like ADF to a client-server architecture with ADF still used on the backend, but a new more lightweight JavaScript based UI being used for the client is providing a refreshing new look and interaction model for many of these applications.

This article first appeared in the bimonthly ORAWORLD e-magazine, an EOUC publication with exciting stories from the Oracle world, technological background articles and insights into other user groups worldwide.


What Is this New JavaScript UI?

Welcome Oracle JavaScript Extension Toolkit, or Oracle JET as it's more commonly called these days. JET is a modular Toolkit based on a collection of open source libraries and open source code contributed by Oracle to help JavaScript developers build pure client-side user interfaces that consume and interact with web services such as REST and WebSocket. The toolkit is designed so you can use as little or as much as you need. It’s as non-prescriptive in nature as possible.

What makes JET intriguing to developers of multiple languages, besides just JavaScript, is that it’s pure client-side. It isn’t something that you have to build into your server side architecture. It allows you to truly separate your view and data layers. 

Each year there seems to be more and more demand for developers to be versed in more aspects of the application stack, it's becoming critical for Database and Java developers to understand the client space as well as the traditional server space. Whether you are responsible for developing REST services that an application will integrate with, or the full application, you will inevitably need to know something about how that JavaScript client is written. It could be only for testing purposes, but you will most likely need to know how things work in the browser at some point.

How Quickly Can I Get started?

Oracle JET is designed to be comfortable to the traditional JavaScript developer. Installation is provided through the use of Node.js’s npm, while creation and manipulation of projects is provided via a command line interface (CLI). Starter templates are provided to get you up and running as quickly as possible. The steps below assume that you already have Node.js and npm installed on your system.

To install and create your own Oracle JET application, open a terminal or command prompt window and follow the steps below:

Using npm, install the following libraries

npm install –g @oracle/ojet-cli

Once you have the supporting libraries installed, you can create your first Oracle JET application by typing the following:

ojet create <application name> --template=navdrawer

This will create a subdirectory with the “application name” that you provided and then install and configure all of the required files for the Oracle JET application, using one of many sample “app shells” as a template. In this case, it will use an app shell that will work on both desktop and mobile web browsers. If everything goes correctly you should see a prompt similar to the linked image once the generator is done.

Getting started is always the tricky part for anything new. With Oracle JET you can use a unique feature of the JET website called the Cookbook. The linked image shows the starting page for the Cookbook. The code in the Cookbook is live, you can make changes to HTML, JavaScript, or CSS and see the changes with a simple click of the apply button. This is a great way to learn about the API, and various options for different UI components.

Once you are ready to add something to your own code, you can simply copy and paste the HTML and JavaScript to your own application and continue your development.

Accessibility Matters

It should also be noted that all Oracle JET UI components meet the Web Content Accessibility Guidelines (WCAG) v2.0 at the AA level, out of the box. While this may not mean a lot to all developers, it should be a goal of all developers to write software that can be used by all. Beyond this just being the right thing to do, it’s also a requirement for many government and public sector customers, as well as many enterprise companies around the world. Accessibility matters. You can learn more here.

Keeping Everything Neat and Tidy

The directory structure shown in the linked image is a pretty common one with JavaScript and CSS in their respective /js and /css folders. Build scripts are kept separate in their own /scripts folder. All of the main application code is placed under the /src folder so you can separate what would be included in source code management vs. what would be platform specific. The starter templates provided by Oracle JET are setup to allow you to build for multiple platforms. You can build a web or mobile hybrid application from the same source. Currently Android, iOS, and Windows are supported mobile platforms. At build time, native themes are added for the platform that you have selected, so that the applications form elements and other platform specific theming is automatically going to look like it’s a native app. You can see a lot of this in action by changing the themes in the Cookbook on the Oracle JET website.

In addition to the accessibility features mentioned earlier (which also carry over to mobile), all JET UI components are touch and gesture enabled out of the box. Touch screens are not just on mobile devices any longer. If you have a touch screen on your laptop, the JET based applications will be ready for you.

Data Interactions

Oracle JET is a pure client-side toolkit. Because of this, the only way to consume and interact with remote data is via Web Services like REST or WebSocket. You can use any method that you like for making the Web Service call. The most common way is to use jQuery AJAX or getJSON methods, but you can use plain JavaScript XMLHttpRequest API calls as well. For more complex data interactions, such as those used in applications that need to Create, Read, Update, and Delete (CRUD) data, JET provides a Common Model API that simplifies working with multiple types of datasources. You can read more about the Common Model under the Framework section of the JET Cookbook.

While Oracle JET has actually been in use for over four years now, it has only been available to the open source community since February 2016. Oracle has used JET as the foundation for over 70 percent of its new Cloud Service offerings so you know that it scales and meets the needs of very large enterprise scale applications. In the volatile JavaScript ecosystem, having a set of technologies and tools that you can rely on because Oracle is using them internally itself, is quite unique.

Learn More

JET is most powerful when you understand the concepts and ideas behind its creation. To get that understanding, you can read the developers guide, or take the free online training course. Both are great resources for beginners and those that are trying to get a little deeper into the toolkit. For announcements and interaction with others using Oracle JET, follow JET on Twitter @oraclejet or engage with other developers on the Oracle JET Community site. Links to all of these resources can be found in the footer of the Oracle JET website:


Are you interested in Oracle JET?

Then come to DOAG 2018 Conference + Exhibition. Here, too, the topic will be discussed in numerous lectures. The conference for Oracle users will take place November 20 to 23 in Nuremberg.

Further information and registration