Building real time web apps with Meteor

  • 1,180 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,180
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
19
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