Download code from GitHub
Rapid 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 chapter 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:
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
Note
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
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 http://www.oracle.com/technetwork/developer-tools/jet/downloads/index.html.
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:
- Download Node.js, installable from its home page (https://nodejs.org/en/).
- Run the installable, which starts up with the following interface:
- Click
Nextand accept the terms in the following interface:
- Choose the installation directory. I am happy with the default directory provided and continue to the
Nextstep, 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
Nextstep, which takes us to the final step:
- Click on the
Installbutton, which should install Node.js, along with the npm package manager, on your computer:
Note
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:
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-cliThis should complete the installation, as shown in the following screenshot:
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-oraclejetThis should complete the installation, as shown in the following screenshot:
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
oraclejetYeoman 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:
- Once the project has been created in the preceding step, it can be built using the following command:
cd <project name> grunt build
- 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:
grunt serve- 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.
NetBeans Integrated Development Environment (IDE) provides a quick and easy way to develop desktop, mobile, and web applications with Java, JavaScript, HTML5, and other programming languages.
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:
NetBeans automatically identifies this project as an npm Grunt project and shows the directories accordingly. We can expand and review the folder structure.
Right-clicking on the project root folder and selecting the Build command (as follows) gives us the option:
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 chapters.
Throughout this chapter, 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 chapter 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.
