Christoph's 2 Cents

A Backup for My Brain!

Oracle Developement

APEX 5: JavaScript execution order in Universal Theme

cruepprich

Playing around with APEX 5, I noticed that the execution order of JavaScript has changed in the Universal Theme. In previous versions of APEX and even in the older themes in APEX 5, JavaScript that was specified in the JavaScript attribute of the page properties was always executed before any JavaScript specified inside static regions with <script> tags.

This has changed with the Universal Theme. If you now create static regions with JavaScript, they will get executed before the JavaScript specified in the page properties. The same is true when including JavaScript libraries in the page properties: They will get included after the JavaScript in the static regions was executed, possibly resulting in errors.

Patrick Wolf of Oracle, was kind enough to provide me with an explanation for this:

Our new Universal Theme is following browser performance best practices to load JavaScript files at the end of the page to not block page rendering. This has the side effect that any JS code directly included with a <script> tag somewhere on the page will not be able to access APIs provided by those libraries because they have not been loaded at the time when the <script> tag is parsed and executed.

We strongly recommend that developers are using the declarative JavaScript attributes provided by APEX and not include JS code with <script> tags. By declarative I mean the page level attributes ‘JavaScript – Function and Global Variable Declaration’ and ‘JavaScript – Execute when Page Loads’ and the ‘Execute JavaScript Code’ dynamic action. This has a few advantages:

  • The APEX engine is able to optimize the execution of JavaScript code.
  • APEX Builder can provide JS code editor support when entering JavaScript code.
  • And las but not least: JavaScript code used and executed on the page is transparent for every developer. It’s not hiding in some region source / footer attribute.

So if you plan to migrate an application from a previous APEX version to version 5, and you have JavaScript inside regions, you may want to consider sticking with an older theme, like theme 26, in which the JavaScript execution order has not changed.

Thanks to Patrick for the detailed explanation.