NextBigWhat brings you curated insights and wisdom on product and growth from the wild web.

Over 2 million people receive our weekly curated insights.

Newsletter

Newsletter

A Look at Meteor JavaScript Framework [Tech Treat]

What is Meteor?

MeteorJS is a Javascript web framework which allows you to build web applications completely in Javascript. It removes the context switching between front-end and backend code and allows your code to run any where in browser or on the server. It is very well suited for building running realtime web apps.

Why should you care?

Most web frameworks assume that you are still working like mainframes used to work in 1980s. You send a screen of html, an action happens and the framework sends back another screen of html.

The state of art of web has moved a lot. Most sophisticated web apps are reactive, an action happens and only a tiny fragment on the page should update. These changes should happen in realtime. Meteor handles these and makes writing reactive, realtime web apps easy.

Getting MeteorJS

Meteor has tried to make installation as easy as possible. The detailed install instructions are available at http://docs.meteor.com/but for most platforms it should be as easy as.

curl install.meteor.com | sh 

Getting started with this tutorial.

Download a copy of the files and unzip it. You will see three files. They are the entirity of your app. Type this in your terminal.

meteor 

in the same folder where your code is and you can see you code running by going to localhost:3000

The code in detail.

This app is very heavily based on the Meteor leaderboard example. We have three files (download) – leaderboard.html, leaderboard.js and leaderboard.css. Leaderboard.css is just a standard css file used for adding some styles. There is nothing meteor specific in them. We won’t talk about it anymore.

leaderboard.js is the most important part of our app. It creates a mongodb database. It specifies what code will be run on the client, what on the server and what is common to both.

leaderboard.html contains the handlebars templates. It gets the data from meteor (the JS file) and it specifies how the page will render.

A detailed look at the leaderboard.js file.

Meteor works with the same code and same DB API on both client side. If your code modifies the collections, it will be updated instantly on the client side. On the server side a MongoDB databse is the backend collections.

So the first things leaderboard.js does is start an empty collection. Next thing our leaderboard.js does is pass the data to the template (leaderboard.html). You will see that leadeboard.html has two template fragments identified by

<template name="leaderboard"> 

and

<template name="company"> 

In our laderboard.js we can get handles to them via.

Template.leaderboard and Template.company .

After that we are defining the helpers as functions which happens as function declartion.

Template.leaderboard.companies = function () { return Companies.find({}, {sort: {score: -1, name: 1}}); }; 

and similar code.

We also need to setup the click handlers.

We are doing that by defining the click handler functions on

Template.leaderboard.events Template.company.events 

This takes care of the client side rendering and event handling.

Next we need to initialize the collection. This should happen only once on the server, hence we put this code in.

if (Meteor.is_server) { .. } 

Within this code we create an array and push the data to the MongoDB collection.

A deeper look at leaderboard.html

leaderboard.html is a standard handlebar template. It has two template fragments which will have data passed to them. In the leaderboard template fragement, the Template.leaderboard.companies calculates the list of all companies and passed the data the template.

In the template, we iterate over the collection, and render another template here.

{{#each companies}} {{> company}} 

{{/each}}

The other sub template

<template name="company"> ... </template> 

Has click handlers assigned to it via Template.company.events in the leaderboard.js.

Deploying it

You can deploy your code by typing

meteor deploy [appname].meteor.com

So what was the magic?

  1. This app is fully reactive and real-time. If you make a change in one location all other locations get the update without reloading.
  2. We were able to use DB api in client side code.
  3. You can also export this as node.js app and deploy on your own server.

References

  1. http://www.meteor.com
  2. Docs
  3. Deployed app
  4. Code

So what are you waiting for? Go ahead and create amazing apps using meteor

[Guest article contributed by Shabda. He is cofounder of Agiliq, a company that builds amazing apps. Their blog covers many technical topics.]

– Notes from Pluggd.in team: Are you a geek want to talk about technology frameworks in depth? Do connect with us (team@NextBigWhat.com).

Add comment