JS Getting Started

Basic Usage

It's very easy to create a Scalable Modular Javascript Architecture using Frontendcore. You just need to follow the next guidelines

  • Each javascript module will be related to an specific part of the DOM or task.
  • The modules are independent and can't call directly to another modules.
  • Inside the modules each method should do only one thing to be testable.

Let's see an example following the rules above. Imagine we want to print in blue the content of a div with javascript. First of all (in the html markup) we have to reference the module "print-to-blue".

<div data-fc-modules="print-to-blue">This is my html module</div>

After the DOM is loaded a DOM Boot will scan it looking for al the data-fc-modules attributes to know wich modules TinyCore has to load and start. So this will load de print-to-blue.js in our modules folder and expect to find the module defined like this:

// Defines the name of the module and the dependencies using RequireJS AMD standard definition
FrontendCore.define('print-to-blue', [], function () {
	return {

		// Uses oTools to get all the DOM elements
		// with the "data-tc-modules" attributes as print-to-blue
		aTargets : oTools.getDataModules('print-to-blue'),

		// This is the method called when the module is required
		onStart: function () {

			var self = this;

			// Uses Jquery to iterate all the elements and call the method printBlue for each one
			$(aTargets).each(function () {
				self.printBlue(this);
			});

		},
		printBlue: function (oTarget) {

			// Changes the color to blue
			$(oTarget).css('color','blue')

		},
		onStop: function () {

			// Clear aTargets if the module is stopped
			this.aTargets = null;
		},
		onDestroy: function () {

			// Liberates some memory if the module is destroyed
			delete this.aTargets;
		}
	};
});

Benefits

  • Decoupled application architecture
  • Divide & conquer : each module implements only a functionality or a small set of functionalities
  • Modules are independent : change/removal/failure of one does not affect the others
  • Reusability : modules can be reused across a number of different applications
  • Testing : modules can be tested individually both inside and outside of the application

The JS architecture is based on TinyCore developed by Mawrkus.