introduction to Meteor JS
what is Meteor?
"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
Templates
<head>
<title>Intro to Meteor</title>
</head>
<body>
{{>hello}}
</body>
<template name=”hello”>
<h2>Hello from template</h2>
</template>
Templates
<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
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
DATA STORE
-
Session Storage
-
Collections
Session Storage
Session.set("currentTask", "Learn Meteor");
Session.set("currentPage", "documentationPage");
Session.get("currentTask");
Session.get("currentPage");
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).
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
Meteorjs
By bharani91
Meteorjs
An introduction to MeteorJS.
- 2,929