Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

Oracle JET: Getting Started With Modern Web Development

Andreas KoopNov 24 2015 — edited Dec 18 2015

While there are many JavaScript frameworks and libraries to choose from, few cover all the typical requirements for enterprise applications. This article by Oracle ACE Director Andreas Koop examines Oracle JET’s potential as an enterprise-grade framework for end-to-end client-side web application development, and then shows you how to get started building your first JET application.


by Andreas Koop ACED.gif

It was one of the great announcements at Open World 2015: Oracle JET, the JavaScript Extension Toolkit, entered the stage of client-side web application development frameworks. Although a lot of JavaScript frameworks and libraries are out there, very few cover all requirements that typically exist for enterprise applications. Oracle JET promises to be an enterprise-grade framework for end-to-end client-side web application development. In this technical article, I am going to give an overview of Oracle JET, its main concepts and how you can get started to build your first JET application.

01jet.png

Architecture for Modern Web Applications

Before doing a deep dive into implementation details, let's look at web architectures and patterns in order to classify Oracle JET properly and get a better understanding. The de facto standard pattern is MVC (Model-View-Controller) on the server side. Whether you are using Perl, PHP, Phyton or the Oracle/Java-based techniques like JSPs (Java Server Pages), Struts (Open Source Apache Framework), JSF (Java Server Faces) or ADF Faces, best practice is to separate your code into Model, View and Controller. See Figure 1 for illustration of this traditional pattern.

02jet.png

Figure 1: Server-Side Web Architecture using Model-View-Controller pattern

With the rise of HTML5, CSS3, and performant JavaScript engines, more and more is implemented on the client side. Starting with AJAX Calls and simple DOM manipulation (remember DHTML?), nowadays almost all UI logic, View Templates plus View Model is handled on the client side using JSON-based RESTful services, WebSockets or Server Sent Events (SSE) for backend communication. Business demands to target users on any device (TVs, tablets, mobiles, watches, glasses, and whatever is coming next) using Cloud Services, and the standardization of HTML5/CSS3/JavaScript, are the key drivers of the evolution of a new web application architecture for single-page applications (SPA). See Figure 2 for client-side architecture using Model-View-ViewModel pattern (MVVM).

03jet.png

Figure 2: Client-side web architecture for SPAs using MVVM pattern

The Model represents the application data, while the ViewModel exposes data from the Model to the View and maintains the application's (UI) state. The View defines the representation of how it should be displayed visually. To improve user experience (UX), modern web applications use the local storage HTML5 feature implemented by all modern browsers.

These kinds of applications typically communicate with the backend system through JSON-based RESTful APIs. Recent evolutions recommend a dedicated "Backend For Frontend"-API (BFF-API) on the server-side which exposes application optimized APIs rather than generic enterprise APIs. The BFF-API is based on custom business logic or simply uses existing enterprise APIs or third-party Cloud APIs (e.g., Google Maps, etc).

By the way: Mobile Cloud Service (MCS) is built with exactly the same architectural principles in mind. It enables you to create app-specific Mobile Backend as a Service (MBaaS) that can be composed of existing general purpose APIs.

Oracle JET (JavaScript Extension Framework): What’s in There

Oracle JET is engineered from a group of well known and proven Open Source JavaScript libraries and Oracle-specific implementation of UI components and CSS to fully meet/implement the Alta UI Design Guides and best practices.

Alta UI is the default

From my perspective, Oracle's Alta UI initiative is a logical move. Not only does it simplify the UI and improve the overall UX, it also enables existing enterprise applications to be modernized as lean architectures using Microservices and integration through RESTful services. Unsurprisingly, the default theme for Oracle JET UI components is Alta UI.

Oracle JET Development: The Basics

JavaScript

Beyond the basic technologies--HTML(5) and CSS(3)--JavaScript is essential; without it, it will be difficult to get started.

The most important things you should know is that JavaScript is a dynamically typed programming language and that it is prototype-based. No classes exist, just objects containing attributes and functions. Functions are first-class citizens that can be used as parameters. Inheritance relations are implemented by object cloning. Attributes and Functions can easily be added at runtime. That means it is very flexible and powerful, but your code might become fragile; most errors you will notice only at runtime.

jQuery/jQuery UI

jQuery is a JavaScript library designed for HTML Document Object Model (DOM) traversal and manipulation, events, and easy AJAX handling. Since browsers interpret JavaScript slightly differently, jQuery includes an API that makes it very convenient to write clean code. All the browser specifics are encapsulated and hidden from the web developer.

jQuery UI is a set of UI widgets, interaction effects, and themes built on top of the jQuery library. Oracle JET uses these concepts to expose all JET UI components as theme-able UI widgets.

Knockout

Knockout is a lightweight JavaScript library that helps to implement the MVVM pattern for HTML5/JavaScript UIs. Its key strength is in binding DOM elements with the view model, and in implementing view templates. Any time the model changes (depending on user action or external data changes), Knockout keeps the corresponding parts in sync. See Listing 1, below, to get an idea of how Knockout binds HTML DOM elements to a JavaScript-based view model.

04jet.png

Listing 1: Basic example of Knockout's binding and computation feature

Every time a user changes the input value and tabs out of the field, the view model gets updated automatically. Notice the update of the fullName property: there is no need to catch “onchange” JavaScript events. Knockout knows when to update the UI. With Knockout, the HTML/JavaScript code keeps clean and maintainable.

RequireJS

When dealing with many JavaScript dependencies, which is typically the case for any serious web application, RequireJS helps to manage library references and lazy loading of resources. It does so by implementing the Asynchronous Module Definition (AMD) API. Instead of having multiple script tags in the HTML file, there is only one single line pointing to the require.js library. The following example shows a typical use case:

05jet.png

Listing 2: index.html: Asynchronous loading of required JavaScript files with RequireJS

The data-main attribute tells require.js to load js/main.js after require.js loads. The main.js file is responsible for loading all further JavaScript files (see Listing 3, below):

05bjet.png

Listing 3: js/main.js: RequireJS loads required dependencies, then notifies via callback

Line 1 tells RequireJS to load three modules from the corresponding JavaScript files. The .js file extension is omitted. This convention makes it possible to upgrade for new module versions. It focuses on modules, not on the specific JavaScript files behind the scenes. Once the modules are loaded, the function in line 3 is called with references on each module if needed.

Note: In the JavaScript Module files, the define function will be used, not require--which is basically only for the initial bootstrap.

SASS

SASS (Syntactically Awesome Style Sheets) extends CSS3 and enables you to use variables, nested rules, mixins, and inline imports. Oracle JET uses the SCSS (Sassy CSS) syntax of SASS. Unless you want to create your own theme or override parts of the Alta theme, you do not really need to know many details about SASS. But it certainly will help you become an Oracle JET ninja.

Hammer.js

Oracle JET components use Hammer.js internally for gesture support. You do not need to know more about it to get started with JET development.

Rich UI Components Set

One of the most impressive things about Oracle JET is that it comes with a rich set of user interface components, including all traditional input elements for building beautiful UIs in great looking layouts, as well as comprehensive data visualization components. See Figure 3, below, to get a glimpse of some of the more complex UI components Oracle JET gives you.

06jet.png

Figure 3: Modern user interaction components available out-of-the box

Beyond the UI component set, style classes are available for implementing a powerful 12-column responsive grid system that supports four different device sizes: small, medium, large, x-large. See the Oracle JET Development Guide for great examples.

Built with Accessibility in Mind

Accessibility does not get as much attention as it should. Accessibility means that someone working with assistive technology (like a screen reader) can explore and use the web application without a touch or mouse input device, using only keyboard and braille display. For the visually impaired, it is very important to have such color contrasts that the application is usable on black/white screens.

W3-Standard for Accessibility, the Web Content Accessibility Guidelines (WCAG) 2.0, and (since 2014) WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 1.0 specifically address dynamic content and user interface components developed with Ajax, HTML(5) and JavaScript. They define semantics through additional attributes and metadata on HTML elements, making the web more accessible. Most screen readers nowadays are supporting these so-called WAI-ARIA attributes (e.g., role=“dialog“ on a DIV-element to tell the browser/screen reader that everything inside the DIV is meant to be content in a popup dialog).

Creating accessible web applications is a great challenge. Having a toolkit in which these requirements are implemented from the beginning is just awesome. Figure 4 shows an example of how Oracle JET implements the Input Date UI Component through proper usage of WAI-ARIA attributes:

07jet.png

Figure 4: WAI-ARIA attributes make Oracle JET's InputDate (with DatePicker) UI component accessible by default

In the given example, the aria-describedby attribute is used in conjunction with a visually hidden div-element to give screen readers additional information on the input component. It is the resulting HTML5 code. There's no need to care about that when developing the UI with Oracle JET--the ojInputDate component handles all that.

Internationalization (i18n) and Localization (l10n)

Oracle JET has great support for i18n and l10n. For right-to-left languages (such as Arabic and Hebrew), there is built-in support in existing JET components (see example ojInputDateTime in Figure 5, below):

09jet.png

Figure 5: Internationalization with right-to-left language support

Creating custom resource bundles is also supported. Unlike in Java, the translations are not put into property files but into JavaScript files. To look up the defined translations, Oracle JET provides the oj.Translations object. See Listing 4, below, for an example of defining and using translations:

08jet.png

Listing 4: Defining and using translations in JavaScript file

Theming

The default theme in Oracle JET is Alta UI, implemented by utilizing SASS features. The only single 3rd-party CSS included is normalize.css. It is recommended that you extend the default Alta theme by overriding the desired parts or extending your own custom components. This makes total sense since the Oracle UX team has invested a lot of effort.

According to the Oracle JET development guide (v1.1.2), support for custom themes is also available.

Security

The most important part should be secured on your server-side. On the client side, you have to deal with some security aspects as well. Oracle JET does so by following common best practices inside its rich UI components. That is:

  • Executing all JavaScript code in strict mode
  • Not using inline script elements
  • Not generating random numbers
  • Escaping/sanitizing all generated HTML code

Oracle JET also brings an oj.OAuth API, which supports the OAuth 2.0 protocol, but I am not going into details about that in this article.

Finally, it is the developer's responsibility to follow current recommendations for writing secure JavaScript code (https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript)

Working with the Oracle JET Cookbook

Developing web applications with Oracle JET may be different from the expected declarative approach. Instead, development is done pretty much by copying and pasting code from the Oracle JET Cookbook; it contains recipes for every UI component: the HTML5 templates code, the sample JavaScript code to handle events and setup the View Model, and a comprehensive API documentation. The most exiting thing about the JET Cookbook is that you can change the sample code and preview changes right inside the browser. Figure 6 shows the recipe for the slider component:

10jet.png

Figure 6: Oracle JET Cookbook recipes consist of a preview, a modifiable view template and corresponding JavaScript Event-Handler

Set Up a New Oracle JET Application

To actually start developing an Oracle JET web application, there is a QuickStart Basic Template ZIP file for download. The QuickStart Basic Template implements a single page application (SPA) that is structured for modular development using the described JavaScript libraries RequireJS and Knockout templates. See Figure 7 for the application source structure and the resulting preview:

13jet.png

Figure 7: Modular Oracle JET Quickstart Template

Instead of having all the application markup in the index.html file, the template uses data-bind syntax and an ojModule binding to bind either a Knockout view template containing the HTML markup for the section or both the view template and the JavaScript file containing the ViewModel for any components defined in the section. See Listing 5:

11jet.png

Listing 5: index.html: Modular SPA template

With the ojModule directive you are telling Oracle JET to bind the given div element to the navContent.tmpl.html (the suffix is predefined in main.js). This is how it works for the Navigation and Complementary regions. For the dynamic Main Content region, it derives the name (of the JS file that contains the ViewModel and the HTML template filename) from the router. The return value of router.stateId() is set to the current value of the ojRouter object. The ojRouter object is defined with an initial value of "home" in the application's main.js file, which bootstraps the application. See Listing 6:

