Introducing Oracle JET for mobile app development

In March this year Oracle proudly announced that we had open sourced the Oracle JavaScript Extension Toolkit (JET), targeted at intermediate to advanced JavaScript developers working on client-side applications.  

Since then we’ve released new JET versions every couple of months.  

You can find out more about JET on the oraclejet.com website.

Did you realize that you could use JET to develop enterprise mobile apps?

This is made possible through JET's integration with Apache Cordova.  In this post, I’ll describe some of what we’ve added to JET to enable you to use Oracle JET for mobile app development.
But first, I’ll start with an introduction to Apache Cordova.

What is Apache Cordova?

Apache Cordova is an open-source platform that allows you to use standard web technologies (HTML5, JavaScript and CSS) for cross-platform mobile app development. 
That means you can develop one app, using one technology stack and a single code base, for deployment to Android, iOS and Windows mobile devices.

A mobile app built using Cordova is a native mobile app that can be published to app stores and installed onto mobile devices. The application contains an embedded Cordova-enabled WebView, which is essentially a headless browser, and your code runs in the WebView.  Cordova also provides a JavaScript interface to native device APIs, via plugins.  There are 1000s of plugins to choose from and a plugin registry that you can search.

This type of app is called a hybrid mobile app, because it is a hybrid between a native mobile app and web technology. 

How does JET support hybrid mobile app development?

Utilizing the Apache Cordova command-line interface, Oracle JET tooling enables you to scaffold, build and serve JET hybrid mobile apps in exactly the same way as you would a JET web app.
The Oracle JET Yeoman generator has a hybrid sub-generator for scaffolding a hybrid app and supports Android, iOS and Windows platform options, along with the web platform.
The four JET starter templates are provided in both web and hybrid versions, which are optimized for web apps and hybrid mobile apps, respectively. 
Together, this allows you to scaffold a hybrid mobile as follows:

yo oraclejet:hybrid MyMobileApp --platforms=ios,android --template=navdrawer:hybrid

The Oracle JET Grunt tasks also support Android, iOS, Windows and web platform options so you can build and serve hybrid mobile apps to your desired platform. The 'grunt serve' task also supports deployment to different destinations, such as emulator, browser or device.  The following command line gives an example: 

grunt serve --platform=ios --destination=emulator 

Live reload is supported when your hybrid mobile app is deployed to a browser or emulator. This means you can modify your app’s source code and see the changes update in the deployed app instantaneously, saving you a long redeployment cycle.

Can I develop a web app and hybrid mobile app with the same code base? 

Yes!
Oracle JET tooling enables you to take a “mobile first” approach to your web app design, based on a mobile-optimized template, then use the same source code to create your installable mobile app.  This is achieved by first scaffolding and developing a mobile web app with a hybrid starter template, then adding a hybrid target:

yo oraclejet MyApp --template=navdrawer:hybrid yo oraclejet:add-hybrid --platforms=ios,android

The scaffolded project contains separate src, src-web and src-hybrid folders, so that you can override any file within your source code to provide different web or hybrid functionality, as desired. 

What does a JET hybrid mobile app look like?

Along with Oracle’s Alta theme for web apps, JET also supports Oracle’s Alta mobile themes for Android, iOS and Windows, which closely match the native look & feel on each supported mobile platform.

The Oracle JET Cookbook enables you to view JET components and patterns in each of the available themes and sized for different form factors, such as phone, tablet or desktop.
Should you wish to develop your own custom theme and use this instead, the JET tooling facilitates this via SASS:

yo oraclejet:add-sass yo oraceljet:add-theme --theme=MyTheme grunt serve --platform=ios --theme=MyTheme

Is there a sample app that shows me how to do all this? 

Yes!
The Oracle JET development team has provided a sample app called FixItFast that was developed specifically to demonstrate how to develop a JET hybrid mobile app.  It also demonstrates a number of mobile UX patterns and shows how to communicate with an Oracle Mobile Cloud Service (MCS) mobile backend.

You can find a live demo of the FixItFast web app here and instructions for how to scaffold, configure, build and serve it as a web or hybrid mobile app here. 

Where can I learn more about mobile app development with JET?

You can find videos about Oracle JET, including mobile app development, on the Oracle JET YouTube channel. 
In addition, the Oracle Mobile Product Management team have published a number of articles in Dzone, describing how to start out with the Oracle JET tooling for web and hybrid mobile development:

• Installing Oracle JET for JavaScript Web Development
• Installing Oracle JET for Hybrid-Mobile Application Development
• Understanding the Development Process With Oracle JET for Web and Mobile

Following soon will be videos on how to integrate the Oracle Mobile Cloud Service JavaScript and Cordova SDKs into Oracle JET, watch this blog for an update!

In conclusion

Oracle JET supports hybrid mobile app development via enhanced tooling that supports the Android, iOS and Windows 10 mobile platforms, mobile-optimized starter templates, mobile-specific UI themes and mobile-specific patterns presented in the JET cookbook. 
For more information about hybrid mobile app development with Oracle JET, refer to the Oracle JET Developers Guide.