Embed Size (px)
Citation preview
MeteorBuilding 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 Controllerhttp://seb.ly/2012/04/node-js-experiment-mmo-asteroids/http://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/
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
JAVASCRIPT END-TO-END
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
THE VIEW
Templates
<body> {{> hello}}</body>
<template name="hello"> <h1>Hello World!</h1></template>
Data Bindings
<template name="hello"> {{greeting}} </template>
Template.hello.greeting = “Hello World!";
Event Bindings
<template name="hello"> <input type="button" value="Click" /></template>
Template.hello.events({ 'click input': function() { alert(“pressed"); } });
REACTIVITY
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
THE MODEL
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 modelPlayers = new Meteor.Collection(“players”);
// server: publish the players collectionMeteor.publish(“allplayers”, function () { return Players.find(); });
// client: subscribe a record setMeteor.subscribe(“allplayers”);
SERVER METHODS
Methods are remote functions that Meteor clients can invoke.
// server Meteor.methods({ foo: function () { return “bar”; } });
// client: async callMeteor.call(‘foo’, function(error, result){…});
// client: sync callvar result = Meteor.call(‘foo’);
USE MONGODB AS DATABASE
Reset database: meteor resetShell: meteor mongo OR mongo 127.0.0.1:3002/meteor
THANK YOU!Q & A
Source code: https://github.com/hotrannam/starwarsTwitter: @hotrannam
