Saturday, April 18, 2015

Simple Webapp example using Flux with React

If you've been following the latest Front-End news for Web for the past year,
you have probably seen the huge buzz around ReactJS.

Just in case you haven't, you can visit ReactJS on the Facebook Github's page at: or just Google it and read about it.

So for those of you that do know what React is all about, you may have also heard about Flux.
If you haven't :) I recommend you to read about it a bit
here as well

If I have to try and sum it up on one leg, I'd say that Flux is an application architecture for building
big web-apps on the front-end that scale.  - Well, that's pretty vague :)

A main concept regarding this architecture is about a Uni-directional flow where an "Action"
(a Application Event) is triggered by the View part (Your components, which are shown the users),
using a "Dispatcher" (Some kind of an Event Hub) which propagates the Actions
on to the "Stores" (Your application's model), which hold the state (data) of your application,
perform the necessary update and logic, and updates the View back using listeners.

This illustration might help understanding the Flux flow a little better:

Why is Flux a good idea? - There are several reasons, but I will mention only 2 which I think
are the most important.

1. Simple Application Architecture - You can show this diagram to someone who never
heard of Flux before, and explain it in 2 minutes.

2. Scalable - Flux lets you scale. Meaning, it's relatively easy to add new features to
your application, debug it, and keeping it performant.

There's a really good talk about it by Facebook which is worth watching:

After all that being said, I really wanted to do some basic implementation of Flux myself,
to "feel" how it works. And so I created a very small Repository on Github that implements
Flux which you are welcome to look at and use.

The example code

The application built on top of that is a classic Todo App:

The code uses several 3rd party libraries such as RequireJS and React Templates but even if you are not familiar with RequireJS, or with AMD, my guess is you will still be able to understand how
it works.
React Templates is an amazing 3rd party library that helps you implement the "render" method
of React Components in an HTML like syntax. Totally cool.

Good luck!

Saturday, January 25, 2014

Grunt - Create your custom local Grunt plugin

This post describes how you can write your own Grunt Plugin in Javascript and install it locally,
in order to use it on your own (Grunt) project build file.

If you don't know what Grunt is then to explain it on one leg -
"Grunt is a pluggable (JavaScript) task runner", which can be used to build JavaScript projects.

Such typical build of a Javascript project may contain a Linting task, minification task, and so on...

So, you can read more about Grunt if you want to get a better understanding.

And now, to the recipe!
1 NPM installed on your machine
1 GIT installed on your machine
1 Skill writing a tiny bit of Javascript
A zest of patience

1. First thing would be to install a Grunt plugin that is used for templates scaffolding.
In order to do that, you need to run the following in your shell:
$ npm install -g grunt-init
2. Clone a GIT repository which is going to be used as your template for creating your glorious
Grunt Plugin. (
So, run the following in your shell:
$ git clone ~/.grunt-init/gruntplugin
3. Create an empty directory where you want to place your Plugin like "my-custom-plugin", and cd into it.
$ mkdir my-custom-plugin
$ cd my-custom-plugin
Then run the following in your shell:
$ grunt-init gruntplugin
4. You should now be prompted with a serie of questions in the shell, in order to create your plugin.
You should be seeing something like this:

Please answer the following:

[?] Project name (grunt-my-custom-plugin)

[?] Description (The best Grunt plugin ever.) the best custom plugin ever!

[?] Version (0.1.0)

[?] Project git repository (ssh://<Your GIT remote Repository URL>)

[?] Project homepage (none)

[?] Project issues tracker (none)

[?] Licenses (MIT)

[?] Author name (nirgit) Nir M

[?] Author email (

[?] Author url (none)

[?] What versions of grunt does it require? (~0.4.2)

[?] What versions of node does it run on? (>= 0.8.0)

[?] Do you need to make any changes to the above before continuing? (y/N) N

Writing .gitignore...OK

Writing .jshintrc...OK

Writing Gruntfile.js...OK


Writing tasks/my_custom_plugin.js...OK

Writing test/expected/custom_options...OK

Writing test/expected/default_options...OK

Writing test/fixtures/123...OK

Writing test/fixtures/testing...OK

Writing test/my_custom_plugin_test.js...OK


Writing package.json...OK

Initialized from template "gruntplugin".

You should now install project dependencies with npm install. After that, you

may execute project tasks with grunt. For more information about installing

and configuring Grunt, please see the Getting Started guide:

Done, without errors.

5. Now you should have your directory containing a Grunt Plugin template.
Open the file you have inside the "tasks" directory in order to edit it.

6. The file should look as follows:

7. Just in order to get started, lets strip the file and change it to contain the following:
 * grunt-my-custom-plugin
 * Copyright (c) 2014 Nir M
 * Licensed under the MIT license.

'use strict';

module.exports = function(grunt) {

 grunt.file.defaultEncoding = 'utf8';

 // Please see the Grunt documentation for more information regarding task
 // creation:

 grunt.registerTask('my_custom_plugin', function() {
  grunt.log.writeln('Hello my great Grunt Plugin!') ;

The my_custom_plugin shown in bold above, is the name of your task in the Grunt build, that
you'll execute at the end.

Lets change the Gruntfile.js in the root directory of the Plugin so tests won't execute when
we will run "grunt" on the plugin's source. Otherwise the build would fail.
So now the Gruntfile.js last line should look like:
grunt.registerTask('default', ['jshint']);

8. Go back to the root directory of your Grunt Plugin and run the following:
$ npm install
$ grunt
Running "jshint:all" (jshint) task >> 3 files lint free. Done, without errors.
9. Almost done.
Now go to your own project where you want to use your plugin and add the following line to the
Gruntfile.js of your project:
This will load your Grunt plugin task to your Grunt's project.

10. Next step would be to install the plugin locally in the node modules of your Proect.
You should now run in the root directory of your Project (where you want to use your plugin) the following:
$ npm install /<PATH_TO_YOUR_PLUGIN>/my-custom-plugin
11. You should now be able to execute:
$ grunt my_custom_plugin
And see:
Running "my_custom_plugin" task

Hello my great Grunt Plugin!

Done, without errors.

That's all folks.
Hope this was helpful to get you started with Grunt Plugins.
Don't forget to publish it (npm publish) afterwards to the rest of the Node community if you think it may be helpful to others as well.

Check out the official guide for creating Grunt plugins at:

Good luck!

Sunday, June 16, 2013

Lottery for winning a copy of the "Android NDK Cookbook" is now opened

In continuation to last week's post for winning a free copy of the eBook "Android NDK Cookbook",
the lottery starts today!

3 Lucky people will be given a free copy of the "Android NDK Cookbook" sponsored by "Packt Publishing".

Description of the book

 Android Native Development Kit Cookbook will help you understand the development, building, and debugging of your native Android applications. You will discover and learn JNI programming and essential NDK APIs such as OpenGL ES, and the native application API. You will then explore the process of porting existing libraries and software to NDK. By the end of this book you will be able to build your own apps in NDK apps. 

Check it out on Packt Publishing:

How to participate?

Simply send an email by clicking here or by sending it to 
containing a subject line "Android NDK Cookbook lottery".


The contest will close on 30th June 2013. Winners will be contacted by email, so be sure to use 
your real email address! 

Good luck !

Saturday, June 8, 2013

Win a free eBook copy of "Android NDK Cookbook"

Are you an Android developer or interested in Android development?
This might interest you!

On the 16th of June 2013 I will conduct a lottery on the blog, to win a free eBook copy of "Android NDK Cookbook".

The lottery will last for 2 weeks (until June 30th) where you will be able to participate to win a free copy of the book.

Description of the book:

"Android Native Development Kit Cookbook" will help you understand the development, building, and debugging of your native Android applications. You will discover and learn JNI programming and essential NDK APIs such as OpenGL ES, and the native application API. You will then explore the process of porting existing libraries and software to NDK. By the end of this book you will be able to build your own apps in NDK apps. 

Further details of the book can be found here:

Stay tuned for the 16th of June!

* The copy of the book is sponsored thanks to "Packt Publishing".

Sunday, May 26, 2013

Javascript Closure Functions Memory Model - How does it work?

Hey everyone,
For those of you who are writing code in Javascript or wish to do so, it is essential to understand
the concept of closures, and how they work.

I must say that when I started looking into it, it was somewhat difficult to find proper material
on the web, to get a good grasp of how things work. So this post's idea is to try and shed some
light on this matter. I don't guarantee that this will make you understand everything, but do hope
it will help in some way.

*Note: I could have some mistakes in this post of course, and would be very happy if you send me
any corrections or comment as this is suppose to help people, and show the power of Javascript closures. 
Everything that's written in this post is according to my understanding of how things work.
So regard this writing with care. I tried to do the best I could when I wrote this post.

The post topics will contain 2 parts:
1. What is a Closure?
2. How does the memory model look like.

1. What is a Closure?

"... is a function or reference to a function together with a referencing environment—a table storing a reference to each of the non-local variables (also called free variables) of that function. A closure— unlike a plain function pointer—allows a function to access those non-local variables even when invoked outside of its immediate lexical scope." - From Wikipedia.

A simple example to such Closure is a counter.
Consider the following script for example:

function createCounter() {
       var counter = 0 ;
       return function() {
              counter++ ;
              return counter ;
var counter = createCounter() ;
counter() ;
// returns 1
counter() ; // returns 2
var counter2 = createCounter() ;
counter2() ; // returns 1
counter() ; // returns 3

How does this work?
The createCounter function being executed creates a new Execution Scope, which contains references to a variable named counter and returns an anonymous function.

So how does that function know about counter when it's executed?
In Javascript any function, has some kind of property called a "Scope Chain", which defines the scopes the function is bounded to. When we define a function in Javascript, the "definition scope" is such scope that is stored in the function's "Scope chain". So when we define and return the anonymous function in createCounter that anonymous function is binded to a scope where it was defined.
Thus, when the function is being executed by calling "counter()" a new "execution scope" is being created and added to the function's scope chain. So when the function needs to look up counter it looks up it's "scope-chain", and finds it eventually on the "definition scope" of the function.

Another thing to remember is that every time you run a function you run it inside a "context".

What is a context?
A context is the object the function is executed on. It is recognized with the this keyword.
It is defined when we write the following code in Javascript for example:

// context here equals to obj1 (this === obj1)
obj1.sayHello() ;

// context here equals to the global object which in case of a browser, is *window (this === window)
sayHello() ;

* It might be equal to undefined (this === undefined) in case we're running in 'strict mode'.

You can check more about it at MDN - Function Context.

2. How does the memory model look like?

I think it's important to understand how the memory model looks like, graphically, to get a better
notion of how things work. Even though you could handle without it, I find illustrations very
helpful understanding how something works.

Simple example

When you define a regular function, like:
function foo(number) {
   [ function_body ]

We get something of the following in memory:

If we execute foo(3), we will get something of the following in memory:

So when foo(3) is executed, a new "Activation object" is created.
Passing to it the function's parameters and arguments array, and adding it to the scope chain of foo(3).
So the next time foo will be looking up for the "num" parameter, it will be looking it up the
scope chain starting from the closest(last) scope that is relevant to the execution, which in this
case is of course the "Activation". If it won't find num there, it will continue to the next scope in the
chain, until it finds it.

Closure example

Lets take the Closure example we referred to earlier - the counter function and see how it 
would look like in memory.

Quick reminder, our counter function looks like this:

function createCounter() {
       var counter = 0 ;
       return function() {
              counter++ ;
              return counter ;

This maps to a memory model which looks (somewhat) like this:

counter javascript closure
You might wonder why the Closure's scope chain also refers to the Global Object.
The reason is that when we create a closure, it copies the scope chain of the execution context scope chain which in this case belongs to createCounter().
What makes the Closure a closure is the interesting side affect in Javascript, that instead of the Activation Object being destroyed after createCounter execution, it remains alive, because there is a reference to it, from another function - the closure.

Now, lets create such counter by executing the following:

var myCounter = createCounter();  [1]
myCounter() ;                     [2]

So on line [1] we create myCounter which is a reference to the closure on the above illustration.
When we execute line [2], we get 1 as an answer, and the second time we will get 2.
How it looks in the memory is shown in the next illustration:

When we execute myCounter which is our closure in this case, we are incrementing the counter variable, but in order to do so, the variable needs to be reached somehow.
This is where the "scope chain" takes its place. The first "environment" where the variable is going to be looked up is at the top of the scope chain, in our case - the "Activation Object" of myCounter.
Since the variable is not an inner variable, nor a parameter, the look-up for the variable continues, and moves on to the next scope in the chain which is the "Activation Object" of createCounter ! There it is found, read and assigned. (As counter++ is actually counter = counter + 1 ).

Note that every time you call createCounter a new Activation Object is created with a new counter variable which equals to 0. This is how you can create as many separate counters as you like, without them affecting each other.

I hope this helped you in some way to understand the memory model of functions and closures a little better. Any comments / suggestions and complaints are most welcome.
Enjoy "closuring".