AMD Modules and CommonJS Packages

Design Patterns

AMD Modules

/* -------------------------------------------------------------------------- */

/*
* AMD (Asynchronous Module Definition):
*
*   The module and dependencies can be asynchronously loaded. It helps to
*   removes the tight coupling between code and module identity.
*
*  JavaScript is single-threaded amd runs synchronous code executed in sequence:
*
*    All the time works on a synchronous code-flow executionn (in sequence).
*
*    Feel free to use Asynchronous code when performing expensive and
*    time-consuming operations.
*
*    We should always use XMLHttpRequest Asynchronously and update "the page"
*    when responses are available.
*
* Please read and enjoy:
*
*   https://github.com/amdjs/amdjs-api/wiki/AMD
*   
*   http://addyosmani.com/writing-modular-js
*/

/* -------------------------------------------------------------------------- */

/*
* My First Module.
*/
define('myFirstModule', [
  // Module Dependencies.
  'mySecondModule',
  'myThirdModule'
],
// Module definition function: Dependencies are mapped to Function Parameters.
function (mySecondModule, myThirdModule) {
  // Our Module Code Lives Here.
  var myFirstModule = {
    // Do stuff and Respond to requests.
    myResponse: function() {
      return '{"status": "success", "data": {"var": "val"}, "message": null}';
    };
  };
  // Returns a value that defines the Module Export.
  return myFirstModule;
});

/* -------------------------------------------------------------------------- */

/*
* Basic Example.
*/
define('myFirstModule', [
  'mySecondModule',
  'myThirdModule'
],
// Code lives here.
function (mySecondModule, myThirdModule) {
  return {
    myResponse: function(arg1, arg2) {
      return mySecondModule.yourResponse(
        myThirdModule.theirResponse(arg1, arg2)
      );
    };
  };
};
});

/* -------------------------------------------------------------------------- */

/*
* AMD Modules with jQuery.
*/
define('myjQeuryModule', [
  'js/jquery.js',
  'js/lodash.js'
],
// Here we map jQuery with $ and Lodash with _
function($ , _) {
  // Here we can use: https://jquery.com an d https://lodash.com
  // through the use of the parameters $ and _
  return {
    // What we return here can be used by other modules.
  };
});

/* -------------------------------------------------------------------------- */

/*
* Most Commonly Used Browser Module Loader: http://requirejs.org
*
* "yourModule" and "theirModule" are two external modules.
*
* The "exports" from this two modules loaded are passed as function
* arguments to the callback (yourModule, theirModule) so that they can
* similarly be accessed.
*/
require([
  'yourModule',
  'theirModule'
],
function (yourModule, theirModule) {
  // Rest of the Code Lives Here.
  yourModule.yourResponse();
  theirModule.theirResponse();
});

/* -------------------------------------------------------------------------- */

/*
* Dynamically-loaded Dependencies.
*/
define(function ( require ) {
  var isReady = false,
      myResponse;
  // Note the inline require within our module definition above.
  require([
    'yourModule',
    'theirModule'
  ],
  // Code lives here.
  function (yourModule, theirModule) {
    isReady = true;
    myResponse = yourModule.yourResponse() + theirModule.theirResponse();
  });
  // We can still return a module.
  return {
      isReady: isReady,
      myResponse: myResponse
  };
});

/* -------------------------------------------------------------------------- */

CommonJS Packages

/* -------------------------------------------------------------------------- */

/*
* CommonJS the Module Format Optimized For The Server.
*
* Is a Standard for Asynchronous Modules.
*
* The CommonJS module specifies a simple API for declaring server-side modules.
* It covers a set of concerns such as: io, filesystem, promises and more.
*
* Contains two primary parts:
*
*   A free variable named "exports" which contains the objects a module wishes
*   to make available to other modules.
*
*   A "require" function that modules can use to import the exports of other
*   modules.
*/

/* -------------------------------------------------------------------------- */

/*
* Package/library is a dependency we require.
*/
var library = require('package/library');

function myMethod() {
  return library.theirMethod();
}

// Exports/Exposes myMethod to other modules.
exports.myMethod = myMethod;

/* -------------------------------------------------------------------------- */

/*
* Most Commonly Used Server Module Loader: http://nodejs.org
*
* Node adapter for RequireJS: http://requirejs.org/docs/node.html
*
* Node.js is single-threaded amd runs synchronous code executed in sequence:
*
*   Sometimes have both asynchronous and synchronous versions of things:
*    - writeFile.
*    - writeFileSync.
*
*  "Node.js handles requests with a single thread concurrently by multiplexing
*   and sequencing all your JS logic in a single stream of execution which works
*   well for IO-bound workloads."
*
*   Always behave Asynchronous when I/O is involved or when in doubt.
*
* Please read and enjoy:
*
*   http://www.nodewiz.biz/your-doing-node-js-wrong-avoid-synchronous-code
*/

/* -------------------------------------------------------------------------- */

/*
* Basic consumption of exports.
*/
function messages() {
  this.success = function() {
    return '{"status": "success", "data": {"var": "val"}, "message": null}';
  }

  this.error = function() {
    return '{"status": "error", "data": null, "message": "System Message"}';
  }
}

// Exposes messages to other modules.
exports.messages = messages;

/* -------------------------------------------------------------------------- */

/*
* An application/module consuming 'messages'.
*/
var messages = require('./modules/messages').messages;

var res = new messages();

res.success();

/* -------------------------------------------------------------------------- */

Handy Sass “Mixins”

Sass Style Guide

Compass Mixins

A Simple and Lightweight Mixin Library

Useful SASS Mixins Library

Reusable Mixins

Really Simple Media Queries

Serving High Resolution Background Images

Sassaparilla Grid

Sass MediaQueries

Set Text on the Web to a Baseline Grid

A Grid System for Humans

A Lightweight, Responsive CSS Layout Engine

Unicorn UI Buttons

Sassy Buttons

Bootstrap Sass