12jet.png

Listing 6: js/main.js: The ojRouter enables dynamic regions in Oracle JET

Since "home" is defined as default in the router configuration, Oracle JET will initially render home.tmpl.html template with the home.js view model.

Note: You will see „var self = this; self.firstName = etc…“ in nearly every view model. Since "this" refers to different objects depending on the call-stack / execution context, one can save a reference to a particular object by assigning it to another variable (here: "self“).

To summarize: the QuickStart template follows the Alta UI design principles and best practices and is a good starting point for new applications--just remove unneeded parts and you are good to go.

Going to Real World Requirements: Display Data from RESTful Services

To go beyond introductory basics, it is good to see a more sophisticated example. As described, it is common to consume data from RESTful services. Figure 8 demonstrates the result of the following basic example displaying a table of employees:

16ajet.png

Figure 8: Displaying JSON data in a basic sortable table

As a newbie to Oracle JET, you need the following to create this by your own: JET Development Guide and JET Cookbook for the basic table, and of course a JSON source (e.g., https://gist.github.com/multikoop/98a664f3c39782a60913).

Starting with the HTML view, the template is pretty straightforward. Copy the code snippet and paste in home.tmpl.html (see Listing 7):

17jet.png

Listing 7: home.tmpl.html: HTML/Knockout template for a basic sortable table

Next, the bound datasource must be defined in the ViewModel. Actually, the datasource object is responsible for serving the Collection and fetching the JSON data. See Listing 8, below, for the empViewModel, defined in modules/home.js to get the idea.

18jet.png

Listing 8: modules/home.js: The View Model for the employees basic table

The most interesting parts here are the concept of the Model and the Collection: Emp-Model defines a single record, while Collection represents a list of those records. Oracle JET brings some basics like the oj.Model, oj.Collection, and oj.CollectionTableDataSource, which triggers the underlying operations (fetch, parse, etc.) for you.

Optionally, if you need to customize the mapping between JSON attributes and your View Model, you can define a "Parse“ function. To keep the sample simple, it is commented.

Deploying and Running JET Applications

Oracle JET applications are typically just a collection of HTML, JavaScript and CSS files; you can just copy those files to any web server to serve the application.

In practice, you might want to bundle the Oracle JET application together with your backend RESTful services. Using JAX-RS you could bundle the application as WAR and deploy it to a Java EE application server (e.g., WebLogic Server). Another option could be to bundle it as a Node.js application if you want to stay in JavaScript land.

Tools and Best Practices

For lightweight HTML5/JavaScript development, there is pretty much no restriction in what development environment to use. Although you can go with Notepad, SublimeText, Atom, Brackets (with Brackets-Live feature), or Visual Studio Code, I have a recommendation for getting started.

NetBeans with Oracle JET Plugin

NetBeans has long had great support for HTML5, JavaScript, and even many JavaScript libraries and frameworks like Node.JS, Ember, Knockout, AngularJS, Backbone.js, etc. These built-in features make it particularly well-suited to be used for Oracle JET development.

Download NetBeans (minimum version 8.1), install and start it. Next, install the JET Plugin through Tools > Plugins > Search for JET and get going.

13bjet.png

Fig. 9: Oracle JET Support Plugin for NetBeans

Once the Oracle JET Plugin is installed, select New Project and search for "jet“ to strip down the choice (See Figure 10):

14jet.png

Fig. 10: Create a new project based on the Oracle JET QuickStart Template right from NetBeans

Lightweight web server and JavaScript debugging

To take full advantage of the NetBeans integrated tools for HTML5 development, you should install the NetBeans Connector extension for the Chrome browser (see https://netbeans.org/kb/docs/webclient/html5-gettingstarted.html for additional information). Once you've done that, it's breeze to make changes to your JET code and get a live preview in Chrome every time you save your changed files. You also get powerful capabilities for debugging JavaScript code. Figure 11 shows the main features of the NetBeans Connector for Chrome:

15jet.png

Figure 11: The NetBeans Connector greatly improves productivity while developing and debugging Oracle JET applications

Summary and a Look into the Future

Oracle JET provides a comprehensive toolkit in the ever-growing JavaScript landscape. Its complete set of UI components and Data Visualization Tools makes it very attractive. Beyond the visual features, it has great built-in accessibility support. Oracle JET uses proven open source JavaScript Libraries, making it easy to get started because there is a lot of learning material out there.

The built-in capabilities for theming, internationalization and security make it clear that Oracle JET is serious about the ongoing evolution of JavaScript for enterprise application development. Most of Oracle's Cloud Service UIs are built with JET right now.

Some parts are still missing to fully meet the "end-to-end“ requirement for full-stack client-side frameworks. In the JavaScript ecosystem, the build system Grunt/Gulp, Yeoman Generator, Jasmine for testing, etc., have become de facto standards. Having talked to the Oracle JET product managers, I expect that Oracle JET is going to adopt those build pipelines and that it will be open sourced on GitHub soon.

The development experience with Oracle JET is quite code-centric. With the upcoming Application Builder Cloud Service (ABCS)--which is built by JET--there will be a browser-based, declarative environment in which to build JET applications. Its main target audience will be business users/citizen developers, who will be able to build UIs by dragging and dropping. Extension hooks for CSS, HTML and JavaScript for implementation of more complex use cases are to be expected.

Do not forget: We are in JavaScript land. Parts of Oracle JET may change in future. Current trends are going towards more type save programming with TypeScript. The WebComponent Standardization is ongoing. The future of web application remains pretty exciting.

Further Information

Where to go from here? Start learning JavaScript. Download NetBeans and install the Oracle JET Plugin through the Plugin Manager. It’s the easiest way to get started. Move on with the Oracle JET Development Guide for technical details.

Stay informed of Oracle JET product updates and community driven content by following:

Have fun!

Resources

About the Author

15-ak-profil.png

Oracle ACE Director Andreas Koop (@andreaskoop) is working as Solution Architect, Technical Lead or Trainer on different IT projects using Oracle technology. He is co-founder of enpit, a German-based company specializing in Consulting Services for Oracle Middleware technologies and Oracle Cloud offerings. He enables customers to successfully implement Business Solutions based on Oracle Middleware & Oracle Cloud products. As an active member of the German Oracle User Group (DOAG) and regular speaker at different conferences, Andreas shares his knowledge with the worldwide Oracle Community on his blog, in community meetings, on GitHub or on social media channels. In his spare time he enjoys life with his wife, family and friends. Whenever time permits, Andreas is making music, playing soccer, and biking.


This article represents the expertise, findings, and opinion of the author. It has been published by Oracle in this space as part of a larger effort to encourage the exchange of such information within this Community, and to promote evaluation and commentary by peers. This article has not been reviewed by the relevant Oracle product team for compliance with Oracle's standards and practices, and its publication should not be interpreted as an endorsement by Oracle of the statements expressed therein.


Comments

Hi Andreas, This is a very informative article thanks for posting! Ive been curious on what the best practices are for consuming a REST service that requires basic or other types of authentication. If the REST service is backed by SOA then we typically use OWSM policy to secure this. Also most REST services are hosted on a server different from the consuming client so there are CORS issues as well. I have not seen clear examples of these two issues being resolved in JET. thanks, Vikram

Parikshit Kumar Singh Oct 20 2016

Really Great.

Looking for more stuff like this. I have OJET in my Project.

Parikshit Kumar Singh Jan 16 2017

GITHUB URL is not working. Kindly provide us the updated one. It will improve your content for sure.

Karthik Naidu Nov 17 2017 — edited on Nov 17 2017

Hey Andreas,

Couple of questions -

  1. Are you using RequireJS + KnockoutJS for client side binding(with API’s)?

    2. Can we have a custom development of the same with something like Webpack + HandlebarsJS / ReactJS / AngularJS?

1 - 4

Post Details

Added on Nov 24 2015
4 comments
25,298 views