In my previous blog post, I have explained basics of meteor. In this tutorial I am going to add mobile support to the existing meteor application.

Installing mobile SDKs

Before going to start we need to install IOS and android SDKs (Software development kit). Here I am installing SDKs for iOS. Please keep in mind this is one time process.

For installing iOS SDKs, we need to invoke “meteor install-sdk ios”.


The same way you can install android SKDs by invoking “meteor install-sdk android” command.

Adding mobile platform support

I am using already created application called “myapp” and going to add iOS platform support by invoking a command “meteor add-platform ios”.


We can add android platform by invoking a command  “meteor add-platform android”.

Running application on mobile emulator

Once we add mobile platform then we can run our application by using real mobile device or emulator. I have added IOS platform to myapp already. Now I am going to run that application by using iPhone emulator by invoking command called “meteor run ios”. 


Whenever we run above command that will add cordova support to the application and convert our web application into mobile hybrid application by using cordova. Cordova internally use webview for rendering web page. If everything is done, you can see iPhone simulator, that will display our web page.


Running application

By using same way we can launch android simulator by invoking “meteor run android” command.

Running application on real device

We can run our application on real device by invoking below commands.

For iOS - meteor run ios-device
For android - meteor run android-device

Obviously the mobile should be connected to the computer. For iOS, we need to install corresponding provisioning profile into the device before using it for testing. 

Personally I like this approach because there is no real IDE like XCode, Eclipse involved in this process. This is really helpful for beginners because it is very simple and hides lot of internal mechanism involved in the process.

Configuring mobile app – metadata

In mobile application we need to configure lot of information in info.plist (for iOS) and android manifestfile.xml (for android). The meteor simplifies lot of stuffs, which involved in the configuration. For configuring, we simply need to create a JavaScript file called mobile-config.js and needs to include our configuration. Look into the below url for more information. 


Conclusion

In this tutorial we got steps involved in,

1. Adding mobile support to meteor application.
2. Running application on emulators.
3. Running application on real devices
4. Configuring mobile application metadata by using mobile-config.js.

In my next tutorial, I am going to explain internal architecture of the meteor application. 


What is Meteor?

Meteor is a complete open source platform for building web and mobile application by using JavaScript. It is a combination of NodeJs, MongoDB and client side JavaScript.

Installing meteor

Meteor supports windows, linux and Mac operating systems. Invoke below command in terminal for installing meteor in mac operating system.


Check below link for installing meteor on other operating systems.
http://docs.meteor.com/#/basic/quickstart

Creating an application

The command “meteor create <<app_name>>” is used for creating new meteor application. I have created an app called “myapp” and will see how we can run the application.

Running an application

“meteor run” command is used for running meteor application. Internally it start a node js server and by default that will listen 3000 port number. Just make sure you are in project directory (myapp) before invoking run command.

'
Other useful meteor commands

Meteor provides lot of useful commands for simplifying development process. This is very simple introduction about other meteor commands.

1. meteor help – This command is used for understanding purpose of other meteor commands. Example – I got the purpose of create command by using help command.


2. meteor debug – This is very useful command for debugging server side code.  Just use JavaScript keyword “debugger” for creating break points. By default it will wait at first statement of server side code.

3. meteor deploy <<site>> - This command is really useful for deploying application. Meteor provide free hosting and you can deploy application in <<appname>>.meteor.com. If someone already used app name then you will have to use different application name for deploying. Let me deploy my application and it will take a while for deploying.


It is deployed successfully and for verification load the URL in browser, which we have used while deploying the application.


4. meteor update – This is used for updating meteor version used by an application. You will have to run this command from your application folder and make sure you are upgrading other packages for avoiding compatibility issues.

5. meteor add – This is used for adding new package into the application.

6. meteor remove – This is used for removing previously added package from the application.

7. meteor search – This command is used for searching available packages in meteor.

8. meteor mongo – This is used for opening MongoDB shell command for modifying mongo database collection. Meteor internally use mongo-db for saving data.

9. mongo reset – This is used for resetting current project to fresh state and it removes all local data.

Meteor File Structure

Meteor is very flexible for structuring application. It automatically loads all of our files, so we don’t need to use script and link tag for loading JavaScript and CSS files. It does the following while loading files.

1. All CSS files are sent to the browser and in production mode it is automatically concatenate and minify the source files.

2. JavaScript is loaded on the both client and server. We need to use Meteor.isClient and Meteor.isServer condition for stopping execution of certain part of the source code.

3. HTML templates are compiled and sent to the client.

Actually meteor provides some directory structure for securing and improving performance of the application.

/client – The files, which are in client directory, are only served to the client. This is a good place for keeping our client side source codes like CSS, HTML templates and client side JavaScript files.

/server – The files, which are in server directory are used and loaded while starting server. These files are never sent to the client. This is good place for keeping server side JavaScript files and by the way we can secure our application.

/public – The files in public folder are served to the client as-is. So this is good place for keeping our static contents like images, and fonts.

/private – The files in private are not sent to the client and also contents are loaded only when access through Assets - server side.

Conclusion

In this tutorial we have seen,

1. What is meteor?

