Oracle JET 2.0.2 Released

The Oracle JET team is doing an amazing job releasing new features and fixes with another release announced yesterday. With that announcement, I created new "base" versions of the Oracle JET CodePen and jsFiddle.

• Debug CodePen
• Minified CodePen
• Debug jsFiddle
• Minified jsFiddle

rateLimit'ing ojInputText using a Read-only Observable (Debouncing the rawValue)

In my post Filtering Oracle JET ArrayTableDataSource I showed how to use an ojInputText to filter tabular data. In that post I mentioned using the knockout rateLimit extender, but shied away from it because rateLimit'ing an observable attached to an ojInputText rawValue throws the error, "rawValue option cannot be set" (even though rateLimit'ing in this manner works). It is true that rawValue is a read only field. For some reason, rateLimit'ing an observable causes a write to the component property bound to the observable. This makes sense because that is the point of an observable: update something after the observable value changes. The problem is that rawValue is read-only. I raised this issue with my colleagues and Jeanne Waldman shared this idea:

Create a pureComputed based off the rawValue observable and rateLimit the pureComputed.

Interesting. Jeanne's idea essentially creates a read-only observable that we can then rateLimit, effectively isolating rawValue from a write attempt. Here are the JavaScript changes necessary to implement Jeanne's idea:

// ... other code above here
ko.pureComputed(self.nameSearch)
  .extend({
    rateLimit: {
      timeout: 250,
      method: "notifyWhenChangesStop"
    }
  })
  .subscribe(function(newValue) {
    self.datasource.reset(
      filteredEmployees(newValue)
    );
  });

// ... other code below here

Notice that we are wrapping the previously used nameSearch observable in a ko.pureComputed, extending the ko.pureComputed, and then subscribing to the rate limited observable. Here is the jsFiddle:

Success! Our filter code now only runs 250 milliseconds after user input pauses. Considering our search algorithm, this will definitely perform better than invoking the algorithm for each key press. But is it as good as it could be? I'm not sure. We are now rate limiting a second observable rather than the primary observable. Will the primary observable continue to emit events with each key press? Did we trade an innocuous error message for some CPU/memory overhead? Does it matter? Normally, given two working solutions, I would choose performance, but I really don't want to see error messages cluttering my console.

jsFiddle for Oracle JET 2.0.1

Last month I put together an Oracle JET "base" jsFiddle using Oracle JET 2.0.0 (files served through the RawGit CDN). I naively believed I could just keep that base jsFiddle current and all forks would continue using older versions of Oracle JET. When Oracle JET 2.0.1 released, I tried to update that base jsFiddle and realized it was already current. Since RawGit pulls directly from GitHub (sort of; I'll explain later), no updates were necessary. My first thought was, "Wow, that is great!" My second thought was a bit terrifying, "What if a future Oracle JET release has different dependencies?" Every fiddle forked from that initial base fiddle would break. At that moment I realized I would have to version my Oracle JET base jsFiddle. Since the original was built on Oracle JET 2.0.0, I appropriately renamed it Oracle JET Base 2.0.0. If you review that jsFiddle, you will notice it now contains the release's commit hash, 49fcbbde7c8e178a3a21625d44485536e3ad1aaf, in URL's.

I just forked 2.0.0 into Oracle JET 2.0.1 and pointed the URLs at the 2.0.1 release commit. I recommend forking this new jsFiddle until the next Oracle JET release. Fortunately, the external dependencies (knockout, jQuery, etc) were the same between these 2.0.0 and 2.0.1, but don't count on that for future releases.

Why did I include source, unminified files in these jsFiddles? These jsFiddles are designed for testing, prototyping, debugging, and sharing. When asking for help in the Oracle JET OTN Forum, it is really helpful to use debug rather than minified files.

What about that RawGit CDN? RawGit serves raw GitHub content. While the content may be the same as appending ?raw=true, the delivery mechanism is different. URLs served from cdn.rawgit.com are actually served through MaxCDN's network. Files are permanently cached so requests don't actually travel back to a git repo. Because of the longevity of the word permanent, the RawGit FAQ encourages the use of commit hashes to ensure serving the correct version. This is why I said earlier that "RawGit pulls directly from GitHub... sort of," and another good reason to reference the commit hash in URLs.

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.