Real Time Web Application with Meteor

3 min read

 

Similar to NodeJS, Meteor JS is a server-side platform available for windows. Using the same modular based system, it is used for creating advanced and highly powerful real-time web applications.
Why use Meteor? The short answer is, “because Meteor is fun”. It makes developing web applications simple. It is easy to learn, and it lets you focus more on the functionality of your application than the basics of syncing data and serving pages.

Download the official Meteor installer here

To create a Meteor app, open your terminal and type:

meteor create basic

This will create a new folder called basic with all of the files that a Meteor app needs:

basic.js    #a JavaScript file loaded on both client and server

basic.html    #an HTML file that defines view templates

basic.css     #a CSS file to define your app's styles

.meteor       #internal Meteor files

To run the newly created app:

cd basic

meteor

Open http://localhost:3000 in your web browser.
Meteor stores its views in HTML files. If we open “basic.html”, we will see:

<head>

  <title>basic</title>

</head>

<body>

  <h1>Welcome to Meteor!</h1>

  {{> hello}}

</body>

<template name="hello">

  <button>Click Me</button>

  <p>You've pressed the button {{counter}} times.</p>

</template>

Meteor uses “Blaze”, a templating engine, to render responses from these HTML files. The double braces should be familiar to anyone who has used Handlebars.js (or other similar templating engines), and they serve a similar function here.

This simple example program has just two double-braced expressions:

The first, “{{> hello}}”, tells Blaze to include a template called “hello”. That template is defined at the bottom of the file, in the section.
The second, “{{counter}}”, is a little more complicated. To see where this “counter” value is coming from we need to open “basic.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

  });

}

Displaying Static Data

All of this is well and good, but it’s not the application we want.

Let’s start tweaking this application – we’ll display a static, hard-coded list of cities. For now, we’ll stash the list of city in a session variable. In the “isClient” code, we’ll use “Template.hello.rendered” to set the session variable as soon as the cityList template is rendered:

Template.hello.rendered = function() {

    Session.setDefault('cities', [

      {name: "Hyderabad"},

      {name: "Pune"},

      {name: "Mumbai"},

      {name: "New Delhi"}

    ]);

  };

Then, we return that session variable with a new helper in the “hello” template:

Template.hello.helpers({

   cities: function () {

     return Session.get('cities');

   }

 });

And display it on screen via variable interpolation in the “hello” template:

<template name="hello">

  <h3>Here are your cities:</h3>

  <UL>

    {{#each cities}}

        <LI><i>{{name}}</i></LI>

    {{/each}}

  </UL>

</template>

In Blaze, “#each” works a bit like Angular’s “ng-repeat” directive – it iterates through the array structure, setting the current context to the current object in the array, and repeatedly displaying the HTML inside the “{{#each …}}”. This is what our list of cities look like now:

Meteor allows tremendous leeway in how you organize your codebase. As you will see, there are only a few hard-and-fast rules: wherever you put your HTML and JavaScript, Meteor will find it. This flexibility is nice, but it does mean it’s more incumbent on you to organize your code in a way that makes sense, so you’re not stuck maintaining a giant disordered mess

 

 

In case you have found a mistake in the text, please send a message to the author by selecting the mistake and pressing Ctrl-Enter.
Comments (0)

    No comments yet

You must be logged in to comment.

Sign In / Sign Up