Building real time web apps with Meteor
- 1. Meteor Building real-time web apps Nam Ho KMS TechDay 2013
- 2. Agenda • Play game • Meteor
- 3. PLAY GAME Play game at http://starwars.meteor.com/ Inspired by MMO Asteroids & Multi-touch Game Controller http://seb.ly/2012/04/node-js-experiment-mmo-asteroids/ http://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5- for-ipad/
- 4. METEOR A Node.JS based real-time web framework http://meteor.com/
- 5. 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
- 7. AUTOMATICALLY LOAD JAVASCRIPT 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 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.
- 15. Live View Updates Template.hello.greeting = function() { return Session.get(‘greeting’); }; When changing Session value, view updates immediately reactive data source reactive computation
- 16. THE MODEL
- 17. Cached and Synced Data Server Client Data model Data model Changes #1 Cache #2 Sync Listen
- 19. PUBLISH / SUBSCRIBE Publish a record set. Subscribe to a record set.
- 20. // server + client: create Player model Players = new Meteor.Collection(“players”); // server: publish the players collection Meteor.publish(“allplayers”, function () { return Players.find(); }); // client: subscribe a record set Meteor.subscribe(“allplayers”);
- 21. SERVER METHODS Methods are remote functions that Meteor clients can invoke.
- 22. // server Meteor.methods({ foo: function () { return “bar”; } }); // client: async call Meteor.call(‘foo’, function(error, result){…}); // client: sync call var result = Meteor.call(‘foo’);
- 23. USE MONGODB AS DATABASE Reset database: meteor reset Shell: meteor mongo OR mongo 127.0.0.1:3002/meteor
- 24. THANK YOU! Q & A Source code: https://github.com/hotrannam/starwars Twitter: @hotrannam