Introducton to Meteor JS
Before move on to the sample Application implementation I will give a brief introduction about Meteor JS. Meteor
JS is an open source platform built on top of Node JS for building
web applications very rapidly (Node.js is a platform built on
Chrome's JavaScript runtime for easily building fast, scalable
network applications. Node.js uses an event-driven, non-blocking I/O
model that makes it lightweight and efficient, perfect for
data-intensive real-time applications that run across distributed
devices). It uses Node JS to deploy and seamlessly combines packages
like Mongo DB (a NoSQL database system), jQuery (a fastest javascript
library), etc. Meteor has some set of principles as fallows.
- Don't send HTML over the network. Send data and let the client decide how to render it.
- Write both the client and the server parts of your interface in JavaScript.
- Use the same transparent API to access your database from the client or the server.
- On the client, use prefetching and model simulation to make it look like you have a zero-latency connection to the database.
- Make real-time the default. All layers, from database to template, should make an event-driven interface available.
- Meteor is open source and integrates, rather than replaces, existing open source tools and frameworks.
- The best way to make something seem simple is to have it actually be simple. Accomplish this through clean, classically beautiful APIs.
A Meteor JS application is a mix
of JavaScript that runs inside a client web browser, JavaScript that
runs on the Meteor server inside a Node.js container, and all the
supporting HTML templates, CSS rules, and static assets. Meteor
automates the packaging and transmission of these different
components. And, it is quite flexible about how we choose to
structure those components in our file tree.
The only server assets are
JavaScript and files in the
private
subdirectory. Meteor gathers all JavaScript files, excluding anything
under the client,
public,
and private
subdirectories, and loads them into a Node.js server instance inside
a fiber. In Meteor, server code runs in a single thread per request,
not in the asynchronous callback style typical of Node.
Meteor JS provides the variables
called
isClient
and isServer
so that code can alter its behavior depending on whether it's running
on the client or the server. Therefore rather using two separate
functions to control the client and server side events, we can share
only one reusable function for both client and server side.
HTML files in a Meteor
application are different from a server-side framework. Meteor scans
all the HTML files in your directory for three top-level elements:
<head>,
<body>,
and <template>.
The head and body sections are separately concatenated into a single
head and body, which are transmitted to the client on initial page
load.
Sample Application
In this simple application I dynamically
created tabs to store items within three categories namely breakfast,
lunch and dinner. Each tab consists of menu options. For that purpose
I designed a navigation menu to handle it.
To define templates for the application I created a file in the project with the
.html
extension. In the file, make a <template>
tag and give it a name
attribute called “loadingTemplate”. Put the template contents
inside the tag. Meteor will precompile the template, ship it down to
the client, and make it available as on the global Template
object.
- Fallowing html code will show how to load the template to the html body using meteor syntax.
<body>
<div
id="outer">
{{>
loadingTemplate}}
</div>
</body>
- Template object for displaying merchant information is shown in the fallowing html code.
<template
name="loadingTemplate">
<div
class="span6" id="header">
<table>
<tr><td><label
id="mName"><i class="icon-user icon-black"></i>
Merchant Name</label>
</td>
<td><label
id="mAddress"><i class="icon-user
icon-black"></i> Address</label>
</td>
<td><label
id="mHrs"><i class="icon-user icon-black"></i>
Online Ordering Hours (PST)</label>
</td>
</tr>
<tr>
<td><label
id="mDelivery"><i class="icon-user
icon-black"></i> Delivery</label>
</td>
<td><label
id="mFee"><i class="icon-user icon-black"></i>
Delivery Fee</label>
</td>
<td><label
id="pickup"><i class="icon-user icon-black"></i>
Pickup</label>
</td>
</tr>
<tr>
<td><label
id="mOrder"><i class="icon-user icon-black"></i>
Order Minimum</label>
</td>
<td><label
id="mMin"><i class="icon-user icon-black"></i>
Delivery Minimum</label>
</td>
</tr>
</table>
<div
class="container">
{{>breakfirstList}}
</template>
<template
name="breakfirstList">
<div
style="margin-bottom:10px">
</div>
<div
id="tt" class="easyui-tabs"
style="width:600px;height:450px;">
</div>
</template>
The user interface for our
example application is shown below. As you can see the tree tabs
created dynamically using javascript.
The below javascript code
describes how to create the tabs dynamically. The function “addTab”
getting a parameter called “title” and it checks that is there
having any tab in the given title. If yes the tab is not added to the
main menu. Otherwise the tab added dynamically to the main menu and
set some attributes to it.
function
addTab(title){
if
($('#tt').tabs('exists', title)){
$('#tt').tabs('select',
title);
} else {
var
content = '<div id="'+title+'"
style="width:100%;height:100%;">
<div
class="accordion" id="accordionid"></div></div>';
$('#tt').tabs('add',{
title:title,
content:content,
id:title+"M",
closable:false
});
}
}
The below javascript code
describes how to add option type menu list dynamically. The function
“bfOptionTypes” takes a parameter called “bfItem” and each
item should have item name, description and price and option types.
For loop
is used to add data dynamically to the html template according to the
length of the array.
function
bfOptionTypes(bfItem){
if
(bfItem.optionTypes != null) {
var
bfItemLength = bfItem.optionTypes.length;
var
returnBfItm = "";
for(var
bfi=0;bfi<bfItemLength;bfi++){
var
getOptions = bfOptions(bfItem.optionTypes[bfi]);
returnBfItm +=
'<h5>'+bfItem.optionTypes[bfi].name+'</h5>'+getOptions;
}
returnBfItm
+= '<br>';
}
return
returnBfItm;
}
The below javascript code
describes how to add option type list dynamically. The function
“bfOptions” takes a parameter called “optionType” and each
option type should have option name and price. For
loop is used to add
option types dynamically to the item list according to the length of
the array.
function
bfOptions(optionType){
if(optionType.options
!= null){
var
bfItemOptionLength = optionType.options.length;
alert("bfItemOptionLength:"+bfItemOptionLength);
var
returnBFItemOption = "";
for(var
g = 0;g<bfItemOptionLength;g++){
var
optionValues = optionType.options[g].name+"
"+optionType.options[g].price;
var
groupName = "BFOptions"+optionType.name;
returnBFItemOption += '<input type="radio"
name="'+groupName+'" value="'+optionValues+'">'+optionValues+' ';
}
returnBFItemOption
+= '<br>';
}
return
returnBFItemOption;
}
