Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Understanding the Development Process With Oracle JET for Web and Mobile

DZone's Guide to

Understanding the Development Process With Oracle JET for Web and Mobile

Dive into Oracle JET, and see how you can put it to good use in both the web and mobile development realms.

· Java Zone
Free Resource

Find your next Integration job at DZone Jobs. See jobs focused on integration, or create your profile and have the employers come to you!

This is another article in a series of articles on Oracle JET:

In my previous DZone Oracle JET articles, I discussed what I learned about how to install Oracle JET for web and hybrid-mobile application development, including git, npm, Yeoman, Bower, Grunt, Cordova and Oracle JET itself.

In this article I wanted to investigate and share what I learned about the Oracle JET tooling in more detail, including what Oracle JET provides in terms of generating your application scaffold via Yeoman, what part Bower plays, what Grunt tasks are available, and how we use all of these in a regular Oracle JET development project.

The Basic Steps

From the previous article we learned the basic steps to building and running an Oracle JET web app was to execute from the command line:

yo oraclejet MyWebApp --template=navbar
grunt build
grunt serve

...and the equivalent for an Oracle JET hybrid-mobile app, say just for the Android platform:

yo oraclejet:hybrid MyMobileApp --template=navbar --platform=android
grunt build
grunt serve

Actually "grunt build" in these examples is superfluous as "grunt serve" issues a "grunt build" itself, but it's useful for the purposes of this article to point out the two grunt tasks as we'll discuss these more later.

Understanding the Purpose of Yeoman, Bower, and Grunt in Oracle JET

Image title

Behind the simplicity of the above commands lies Yeoman, Bower, and Grunt, 3 open source tools that have become popular in modern web development in combination. These assist with the initial creation of the application, and after we modify the source code, the build, and deployment too.

Yeoman is a web application source code scaffold generator, which allows developers to create the minimum required application artefacts such as directories, source code and configuration files, based on a template. This saves development time as we as developers don't need to setup boilerplate code, avoids what is a repetitive & dull & error prone task and ensures apps start from a solid base.

Oracle JET itself makes use of Yeoman by providing a set of Oracle JET templates for developers to use.

Alternatively, Bower is used for managing web application dependencies, typically dependencies like 3rd party libraries such as JQuery, as well as other web artefacts, which can include HTML, CSS, fonts and images for example.

In the case of Oracle JET, the Yeoman JET templates are designed to use Bower pretty much silently in the background, to download the JET dependencies for you, though we can extend this for our own needs.

Finally, Grunt works as a JavaScript build tool for automating tasks such as building and serving our applications as we can see in the command line calls above. From my point of view as an old developer (read: hack), Grunt is similar to many older build tools like Make and Ant, but for web & JavaScript apps instead.

For Oracle JET, the Yeoman JET templates come with the grunt tasks to build and serve (deploy) our application, and like Bower is fully extensible.

Overall the following diagram gives an idea of the workflow a typical web developer will go through with the complete set of Oracle JET tools. For hybrid-mobile development the browser can be substituted with an emulator or actual mobile device too:

Image title

Using Yeoman to Create an Oracle JET App

The basic Yeoman command for creating web apps is as follows:

yo oraclejet [directory] [--template={template-name[:web|:hybrid]|url}] 

..or alternatively hybrid-mobile apps:

yo oraclejet:hybrid [directory]
  [--appid=application-id] 
  [--appname=application-name]
  [--template={template-name[:web|:hybrid]|template-url}]
  [[--platform=android|ios|windows]|[--platforms=android|ios|windows]] 

The following shows separate examples which are entered on one command line:

yo oraclejet MyWebApp
yo oraclejet MyWebApp --template=navbar
yo oraclejet MyWebApp --template=navbar:hybrid
yo oraclejet MyWebApp --template=http://www.acme.com/webfolder/DemoApp.zip
yo oraclejet:hybrid MyMobileApp  --appid=com.acme.myapp --appname="ACME MyApp"
  --template=navbar --plaforms=android,ios

From the Yeoman Oracle JET generator, one of the interesting options is the template. Oracle JET provides Yeoman 4 templates, blank (the default), basic, navbar and navdrawer.

Blank produces the absolute minimum set of files required for an Oracle JET application. Indeed if we run a blank app, we get a very unexciting blank page:

Image title

...in the background, however, is where the real excitement is to be found! In our project directory the application now contains the following files and directories:

Image title


From our developers' perspective, once this is all setup, we can simply focus on adding our source code to the /src directory.

The other Yeoman templates provided by Oracle JET include "basic":

Image title

...which includes headers and footers in the index.html.

The next template "navbar" is a Single Page Application (SPA) template that not just includes a header and footer, but also tabs to access other "modules" (pages) such as in this example a Dashboard, Incidents, Customers and About pages:

Image title

As you can guess from the above description, Oracle JET is capable of building both multi-page applications and Single Page Applications. I hope to investigate and share what I learn about the SPA features in Oracle JET in a later article.

It's worth saying if we squeeze these pages down they are responsive by design, and as an example, the tabs will start to minimize themselves into icons:

Image title

Another significant point with the Oracle JET templates is they support both a web and hybrid (mobile) version. By default, the web version is used as seen in the navbar examples above.  However, if we instead issue the following Yeoman command line with the ":hybrid" suffix on the template name:

yo oraclejet MyWebApp --template=navbar:hybrid

..our app will look as follows with the tabs expressed as mobile buttons at the bottom of the screen:

Image title

The final template is the "navdrawer" template that when the page is shrunk down will present the original tabs as a hamburger style left menu which can be opened and closed as a sliding draw:

Image title

Of significance for the "navbar" and "navdrawer" templates, is within the directory structure we saw earlier, under the "src" directory the various pages of the application are generated as paired HTML and JavaScript files which we can extend and remold for our own application:

Image title

Building and Running Oracle JET Apps

Having generated our application scaffold we're free to do our "job" as a developer and build out the source code. It's worth saying Netbeans has inherent support for Oracle JET. However, for learning purposes, I prefer working from my favorite text editor and the command line so  I learn what's happening under the covers to get a solid grounding. I'll take time out to learn Netbeans later.

Having developed our initial source code we are then ready to start testing. This is where we start using Grunt to build the app. For web apps, we simply run:

cd <project>
grunt build[:dev] [--theme=themename[:android|:ios|:web|:windows]]

...and for hybrid mobile apps we have additional options around platforms and the Cordova buildConfig.json file:

cd <project>
grunt build[:dev] [--build-config=path/buildConfig.json]
  [[--platform=android|ios|windows]|[--platforms=android|ios|windows]]
  [--theme=themename[:android|:ios|:web|:windows]]

Some examples include:

cd MyWebApp)
grunt build
grunt build:dev --theme=alta:ios
grunt build --platform=ios 

Of special note is the alta theme, which is the default theme for JET applications. Oracle Alta is Oracle's default theme for its modern web and mobile offerings, including Oracle's Cloud portfolio. Oracle freely makes this available to customers, and, of course, if this doesn't suit your needs you're free to substitute your own themes based on CSS.

It's worth noting for hybrid-mobile apps, on running grunt build a new directory "hybrid" will appear in our project, created by Cordova for each mobile platform we've chosen to support.

Having built our app we're now in a position to deploy it for testing via grunt server. For web apps we issue:

grunt serve[:dev] [--server-port=number] [--livereload-port=number]
  [--no-livereload] [--theme=themename[:android|:ios|:web|:windows]]

...and for hybrid-mobile with is array of supported platform options we can use:

grunt serve[:dev] [--build-config=path/buildConfig.json]
  [--platform=android|ios|windows]
  [--server-port=port-number]
  [--livereload-port=port-number]
  [[--destination=emulator-name|browser|device]|[--browser]|[--emulator]|[--device]]
  [--no-livereload] [--no-build]
  [--theme=themename[:android|:ios|:windows|:web]] 

And some examples:

grunt serve
grunt serve:dev --server-port=8080 --no-livereload
grunt serve --platform=android --browser
grunt serve --platform=android --destination=MyAndroidAVDName
grunt serve:dev --platform=android --destination=device
grunt serve --platform=android --device

For web apps, this will launch the app in the browser. For hybrid mobile apps, it will attempt to run it in the associated mobile emulator or simulator, or if we override it with the --browser option, in the browser instead. Running via the browser is extremely fast and avoids the horrible startup times for mobile development (I'm looking at you Android Emulator).

Through the options we can see there is the ability to supress "livereload". By default, when running an app we can edit and save the source code live, and the changes will automatically be reflected in the running app. This is hugely beneficial for fast development and testing cycles.

Debugging your Oracle JET Apps

As Oracle JET web apps are ultimately built in HTML, CSS, and JavaScript, when we run Oracle JET in our favorite browser on our desktop, we can use the development tools available in most browsers to inspect the DOM, view the source code, debug JavaScript, and monitor the network.  There's no behemoth IDE install required (unless, of course, you think the browsers themselves these days are bloated behemoths?)

For Oracle JET hybrid mobile apps, Cordova gives instructions how to run the debuggers for Android Studio, Xcode and Visual Studio. However only Visual Studio has the capabilities to debug Cordova and JavaScript, so for Android and iOS, Android Studio and Xcode aren't that useful.

However it's useful to know just like the Oracle JET web apps where we can debug them in our desktop browser, wecan also do the same for Android and iOS hybrid-mobile apps too.

Both Google Chrome and Safari provide the ability to connect to running web applications on our mobile device and debug them just like a regular HTML/CSS/JavaScript app, which includes Cordova applications. 

As summary the steps for Android and Google Chrome are as follows (steps courtesy of Google under CC):

Image title

...and summary steps for iOS and Safari (steps courtesy of Apple):

Image title

Releasing Your Application

At this stage, I've not had time to investigate in detail how we bundle our JET web and hybrid-mobile apps for proper release, but I'll cover it here at a superficial level as I did promise in the article to cover the development lifecycle.

To release the app we use the "grunt build:release" call for web apps:

grunt build:release [--theme=themename[:android|:ios|:web|:windows]]

...which will build the app with minimized JS files. In turn, for hybrid-mobile we use:

grunt build:release [--build-config=path/buildConfig.json]
  [[--platform=android|ios|windows]|[--platforms=android|ios|windows]]
  [--theme=themename[:android|:ios|:web|:windows]]

For hybrid-mobile apps under the covers the "grunt build:release" by default creates an unsigned artefact (such as .apk file for Android). To sign apps, we can use the --build-config flag as documented by Cordova to sign our Android, iOS and Windows apps, or depending on the mobile platform tooling provide by each mobile vendor, we can do this manually too.

Finally, to release apps to the respective platform app stores, we need to follow the instructions from each vendor for Android, iOS and Windows.

Conclusion

In discussing Oracle JET's tooling with a colleague, a point he emphasized to me which I think is valuable to share, is all the JET tooling is just that, tools. Like our hardware toolbox at home, we may have many tools that do the same job, just differently, with hopefully the same outcomes, to build and fix stuff. Indeed we can choose not to use them at all and do everything by hand.

As such, in discussing Oracle JET, we don't have to use Yeoman, Bower or Grunt. We can build the application scaffold ourselves, download dependent libraries, build and deploy our web app manually, or call Cordova to do the same.

However, in providing and utilizing this collection of tools, what Oracle has done with the selection of Oracle JET tooling is provide us with a set of tools to accelerate the development process. For me in starting out with Oracle JET, having to manually create all the files and directories and setup would be a major pain in the butt, so the tooling in combination certainly gets me up and running faster to focus on learning the JET web framework rather than what is essentially plumbing.

Find your next Integration job at DZone Jobs. See jobs focused on integration, or create your profile and have the employers come to you!

Topics:
oracle jet ,development process ,java ,mobile development ,web development

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}