Small Dive Into Meteor.JS

If you follow the latest JavaScript hypes, I am sure you have already heard about the awesomeness of meteor.js. If you have not yet, this is your chance. This article will walk you through the installation and running your first realtime app built on Meteor.js.

Introduction

Meteor.js is a pure JavaScript web framework for writing realtime web applications. It comes packaged with shiny features such as:

DDP (Distributed Data Protocol)
Blaze templating engine with realtime updating
Database access on the client
Reactive data source

It is still under heavy development and the core team raised $11.2M for this project. With that, the release of version 1.0 is almost on the horizon.

Oh, did I mention that it is open source? Yeah, it is! You can browse through the codebase on GitHub. You can find also their official website here.

Installation

First you have to install it on your machine. It is surprisingly easy! Fire up a terminal and run the following command

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

There, you have Meteor.js installed on your machine now. Run the following command to see what version have you installed.

$ meteor --version

It also gives you a number of commands to interact, build, run and deploy your app. You can see all the available commands/options by simply running.

$ meteor help

First Application

Let’s create our first app now, shall we? We can simply use the command line tool to create an app with boilerplate code. Run the following commands, one by one, in the terminal –

$ meteor create awesome-realtime-app
$ cd awesome-realtime-app
$ meteor

The create command in the first line will create a new directory named awesome-realtime-app with all the boilerplate code for us to get going. Then we move into that newly created directory and run our app using the meteor command.

Open up a browser and navigate to http://localhost:3000/. et voila! There’s our app running on Meteor.js after only 4 commands.

Example code

Installation, shell commands are boring things. Let’s do something more fun? Let’s write some code and see the magic dust fall from Meteor.js.

Open up the only .js and only .html files from the our app’s directory in your favorite text editor. First, we will create a template of our own. Paste the following code right below all the code in the .html file.

<template name="superhero">
  <div>
    Input:
    <input type="text" id="favorite_input">
  </div>
  <h2>
    My favorite superhero is: {{favorite}}
  </h2>
</template>

Here, we are creating a template named, superhero and inside the template we have a text input and a couple of html tags. Simple!

One thing to notice though, the text wrapped in double curly braces is a template variable and it will be evaluated as JavaScript.

Meteor.js uses handlebars for templating syntax, so if you are already familiar with that, perfect, otherwise, you should find out more about it here.

Also, notice how our template is outside of the body tag? How do we display it inside the webpage? That’s where the template name comes in. inside your body tag, simply write {{> superhero}} this will place in our template inside the body tag.

Next, we move into the .js file and for now we will just be using the client side so we will append the following code inside the if (Meteor.isClient) statement.

Template.superhero.favorite = function () {
    return Session.get('favorite_superhero');
};

Template.superhero.events({
    'keyup #favorite_input': function (e) {
        Session.set('favorite_superhero', e.currentTarget.value);
    }
});

As you can see, it’s plain JavaScript. On the first block, we are defining what should the value of the template variable favorite should be. It’s hooked up with a session variable named favorite_superhero. Here session is a reactive data source. So whenever this data changes, meteor will automatically update the value of our template variable and we will see the changes in the template right away.

In the next block, we are telling Meteor.js that we want to do some stuff when a keyup event happens on the element with the ID of favorite_input. The selector can be any CSS selector. So, on keyup event, we fetch the value of our input field and set it as the session variable favorite_superhero.

Now go to the browser and test it out. Write the name of your favorite superhero in the input field and see the view update automatically.

Notice how we didn’t have to do anything between writing our code and checking it in the browser? Not even refresh the browser! That’s because Meteor.js always watches over your files and as soon as you change something in the files, it automatically restarts your app and reloads the browser tab to reflect the changes you just made.

Take Aways

Meteor is full of magic but as a developer, you might not like to hear about magic behind the screen. So, if this picked your brain, feel free to dig around their official website, browse through their example apps and read the docs to find out more about how the magic actually works.

What’s Next?

With Meteor.js, outer space is the limit (pardon the pun). Go ahead and get your hands dirty with the code, read the official docs, make something crazy. If you know the basics of JavaScript, you’re ready to write apps on Meteor.js, trust me.

In the near future, we will be covering more area about Meteor.js so don’t forget to check back soon.