Index | Prev | Next

RequireJS: how to load JavaScript code in Niagara 4

When using BajaScript version 1 in Niagara AX, the following script tag was required for BajaScript to work:

<script type="text/javascript" src="module://bajaScript/com/tridium/bajascript/bs.min.js"></script>

The more complex the web application, the more script tags are needed. This can have some negative effects on your web application:

• If a script tag is in the wrong order, your web app could break.
• If you forget to include a script tag, your web app could break.
• The more script tags, the more HTTP requests. The more HTTP requests, the slower your application loads.
• The more complicated the JavaScript, the bigger the script file. Big JavaScript files are difficult to manage.

As more developers transition their UI from Java to HTML5, we need a modular way to manage JavaScript. To solve this problem, we use RequireJS from https://requirejs.org. RequireJS uses the Asynchronous Module Definition (AMD) method of loading JavaScript code.

RequireJS has a wide variety of configuration options, but in most cases, Niagara will completely handle the configuration of it for you. The most important thing to learn about using RequireJS in Niagara is the AMD syntax itself.

// to define an AMD module:
// myModule-ux/src/rc/MyWidget.js
define([
  'baja!',
  'bajaux/Widget' ], function (
  baja,
  Widget) {
  
  return class MyWidget extends Widget {
  };
});

// to consume an AMD module:
define([
  'nmodule/myModule/rc/MyWidget' ], function (
  MyWidget) {
  // write code that uses MyWidget here
});

What resources can I access via RequireJS?

• BajaScript: require baja! to obtain a running instance of BajaScript.
• Any module resource: use the nmodule prefix to retrieve a resource from any module. For instance, if your file is in myModule-ux/src/rc/MyWidget.js, the RequireJS ID to request is nmodule/myModule/rc/MyWidget.
• CSS: use the css plugin to make your bajaux widget require a CSS file. For instance, if your CSS file is at myModule-ux/src/rc/myModuleStyle.css, the RequireJS ID to request is css!nmodule/myModule/rc/myModuleStyle.
• Lexicons: use the lex plugin to request lexicon data. See the documentation here.
• Logs: use the log plugin to log data to the browser console, or send it up to the station log. See the documentation here.

How do I build my web module using RequireJS?

In addition to loading code in the browser at runtime, RequireJS allows multiple JS modules to be bundled up into single files. This improves caching and load times, and reduces pressure on a station’s web server.

Please see the section on Building JavaScript Applications for details.

How do I include RequireJS itself in my web application?

Depending on how you are developing a web application, your use of RequireJS will vary slightly.

• bajaux: RequireJS will be provided for you automatically.
• Hx: Call HxOp#requireJs() from your Hx View.
• Velocity Templates: use $util.requirejs() to inject the RequireJS script tag and configuration object.
• .htm files (not recommended): Add the following two script tags:
  • <script src="/requirejs/config.js"></script> (preloads the RequireJS configuration)
  • <script src="/module/js/com/tridium/js/ext/require/require.js"></script> (loads RequireJS itself)

Index | Prev | Next