Tag: Requirejs

RequireJs makes dependency management on the client mostly better. Once it’s setup, it’s nice. Getting the patterns of your paths to work correctly can be difficult to setup, depending on the constraints of your system. Making the same paths work in a prod, test, and build environment can be even more adventuresome. In my case, there were a few extra hoops. My scenario might not fully match yours, but perhaps you can apply this solution to your own needs.

Did you write your source code as JavaScript AMD modules in RequireJs? Do you want to test them in real browsers? Do you want the flexibility of using Mocha or Jasmine? This is the moment you’ve been waiting for.

Testacular is a “spetacular test runner for JavaScript” that was written to support the AngularJs project. It is valuable because it will run your tests in real browsers. This is important for front-end code that relies on browser globals such as window (eg, if you use jQuery) or that manipulates the DOM (which could vary browser to browser).

Client-side JavaScript testing is a somewhat crazy space. Some have even called it “insane” and taken drastically different routes than what follows. But we’re gonna see if we can power through, and Testacular will help us get the job done.

RequireJs features a fantastic optimization tool, r.js, that utilizes UglifyJs to minimize and concatenate your JavaScript code. Grunt is a build tool that is great for standardizing your build configuration and coordinating multiple build steps – amongst its other wonders. Hopefully you get to use both on your project, because they’ll both make your development process smoother and leave you to the funnerest stuff – writing sweet apps.

BusterJs is a still-in-beta library that allows for testing your Javascript. It’s got a wealth of cool features. The browser capturing is awesome for running your Javascript directly in the browsers you choose from one runner. You can also execute within Node. In short, it rocks. But, how to get this rockin’ with your project, specifically your AMD RequireJs with BackboneJs combo project is the lock that must be opened before daily buster love can be had.

Often when building a single-page app, you’ll want to optimize all your js into a single asset. RequireJs is a great mechanism for managing your js dependencies. It also comes with a great build tool for doing the optimization (r.js). But sometimes you won’t want to put all your js into a single asset. For instance, perhaps you only want to load a large chunk of code when the user interacts with the app so that you know he intends to use that functionality, and so you load it dynamically. But, you still want that dynamically-loaded set of modules to be optimized to increase the performance of your app. It’s a pretty simple desired functionality, but I didn’t just stumble upon the solution.

Through long-available browser quirks/features, javascript has been available for requests across disparate domains. But, other resources, such as text files (eg, handlebars templates) have had more restrictions placed on them. Recently, CORS support has enhanced the ability to make these requests. Here’s how you get your text files from another domain via requirejs.

If you have to store your text strings for internationalization (i18n) on the server, that’s one thing. But, if you can store them in Javascript, you might think about using RequireJs and its i18n plugin, because it makes it nice and easy.

When you start writing applications with BackboneJS, that means that you’re dealing with some dynamic UI. There are elements being pushed into and pulled out of the DOM. I was having problems trying to reference DOM elements that were dynamically inserted into the DOM by other Backbone views. The fix was simple but not immediately obvious without cracking open Backbone.

BackboneJS is setup to do some pretty sweet single-page app action. And of course, a single page app will probably be wanting to talk to web services on the server. And if your server code is doing the Java jive, then a great way to expose your REST services is via JAX-RS. It’s as easy as Mikey singin’ ABC-123!

As more application logic gets pushed into the browser for client-heavy apps, the need for javascript testing increases. Lately, I’ve been doing some Jasmine unit testing of an application that uses RequireJS. Here are some general pointers and potential pitfalls to watch for.