An Intro into Oracle JET 15.x

It's been a while since I last got the chance to work with Oracle JET; but I was fortunate to jump into a few sessions at CloudWorld and have a beer or two with John Brock to discuss the latest magic.

It's come a long way from the days of using requireJS, Knockout and JqueryUI and it's MVVM architecture to now adopting Preact and it's new Virtual DOM architect - both models are still supported today.

If you've heard of Oracle VBS Oracle's developer platform - it's entirely written with JET and also integrated with the updated SaaS solutions - which were originally ADF and now rewritten with JET using Oracle's Redwood Experience.

Create Web and Mobile Apps from a Browser

Oracle Visual Builder helps organizations build mobile and web apps using a visual browser-based development environment.

Oracle

What is Oracle Redwood?

Oracle Redwood is Oracle's new design system

- previously JET had their own known as Alta which has now been replaced for Oracles Award Winning new design system that is used throughout all of Oracles Apps and sites - if you are aware of Googles Material Design, or Adobe Spectrum this is Oracles and has won 2 consecutive awards for being the best not achieved by anyone else in the industry!

So what does it consist of?

Design Patterns
If you are ever stuck with inspiration and need help with UX best practices for developing applications head over to Oracle patterns and look at recommended approaches for creating interfaces from dashboards, to Search interfaces and more..
https://redwood.oracle.com/?shell=pattern-book

Redwood Toolkit (Figma)
If you are designer take a look at the Redwood Toolkit to quickly create your new application from scratch before you begin developing with Oracle JET or VBCS
https://redwood.oracle.com/?pageId=CORECDBC4C6D38D74839978B85DB7FDAFD35&shell=simple-content

Visual Builder Studio
If you want to create your apps with drag drop interface Visual Builder is the way to go dropping in prebuilt Redwood components and configuring the data connections
https://redwood.oracle.com/?pageId=COREB97ABF09B9A44C5688E9A99494268CE1&shell=simple-content

JET
If you like to get your hands dirty and write your app from the ground up using NodeJS then JET and their core pack component library is the way to go.. -

Further down I'll show you how to get started with Oracle JET

Head over the https://redwood.oracle.com/ to learn more..

Creating your first Oracle JET Project

So lets dig in - make sure you have NodeJS installed..

Open your terminal and drill into your folder where you want to create the project. "<app name>" replace with your project I'm calling mine "bitmapbytes".

npx @oracle/ojet-cli create <app name> --template=basic --vdom

This cmd will install Oracle JETs CLI which you can then in the future call directly using the ojet cmd like this:

... and it brings back all the actions available to you.
The CLI has been really well built you could just use ojet create and it will provide a guided journey asking you how you'd like to setup the new JET project..

Alternatively you can trigger the help options  like this to get back a more detailed list of cli options you can add to the cmd with a list of examples -

For now we are just going to create a basic JET template using the Virtual DOM architecture.

Drill into your new project folder and run your new JET Project:

cd <app name>
npx ojet serve

It should auto launch your new JET Project in your browser
- here is the blank project:

Lets drop in a JET Core Pack component to the page..

Edit and open up the landing page:

<Project>\src\components\content\index.jsx

Import the component - here we import the button component line 2 and then add the component to the page line 7.

For a list of components head over to JET API Reference page: https://www.oracle.com/webfolder/technetwork/jet/jsdocs/index.html

For more examples on using components as well as the new Core Pack components head over to the Oracle JET Developer Cookbook. You'll also notice their is a flag showing the newly rewritten components as core pack - the older component is also still supported.

Here you can see both examples of the same components - my recommendation when possible use Core Pack.

Conclusion

Hope this gives you a bit better understanding of Oracle JET, Redwood and the art of the possible when it comes with developing with Oracle JET.