Introduction to Meteor.js framework

Meteor is complete platform to build real-time web and mobile applications using JavaScript. Meteor is not framework or library which meant to help you to solve specific problems like Express framework to provide painless web development in Node.js OR django for python, instead its a framework which allow programmers to write high performance modern web applications.

Prerequisites to learn Meteor

Its good if you know Node.js before beginning with Meteor. If you are not aware then it’s not a problem, you may visit our lists of tutorial regarding Node.js to start learning it.

Why to use Meteor framework

Meteor framework provides following advantages :

Less code

Meteor provides all components you need to build the real-time web apps such as Node.js for Server, Mongo for database all designed around reactive programming model. So how does it help us to write the code, well here is the image to explain that.

Image credit :
Image credit : @ajduke

Like I said and shown in image, Meteor is complete package like a car, what all you need is to drive.

Use one language everywhere

It’s JavaScript, from client to Server to database. Mongo is open source database engine which uses JSON. Meteor is build on top of Node.js which is in turn JavaScript and so any client library like Angular.

Inbuilt Reactive programming model

Reactive programming model is essential for real-time web applications. This model provides approach to handle the data flow on change ( Client side change or back-end side change ) .

One of the best example to understand this is Facebook like and comment system. As soon as you like someone’s picture, it gets updated in database plus that user gets notified. Same in case of commenting on someone’s post.

With Meteor, you don’t need to worry about coding this model. It’s already there, just use it.

Quick deployment :

Meteor provides “one command deploy” option. They also provide sample app deployment on Meteor main site and that too FREE !

Installation :

Visit Meteor to download and install.

If you are on Mac, its simple and easy. Just run this command.

curl https://install.meteor.com/ | sh

It will download and install Meteor in your system.

Example project :

You should be accessing the Meteor from command line. type “meteor” and it will list down commands for you. Now you can create simple app using Meteor using following command.

meteor create myApp

Once completed switch to myApp folder and type meteor. That’s it. You should be seeing screen like this.

Screen Shot 2015-06-14 at 2.13.27 PM

Visit localhost:3000 to view your app.

Screen Shot 2015-06-14 at 2.14.43 PM

Understanding the code:

In any Node.js project, first entry point of code is Server file then routes and what to execute on those routes and finally delivering static files to client.

Meteor also uses similar approach but in more compact way. How its compact will figure it out. Meteor will create three file for this sample project.

myApp.js
if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Consider this as Server file for your Node.js application. Code block isClient and isServer differentiate between client and server. Will see about templates in next code.

myApp.html
<head>
  <title>myApp</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>