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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building real time web apps with Meteor

1,340

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×