HTML5 Zone is brought to you in partnership with:

Working with a Bangalore based software company. I spend most of my time working in Microsoft Technologies. Author of Neo4jD and iTraveller. Neo4jD is a Neo4j graph database client for .NET and iTraveller is an application to upload photos to both flickr and Facebook. Sony is a DZone MVB and is not an employee of DZone and has posted 25 posts at DZone. You can read more from them at their website. View Full User Profile

Getting Started with Meteor

09.17.2012
| 8877 views |
  • submit to reddit

So what is Meteor?

Meteor is an ultra-simple environment for building modern websites. What once took weeks, even with the best tools, now takes hours with Meteor.


Yes, Meteor is a Javascript webframe that can do wonders with less lines of code. Watch this screencast before you proceed. One feature that I really like is the real time pushing of changed datasets to all the connected clients in real-time, without any complex code from developers.

Installing Meteor

I use Windows as my development environment, so we need to use the Meteor msi installer. We can get the latest installer from http://win.meteor.com/. Download the setup and install it. After installation we need to start CMD / Bash as administrator or reboot for it to catch the environment changes.

Developing Meteor App

Open the command prompt and change directory to your desired folder, say f:\sony\tracers\meteor. Then issue the create command as shown below.

>meteor create helloworld

image

Here, ‘helloworld’ is my application name. You can give any name for your application. The command creates a folder with the application name with a .meteor folder and sample html and js file. To check whether the application created correctly, type ‘meteor’ in the command prompt as shown below.

image

As you can see our application is running in localhost, we can fire any browser to that url and can see your first meteor app running. I'm leaving the screenshot: see it for yourself.

Explore Meteor in Detail

It’s time to see some of the cool features of Meteor. I created a small application called pointofsale. The rest of this post will focus on this application. It’s a small application I started in Meteor with the below functionality.

  • Product Entry
  • Order entry

I completed only "Product Entry" and "Listing."

Folder Structure

You can find more details about file structuring here. My app’s folder structure is shown below:

fileStructure

I use meteor Knockout as my MVVM framework.

Templates

Templates are like User controls in ASP.NET. That has a set of controls and logic. Meteor has a nice documentation about Templates, check it out before you move on.

Let’s see the Product Entry Template to get some insight.

<template name="productEntry">
    <table> 
        <tr>
            <td><Label >Product Code</Label></td>
            <td><label>Product Name</label></td>
        </tr>
        <tr>
            <td><input type="text" id="prodCode" data-bind="value: productCode" placeholder="Code"/></td>
            <td><input type="text" id="prodName" data-bind="value: productName" placeholder="Name"/></td>
            <td><input type="button" value="Add" id="addProduct"/></td>
        </tr>
    </table>
    <br>
</template>

As I said, I use knockout js, so for data binding I added knock out attribute

data-bind=”value: productCode” 

to input text.

Let’s see the Javascript of "Product Entry."

if(Meteor.is_client)
{
  var productCode= ko.observable();
  var productName= ko.observable();

  var viewModel={
    productCode:productCode,
    productName:productName
  };

  Meteor.startup( function() {ko.applyBindings(viewModel); });

  Template.productEntry.events={
      "click #addProduct": function(){
            var id=Products.insert({prodCode:this.productCode(), prodName:this.productName()});
      }
  };

}

Meteor.is_client will return true if the code is running in client, based on this condition we can add client specific codes. As you can see, some of the code above are knockout specific and am not going in detail, except the event handling. You can learn knockout from http://learn.knockoutjs.com/.

Template.productEntry.events={
    "click #addProduct": function(){
          var id=Products.insert({prodCode:this.productCode(), prodName:this.productName()});
    }
};

Meteor Collection

In the above code we are referring an object called Products, what is it? It’s a Meteor collection, meteor uses collection to handle data storage and manipulations. Where is it declared? as this Products collection may require in Server side as well. So I created a file in the root called dbRef.js and declared the collection there as shown below.

Products =  new Meteor.Collection("product");

We can use this Products collection to add, remove or search products to display in the client. Have a look at the product listing template to see how to use Products collection to display as list.

<template name="productListing">
    <label>Product Listing</label>
        {{#each products}}
            {{>product}}
        {{/each}}
</template>

<template name="product">
    <div class="product {{selected}}">
        <span class="code">{{prodCode}}</span>
        <span class="name">{{prodName}}</span>
        <span><input type="button" value="Delete" id="delete"></input> </span>
    </div>
</template>

Below is the js file of the template.

if(Meteor.is_client)
{
    Template.productListing.products=function (){
        return Products.find();
    };

    Template.product.events ={
        'click': function(){
            Session.set("selected_product", this._id);
        },

        "click #delete": function(){
            Products.remove({_id:Session.get("selected_product")});
        }
    };

    Template.product.selected = function () {
        return Session.equals("selected_product", this._id) ? "selected" : '';
    };

}

The highlighted ‘products’ function uses the Products collection to return all the products entered. Rest of the code is for deleting and selecting the item in the list.

I think I covered the basics of Meteor, will cover more in coming days. You all can download the source code of pointOfSale from Google Drive.

Published at DZone with permission of Sony Arouje, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)