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

  1. Data on the wire
  2. Single Language
  3. Database Everywhere
  4. Latency Compensation
  5. Full Stack Reactivity
  6. Embrace the ecosystem
  7. 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_confmeteor

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

  1. 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).
  2. Meteor automates the packaging and transmission of JS, CSS files.
  3. 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

  1. Files in the lib directory are loaded first
  2. Files that match   main.*  are loaded last
  3. Files in subdirectories are loaded before files in parent directories
  4. 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

  1. Session Storage
  2. 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 listmeteor list --usingmeteor 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_appmrt 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

Meteorjs

By bharani91

Made with Slides.com

Meteorjs

An introduction to MeteorJS.

  • 2,925

More from bharani91

  • Rapidly Prototyping Web Applications With Meteor JS
    bharani91
    2694