Announcing Oracle JET 4.0 and Web Components

DZone 's Guide to

Announcing Oracle JET 4.0 and Web Components

If you like working with Oracle JET, read on to check out the great new features the JET team has devised for web developers.

· Web Dev Zone ·
Free Resource

This release of Oracle JET brings many new features. None bigger than a completely new Custom Element based syntax for defining all JET UI components. We believe you will find this new syntax more intuitive and natural to work with when developing your HTML content. This is being done to further our effort to stay current with HTML standards and specifications such as the HTML5 Web Component specification. To learn more about developing with this new syntax, refer to the JET Developers Guide.

While you don’t have to move to the new custom element syntax when you migrate your application to use v4.0.0, it is highly recommended that you start all new work using this new syntax. The custom element syntax can co-exist with the existing data-bind syntax (e.g. ojComponent) in the same page without any problems. They are designed to work together until the time the data-bind syntax has reached End of Life, which is currently planned for on or about the time JET v8.0.0 is released (approx two years from the v4.0.0 release).

An example of the old and new syntax looks like:


<input id=”text-input” type=”text”
 data-bind=”ojComponent: {component: ‘ojInputText’, 
 value: value}”/>


<oj-input-text id=”text-input” value=”{{value}}”></oj-input-text>

Notice the use of {{ }} for the binding of the custom element value?

{{ }} represents two-way binding, while [[ ]] represents one-way binding. This is inspired by the binding syntax of Polymer. 

As always, the Release Notes will give you all the details about changes and updates in this release. Listed below are some of the highlights.

Web Components

Beyond the new custom element syntax, there are also some framework level enhancements in this release that are sure to please.

Content Delivery Network (CDN) Support

Oracle JET is now available via a CDN managed by Oracle. All JET libraries, as well as the versions of the 3rd party libraries that JET distributes, are included on the CDN. As of this release, resources are available for JET v3.1.0, 3.2.0, and 4.0.0. 
Learn more…


A very simple example of how this feature will help improve the performance of applications built with JET, can be seen here. The content placed inside of an <oj-defer> will not be rendered until the parent element calls for it. 
Learn more...

<oj-collapsible id="collapsiblePage">
  <h4 id="collapsibleHeader" slot="header">Deferred Content</h4>
    <div data-bind="ojModule: 'deferredRendering/content'">


Test automation can always be tricky when a toolkit/framework provides multiple types of animations and asynchronous data interactions. The JET BusyContext API provides multiple ways for testers to get control over their JET-based applications in these areas.
Learn more…

<div id="mycontext" data-oj-context>
       <!-- JET content -->
var node = document.querySelector("#mycontext");     
var busyContext = oj.Context.getContext(node).getBusyContext();     
busyContext.whenReady().then(function (){ 
  var component = document.querySelector("#myInput");
  component.value = "foo";
  if (!component.isValid()) component.value = "foobar";     

Composite Components

One of the more powerful features of Oracle JET is the new composite component architecture. This is JET’s implementation of the HTML5 web component specification for creating and sharing reusable UI elements. HTML code as simple as this


... can deliver something as complex as this complete memory game sample.
Learn more…


One of the greatest new features of JET v4.0.0 is something that will help you get started with your application, as well as add new features to an existing application. This command line interface (CLI) has been in preview for the last two JET releases but reaches an official state with JET v4.0.0. Creating a new application for Web, Mobile, or both, is as easy as:

$ ojet create myApp --template=navdrawer

add a new composite component to your application as simple as:

$ ojet create component my-component

Learn more…

Always a popular feature of JET is the Data Visualization (DVT) component set. With this release, there are improvements in performance across the board for the DVT components, but also some new features and functionality for some of the components.


  • New milestone, progress, and baseline elements.
  • Multiple positions for task labels now available.


  • New support for merged cells

Other new or updated UI components include…


This new component makes it easy to build responsive employee lists.


The ojTree component has been replaced with a completely re-written oj-tree-view component. HTML5 drag and drop functionality as well as support for icons and lazy loading of content on expand.

Color Pallet and Color Spectrum

The oj-color-palette and oj-color-spectrum components have been improved to provide easy inclusion of your own color schemes.

With over 1750 issues and features delivered in this major release, a year's worth of work on the new custom element syntax, and a collection of updated components, this is one of the more comprehensive releases the JET team has delivered. It’s our 17th consecutive on-time release, continuing to show our commitment to a consistent and reliable release cycle for our customers to take advantage of.

We hope you enjoy developing new products with this release, as much as we have enjoyed delivering it to you.

As always, if you have questions, comments, or constructive feedback, you can find us on Twitter (@oraclejet), StackOverflow, or the Oracle Developer community forums. We look forward to you getting involved in the Oracle JET Community.

Happy coding!

javascript ,client-side ,web dev ,oracle jet

Published at DZone with permission of John Brock . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}