Raj Anand
rajanand@fsftn.org

Overview



  1. What is meteor?
  2. 7 principles
  3. Live demo and Explanation
  4. Production Apps
  5. Learning resources

what is

meteor?

 


 


well-known & productivity-proven

Javascript Libraries

Packaged into one
powerful platform to build modern apps

 

How modern apps look and feel


  • Focus on your app’s unique features instead
    of wrangling network code
  • Make Facebook-quality apps without Facebook’s resources
 

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/

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>

 

Template mangers


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);
    }
  });
}
If (Meteor.isServer){
  // Server side code }

Demo

Structure
&
Architecture

Folder Structure


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

LIVE HTML
&
HOT CODE PUSH

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");

1

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);

 

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




  • Over 201 groups around the world
  • More than 25k active members
  • More than 4k community packages
  • One of the most starred GitHub repo(>23k)
 

Learning resources

meteor.com/learn


  • Official Meteor tutorial at meteor.com/install
  • Discover Meteor
  • Documentation at docs.meteor.com
  • http://meteortips.com/book/
  • https://meteorhacks.com/

 

Questions?

Thank you

GitHub, Twitter - rajanand02

rajanand@fsftn.org

Meteor day

By Raj Anand

Made with Slides.com

Meteor day

Meteor introduction in Worldwide Meteor day Chennai.

  • 2,104

More from Raj Anand