Building real time web apps with Meteor

Meteor
Building real-time web apps
Nam Ho
KMS TechDay 2013

Agenda
• Play game
• Meteor

PLAY GAME
Play game at http://starwars.meteor.com/
Inspired by MMO Asteroids & Multi-touch Game Controller
http://seb.ly/2012/04/node-js-experiment-mmo-asteroids/
http://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5-
for-ipad/

METEOR
A Node.JS based real-time web framework
http://meteor.com/

Quick Start
$ curl https://install.meteor.com | /bin/sh
$ meteor create starwars
$ cd starwars
$ meteor
Meteor server running on: http://localhost:3000/
$ meteor deploy starwars.meteor.com

AUTOMATICALLY LOAD
JAVASCRIPT FILES UP AND RUN

Project Structure
• root
– /lib files in this folder are loaded first
– /client are only sent to the client
– /server are only run on the server
– /public static media files
– main.* are loaded last
• Deeper files are loaded first

Templates
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
</template>

Data Bindings
{{greeting}}
</template>
Template.hello.greeting = “Hello World!";

Event Bindings
<input type="button" value="Click" />
</template>
Template.hello.events({
'click input': function() { alert(“pressed"); }
});

Reactive Programming
Reactive programming consists 2 basic parts
• Reactive data source
• Reactive computation
– A block of code contains reactive data sources
Anytime data changes,
reactive computation is automatically re-run.

Live View Updates
Template.hello.greeting = function() {
return Session.get(‘greeting’);
};
When changing Session value,
view updates immediately
reactive data source
reactive computation

Cached and Synced Data
Server Client
Data model Data model
Changes
#1 Cache
#2 Sync
Listen

SYNCED MODEL
+
REACTIVITY
=
BANG!

PUBLISH / SUBSCRIBE
Publish a record set.
Subscribe to a record set.

// server + client: create Player model
Players = new Meteor.Collection(“players”);
// server: publish the players collection
Meteor.publish(“allplayers”, function () {
return Players.find();
});
// client: subscribe a record set
Meteor.subscribe(“allplayers”);

SERVER METHODS
Methods are remote functions that Meteor clients can invoke.

// server
Meteor.methods({
foo: function () { return “bar”; }
});
// client: async call
Meteor.call(‘foo’, function(error, result){…});
// client: sync call
var result = Meteor.call(‘foo’);

USE MONGODB AS DATABASE
Reset database: meteor reset
Shell: meteor mongo OR mongo 127.0.0.1:3002/meteor

THANK YOU!
Q & A
Source code: https://github.com/hotrannam/starwars
Twitter: @hotrannam

Building real time web apps with Meteor

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Building real time web apps with Meteor

Similar to Building real time web apps with Meteor (20)

More from hotrannam

More from hotrannam (6)

Recently uploaded

Recently uploaded (20)

Building real time web apps with Meteor