2. Steps for Installing and Configuring meteor.

3. Meteor available commands and corresponding usage.

4. Directory structure of meteor application and deploying meteor application.

In my next tutorial, I am going to explain building mobile apps by using meteor.

In this tutorial, we are going to create a NodeJS/Grunt project which has basically used for minifying many JavaScript files into one. The steps are,

Step 1. 

Install NodeJS latest version and refer “http://nodejs.org/download/” link for more information.

Step 2. 

If you are having any existing NodeJS instance then just update by using “npm update –g npm” command. I am having existing NodeJS instance and updated by invoking above command.


Step: 3.

Next, we need a Grunt command line interface (CLI) tools globally. It is a node.js module and needs to install by using a command called “npm install –g grunt-cli”.


Step 4. 

We need another component called grunt-init globally. It is also a node.js module and we can install it globally by invoking a command “npm install –g grunt-init”.


Step 5. 

Next, we need to create a new grunt project. I have created new folder called “Grunt-MinifyDemo” in “D“ directory and this is my project.

Step 6. 

In windows command prompt, Just move to that particular directory and check the screen shot which help you to understand what I mean here.


Step 7. 

Now we need to initiate a Node.js project by invoking a command called “npm init”. While invoking this command will ask you to enter application name, description, version, and other details. For more information please check my screen shot. The above command finally will create package.json file which basically used for defining our application specific dependencies and other details. We can edit this file at any point of time and if you define any new dependencies then will have to invoke “npm install” command for installing those new dependencies. 


Step 8. 

Now we need to edit the package.json file for defining our grunt dependencies. The modified package.json file contents are given below.

{
  "name": "grunt-minify-demo",
  "version": "0.0.1",
  "description": "Simple demo application for minifying javascript files using GRUNT tool",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gnanasuriyan A",
  "license": "MIT",
  "devDependencies": {
   "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}

I have included grunt specific dependencies and changed main value as “Gruntfile.js”. This is an entry point of the application.

Step 9. 

Now just invoke a command called “npm install” for downloading those specified dependencies as we discussed in step number 7.



The above command will download all the dependencies and for verification just check node_modules folder present in out application folder “D:\Grunt-MinifyDemo”.



Step 10. 

Currently we have developed only node.js project and downloaded all GRUNT dependencies. Now we need to define our grunt task for combining and converting JavaScript source files into single minified file. For that we need a help from one more grunt module called “grunt-contrib-uglify”. We have already included in dependency list and that module is already available in node_modules folder.

Step 11. 

For defining our grunt task, we need to create a JavaScript file called “Gruntfile.js” and this name is based on "main" key value in package.json file. Note: the above file should be created in root folder of the application and here the root folder is “D:\Grunt-MinifyDemo”.



Step 12. 

Before writing a grunt task, I am going to create some test JavaScript source files for minification. Nothing fancy in the JavaScript files and I have just included some test functions with console messages.


Step 13. 

Now I am going to write a grunt task for combining/minifying my File1.js and File2.js file present in src folder. The source code which I have written in Gruntfile.js for minification is given below. 

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options : {
          compress : {
            drop_console : false
          },
          beautify : true
      },
      dev: {
        files: {
          'build/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
};

Step 14. 

The grunt.initConfig({}) function is basically used for defining our grunt configuration. For understanding more about grunt configuration, please refer "https://github.com/gruntjs/grunt-contrib-uglify". Here I have created only one environment called dev which contains my output file path “build/dev/output.js” and array of JavaScript source file names. 

Step 15. 

The line grunt.loadNpmTasks function is basically used for loading grunt modules and grunt.registertask is basically used for registering grunt tasks. In single project we can register more then one grunt tasks. For more information about registering grunt tasks, please refer "http://gruntjs.com/creating-tasks". 

Step 16. 

Now If you run a “grunt” command that will trigger the default task i.e. uglify:dev and will create a new combined JavaScript file called “output.js” in "build/dev" folder. The grunt will run default task always when we don't specify any registered task name.


Instead of you can run the above task by triggering a command “grunt uglify:dev”.

Step 17. 

This is my output.js file content. Here I am not minifying my JavaScript code and instead just combining all  my different JS files into single one.

function moduleOne() {
    console.log("Module one");
}

function moduleTwo() {
    console.log("Module two");
}

Step 18. 

Now I am going to define one task called “prod” which will combine and minify the JavaScript file. The modified Gruntfile.js source code is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: true,
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['uglify:prod']);
};
Step 19. 

Now just invoke a command “grunt prod” for creating production build which will combine and minify all specified JavaScript files.


Step 20. 

In some situation we need to run some more tasks before running actual minification. For example normally we will have to clean the existing result before taking a new build. The grunt actually provide a way for defining more than one tasks which will run sequentially. Just check my production task which I have registered in Gruntfile.js. I am just cleaning all existing builds before taking a new production build.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: 'all',
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['clean', 'uglify:prod']);
};
Step 21. 

Now just invoke same “grunt prod” command and see the result.


We are getting some warning because not loading grunt clean module properly. Just load that grunt clean module properly and test it. For loading clean module, we need to update package.json file and need to invoke “npm install” command. This is my modified package.json file.

