RequireJS + PhoneGap

James Burke | @jrburke - github, twitter

Mozilla. Labs. Web Apps.

http://bit.ly/rjspg07

Web all the apps

Everywhere

Rough edges

Last mile

First mile

Why AMD

The great sadness

You are the linker, browser only, disparate automation


<script src="../js/JQuery.js"></script>
<script src="../js/SwfObject.js"></script>
<script src="../js/JsLib.js"></script>
<script src="../js/Utils.js"></script>
<script src="../js/Validation.js"></script>
<script src="../js/Personal.js"></script>
<script src="../js/SpecialFeatures.js"></script>
<script src="../js/Basket.js"></script>
<script src="../js/Catalog.js"></script>
<script src="../js/Marketing.js"></script>

The great sadness

Indirect dependencies, wordier, async APIs

(function (global) {
    var tp = $.get('View.html').then(function (text) {
            return _.template(text);
        });

    function View(node) {
        this.node = node;
    });

    View.prototype = {
        render: function (data) {
            return tp.then(function (template) {
                this.node.innerHTML = template(data);
            });
        }
    };

    global.View = View;
}(this));

AMD

Direct refs, simpler APIs for your modules

define(['jquery', 'underscore', 'text!./View.html'], function ($, _, text) {
    var template = _.template(text);

    function View(node) {
        this.node = node;
    }

    View.prototype = {
        render: function (data) {
            this.node.innerHTML = template(data);
        }
    };

    return View;
});

AMD

With a template loader plugin, does compile for you

define(['jquery', 'underscore', 'tpl!./View.html'], function ($, _, template) {
    function View(node) {
        this.node = node;
    }

    View.prototype = {
        render: function (data) {
            this.node.innerHTML = template(data);
        }
    };

    return View;
});

AMD

CommonJS sugar

define(function (require) {

    var $ = require('jquery'),
        _ = require('underscore'),
        template = require('tpl!./View.html');

    function View(node) {
        this.node = node;
    }

    View.prototype = {
        render: function (data) {
            this.node.innerHTML = template(data);
        }
    };

    return View;
});

AMD

Cleaner HTML

<script data-main="main" src="require.js"></script>

AMD - Build

define('text', function () {
    //Can be empty does not need to load text after build
});

define('text!View.html', function () {
    return '<h1>Hello <%= name %></h1>';
});

define('View', ['jquery', 'underscore', 'text!./View.html'],
function ($, _, template) {
    function View(node) {
        this.node = node;
    }

    View.prototype = {
        render: function (data) {
            this.node.innerHTML = template(data);
        }
    };

    return View;
});

AMD

Standard format leads to choices

AMD with Phonegap

  • Loader plugin for env
  • Reusable components, one www codebase
  • almond, or dynamic load

Work in progress

One codebase example

  • Go with the flow, convention based layout, volo
  • Needs an async cordova.js