Building real time web apps with Meteor

Preview:

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/

METEOR

A Node.JS based real-time web frameworkhttp://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

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

Recommended