Modular UI with Coherent UI or Coherent GT and JavaScript Modules PART 1
Developers enjoy working on a well organized project, where it is easy to add new features and change existing ones without everything falling apart. For most project this means that the application should be composed of decoupled pieces of functionality – modules. The current HTML and JavaScript iterations don’t support modules in a standard out-of-the-box way, but this doesn’t mean that we can’t use them.
Having one big, monolithic HTML page for the User Interface (UI) of your game is not something you will want. It is prone to errors, name and CSS style clashes and makes it hard to get oriented in the code. The worst of all – it makes it very hard to have different UI elements created by different developers.
Modular User Interface
By modular User Interface (UI) we mean that it is composed by distinct elements, which are highly decoupled and communicate between each other in a specified way. With the modular UI, you will be able to coordinate easily the workflow of several developers building one and the same UI!
There are several ways to create modular UI with Coherent UI/ Coherent GT:
iframe- multiple views
- web components
- modules
iframe and mulitple views
Using iframes or having multiple Coherent UI/Coherent GT views is one of the ways to go. However, you should consider several deficiencies:
- it is impossible for the different modules to easily and efficiently communicate between each other
- each
iframeor view runs in a different CoherentUI_Host process
Web components
Web components are the future of the web. However, their specification are still under active development and are not stable yet. Once they are more production-friendly than now, we will cover them in a blog post.
Modules
In its current generation JavaScript doesn’t have built in support for modules. There are three major proposals for modules in JavaScript – AMD, CommonJS and ES Harmony. While the ES Harmony will become part of the standard and therefore, is the future of JavaScript, today we can use only AMD and CommonJS. CommonJS modules are used in node.js, while the way for the client-side is to use JavaScript AMD. You can use any AMD library-the two most commonly used are curl and RequireJS. We are going to use curl, because it comes bundled with an essential set of plugins and is easy to use.
So how do you create a module?
To create a module, we use the following define function:
|
1 2 3 4 5 6 7 8 9 10 11 |
define( 'healthbar', // name of the module ['player'], // optional depedencies function (player) { var healthbar = { show = function () { }; }; return healthbar; }); |
Using the newly created module is simple enough:
|
1 2 3 4 5 6 7 8 9 10 |
<script> curl.config({ healthbar: 'js/healthbar.js', }); curl(['healthbar'], function (hb) { hb.show(); }); </script> |
Checkout the Hello World sample for curl.js here.
The modules doesn’t have to be only JavaScript. They can also contain HTML and CSS. By using the text and css plugins of curl, we can easily
add CSS and HTML templates to the module. Here is how the crosshair of one of our older post would look like:
|
1 2 3 4 5 6 7 8 9 |
define( 'crosshair', [ 'text!crosshair/../../crosshair.html', 'css!crosshair/../../css/style.css' ], function (html, css) { document.body.insertAdjacentHTML('afterbegin', html); } ); |
And how we are using it:
|
1 2 3 4 5 6 7 8 9 10 11 |
curl.config({ baseUrl: './', paths: { curl: 'js/curl/', crosshair: 'crosshair/js/crosshair.js', } }); curl(['crosshair'], function(crosshair) { }); |
Note: We have defined crosshair to be the path to the crosshair.js script and all the resources are reference relative to the crosshair.js script threated as a folder.
You can see the Crosshair sample in action here.
Caveats
An important point when your team is using modules is that they still run in a single JavaScript environment-so, be careful not to pollute the global namespace with anything that should be private for your module.
Also, the DOM is shared between all modules, therefore, name clashes between HTML element classes and ids are possible. You can avoided this with applying a little bit of discipline and adding prefix to all the classes and identifiers for your module.
I hope that this introduction to JavaScript modules has been helpful! In our next post we will cover how you can organize the UI development workflow around modules. For more information check out the following resources:
Try out Coherent UI/Coherent GT now and see how easy it is build modular UI:
