Watch out for 

Meteor


                                   

Raj Anand
rajanand@fsftn.org

what is

meteor?


 


well-known & productivity-proven

Javascript Libraries

Packaged into one
powerful platform!

Background?

Backed by World's Top Investors

Andreessen Horowitz
(A Billion dollar company)

Dustin Moskovitz
(Co-Founder of Facebook and Asana)
Heroku  

Reddit  
Gmail

7
principles

1.

Data

on

wire

2.

One

language

3.

Database

everywhere

4.

Latency

compensation

5.

Full
stack

Reactivity

6.

Embrace
the

Ecosystem

7.

Simplicity

equals

Productivity

Quickstart


Install Meteor:
$ curl https://install.meteor.com | /bin/sh
Create a project:
$ meteor create myapp
Run it locally:
$ cd myapp
$ meteor
=> Meteor server running on: http://localhost:3000/

Generated JS


if (Meteor.isClient) {
  // code to run on client
  ...
}

if (Meteor.isServer) {
    // code to run on server
  ...
}

Structure
&
Architecture

Folder Structure


/client/...
/server/...
/lib/...
/public/...
 main.*

Mongo DB
&
COLLECTIONS

Synchronized Collections


Posts = new Meteor.Collection("posts");

Posts.find();
Posts.findOne();
Posts.insert();
Posts.update();
Posts.remove();
...

Publish/Subscribe
&
Method Calls

Publish/Subsribe


// server: publish the messages collection
Meteor.publish("messages", function () {
  return Messages.find();
}); 

// client: subscribe to the published messages
Meteor.subscribe("messages");

Method Calls

Meteor.methods({
  foo: function (arg1, arg2) {
    // .. do stuff ..
    if (you want to throw an error)
      throw new Meteor.Error(404, "Can't find my pants");
    return "some return value";
  },

  bar: function () {
    // .. do other stuff ..
    return "baz";
  }
}); 
// async call
Meteor.call('foo', 1, 2, function (error, result) { ... } );

// sync call
var result = Meteor.call('foo', 1, 2);

Allow & Deny

Messages.allow({
  insert: function (userId, msg) {
    // only logged-in users can insert a new message that they own
    return (userId && msg.owner == userId);
  },
  fetch: ['owner']
}); 

Messages.deny({
  remove: function (userId, msg) {
    //can't remove locked messages
    return msg.locked;
  },
  fetch: ['locked']
});

TEMPLATING,
LIVE HTML
&
HOT CODE REPLACEMENT

handlebars Template


<head>
  <title>myapp</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

Live Update


if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault("counter", 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get("counter");
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set("counter", Session.get("counter") + 1);
    }
  });
}

Accounts
&
SECURITY

Accounts


$ meteor add accounts-ui
$ meteor add accounts-*
* = password, facebook, twitter, google, github, ...
OAuth2

{{> loginButtons}}

Deployment
&
Packaging

Deployment



on Meteor infrastructure

$ meteor deploy myapp.meteor.com
$meteor deploy www.myapp.com


on own infrastructure

$ meteor bundle myapp.tgz

Ecosystem


ATMOSPHERE


NPM Packages

Questions?

Thank you

GitHub, Twitter - rajanand02

rajanand@fsftn.org
Made with Slides.com