How to Make CSS3 Applications Run Faster with yepnope.js - dummies

How to Make CSS3 Applications Run Faster with yepnope.js

By John Paul Mueller

Part of the problem with browser-based applications is that you request a single resource from a CSS3 library and end up with the entire library loaded. The process is slow, cumbersome, error-prone, and simply inefficient.

You can use yepnope.js to help overcome these issues. When working with yepnope.js, you provide a condition that the product then tests, and then loads resources only as needed to support a specific condition. You can use this product with CSS3 or JavaScript files.

Fortunately, the yepnope.js tool goes further than simply loading resources based on conditions. For example, some applications will mindlessly call a script with the same input parameters multiple times when only one output is possible using a particular set of inputs. The multiple calls can prove especially time-consuming when calling another URL.

You can use yepnope.js to keep events like this from occurring. The tool helps make the application code smarter so high-latency calls are avoided whenever possible.

Another problem with scripts is that they can continue to run, even when there’s no hope that they’ll ever complete. After a while, the user clicks the Back button or goes to a different site.

You can add timeouts for scripts individually with yepnope.js so that it becomes possible to detect the timeouts and handle them as errors. With this capability in place, it’s potentially possible to recover from scripts that continue running when they shouldn’t.

The central focus of yepnope.js is the yepnope() function. It provides a syntax that looks like this:

 test : /* A condition you want to test */,
 yep : /* Tasks performed when true. */,
 nope : /* Tasks performed when false */,
 both : /* Tasks performed every time */,
 load : /* Resources loaded every time */,
 callback : /* A function to call during processing */,
 complete : /* A function to call after processing */
}, ... ]);

The basic idea is that you create a scenario where tasks are performed based on specific needs so that the application doesn’t spend time performing unnecessary tasks (and wasting both time and resources as a result). Of course, yepnope.js provides more functionality than presented in this overview, but the short version is that this is a smart resource loader.