Skip to content

Instantly share code, notes, and snippets.

@bebraw
Created February 11, 2011 06:34
Show Gist options
  • Save bebraw/822007 to your computer and use it in GitHub Desktop.
Save bebraw/822007 to your computer and use it in GitHub Desktop.
<!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
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment