Getting Started with Oracle JET: install and javascript web application creation

Oracle JET basics - install and build web application on JavaScriptRapid application development is the trend of building web applications today with the evolution of web 2.0 and the web frameworks. They are no more just represent the View portion of the MVC architecture, but also cover the responsibility of MVC architecture on the application interface (client-side MVC). This has become a reality with the growth of a number of web frameworks over the last decade. This has motivated organizations like Google and Facebook to develop frameworks such as Angular JS and React JS, which are ready to serve cloud application architecture. The Oracle Corporation observed the trend and appraised the future needs of web applications and developed a simple but efficient web framework by integrating Oracle and open source JavaScript libraries



In this article we will cover:

  • Getting started with Oracle JET
  • How to bootstrap your first Oracle JET project
  • Setting up npm and Node.js
  • Installing Yeoman and Grunt
  • Installing Oracle JET generator
  • Creating a project using the command line
  • Running a project with Grunt
  • Managing and running the project using the NetBeans IDE

Oracle JavaScript Extension Toolkit (JET) is an engineered toolkit containing the Oracle and open source JavaScript libraries. It supports the Model-View-ViewModel (MVVM) architecture, which allows the model to represent the application data, the view for the presentation, and the ViewModel to help manage the application state and expose data from the model to the view. The framework empowers the application developers by providing an open source modular toolkit developed using the recent JavaScript, HTML5, and CSS3 architecture principles. Oracle JET helps developers build both web-based and hybrid (mobile) applications that can easily integrate with other server-side applications and products running on cloud environments as well. It uses the trendy Oracle Alta UI for adding the application and to easily match your business context.

The following diagram represents the Oracle JET framework alignment in MVVM design:

Oracle JET features

The following are the set of features provided by the Oracle JET framework:

  • Comprehensive toolkit for web development
  • Embeds the widely known open source frameworks
  • Single-Page Application development support with template-based architecture and a powerful routing system
  • Built-in support for accessibility
  • Messaging and event services for both the model and view layer
  • Great support for internationalization, with more than 28 languages and 180 locales
  • Set of efficient and useful UI components with a validation framework
  • Two-way binding at its best
  • Better resource organization
  • Built-in support for mobile application development
  • Caching to support efficient pagination
  • Support for REST service invocation 
  • Integrated authorization using the OAuth 2.0 data model for REST services

Single-Page Applications (SPAs) are web apps that load a single HTML page and dynamically update that page as the user interacts with the app. SPAs use AJAX and HTML5 to create fluid and responsive web apps without constant page reloads. 

Oracle JET makes use of the following popular open source libraries along with JET components:

  • jQuery: JavaScript library with a range of useful utilities for REST, AJAX, animations, and JSON handling
  • jQuery UI: Helps in wrapping the Oracle JET components as robust UI components
  • Knockout JS: Provides two-way data binding support
  • RequireJS: Provides modularity and lazy loading of the resources via Asynchronous Module Definition (AMD)
  • Syntactically Awesome Style Sheets (SASS): Extends CSS3 to enable nested rules, inline imports, and mixins
  • Apache Cordova: For hybrid (mobile) application development
  • Oracle Alta UI: The UI design system for trendy interface design

 

Bootstrapping your first Oracle JET project

Generating your first Oracle JET project, managing it using an IDE, and running it on your computer is way easier with a modern set of tools and techniques such as Node.js, npm, Yeoman, and Grunt.

All this can be achieved using the standard mechanism including the following steps:

 Bootstrapping your first Oracle JET project

You can also use other techniques, such as generating the project using IDE plugins or downloading the ZIP version of the templates and importing them into projects. ZIP versions are available for download at this.

 

Setting up npm and Node.js

Before setting up npm and Node.js, let us understand these terminologies and how they help us in application development. Node.js is a JavaScript runtime environment built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. npm from Node.js is the package manager for JavaScript which helps in discovering the packages of reusable code and assembles them in powerful new ways. By using npm, you can install, share, and distribute your code easily and manage the project dependencies wisely. Node.js installation comes with npm and can be downloaded and installed from its home page.

We used the latest stable version available (v6.11.1 LTS) for the setup, as shown in the following steps:

  1. Download Node.js, installable from its home page (https://nodejs.org/en/).
  2. Run the installable, which starts up with the following interface:

Node.js installing

  1. Click Next and accept the terms in the following interface: 

  1. Choose the installation directory. I am happy with the default directory provided and continue to the Next step, as follows:

 

  1. The next step gives us the Node.js runtime engine and npm package manager along with the documentation shortcuts and path entries. We can leave the default options selected and go to the Next step, which takes us to the final step: 
  2. Click on the Install button, which should install Node.js, along with the npm package manager, on your computer:

Please be advised that neither the Node.js nor the npm have GUI. They are only accessible through the command line interface, hence you would need to run the commands on the command line.

  1. Once the installation is complete, you should see the success status as follows:
  2. Once the Node.js and npm installation is complete, you can open the command prompt and verify the installation and version using the commands shown in the following screenshot:

Installing Yeoman and Grunt

Yeoman is the scaffolding tool for web applications, and easily kick starts your new web project development, ensuring the best practices are covered. This means that you don’t have to go through the initial project setup tasks you would normally go through to get started; instead, get ready to use application structures along with modular architecture.

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, linting (the process of running a program that will analyze code for potential errors), and so on. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt helps in automating the tedious non-functional activities such as minimization, compilation, unit testing, and linting. It's much easier than the method we have been using for years.

We can install them together using the following command: 

npm -g install yo grunt-cli

This should complete the installation, as shown in the following screenshot:

Installing Grunt

 

Installing Oracle JET generator

Oracle JET generator is a Yeoman generator for Oracle JET maintained by the Oracle Corporation. It helps us rapidly perform the project setup for a web application or hybrid mobile application on Android, iOS, or Windows.

It can be installed using the following command:

npm -g install generator-oraclejet

This should complete the installation, as shown in the following screenshot: 

 

Creating a project using the command line

Once Node.js, npm, Yeoman, Grunt, and the Oracle JET Yeoman generator are installed, we shall create a new project using the oraclejet command. The beauty of this command is that it generates the project with the name given by the readily available project, which is already created and stored in the node library with the code generator. The following are the steps involved in creating the project with this command:

The oraclejet Yeoman command with the project name parameter creates the project with the name provided:

yo oraclejet <project name> --template=navdrawer

We are using the project name OracleJETSample, which should complete the project creation, as shown in the following screenshot:

Once the project creation and verification is complete, the status of the application is ready, as follows:

 

Running a project with Grunt

  1. Once the project has been created in the preceding step, it can be built using the following command:
      cd <project name>
      grunt build
  1. The preceding command should complete the project build, as shown in the following screenshot:
  2. Once the project is built successfully, it can be executed using the following command:
     grunt serve
  3. The preceding command should run the project, as shown in the following screenshot: