How to Start with Oracle JET: A Comprehensive Guide

Oracle JET (JavaScript Extension Toolkit) is a modular, open-source toolkit that helps developers build client-side web and mobile applications. It leverages modern JavaScript, HTML5, and CSS3, and it is designed to be extensible and flexible. This comprehensive guide will walk you through the process of getting started with Oracle JET, covering everything from setting up your development environment to building your first application.

Table of Contents

Understanding Oracle JET’s Core Concepts

Before diving into the practical steps, it’s crucial to grasp some fundamental concepts. Oracle JET is not just a framework; it’s a collection of libraries and tools. It emphasizes component-based architecture, data binding, and a Model-View-ViewModel (MVVM) pattern.

Components: These are reusable UI elements like buttons, charts, and data grids. Oracle JET provides a rich set of pre-built components that you can easily integrate into your applications.

Data Binding: This mechanism allows you to synchronize data between your application’s model and the UI. When the model changes, the UI automatically updates, and vice versa.

MVVM Pattern: This architectural pattern separates the data (Model), the UI (View), and the logic that connects them (ViewModel). This separation promotes code maintainability and testability.

Oracle JET also offers features like routing, internationalization (i18n), and accessibility (a11y) support. Understanding these concepts will make your journey with Oracle JET much smoother.

Setting Up Your Development Environment

The first step is to set up your development environment. This involves installing Node.js, npm (Node Package Manager), and the Oracle JET command-line interface (CLI).

Installing Node.js and npm

Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. npm is a package manager that comes bundled with Node.js and is used to install and manage dependencies for your projects.

Download Node.js from the official website: nodejs.org. Make sure to download the LTS (Long Term Support) version for stability.
Install Node.js by following the instructions for your operating system. The npm package manager will be installed automatically along with Node.js.
Verify the installation by opening your command prompt or terminal and running the following commands:

bash node -v npm -v

These commands should display the versions of Node.js and npm that are installed.

Installing the Oracle JET CLI

The Oracle JET CLI is a command-line tool that helps you create, build, and serve Oracle JET applications.

Open your command prompt or terminal.
Install the Oracle JET CLI globally using the following command:

bash npm install -g @oracle/ojet-cli

The -g flag indicates that the CLI should be installed globally, making it accessible from any directory in your system.
Verify the installation by running the following command:

bash ojet --version

This command should display the version of the Oracle JET CLI that is installed.

Creating Your First Oracle JET Application

Now that your development environment is set up, you can create your first Oracle JET application. The Oracle JET CLI provides a convenient way to scaffold a new project with all the necessary files and dependencies.

Using the JET CLI to Create a New Application

Open your command prompt or terminal.
Navigate to the directory where you want to create your project.
Use the ojet create command to create a new application. For example, to create an application named “my-first-jet-app”, run the following command:

bash ojet create my-first-jet-app --template=navdrawer

The --template option specifies the template to use for the application. The navdrawer template creates an application with a navigation drawer, which is a common UI pattern. Other templates are also available, such as basic for a simple application and empty for a blank project.
Navigate into the newly created project directory:

bash cd my-first-jet-app

Understanding the Project Structure

The ojet create command generates a project structure with the following key directories and files:

src: This directory contains the source code for your application, including JavaScript, HTML, and CSS files.
src/js/viewModels: This directory contains the ViewModels for your application’s views.
src/js/views: This directory contains the HTML templates for your application’s views.
src/resources: This directory contains static assets such as images and CSS files.
package.json: This file contains metadata about your project, including dependencies and scripts.
Gruntfile.js: This file contains the configuration for the Grunt task runner, which is used to build and deploy your application.

Running the Application

To run the application, use the ojet serve command.

Open your command prompt or terminal.
Navigate to your project directory.
Run the following command:

bash ojet serve

This command will start a development server and automatically open your application in a web browser. Any changes you make to the source code will be automatically reflected in the browser.

Exploring the Basic Application Structure

Let’s examine the basic structure of the generated application. This will help you understand how Oracle JET applications are organized.

The ViewModel and View

As mentioned earlier, Oracle JET uses the MVVM pattern. This means that each view in your application has a corresponding ViewModel.

The ViewModel is a JavaScript object that holds the data and logic for the view. It exposes properties and methods that the view can bind to.

The View is an HTML template that defines the structure and appearance of the UI. It uses data binding to display data from the ViewModel and to handle user interactions.

For example, if you have a view that displays a list of products, the ViewModel might have a property called products that is an array of product objects. The View would then use data binding to iterate over the products array and display each product in the list.

Data Binding in Action

Oracle JET uses the Knockout.js library for data binding. Knockout.js provides a declarative way to bind data to the UI.

For example, to display the name of a product in a view, you can use the following syntax:

html <span data-bind="text: name"></span>

This code binds the text property of the span element to the name property of the ViewModel. When the name property changes, the text of the span element will automatically update.

Customizing Your Oracle JET Application

Now that you have a basic application running, you can start customizing it to meet your specific needs. This involves modifying the HTML templates, JavaScript code, and CSS styles.

Modifying the HTML Templates

You can modify the HTML templates in the src/js/views directory to change the structure and appearance of your application’s views.

For example, you can add new elements, change the layout, or add custom styling.

Oracle JET provides a rich set of UI components that you can use in your templates. These components are designed to be reusable and customizable.

Modifying the JavaScript Code

You can modify the JavaScript code in the src/js/viewModels directory to change the behavior of your application.

For example, you can add new properties and methods to your ViewModels, handle user interactions, or make API calls.

Oracle JET provides a set of helper functions and utilities that can simplify your JavaScript code.

Adding Custom CSS Styles

You can add custom CSS styles to your application by creating new CSS files in the src/resources/css directory or by modifying the existing CSS files.

Oracle JET uses a theme system that allows you to easily customize the appearance of your application. You can choose from a set of pre-built themes or create your own custom theme.

Deploying Your Oracle JET Application

Once you are satisfied with your application, you can deploy it to a web server or a mobile device.

Building the Application for Deployment

Before deploying your application, you need to build it using the ojet build command.

Open your command prompt or terminal.
Navigate to your project directory.
Run the following command:

bash ojet build

This command will create a dist directory containing the optimized and minified files for your application.

Deploying to a Web Server

To deploy your application to a web server, simply copy the contents of the dist directory to the web server’s document root.

You may need to configure your web server to serve the application correctly. For example, you may need to configure URL rewriting or set the correct MIME types.

Creating a Mobile Application

Oracle JET can also be used to create mobile applications using Cordova. To create a mobile application, you need to install Cordova and the Oracle JET Cordova plug-in.

Install Cordova globally using the following command:

bash npm install -g cordova
Add the Oracle JET Cordova plug-in to your project:

bash cordova plugin add @oracle/cordova-plugin-ojet
Build the application for your target platform using the cordova build command.

bash cordova build android cordova build ios

This will create a native application package that you can install on your mobile device.

Best Practices for Oracle JET Development

To ensure that your Oracle JET applications are well-designed, maintainable, and performant, follow these best practices:

Use a Modular Architecture: Break your application into small, reusable modules. This will make your code easier to understand and maintain.

Follow the MVVM Pattern: Separate the data, the UI, and the logic that connects them. This will improve the testability and maintainability of your code.

Use Data Binding: Use data binding to synchronize data between your application’s model and the UI. This will reduce the amount of boilerplate code you need to write.

Use UI Components: Use the pre-built UI components provided by Oracle JET. These components are designed to be reusable and customizable.

Optimize Performance: Optimize your application for performance by minimizing the amount of data transferred over the network and by using efficient algorithms.

Test Your Application Thoroughly: Test your application thoroughly to ensure that it works correctly and that it meets your requirements.

Conclusion

Getting started with Oracle JET can seem daunting at first, but by following the steps outlined in this guide, you can quickly set up your development environment, create your first application, and start customizing it to meet your specific needs. Remember to embrace the core concepts of components, data binding, and the MVVM pattern. By following best practices and continuously learning, you can build powerful and engaging web and mobile applications with Oracle JET. Remember that consistent practice and exploration of the available components and features are key to mastering Oracle JET.

What is Oracle JET and what are its key features?

Oracle JET (JavaScript Extension Toolkit) is a modular toolkit based on open source standards, designed for building client-side web and mobile applications. It provides a set of rich UI components, a robust data binding mechanism, and a responsive layout system, enabling developers to create engaging and interactive user interfaces.

Key features of Oracle JET include its component-based architecture, support for HTML5, CSS3, and JavaScript, its adherence to MVVM (Model-View-ViewModel) principles, and its ability to integrate with various backend technologies via RESTful APIs. It also offers features like data visualization, charting, and accessibility support, making it a comprehensive solution for building enterprise-grade applications.

What are the prerequisites for starting with Oracle JET?

Before you begin developing with Oracle JET, you’ll need to ensure you have a few essential tools and technologies installed on your system. This includes a Node.js environment, which is crucial for managing dependencies and running the JET command-line interface (CLI). You’ll also require a suitable code editor, such as VS Code, Sublime Text, or Atom, to write and edit your application code.

Additionally, a basic understanding of HTML, CSS, and JavaScript is highly recommended, as Oracle JET leverages these technologies extensively. Familiarity with the MVVM architectural pattern can also be beneficial. Finally, you’ll need to install the Oracle JET CLI, which provides commands for creating, building, and serving your JET applications.

How do I create a new Oracle JET application?

Creating a new Oracle JET application is straightforward using the Oracle JET Command Line Interface (CLI). First, open your terminal or command prompt and navigate to the directory where you want to create your project. Then, use the command ‘ojet create my-new-app –template=navdrawer’ (replace ‘my-new-app’ with your desired application name and ‘navdrawer’ with your preferred template).

This command will generate a new JET application project with a pre-configured folder structure and necessary dependencies. The ‘navdrawer’ template provides a basic application layout with a navigation drawer, making it a good starting point for many applications. After the command completes, navigate into the newly created directory using ‘cd my-new-app’ and then run ‘ojet serve’ to start the development server and view your application in a browser.

What is the role of the Oracle JET CLI?

The Oracle JET Command Line Interface (CLI) is a crucial tool for managing and developing Oracle JET applications. It provides a suite of commands that simplify common tasks such as creating new projects, building and packaging applications, serving the application for development, and managing dependencies.

Specifically, the CLI allows developers to quickly scaffold new projects with predefined templates, build optimized versions of their applications for deployment, and run a local development server with hot reloading for faster iteration. It also handles dependency management by integrating with npm or yarn, ensuring that all required libraries and components are properly installed and updated.

How does data binding work in Oracle JET?

Data binding in Oracle JET is primarily achieved through the use of the Knockout.js library, which is deeply integrated into the framework. It allows you to establish a connection between the data in your application (the model) and the elements in your user interface (the view). Any changes made to the data in the model are automatically reflected in the view, and vice-versa.

This bidirectional synchronization is achieved using observable properties, which are special variables that notify the UI when their values change. In your HTML templates, you use data-bind attributes to connect UI elements to these observables. When the user interacts with the UI, such as entering text into an input field, the corresponding observable is updated, triggering a refresh of any other UI elements bound to that observable. This simplifies development by reducing the amount of manual DOM manipulation required.

How do I use JET UI components in my application?

To incorporate Oracle JET UI components into your application, you first need to ensure that the necessary dependencies are installed and available in your project. Typically, this is handled during project creation using the JET CLI, which configures the required libraries and modules. Once the dependencies are in place, you can start using the components in your HTML templates.

Each JET UI component has its own set of attributes and properties that can be configured to customize its appearance and behavior. You can bind these attributes to data in your application using the data-bind syntax, allowing for dynamic and responsive UI elements. For example, you might use the <oj-button> component to create a button and bind its ‘disabled’ attribute to an observable property that determines whether the button is enabled or disabled.

How can I integrate Oracle JET with a backend service?

Oracle JET applications typically interact with backend services through RESTful APIs. This involves making HTTP requests to the backend to retrieve or update data, and then processing the response to update the application’s UI. JavaScript’s built-in ‘fetch’ API or libraries like ‘axios’ can be used to make these requests.

When retrieving data from the backend, you can use the data binding capabilities of Oracle JET to display the data in your UI components. Similarly, when sending data to the backend, you can collect the data from your UI and format it into a JSON payload for the API request. Oracle JET also provides utilities for handling data pagination and sorting, which can be useful when working with large datasets from a backend service.