{
  "name": "grunt-minify-demo",
  "version": "0.0.1",
  "description": "Simple demo application for minifying javascript files using GRUNT tool",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Gnanasuriyan A",
  "license": "MIT",
  "devDependencies": {
   "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-clean": "~0.4.0"
  }
}


Step 22. 

Now we need to load a “grunt-contrib-clean” module by using “grunt.loadNpmTasks“ function and my modified Gruntfile.js source code is given below.

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      dev: {
        files: {
          'build/dev/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: false,
          compress : {
            drop_console : false
          },
          beautify : true
        }
      },
      prod: {
        files: {
          'build/prod/output.js': ['src/File1.js', 'src/File2.js']  
        },
        options: {
          preserveComments: 'all',
          compress : {
            drop_console : false
          },
          beautify : false
        }
      }
    },
    clean: {
      js: ['build/dev/output.js', 'build/prod/output.js']
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  //Loading grunt clean module
  grunt.loadNpmTasks('grunt-contrib-clean');

  // Default task(s).
  grunt.registerTask('default', ['uglify:dev']);
  grunt.registerTask('prod', ['clean', 'uglify:prod']);
};

Step 23. 

In my above code just check my clean configuration. I am just removing production and development JavaScript files from build folder. Now just take a production build by invoking “grunt prod” command.


Conclusion

1. We have created new Node.js application for running grunt tasks.
2. We have included grunt minification tasks for minifying JavaScript files by using grunt uglify module.
3. We have included clean task for removing existing build from file system by using grunt clean module.

The entire project is available in my github repository (https://github.com/gnanasuriyan/grunt-minification ).
After a long time, I had some good time to study native iOS development and developed simple to-do application by following a tutorial present in iOS developer library. The source code is available in githup repository and don't worry about modifying the source code.






Currently this application doesn't store our to-do items permanently. Probably my next change should be storing our to-do list in database. Now if you kill the application the data will be lost :)



Everyone of us know, Inheritance is a way to acquire properties and methods of another object. In other words it is a way to establish is-a relationship between two objects. The static languages by default provide some easier ways to achieve this. For an example, we have "extend" keyword in Java for extending other object.

JavaScript is protypal inheritance language (class-free) means that objects can inherit properties from other objects. Let's see an example.

Let's create a parent class for Animal

/**
 * Animal - Constructor and parent class for all animals.
 * @param {Object} aType - Type of the animal
 * @param {Object} aName - Name of the animal 
 */

function Animal(aType, aName) {
 this.type = aType;
 this.name = aName;
}

Animal.prototype.eat = function() {
 console.log('All animal will eat');
};

We have to do following steps for extending animal class.

1. Calling super class constructor from child class constructor.
2. Setting up prototype chain.
3. Adding methods to child class.

Let's create child class and extending Animal class by following above steps.

/**
 * Bird - Constructor and child class of Animal.
 * @param {Object} aType - Type of the animal
 * @param {Object} aName - Name of the animal 
 */

function Bird(aType, aName, bType) {
 //Calling super class constructor
 Animal.call(this, aType, aName);
 this.birdType = bType;
}
//Setup the protype chain
Bird.prototype = new Animal();
//Set the constructor attribute to Bird
Bird.prototype.constructor = Bird;

//Add methods to Bird class.
Bird.prototype.fly = function() {
 console.log('I am flying');
};

Let's create an object for Bird and try to access methods and properties of the parent class.

bird = new Bird('Ducks', 'Tundra Swan', 'Ducks');
bird.eat(); //Calling super class method
bird.fly(); //Calling child class method

Final result of the application is given below.


All modern library like jQuery and Ext JS has provided simple utility function for extending other class something like that.

var Pointer = Pointer || {};
/**
 * Simple utility function for extend.
 */
Pointer.extend = function(subClass, superClass) {
 var F = function() {};
 F.prototype = superClass.prototype;
 subClass.prototype = new F(); 
 subClass.prototype.constructor = subClass;
 
 subClass.superclass = superClass.prototype;
 /**
  * The below condition is important for handling
  * extend(Person, Object); //Person - Sample class extending JavaScript Object class.
  */
 if(superClass.prototype.constructor === Object.prototype.constructor) {
  superClass.prototype.constructor = superClass;
 }
};

Simple another example using above extend function.
/**
 * This is parent class constructor
 * @param {Object} name
 */
var Person = function(name) {
 Person.superclass.constructor.call(this, name);
 this.name = name;
};

Pointer.extend(Person, Object); //Person is extending Object class.

Person.prototype.getName = function() {
 return this.name;
};

/**
 * This is child class of the Person.
 * 
 * @param {Object} name
 * @param {Object} profession
 */
var Author = function(name, profession) {
 //Person.call(this, name);
 Author.superclass.constructor.call(this, name);
 this.profession = profession;
};

Pointer.extend(Author, Person);

Author.prototype.getProfession = function() {
 return this.profession;
};

For testing, let's create some objects.

person1 = new Author('Suriya', 'Solution Developer');
person2 = new Person('Hilar');

The result of the above example is should be something like this.