JavaScript

The Moovweb SDK includes two open-source utilities to manage your JavaScript:

Uranium
for convenient declarative mobile interactions
Fusion
for JavaScript bundling

In addition, you can of course use your own favorite JavaScript libraries and tools.


Uranium

Uranium is an open-source JavaScript library maintained by Moovweb that contains a set of interactions — self-contained bits of code that allow you to do neat, interactive things on your website. Uranium relies on the popular jQuery JavaScript library. You include the whole Uranium file in your project, not just a particular widget.

Find it on GitHub

Uranium is open-source and on GitHub. You can download the Uranium JS files from the Uranium site and include it in your project. Full documentation about Uranium’s features and declarative approach to JavaScript are there as well.

Get it from a CDN

You may also use Uranium directly from our Content Delivery Network. Moovweb has a dedicated page kept up-to-date with the latest version of Uranium.

If you want to lock in a specific version of Uranium, you can also use the direct CDN link for that version. For example, Uranium 1.0.152 will always be served from a CDN at http://downloads.moovweb.com/uranium/1.0.152/uranium-pretty.js. The minified version will always be served from http://downloads.moovweb.com/uranium/1.0.152/uranium.js.

Every time it is updated, Uranium gets automatically uploaded to our CDN and the build number is also incremented.

Add it to Your Project

You can use these URLs in your project’s bundles.yml file to grab and use Uranium. (See below for more information on Fusion and the bundles.yml file.)

If you need to make modifications to this JavaScript, download the raw source from GitHub, edit it and include it from your local assets folder. Or fork the Uranium repo on GitHub.


Fusion

Fusion is a open-source JavaScript bundling plugin for Moovweb’s development framework. It is designed to work like Sass.

Why Bundle?

Bundling gathers all your JavaScript files and puts them in one file. Doing this reduces the number of network requests your site makes — and that increases performance.

Usage

Within the assets/javascript directory, there is a bundles.yml file. Take a look inside, and you’ll see the following:

- :output_file: main.js
  :input_directory: main
  :input_files:
  - sample_js_file.js
  - http://d1topzp4nao5hp.cloudfront.net/uranium-upload/0.1.3/filename.js

All files specified under “input_files:” and any files in the “input_directory” get bundled into the “output_file”.

You can also have multiple input directories like this:

:input_directories:
  - util
  - pages

Here is the bundling logic for files listed in bundles.yml:

If you explicitly list “file A” with the input_files syntax and it’s also in a directory that you’ve listed, it will not get loaded twice.

Additional Usage Notes

Page-Aware JS

Finally, make sure your JavaScript is page-aware. That is, any JavaScript meant for a specific page should run only on that page. You can do this easily by inserting a specific class in the <body> and using the following JS:

$(document).ready(function() {
  $("body.mw_full_trolley").each(function() {
    // console.log("here");
    // your code here
  });
});