introduction to Meteor JS
what is Meteor?
Meteor is a Javascript framework that makes it very easy to create web applications. Meteor abstracts away the menial and configuration-related details leaving us with a just the set of tools that is needed to create a web application.
"Meteor is a platform for building top-quality web applications in a fraction of the time".
Meteor Principles and concepts
- Data on the wire
- Single Language
- Database Everywhere
- Latency Compensation
- Full Stack Reactivity
- Embrace the ecosystem
- Simplicity Equals Productivity
Installing Meteor
If you are familiar with the command line, you’ll know that this command just downloads (or curls) a bunch of files from meteor.com and pipes it to the bin/sh directory. bin/sh is the location of the script interpreter "Shell", which will run the script.
curl https://install.meteor.com | /bin/sh
creating a Meteor App
This meteor command takes care of loading up all our files and scripts. Now open up a web browser and navigate to http://localhost:3000/.
meteor create js_conf
cd js_conf
meteor
Reactive Programming
One of the really cool things about Meteor is the concept of "Reactive Programming". What this term essentially means is that, any changes made to the HTML, CSS and Javascript files will be automatically picked up by Meteor. So once you save a file after making changes, the browser will automatically reload to display the changes. You don't have to restart the application or even refresh your browser.
Templates
<head>
<title>Intro to Meteor</title>
</head>
<body>
{{>hello}}
</body>
<template name=”hello”>
<h2>Hello from template</h2>
</template>
Templates
Template sections are converted into JavaScript functions, available under the Template namespace
<template name="hello">
{{greeting}}
</template>
Template.hello.greeting = function() {
return “Hi Meteor!”
}
Template Events
To respond to user inputs, we need to listen for events like “click”, “double click”, keypress” etc. The event and the target element is specified as a string value by a space. This forms the key of the object. The callback function that gets executed when this event occurs is defined as the value.
Template.hello.events({
“click input” : function(e, t) {
alert(“You clicked the input.”);
}
});
Application Structure
-
A Meteor application contains HTML/CSS and JavaScript that runs inside a client (web browser) and JavaScript that runs on the server (inside a NodeJS wrapper).
-
Meteor automates the packaging and transmission of JS, CSS files.
-
If you add a javascript file inside the application directory, the javascript code will be executed in both the server and the client
.
Load Order
-
Files in the lib directory are loaded first
-
Files that match
main.*
are loaded last
-
Files in subdirectories are loaded before files in parent directories
-
Within a directory, files are loaded in alphabetical order.
SEparating Server/Client Code
Since Meteor uses a single language – Javascript on both the client(browser) and the server, Meteor provides us with isClient and isServer checks to separate out what part of the code needs to be executed on the server and what needs to be executed inside the browser.
if (Meteor.isClient) {
// Client Code....
}
if (Meteor.isServer) {
// Server code....
Meteor.startup(function () {
// code to run on server at startup
});
}
Separating Client/Server Code
Meteor lets us create two folders - server
and
client
. The code that is inside of the server directory will only be executed on the server and similarly, the code that is inside the client directory will only be executed inside the browser.
Public Assets
Meteor server will serve any files under the public directory. Put your favicon.ico, robots.txt, sitemap.xml and images in this directory.
DATA STORE
The client and server share the same database API. Code running on the server has direct access to the database but the code running on the client does not.
Every Meteor client includes an in-memory database cache. Server publishes sets of JSON documents and clients subscribes to those sets.
Reactive datastore - a data store that will update its templates when its value itself changes
-
Session Storage
-
Collections
Session Storage
Session storage allows us to store key-value pairs that are reactive in nature. This can be used to keep track of the current page or current user or for keeping our UI in sync.
Session.set("currentTask", "Learn Meteor");
Session.set("currentPage", "documentationPage");
Session.get("currentTask");
Session.get("currentPage");
Collections
MongoDB is the only database that is currently supported by Meteor.
Meteor.Collection
class is used to declare and manipulate MongoDB collections.
Tasks = new Meteor.Collection("tasks");
Tasks.insert({ title: "Learn Meteor", priority: 1 });
Tasks.find({});
Tasks.find({ title: "Learn Meteor" });
Tasks.update({ title: "Learn Meteor }, { priority: 2 }
smart Packages
Meteor smart packages are small JavaScript programs that can inject code into the client or the server.
Smart packages are like RubyGems (Ruby) or NPM packages (Node).
jQuery, Underscore, Backbone, Bootstrap, Accounts, Email....
meteor list
meteor list --using
meteor add ....
meteor remove ...
meteorite
Meteorite is a Meteor version manager and package manager. It provides an easy way to run different versions of meteor, use non-core packages, and to install packages from the
Atmosphere package repository
.
npm install -g meteorite
mrt create my_app
mrt add ... (add a package from Atmosphere repository)
Packaging and Deploying
meteor bundle js-conf.tgz
meteor deploy js-conf.meteor.com
Thanks!
bharani91@gmail.com
http://github.com/bharani91
http://in.linkedin.com/in/bharani91
www.resumonk.com