Building real time web apps with Meteor
Upcoming SlideShare
Loading in...5
×
 

Building real time web apps with Meteor

on

  • 1,389 views

 

Statistics

Views

Total Views
1,389
Views on SlideShare
1,389
Embed Views
0

Actions

Likes
1
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building real time web apps with Meteor Building real time web apps with Meteor Presentation Transcript

  • MeteorBuilding real-time web appsNam HoKMS TechDay 2013
  • Agenda• Play game• Meteor
  • PLAY GAMEPlay 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/
  • METEORA Node.JS based real-time web frameworkhttp://meteor.com/
  • Quick Start$ curl https://install.meteor.com | /bin/sh$ meteor create starwars$ cd starwars$ meteorMeteor server running on: http://localhost:3000/$ meteor deploy starwars.meteor.com
  • JAVASCRIPT END-TO-END
  • AUTOMATICALLY LOADJAVASCRIPT 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 ProgrammingReactive programming consists 2 basic parts• Reactive data source• Reactive computation– A block of code contains reactive data sourcesAnytime data changes,reactive computation is automatically re-run.
  • Live View UpdatesTemplate.hello.greeting = function() {return Session.get(‘greeting’);};When changing Session value,view updates immediatelyreactive data sourcereactive computation
  • THE MODEL
  • Cached and Synced DataServer ClientData model Data modelChanges#1 Cache#2 SyncListen
  • SYNCED MODEL+REACTIVITY=BANG!
  • PUBLISH / SUBSCRIBEPublish 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 METHODSMethods are remote functions that Meteor clients can invoke.
  • // serverMeteor.methods({foo: function () { return “bar”; }});// client: async callMeteor.call(‘foo’, function(error, result){…});// client: sync callvar result = Meteor.call(‘foo’);
  • USE MONGODB AS DATABASEReset database: meteor resetShell: meteor mongo OR mongo 127.0.0.1:3002/meteor
  • THANK YOU!Q & ASource code: https://github.com/hotrannam/starwarsTwitter: @hotrannam