Meteor Behind the Scenes

In this presentation can someone understand the fundamental of Meteor.js Platform. It is inspired by Matt Debergalis talk, https://www.youtube.com/watch?v=tqLbodVH3dw

Transcript

1. Meteor behind the scenes
2. What we will learn... • Publication/Subscription • Remote Procedure Call • Oplog Tailing • Minimongo
3. Four fundamental questions • How do we move data around? • Where do they come from? • Where do we put them? • How do we use them?
4. How do we move data around? DDP (Distributed Data Protocol) • Publication/Subscription • RPC (remote procedure call) ◦ invoke a method on the server and get something back in return
5. Publication/Subscription • client subscribes into a real-time data and get notifications • three types of notifications ◦ added ◦ changed ◦ removed
6. Publication/Subscription Server Client subscribe: chatMessages added: message 1 added: message 2 ready . . . added: transaction 3
7. Remote Procedure Call (RPC) • Invoke a method on the server and get something back in return • It notifies the caller after all the write operations in the method have been reflected to all the other connected clients • Three types of notifications ◦ method ◦ result ◦ updated
8. Remote Procedure Call (RPC) Server Client addMessage(“Hello World”, mstamos, acadimo) result: messageAdded . . . updated
9. Live Code Session Lets download Microscope > git clone https://github.com/mstamos/meteorlessons.git > cd meteorlessons Checkout into chapter 4.1 and run the app > git checkout chapter4-1 > meteor
10. Where do they come from? • We know how to sent the data from db to client (DDP) • How watch changes and sent them to the wire ◦ poll-and-diff (pre 0.7 vs) ◦ oplog tailing (after 0.7 vs)
11. poll-and-diff Ask MongoDB again and again a query and find the changes after every database write operation. Drawbacks • The polling and comparing logic takes a lot of CPU power and network I/O • After a write operation, there is no way to propagate the changes into other Meteor instances in real-time. Changes will be notices the next time Meteor’s polls (~10 sec)
12. poll-and-diff DB Write Operation Meteor (Instance 1) Meteor (Instance 2) Poll MongoDB (after write completed) (detect changes in realtime) Poll MongoDB (every 10 sec) (detect changes with a delay) MongoDB
13. Oplog tailing • MongoDB oplog ◦ Is a log that records every database write operation ◦ It’s so reliable that it’s used for MongoDB replication ▪ Mongo applies database operations to the primary ▪ Then records the operations on the primary oplog ▪ The secondary members then copy and apply changes in an asynchronous process
14. Mongo Oplog Write something Mongo Primary Mongo Secondary Mongo Secondary Mongo Secondary db changes via oplog
15. Oplog tailing • Meteor Acts like a Secondary • Keeps a cache of data inside the memory and applies changes while triggering observers ◦ Not all data ◦ Just the data relevant to observers
16. Oplog tailing Mongo Primary Mongo Secondary Mongo Secondary Mongo Secondary db changes via oplog Meteor App Write operations Other Apps
17. Oplog tailing Scores.find({game:”duel”}, {sort: {score: -1}, limit 3, fields: {score:1, user: 1}}) Run the query and cache: {_id:”kkk”, user: “fani”, score: 321} {_id:”uuu”, user: “giannis”, score: 150} {_id:”rrr”, user: “miltos”, score: 100} Oplog says: {op: “insert”, id: “www”, {game: “normal”, user:”acadimo”, score: 1000}} Ignore it: does not match selector
18. Oplog tailing Scores.find({game:”duel”}, {sort: {score: -1}, limit 3, fields: {score:1, user: 1}}) Run the query and cache: {_id:”kkk”, user: “fani”, score: 321} {_id:”uuu”, user: “giannis”, score: 150} {_id:”rrr”, user: “miltos”, score: 100} Oplog says: {op: “update”, id: “uuu”, {$set: {user: “john”}}} Invoke changes {_id:”kkk”, user: “fani”, score: 321} {_id:”uuu”, user: “john”, score: 150} {_id:”rrr”, user: “miltos”, score: 100}
19. Where do we put them? DB App
20. Where do we put them? DB App Mini Mongo Template View Layer Meteor’s Architecture
21. What happens when data change? • Two situations in which data change ◦ From Database (when someone else change the data which we see) ◦ From the user itself
22. Changes from Database DB App Mini Mongo Template View Layer Data via DDP Stored to minimongo
23. Changes from User DB App Mini Mongo Template Instantly Rerender the page with the new data Sent changes to Server Server Response by sending DDP messages with the new data User’s changes Latency Compensation
24. How do we use them? • We pass data to Blaze ◦ Reactive UI Library ◦ Fulfills the same purpose as Angular, Backbone, Ember, React, Polymer or Knockout ◦ Much easier to use ◦ Use Spacebars as template language
25. Spacebar Example
26. Review • Publication/Subscription • Remote Procedure Call • Oplog Tailing • Minimongo • Blaze/Spacebars
27. That is Meteor’s Magic
28. Questions Questions Please!
29. Feedback meteorlessons.meteor.com
30. Ooo...nice! Let’s go Idefix to write some code!