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
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 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:
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
We used the latest stable version available (v6.11.1 LTS) for the setup, as shown in the following steps:
- Download Node.js, installable from its home page (https://nodejs.org/en/).
- Run the installable, which starts up with the following interface:
- Click Next and accept the terms in the following interface:
- Choose the installation directory. I am happy with the default directory provided and continue to the Next step, as follows:
- 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:
- 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.
- Once the installation is complete, you should see the success status as follows:
- 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.
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 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
- Once the project has been created in the preceding step, it can be built using the following command:
cd <project name>
- The preceding command should complete the project build, as shown in the following screenshot:
- Once the project is built successfully, it can be executed using the following command:
- The preceding command should run the project, as shown in the following screenshot:
- Once the project has started running, it should open the application, running in the default browser, as follows:
The default application was created using the navdrawer template, hence it is showing up with the default navdrawer template. We can open the project code in our favorite IDE and edit it to run again using the Grunt serve command.
However, the NetBeans IDE is providing the built-in plugins and support for npm and Grunt to manage these build and serve activities within the IDE. In addition, NetBeans provide great syntax advice and support for these plugins. Let's review the IDE installation, configuration, and usage in the following section.
Managing and running the project using NetBeans IDE
It can be downloaded and installed from its home page: https://netbeans.org/.
Once the NetBeans IDE is installed, we can open the project using File | Open Project and select the project root folder, which opens the project in the IDE as follows:
The preceding Build option prompts you to configure project actions to call Grunt tasks from within NetBeans IDE. Choose Yes to open the configuration window:
Select all the options (checkboxes) and click OK to run Grunt commands enabled in the project actions, as follows:
Right-click on the project root folder again and click on the Build option to let Grunt build the project within the IDE, as shown in the following screenshot:
Once the project is built, select the project by clicking on the project root folder, and choose the Chrome option from the menu icons as shown in the following screenshot:
It will prompt you to select the start file; you can choose the web/index.html as the start file for the project. Click OK to run the project:
The application should open and run in the Chrome browser (assuming we already have the Chrome browser installed). The first time, it prompts you to install the Chrome NetBeans connector plugin; choose Yes to install it. This allows the pages to refresh automatically for future changes, through a NetBeans connection to the browser.
The application should be running and will show the landing page in the browser as follows:
This means that we have successfully built our first Oracle JET application and have run it using both command line and IDE instructions. We can make further changes to the application and observe the changes on web pages, which we will cover in the upcoming articles.
Throughout this bloge article, we learnt about the essential Oracle JET framework architecture and how it helps us build modern web applications. We also learnt the steps to be followed to generate a template-based, Single-Page Application with the help of tools and techniques including Node.js, npm, Yeoman, Grunt, and Oracle JET generator. We finished this article by understanding the NetBeans IDE, managing the project, and building and executing stages from within the IDE.
In the next chapter, we will learn in detail about the Oracle Alta UI framework, used for building the Oracle JET framework.