Software architecture design

Stage A, Issue #21

Software architecture design

https://github.com/emi420/Mootor/issues/21

Scopes organization, Modules organization and intercommunication and Design pattern selection

Anonymous function and strict mode

Anonymous function:

“This pattern is useful because it provides a scope sandbox...” “...wrap all your code in its local scope and not leak any variables in the global scope” Excerpts From: Stoyan Stefanov. “JavaScript Patterns.

Strict mode:

“The strict mode of ECMAScript 5 is a restricted subset of the language that fixes a few important language deficiencies and provides stronger error checking and increased security.” Excerpt From: David Flanagan. “JavaScript, The Definitive Guide Sixth Edition” Each file/module will be encapsulated in it's own scope with the following structure:

(function ($) {
    // Force strict mode for ECMAScript
    "use strict";
       ...       
}(window.$));

The only global object will be $ (originally from zepto.js or jQuery), which will have a couple of extensions for mootor, described elsewhere.

Modules

• Mootor
• Mootor.App
• Mootor.View
• Mootor.UI
• Mootor.UIView

How to create a new module

// Anonymous pattern
(function($, Mootor) {

    // Private constructor
    var MyModule = function(options) {  
        MyModule.init(this, options);
    }

    // Add module to Mootor modules collection
    Mootor.MyModule = MyModule;

    // Public prototype
    MyModule.prototype = {
       ...
    }

    // Private static properties
    $.extend(MyModule, {
        init(self, options) {
            ...
        } 
    });

    // Public instance factory
    $.extend(m, {
        myModule: function(options) {
            return new MyModule(options);
        }
    };
}(window.$, window.Mootor));

Some high performance code optimization tips

Minimizing Zepto/jQuery queries

No:

$("#myElement").show();
window.setTimeout(function() {
    $("#myElement").hide();       
 }, 500);

Yes:

$myElement = $("#myElement");
$myElement.show();
window.setTimeout(function() {
    $myElement.hide();       
 }, 500);

Minimizing Zepto/jQuery queries

No:

$("#myElement").show();
window.setTimeout(function() {
    $("#myElement").hide();       
 }, 500);

Yes:

$myElement = $("#myElement");
$myElement.show();
window.setTimeout(function() {
    $myElement.hide();       
 }, 500);

Add a $ to the variable name of zepto-extender (zeptified) elements

No:

var myElement = $("#myElement");

Yes:

var $myElement = $("#myEleemnt");

Reversing loop order

for( i = myArray.length; i--;) {
   ...    
}

“Each control condition is now simply a comparison against zero. Control conditions are compared against the value true, and any nonzero number is automatically coerced to true, making zero the equivalent of false. Effectively, the control condition has been changed from two comparisons (is the iterator less than the total and is that equal to true?) to just a single comparison (is the value true?).” Excerpt From: Nicholas C. Zakas. “High Performance JavaScript.”

Files and folders structure

/dist
/dist/js (compiled JavaScript)
/dist/js/mootor.js
/dist/css (compiled CSS)
/dist/css/mootor.css
/dist/img (sprites and images)
/dist/fonts (font files)

/source (mootor source)
/source/js (JavaScript source)
/source/js/myModule.js (ej: ui.js , ui.form.js)

/source/css (CSS source)
/source/css/myModule.scss (ej: ui.scss ui.form.scss)

/source/utils  (tools for compiling and creating /dist)

/source/img/ (images)
/source/img/icons (vector icons to be compiled in font files)
/source/img/ (all images should have @2x versions for retina displays)

/source/fonts (font files)

/doc (automatically generated docs for the JS files using YUIDoc)

/test (spec files for testing with Jasmine)

/examples (example apps files)

 /examples/start (initial sample app)
      /examples/start/index.html (initial file for the app)
/examples/start/js/
/examples/start/js/models.js (a file that defines all models)
/examples/start/js/app.js (initial file for the app)
/examples/start/css/
/examples/start/css/styles.css (global styles for the app)
/examples/start/img/
/examples/start/views/ (see below)             

/examples/kitchensink (an app with an example of every component)

File structure for apps

/views/ (folders and files for each view)
    /views/viewid/ 
        /views/viewid/viewid.html
        /views/viewid/viewid.css
        /views/viewid/viewid.js

This is actually the only mandatory structure, the rest of the files can be in any layout. Check the "start" example for the structure of a full app.

---

Authors:

• Emilio Mariscal (emi420 [at] gmail.com)
• Martín Szyszlican (martinsz [at] gmail.com)