Real Time Web Application with Meteor
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
