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
Watch Out For Meteor
By Raj Anand
Watch Out For Meteor
Meteor introduction
- 1,300