The Joshfire framework uses a model based on RequireJS to manage dependencies and load scripts dynamically.
RequireJS was chosen after a survey of existing script loaders.
It was the only one with both an easy and unified API which allows script-loading either client-side in browsers or server-side in NodeJS.
Its major downside is the high filesize of the require.js
script, but we managed to avoid loading it in production mode.
This solution eases development with the added benefit of a very low overhead in production.
The standard way to encapsulate a module is :
Joshfire.define(["path/to/dependency1","joshfire/class","joshfire/uielements/list"], function(Dep1, Class, List) {
// Your code here
...
return yourObject;
});
A few remarks:
Joshfire.define()
function is a wrapper arround the define()
function from RequireJS."joshfire/uielements/list"
results in:
"joshfire/adapters/samsungtv/uielements/list"
and if that fails "joshfire/uielements/list"
will get loaded.There are two ways to load a module:
require()
function (for instance to load the first module)Joshfire.require()
function takes the same arguments as Joshfire.define()
. It works the same way except it doesn't define any module, and you can call it multiple times from the same file.
In development mode, RequireJS loads all dependencies on the fly. It is convenient because you don't need any server-side process to develop and you can test changes in your code immediately. Here is a sample base HTML file suitable for development :
<!DOCTYPE html>
<html>
<head>
<script src="joshfire/adapters/samsungtv/bootstrap.js"></script>
</head>
<body>
<script>
Joshfire.require(["my/samsungApp"],function(appClass) {
var app = new appClass();
});
</script>
</body>
</html>
The only Javascript file you need to include is the bootstrap.js
file inside the adapter you wish to use.
Bootstrap files are only used in development mode. They contain a copy of RequireJS
and the initialization of the Joshfire
namespace (found in the global.js
files).
Don't forget to regenerate the bootstrap files with the command $ fab bootstraps
if you :
global.js
filesJoshfire's built-in optimizer takes care of bundling and compressing Javascript code based on the
Joshfire.define
dependencies. RequireJS will not be included in the final build.
In this mode, you just have to load the generated Javascript file instead of the bootstrap file.