Fiddling Around with Oracle JET

I learn new ideas, technologies, etc by example. First I am presented with a challenge (a new project, new idea, etc) and then I search for ways others have built similar solutions. While looking through search results, I almost always pause when I see a stackoverflow response. I think I learn more from stackoverflow than I do from any other source on the Internet. Often times while reading a stackoverflow answer, I'll find myself in a jsFiddle, manipulating someone else's example in an attempt to understand the solution. Wouldn't it be great to find Oracle JET fiddles demonstrating ideas that are not in the JET cookbook?

A key to building a jsFiddle that references a library is accessibility to that library. Many of Oracle JET's dependencies are hosted on Content Delivery Networks (CDNs), making them accessible to jsFiddle. At this time, Oracle JET itself is not available on a CDN. Oracle JET is, however, accessible via GitHub. This is good news because there is a site named RawGit that serves GitHub project files through MaxCDN. If you want to access the Oracle JET Alta skin for example, enter https://github.com/oracle/oraclejet/blob/master/dist/css/alta/oj-alta-min.css into the file name field and RawGit will give you a URL such as https://cdn.rawgit.com/oracle/oraclejet/master/dist/css/alta/oj-alta-min.css.

I went through the Oracle JET 2.0 bower file and created a RequireJS configuration based on JET's dependencies. This is step #1 in creating a jsFiddle. Here is what that CDN version looks like (note: I used the RawGit dev URL, not the production URL, for jsFiddle):

requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
    'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
    "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui",
    "jqueryui-amd": "//rawgit.com/jquery/jquery-ui/1-11-stable/ui",

    "promise": "//cdn.lukej.me/es6-promise/1.0.0/promise.min",
    "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
    "ojdnd": "//rawgit.com/oracle/oraclejet/master/dist/js/libs/dnd-polyfill/" +
        "dnd-polyfill-1.0.0.min",
    "ojs": "//rawgit.com/oracle/oraclejet/master/dist/js/libs/oj/debug",
    "ojL10n": "//rawgit.com/oracle/oraclejet/master/dist/js/libs/oj/ojL10n",
    "ojtranslations": "//rawgit.com/oracle/oraclejet/master/dist/js/libs/oj/" +
        "resources",
    "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
    "signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min",

  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jqueryui-amd': {
      exports: "$",
      deps: ['jquery']
    },
    'jquery': {. The 
      exports: ['jQuery', '$']
    }
  },
  config: {
    ojL10n: {
      merge: {
        //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
        // The following addes en-US to the r.js bundle
        //'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements'
      }
    }
  }
});

I combined all of this into a new jsFiddle.

I didn't think it was very exciting to just put the RequireJS config and Alta CSS into the fiddle without any content. I wanted a simple example that showed how RequireJS resolved dependencies using the relative ojs paths so I borrowed from the Input Date and Time cookbook entry.

Please fiddle and fork to your heart's content!

NOTE: The jsFiddle is a living example, meaning I make changes to the base fiddle on occasion to keep it current. The code displayed in this post, however, won't change. For example, the jsFiddle currently uses cdn.rawgit where as the code in this post uses the development rawgit server. When in doubt, trust the fiddle.

Update 25-Apr-2016: Oracle JET 2.0.1 was just released. Without any changes, the original jsFiddle nicely began using 2.0.1. As I was considering releases, it occurred to me that a future release of JET may require different dependencies. The JET libraries would be always current, but the dependencies (knockout, hammer, jQuery, etc) may be become irrelevant. With that in mind, I updated the fiddle for this post to point specifically to the 2.0.0 commit from February 29, 2016. I will add another jsFiddle for 2.0.1 and announce it as a blog post.