Javascript Revealing Module Pattern

On a previous post  I refer the javascript Revealing Module Pattern, in this post I want to explain how it works and how can it help you to structure your javascript code. 

First lets look to its structure:

var Calculator = function() {
  // code goes here
}();

The code starts with a definition of a variable, which we associate a function that is invoked as soon as as the script loads (this is done with the “()” at the end).

Your variables and functions should go inside of the Calculator in the “code goes here” part.

Now, one of the most interesting parts, inside the Calculator we can declare private and public members. For the private members we just have to declare them inside of the Calculator and, for the public members, we have to add a return statement and declare the public members inside it.

Lets look at the structure of the complete Revealing Module Pattern:

var calculator = function() {
  // private members goes here
  // ...
  // public members goes here
  return{
    // ...
  };
}();

And now lets look at the implementation of the Calculator that just adds and subtracts 2 numbers and logs the result to the console if configured that way:

var Calculator = function() {
  // private members goes here
  var privateLog = false;
  var privateConfig = function(shouldLog) {
    privateLog = shouldLog;
  };
  var privateAdd = function (x,y) {
    var result = x + y;
    if (privateLog) {
      console.log(result);
    }
    return result;
  };
  var privateSubtract = function (x,y) {
    var result = x - y;
    if (privateLog) {
      console.log(result);
    }
    return result;
  };
  // public members goes here
  return{
    publicConfig: privateConfig,
    publicAdd: privateAdd,
    publicSubtract: privateSubtract
  };
}();

Calculator.publicConfig(true); // configures Calculator to log to console
Calculator.publicAdd(1,2); // logs 3
Calculator.publicSubtract(2,1); // logs 1

Analyzing the code for the Calculator, you can see that all public members are exposed in the object literal that is returned when the Calculator is invoked. All the other members are private and cannot be accessed outside of the Calculator.

The Revealing Module Pattern is one of my favorites design patterns to structure my javascript code because it is easy to implement, easy to read (which is good for maintenance) and for the capability to declare private and public members.

You can see this code in this jsFiddle.

Advertisements

Get into Breeze.js

Last week I’ve started to play with Breeze.js and it really seems to be a great tool for developing reach client side applications.

In this post I wanted to let you know about some of its core features and, perhaps, make you curious about it.

I’ve also made available a quick sample project if you want to see Breeze.js in action.

So, what is Breeze.js? 

Breeze.js is a JavaScript library that manages data in rich client applications.

How does it work?

Breeze creates dynamic objects,  that mirror your server-side objects. The properties of these objects can be bind to the controls on the UI and any change made on the data model, will be tracked and updated on the UI automatically.

What can I do with it?

There  are several quite interesting and useful features that Breeze.js provides:

  • Rich Queries with Linq-style syntax
  • Change tracking
  • Validation
  • Support for Entity Framework, Odata and Web API
  • Support for NoSQL, non-.Net and SOA back-ends
  • Data management
  • Batched saves
  • Support for various JavaScript Libraries like Knockout, Angular and Backbone

Rich Queries

Example of a simple query with filter and order:


var query = breeze.EntityQuery.from('Cities')
 .where('CountryName', '==', 'Portugal')
 .orderBy('CityName');

Remember, it’s JavaScript! Nice, right?

Track changes and do batched saves

With Breeze.js we can make every CRUD operation with its objects and save everything in a bulk operation.

Below a quick snippet:


// save all changes in one operation

manager.saveChanges()
 .then(function () { alert("changes saved"); })
 .fail(function () { alert("error saving"); });

The manager is a Breeze.js EntityManager and it is the service gateway and cache holder.

Quick sample

I’ve made a simple project where you can check Breeze.js in action.

It’s a small page that lists some world cities and you have a search form to filter the records.

The project was developed with ASP.Net MVC, EF Code First, Knockout and of course Breeze.js

https://github.com/nmoliveira/GetIntoBreezeJS

preview

References:

http://www.breezejs.com/documentation/introduction