jQuery is Dead - Long Live JavaScript!

jQuery is Dead - Long Live JavaScript!

It might come as a surprise to you - especially if you are recently learning to use script with QuickBase - but jQuery is considered dead by many developers and have been so for many years now. Born in August 2006, jQuery was hugely successful in abstracting away differences in browser's DOM behavior and offering a rich and comprehensive set of features for DOM manipulation, AJAX and animation. During the last decade, most of the features of jQuery have been added to the browser's JavaScript engines and core set of APIs. Additionally, frameworks such as React, Angular, Ember and Vue have created whole ecosystems of libraries and tooling that each surpass jQuery's capabilities. However, jQuery is not going to disappear from QuickBase anytime soon but there are three things you should know to make your usage of jQuery with QuickBase more successful and help pave the way for seamless adoption of the new technologies that are are available now or are landing in the near future.

(1) Old Version of jQuery Being Used
QuickBase is using version 1.7.2 ( console.log($().jquery) ) while the current version of jQuery is 3.2.1. The has a large number of ramifications when consulting documentation and debugging scripts that are too numerous to enumerate here but should be kept in mind. However, there is one issue that deals with chaining AJAX calls that should be mentioned as it can be difficult to debug and can show up unexpectedly. We can examine this issue in the context of a recent demo: 

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=615

Consider this fragment of code which has a couple of console.log() statements added:

  $.get(dbidTable, {
    act: "API_DoQuery",
    qid: "1",
    slist: "3",
    options: 'num-${n}.sortorder-D',
    includeRids: "1"
  }).then(function(xml) {
    console.log(xml);
    var rids = $("record", xml).map(function() {
      return $(this).attr("rid");
    }).get();
    var query = "{3.XEX." + rids.join("}AND{3.XEX.") + "}";
    $.post(dbidTable, {
      act: "API_PurgeRecords",
      query: query
    }).then(function(xml) {
      console.log(xml);
      document.location.href = '${dbidTable}?a=q&qid=1';
    });
  });

You may wonder why the $.post() call is made nested in the first then () rather than being chained together with an additonal then() method like so:

  $.get(dbidTable, {
    act: "API_DoQuery",
    qid: "1",
    options: 'num-${n}',
    includeRids: "1"
  }).then(function(xml) {
    console.log(xml);
    var rids = $("record", xml).map(function() {
      return $(this).attr("rid");
    }).get();
    var query = "{3.XEX." + rids.join("}AND{3.XEX.") + "}";
    return $.post(dbidTable, {
      act: "API_PurgeRecords",
      query: query
    });
  }).then(function(xml) {
    console.log(xml);
    document.location.href = '${dbidTable}?a=q&qid=1';
  });

In this particualr situation the second block of code will acheive the same result as the first block of code. However, the two console.log(xml) statemetns in the seccond block of code will log the same XML response - that of the first $.get() call. This is because there is a bug in jQuery version 1.7.2 which QuickBase uses.

Now there is a fix to this situation which is to use $().pipe() instead of $().then() as follows:

  $.get(dbidTable, {
    act: "API_DoQuery",
    qid: "1",
    options: 'num-${n}',
    includeRids: "1"
  }).pipe(function(xml) {
    console.log(xml);
    var rids = $("record", xml).map(function() {
      return $(this).attr("rid");
    }).get();
    var query = "{3.XEX." + rids.join("}AND{3.XEX.") + "}";
    return $.post(dbidTable, {
      act: "API_PurgeRecords",
      query: query
    });
  }).pipe(function(xml) {
    console.log(xml);
    document.location.href = '${dbidTable}?a=q&qid=1';
  });

The reason I choose not to promote this idiom is because $().pipe() has been deprecated since jQuery version 1.8 when the above problem with 1.72 was fixed. So in my opinion while using jQuery with QuickBase it is a better temporary opption to start nesting AJAX calls rather than chaing them together with $().pipe().


(2) Native Promises
The second piece of advice for using jQuery with QuickBase is to learn how to convert a jQuery promise to a native JavaScript promise. In a nutshell, promises were added to JavaScript in a manner inconsistent (but better) than how they were implemented in jQuery. 

Luckily you can convert a jQuery promise into a native JavaScript promise by simply wrapping the jQuery promise in a native Promise.resolve():

var nativePromise = Promise.resolve(
  $.get(...)
}

(3) We are constrained to use the existing jQuery version 1.7.2 when injecting code into QuickBasse pages. However, if you are creating a solution that uses a standalone code page you can and should use a more recent version of jQuery or perhaps rely on native promises or a modern framework of your choosing.