Building a Mobile Site: Mobile JavaScript

This module will teach you how to add JavaScript to your project, some common JavaScript gotchas, and how to handle Ajax requests.

You’ll also learn how to create your own Tritium functions!

Prerequisites: Mobile Web Widgets

Outline


Adding JavaScript

For optimal mobile site performance, Moovweb manages your JavaScript with a bundling system called Fusion.

Fusion bundles all your JavaScript files into one big compressed file so you only have a single request for a small file size.

The assets/javascript/bundles.yml file tells Fusion what to bundle. You can include internal files or external files.

To include some JavaScript, just create a new file and add it to the javascript/main folder.

If you want to include JavaScript from another URL, simply add a line with the following format:

- http://example.com/example.js

My JavaScript


JavaScript Gotchas

Here are some common problems you may encounter while developing your site.

JavaScript Inserting HTML

Sometimes, a JavaScript library will insert bits of HTML onto the page. This occurs in the browser, after the site has been transformed using Tritium.

To address such issues, you’ll have to handle that content using either CSS or by writing new JavaScript to target the code that is inserting this content.

JavaScript Loading JavaScript

This problem often occurs because the JavaScript you are using is making its own request for another script using a relative path. Remember when we absolutized the sources in our html.ts file? This was to prevent this type of problem. However, this doesn’t account for JavaScript that has the embedded use of relative links.

This is generally a problem you want to avoid because it’s so bad for performance and not modular for long-term design. There are several solutions to this type of problem:

  1. Write your own Tritium to go into the script in real-time and change the URL so it is not relative and loads correctly. You can generally replace the URL using a regular expression.
  2. Host the JavaScript yourself. However, you only want to host scripts that you are certain will never change. If there is even a possibility of it changing, you don’t want to be hosting old versions of the script.
  3. Proxy the JavaScript being loaded as well so that the relative paths work because they are proxied to the proper domain.

Ajax

Handling Ajax is quite simple with the Moovweb SDK.

Go to the file main.ts and you should see some code commented out that looks as follows:

# with(/javascript/) {
#   @import ajax.ts
# }

If you un-comment this code, it will catch any Ajax requests with the content type of “text/javascript” and then run the ajax.ts script on those pages.

Your Ajax responses may have some other content types such as “application/json” or even regular “text/html”. If this is the case, make sure you are handling them appropriately in the main.ts file and transforming them in the way intended.

If the ajax.ts script doesn’t already exist, go ahead and create it in the scripts folder.

Inside ajax.ts you’ll want to match the path of the Ajax call to the proper script you want to run on that particular content.

For example:

match($path) {
  with(/category/) {
    # Tritium I want to run on Ajax content with "category" in the URL.
  }
  with(/product/) {
    # Tritium I want to run on Ajax content with "product" in the URL.
  }
  else() {
    log("This Ajax content is unrecognized.")
  }
}

Notice the structure is very similar to the mappings.ts file. Again we are just using the path of the URL to make decisions about how we want to transform it.


Custom Functions

Write your own functions in the functions folder. You’ll probably see some existing functions in the main.ts file.

You can either add to that file, or create your own functions file; just make sure to @import my_functions.ts at the bottom of the functions/main.ts file.

Here’s the generic function syntax:

@func ScopeType.name(ArgType %arg) {
  log(%arg)
}

And here’s a more practical example:

@func XMLNode.reminder(Text %message) {
  log("Remember to: " + %message)
}

This function will simply log whatever message you pass it and prepend “Remember to: ” at the beginning of the message.