What’s on our mind?

Exsilio Solutions is proud to introduce our new blog! Not only is this forum completely integrated with all our social networks, but it is also 100% responsive. Now, you can take Exsilio with you on your phone, tablet, and desktop - redefine what you thought possible!

Javascript Best Practices: Modules

As modern web applications become increasingly client heavy, it’s important to properly organize your client side code. In small applications, organization may not seem necessary, however, as your application grows and more people are involved with the project, proper organization becomes key to keeping the application maintainable. This is where Modules come in.

WHAT IS A MODULE?


Modules are an integral piece of any robust application architecture and typically help in keeping the units of code for a project both cleanly separated and organized. Modules should be:

  • Specialized – Each module should have a very specific function
  • Independent – Modules should know as a little as possible about other modules
  • Decomposable – It should be fairly simple to test and use modules in isolation from other modules
  • Substitutable – It should be possible to completely substitute one module with another, as long as it supplies the same interface

WHY USE MODULES?


  • Encapsulation – Implementation details are kept private and expose a public API
  • Team-Ready – Team members can build modules in parallel with minimal conflicts
  • Extensibility – Dynamically extend existing modules
  • Scalability – Modules work independently of other modules and therefore can be removed and added as necessary
  • Avoiding Conflicts – Modules reduce the likelihood of variable names conflicting in the global scope.

TYPES OF MODULES


  • Object Literal – A set of comma-separated name/value pairs enclosed in curly braces
  • Module Design Pattern – Used to further emulate the concept of classes in such a way there we’re able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope.
  • AMD (Asynchronous Module Definition) – Wraps a module inside a function called “define()”. Any required dependencies as asynchronously loaded.
  • CommonJS – Assign keys to the variable “exports” to declare the modules public API. Any required dependencies are synchronously loaded with a “require()” function.

EXAMPLES


Object Literal

Example-1-Object-Literal

Module Design Pattern

Example-2-Module-Pattern

AMD

Example-3-AMD-Vertical

CommonJS

Example-4-CommonJS-Vertical

DEMO


https://github.com/justinjrussell/javascript-best-practices-modules-demo

Github-Demo

 

TOOLS


nodejs-1024x768

Node.js - Run JavaScript without a browser

https://nodejs.org/

npm-logo

NPM - Node.js package manager

https://www.npmjs.com/

requirejs-logo

Require.js - JavaScript library for AMD in the browser

http://www.requirejs.org/

browserify-logo-2

Browserify - JavaScript library for CommonJS in the browser

http://browserify.org/

https://www.npmjs.com/package/browserify

grunt-logo

Grunt - JavaScript task runner

http://gruntjs.com/

https://www.npmjs.com/package/grunt

https://www.npmjs.com/package/grunt-cli

Any thoughts?



Loading more content...