Is it wise to use an AMD loader like RequireJS with a PhoneGap/Cordova application?

Question

We all know the benefits of using RequireJS. I'm wondering though whether there are performance considerations to take into account when developing a Cordova app (especially on a platform like Android 2.x which can be dog slow). Say I'm writing a SPA and dynamically loading a module when navigating to a new view - won't there be latency issues, even if I am loading from the file system? As opposed to loading all of my JavaScript assets when the app initially loads?

Yes, I know I could test myself - I'm just wondering whether anyone out there has tested the performance already!

Answer 1

If you are using r.js to at least concatenate (if not optimize, which is arguably of questionable benefit to some when all the assets are local) your modules, you will not be loading from the file system other than the initial load of your application. By using loader plugins such as "text", etc., even your HTML/template assets can be in-lined into modules in your concatenated file, so that the loading of a template is simply the "perf hit" of a function call. To address @Gajotres's point, you can either order the script tags and include Cordova first, OR shim it via require.config if you're require.js 2.1.0 (I believe) or better. So - in a nutshell, if you use require.js for hybrid mobile, DON'T skip the concatenation step. Assuming you've concatenated your modules into a "built" js file, at that point performance is going to depend both on factors beyond your control (device, native webview implementation, etc.) and other factors you can control... things like:

• what's the overal complexity of the app? If it's static views, then showing/hiding already-present DOM elements will be faster than requiring a module that requires a template module and renders the template using whatever template engine, etc.
• assuming it's not static views, deeply nested DOM structures (for one example) can give you grief on performance, reflow, etc.

On the whole, Andrew Trice has a great piece on UX considerations for mobile: http://www.tricedesigns.com/2013/03/11/performance-ux-considerations-for-successful-phonegap-apps/

If the app isn't terribly complex, then a simple build step that concats your hand-rolled modules (so you get the advantage of lower cognitive overhead while you develop, plus the build output of one file) might be sufficient. But unless you're concatenating templates, too (in a js module-accessible format), you'll have to load them at some point...

Answer 2

Let me tell you from my experience.

While require.js is an excellent to tool there are some latency issues when used with Phonegap, mostly on slower devices. It can even be extremely annoying. Of course there are always workarounds but what is the point of using require.js if you need a workaround to make it work correctly.

There are even some problems when loading some older versions of cordova.js file so only way to fix it is to loaded it in a common manner through classic script tag, and before require.js:

<script type="text/javascript" src="libs/cordova-2.1.0.js"></script>
<script data-main="js/main" src="libs/require-jquery.js"></script> 

Some frameworks when used with require.js and Phonegap / Cordova will cause problems like jQuery Mobile. Basically everything that needs to play with DOM as soon as possible will cause problems. Again there are some workarounds, still what is the point.

In the end with some playing and fixing you can gain visible performance boost, but DON'T expect desktop environment boost.

EDIT :

Real problems started around Cordova 2.1.0 when Cordova lazy loading started to conflict with Require.js, it even went that far that both frameworks had define and require functions that clashed one against the other. And there was an issue of RequireJS not waiting for the deviceready event which caused problems with some other frameworks.

Currently all problems are fixed as of Cordova version 2.7.0. but I cant guaranty you that some other problem want come out.

Let us also talk about other problems. Currently you worry that Require.js would cause you execution problems with Phonegap.Even if this is true in currently last Corodva version this is not a big issue.

You need to worry what framework are you going to use to create your hybrid app. Currently perfect framework don't exist, even if you create a pure javascript app you are still not going to be able to create a "native look and feel" application. Even last generation of mobile phones are simply to slow to give you a rich looking UI with native looking app behavior.

From my experience there are only 3 available ways of creating a near good app experience when working on hybrid app:

1. Sencha touch
2. Ex jqMoby (now Intel AppFramework)
3. Pure javascript app

Require.js, curl.js or any similar framework will simply not help you a lot here.

One last thing, take a special care into ifandelse's answer, while a little bit off a topic (like my EDIT part) it has a much greater importance then Require.js Phonegap compatibility.