0
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...
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 o...
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...
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: f...
REACTIVITY
Reactive ProgrammingReactive programming consists 2 basic parts• Reactive data source• Reactive computation– A block of co...
Live View UpdatesTemplate.hello.greeting = function() {return Session.get(‘greeting’);};When changing Session value,view u...
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 collectio...
SERVER METHODSMethods are remote functions that Meteor clients can invoke.
// serverMeteor.methods({foo: function () { return “bar”; }});// client: async callMeteor.call(‘foo’, function(error, resu...
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
Upcoming SlideShare
Loading in...5
×

Building real time web apps with Meteor

1,372

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,372
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Building real time web apps with Meteor"

  1. 1. MeteorBuilding real-time web appsNam HoKMS TechDay 2013
  2. 2. Agenda• Play game• Meteor
  3. 3. 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/
  4. 4. METEORA Node.JS based real-time web frameworkhttp://meteor.com/
  5. 5. 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
  6. 6. JAVASCRIPT END-TO-END
  7. 7. AUTOMATICALLY LOADJAVASCRIPT FILES UP AND RUN
  8. 8. 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
  9. 9. THE VIEW
  10. 10. Templates<body>{{> hello}}</body><template name="hello"><h1>Hello World!</h1></template>
  11. 11. Data Bindings<template name="hello">{{greeting}}</template>Template.hello.greeting = “Hello World!";
  12. 12. Event Bindings<template name="hello"><input type="button" value="Click" /></template>Template.hello.events({click input: function() { alert(“pressed"); }});
  13. 13. REACTIVITY
  14. 14. 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.
  15. 15. Live View UpdatesTemplate.hello.greeting = function() {return Session.get(‘greeting’);};When changing Session value,view updates immediatelyreactive data sourcereactive computation
  16. 16. THE MODEL
  17. 17. Cached and Synced DataServer ClientData model Data modelChanges#1 Cache#2 SyncListen
  18. 18. SYNCED MODEL+REACTIVITY=BANG!
  19. 19. PUBLISH / SUBSCRIBEPublish a record set.Subscribe to a record set.
  20. 20. // 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”);
  21. 21. SERVER METHODSMethods are remote functions that Meteor clients can invoke.
  22. 22. // serverMeteor.methods({foo: function () { return “bar”; }});// client: async callMeteor.call(‘foo’, function(error, result){…});// client: sync callvar result = Meteor.call(‘foo’);
  23. 23. USE MONGODB AS DATABASEReset database: meteor resetShell: meteor mongo OR mongo 127.0.0.1:3002/meteor
  24. 24. THANK YOU!Q & ASource code: https://github.com/hotrannam/starwarsTwitter: @hotrannam
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×