basememara/app.html

## app.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <head>
        <title>App name goes here</title>

        <!-- Load some CSS here. -->
        <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
        <!-- Optional part. Define some global opts. You can set these easily via PHP or so. -->
        <script type="text/javascript">
            APP_DEFAULTS = {
                width: 640,
                height: 480,
                color: 'white'
            }
        </script>

        <!-- Path to your RequireJS. Note the data-main thingy! -->
        <script data-main="src/main" src="src/require.js"></script>

        <!-- You can load CSS here too if you really need to. -->
        <link rel="stylesheet" type="text/css" href="css/other.css">
    </body>
</html>

## application.js
define(['panels/panels'],
        function(panels) {
    var Application = new Class({
        initialize: function() {
            // stub console funcs to allow console.log ie. without errors
            this._stubConsole();

            // inject "app" div to document body
            $E('div').set('id', 'app').insertTo(document.body);

            // this gets the party started
            panels.initialize();
        },
        _stubConsole: function() {
            if(!defined(window.console)) {
                window.console = {};
            }

            ['error', 'log', 'warn'].each(function(name) {
                if(!(name in window.console)) {
                    window.console[name] = function() {};
                }
            });
        }
    });

    // no need to return actual Application, instead
    // we can return a nice func instantiating and
    // hence running it
    // btw you can eliminate the class if you really want to
    return {
        run: function() {
            new Application();
        }
    };
});

## main.js
APP = {}; // my global stash, you might do without

require({
        // some nice aliases for easy imports
        // now we can refer to "math" utils
        // simply by "utils/math"
        paths: {
            configuration: 'configuration',
            ui: 'ui',
            utils: 'utils'
        }
    },
    ['application', 'utils/misc'],
        function(app, misc) {
    // I extend various libs at misc, hence this
    misc.initialize();

    // booyah, time to run
    app.run();
});

## module_examples.js
// module for some app conf, items may contain funcs too
define({
    debug: true,
    logUndo: false,
});

// more complicated def (plugin example)
define({
    meta: {
        tooltip: 'My awesome tool',
        attributes: { // some default attrs
            width: 5
        }
    },
    execute: function(opts) {
        // do something cool now
    }
});

// even more complicated def, with dependencies this time
define(['utils/math'], function(math) {
    // you can include handy local utils here

    // ...

    // and define what to share here
    return {
        execute: function(opts) {
            // do something with the math module
            return math.sqrt(123);
        }
    };
});

## normal.build.json
{
    appDir: <app name>,
    baseUrl: "src",
    dir: "build",
    optimize: "none",

    modules: [
        {
            "name": "main"
        }
    ]
}

## widgets.js
define(['./widgets/selectors', './widgets/slider', './widgets/button'],
        function(selectors, slider, button) {
    return {
        ToolSelector: selectors.ToolSelector,
        OptionSelector: selectors.OptionSelector,
        Slider: slider.Slider,
        Button: button.Button
    };
});
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
	<html lang="en">
	<head>
	<title>App name goes here</title>

	<!-- Load some CSS here. -->
	<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>
	<body>
	<!-- Optional part. Define some global opts. You can set these easily via PHP or so. -->
	<script type="text/javascript">
	APP_DEFAULTS = {
	width: 640,
	height: 480,
	color: 'white'
	}
	</script>

	<!-- Path to your RequireJS. Note the data-main thingy! -->
	<script data-main="src/main" src="src/require.js"></script>

	<!-- You can load CSS here too if you really need to. -->
	<link rel="stylesheet" type="text/css" href="css/other.css">
	</body>
	</html>
	define(['panels/panels'],
	function(panels) {
	var Application = new Class({
	initialize: function() {
	// stub console funcs to allow console.log ie. without errors
	this._stubConsole();

	// inject "app" div to document body
	$E('div').set('id', 'app').insertTo(document.body);

	// this gets the party started
	panels.initialize();
	},
	_stubConsole: function() {
	if(!defined(window.console)) {
	window.console = {};
	}

	['error', 'log', 'warn'].each(function(name) {
	if(!(name in window.console)) {
	window.console[name] = function() {};
	}
	});
	}
	});

	// no need to return actual Application, instead
	// we can return a nice func instantiating and
	// hence running it
	// btw you can eliminate the class if you really want to
	return {
	run: function() {
	new Application();
	}
	};
	});
	APP = {}; // my global stash, you might do without

	require({
	// some nice aliases for easy imports
	// now we can refer to "math" utils
	// simply by "utils/math"
	paths: {
	configuration: 'configuration',
	ui: 'ui',
	utils: 'utils'
	}
	},
	['application', 'utils/misc'],
	function(app, misc) {
	// I extend various libs at misc, hence this
	misc.initialize();

	// booyah, time to run
	app.run();
	});
	// module for some app conf, items may contain funcs too
	define({
	debug: true,
	logUndo: false,
	});

	// more complicated def (plugin example)
	define({
	meta: {
	tooltip: 'My awesome tool',
	attributes: { // some default attrs
	width: 5
	}
	},
	execute: function(opts) {
	// do something cool now
	}
	});

	// even more complicated def, with dependencies this time
	define(['utils/math'], function(math) {
	// you can include handy local utils here

	// ...

	// and define what to share here
	return {
	execute: function(opts) {
	// do something with the math module
	return math.sqrt(123);
	}
	};
	});
	{
	appDir: <app name>,
	baseUrl: "src",
	dir: "build",
	optimize: "none",

	modules: [
	{
	"name": "main"
	}
	]
	}
	define(['./widgets/selectors', './widgets/slider', './widgets/button'],
	function(selectors, slider, button) {
	return {
	ToolSelector: selectors.ToolSelector,
	OptionSelector: selectors.OptionSelector,
	Slider: slider.Slider,
	Button: button.Button
	};
	});