X

Step Up to Modern Cloud Development

  • September 27, 2017

Announcing Oracle JET 4.0 and Web Components

John Brock
Product Manager

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:

Old:

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

New: 

<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. 
Learn more…

A new Getting Starting video is also available for a high level overview of the new release.

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…

ojDefer

A very simple example of how this feature will help improve 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>
  <oj-defer>
    <div data-bind="ojModule: 'deferredRendering/content'">
    </div>
  </oj-defer>
</oj-collapsible>

ojBusyContext

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 -->
        ...     
</div>      
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:

<demo-memory-game 
  id="game1" 
  cards="[[chartImages]]" 
  on-attempts-changed="[[updateAttempts]]" 
  on-has-won-changed="[[showWinnerPopup]]">
</demo-memory-game>

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

ojet-cli

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 simply 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.

ojGantt

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

ojDataGrid

  • New support for merged cells

Other new or updated UI components include…

ojAvatar

This new component makes it easy to build responsive employee lists

ojTreeView

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 years 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!

The Oracle JET Team

Join the discussion

Comments ( 2 )
  • Gayathri Sarmishta Amara Wednesday, January 3, 2018
    Great blog. Want to stay updated.
  • Maviswa Monday, February 19, 2018
    Hi,

    Can you please let me know which IDE(and it's version) do we need to use to try out samples of OJET 4.0??

    Thanks In Advance,
    Vidya
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha

Recent Content

Oracle

Integrated Cloud Applications & Platform Services