Oracle JET — OJET for Hybrid Application Development

In this tutorial, we will be learning the basics of OJET and we will also set up our development environment for Hybrid application development.

App “Development Stage” Lifecycle:

Note: Serve is only used for viewing your application in a local development environment with a local dev server (usually a NodeJS-based server) hence it is never seen in the production.

App “Production” Lifecycle:

After building an application for the production, the built files (HTML, CSS, and JS files — already minified while release build) are placed and served using production-grade servers like Apache / Nginx / Lightspeed /Oracle HTTP Server (Apache Based) / Oracle Weblogic Server.

1. How to create an OJET Hybrid Application?

2. Structure and function of files and folders in created OJET Application:

3. What is the entry point of the application in the src development directory?

Entry Point is the index.html file.

Important parts of the index.html file (highlighted):

I. Link tags containing favicon and app.css

II. Injector:theme which is used by OJET CLI (during serve/build)to inject the Redwood/Alta theme according to the defaultTheme key in oraclejetconfig.json

III. The script tag containing the RequireJS library which is a file/module loader.

IV. Another script tag — main.js which is the main entry point for Javascript.

4. What is RequireJS and why is OJET using it in its application?

RequireJS is a JavaScript file and module loader that simplifies managing library references and is designed to improve the speed and quality of your code.

RequireJS implements the Asynchronous Module Definition (AMD) API which provides a mechanism for “asynchronously” loading a module and its dependencies.

Oracle JET’s modular organization enables application developers to load a subset of needed features without having to execute require() calls for each referenced object. Each Oracle JET module represents one functional area of the toolkit, and it typically defines more than one JavaScript object.

5. Can we not load all dependencies using script tags directly in index.html?

We can load all dependencies directly in the index.html but the page load time will be a lot higher moreover loading dependencies in a certain format is a tedious process hence we depend on module loaders like RequireJS which make asynchronous calls to fetch and load scripts into the browser.

6. What does this main.js contain?

Important Parts of this file (highlighted):

I. RequireJS configuration has been added with baseUrl pointing to the js folder. It means RequireJS will start searching files mentioned in paths the key in the js folder.

II. Anything betweeninjector:mainReleasePaths and endinjector will be deleted and new paths will be added by OJET CLI during ojet build/serve from the src/js/path_mapping.json file.

It means if we have to add a library to RequireJS dependencies we will have to change src/js/path_mapping.json file.

III. If the build is for a hybrid environment OJET adds a oj-hybrid class to the body of the HTML and we wait for Cordova to fire the deviceready event for the initialization of our application. In either case, init is the entry point of our application JS.

IV. appController.jsa file in the same directory as main.js is loaded into the application using require and a new instance of the AppController viewModel which is returned by the appController is bound to the application HTML Element with IDglobalBody in our case.

7. What does this appController.js contain?

It contains the root ViewModel of the application which initializes the CoreRouter and ModuleRouterAdapterwhich helps the application in finding the maintaining the router state and (view, viewModel) mapping.

8. How to add web browser capability to hybrid application?

OJET Documentation

9. How to add TailwindCSS to OJET?

tailwind.config.js — In the root directory.

Create a main.css in the src folder:

In scripts/hooks — Change these hooks (before_build.js, before_serve.js)

10. Pre-requisites for building an application for android platform?

Perform the following tasks: Create folders if they don't exist.

Extract here: C:\Android\SDK\cmdline-tools\tools\<zip-contents-here>

  • Set JAVA_HOME to the root of the Java directory.
  • Add bin folder in JAVA_HOME to PATH.
  • C:\Gradle => bin folder to PATH
  • Set path of cmdlinetools/tools/bin => PATH
  • sdkmanager “platform-tools”
  • sdkmanager “<buildtools+version>”
  • sdkmanager “<platforms+android32>”
  • Add C:\cmdlinetools\platform-tools=> PATH

11. How do Hooks work in Ojet?

To be updated. Original Documentation

12. How to add “Prettier” to project for code formatting?

To be updated.

13. How to add “ESLINT” to audit fix problems during development?

To be updated.

14. How to add “Redux” for state management?

To be updated.

15. How to build application for Web, Android, IOS?

To be updated.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store