RethinkDB+Angular.js: Building realtime web applications

Transcript

1. RethinkDB+Angular.js Building realtime web applications AngularJS SF San Francisco, CA June 15, 2015
2. Jorge Silva @thejsj Developer Evangelist @ RethinkDB
3. Introduction What is RethinkDB?
4. What is RethinkDB? • Open source database for building realtime web applications • NoSQL database that stores schemaless JSON documents • Distributed database that is easy to scale
5. Built for Realtime Apps • Subscribe to change notifications from database queries • No more polling — the database pushes changes to your app • Reduce the amount of plumbing needed to stream live updates
6. Sample Document { "name": "Will Riker", "position": "Commander", "height": 193, "birthdate": Mon Aug 19 2335, "ships": [ { "name": "USS Pegasus" }, { "name": "USS Potemkin" }, { "name": "USS Enterprise" }, ], ... }
7. Introduction to ReQL RethinkDB Query Language
8. Introduction to ReQL • ReQL embeds natively into your programming language • Compose ReQL queries by chaining commands
9. Anatomy of a ReQL Query r.table("users") .pluck("last_name") .distinct().count() Number of unique last names
10. Anatomy of a ReQL Query r.table("users") .pluck("last_name") .distinct().count() Access a database table
11. Anatomy of a ReQL Query r.table("users") .pluck("last_name") .distinct().count() Isolate a document property
12. Anatomy of a ReQL Query r.table("users") .pluck("last_name") .distinct().count() Consolidate duplicate values
13. Anatomy of a ReQL Query r.table("users") .pluck("last_name") .distinct().count() Display the number of items
14. Sample ReQL Queries r.table("users") .filter(r.row("age").gt(30)) r.table(“post") .eqJoin(“uId”, r.table(“users”)) .zip() r.table("fellowship") .filter({species: "hobbit"}) .update({species: "halfling"})
15. Additional ReQL Features • Geospatial indexing for location- based queries • Date and time functions for time data • Support for storing binary objects • Execute http requests using r.http
16. Running Queries http://github.com/thejsj/rethinkdb-quickstart
17. http://rethinkdb-chat.thejsj.com:10001/ Running Queries
18. Realtime Updates Working with Changefeeds
19. Subscribe to change notifications on database queries Changefeeds
20. r.table("users").changes() Track changes on the users table Changefeeds
21. Changefeeds • The changes command returns a cursor that receives updates • Each update includes the new and old value of the modified record
22. Changefeeds r.table("users").changes() r.table("users") .insert({name: "Bob"}) Changefeed output: { new_val: { id: '362ae837-2e29-4695-adef-4fa415138f90', name: 'Bob', ... }, old_val: null }
23. Changefeeds r.table("users").changes() r.table("users") .filter({name: "Bob"}).delete() Changefeed output: { new_val: null, old_val: { id: '362ae837-2e29-4695-adef-4fa415138f90', name: 'Bob', ... } }
24. Changefeeds r.table("users").changes() r.table("users") .get("362ae837-2e29-4695-adef-4fa415138f90") .update({name: "Bobby"}) Changefeed output: { new_val: { id: '362ae837-2e29-4695-adef-4fa415138f90', name: 'Bobby' }, old_val: { id: '362ae837-2e29-4695-adef-4fa415138f90', name: 'Bob' } }
25. Changefeeds r.table("players") .orderBy({index: r.desc("score")}) .limit(3).changes() Track top three players by score Chain the changes command to an actual ReQL query:
26. http://rethinkdb-chat.thejsj.com:10001/ Running Changefeed Queries
27. Building Web Apps Using RethinkDB with Angular+Node.js
28. Demo: Realtime Chat
29. What we need • Add http enpoints for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
30. What we need • Add http endpoints for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
31. What we need • Add http endpoints for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
32. What we need • Add http endpoints for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
33. HTTP endpoints with Node.js var express = require('express'); var app = express(); var server = require('http').Server(app); app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { // ... }); server.listen(8000); Create HTTP routes for messages
34. var express = require('express'); var app = express(); var server = require('http').Server(app); app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { // ... }); server.listen(8000); Declare POST endpoint HTTP endpoints with Node.js
35. app .post('/message', function (req, res) { return r.table('messages').insert({ text: req.params.text, email: req.params.email, created: (new Date()).getTime() }).run(r.conn); }) .get('/message', function (req, res) { // ... }) Get `messages` table HTTP endpoints with Node.js
36. app .post('/message', function (req, res) { return r.table('messages').insert({ text: req.params.text, email: req.params.email, created: (new Date()).getTime() }).run(r.conn); }) .get('/message', function (req, res) { // ... }) `insert` new document HTTP endpoints with Node.js
37. app .post('/message', function (req, res) { return r.table('messages').insert({ text: req.params.text, email: req.params.email, created: (new Date()).getTime() }).run(r.conn); }) .get('/message', function (req, res) { // ... }) Run the query HTTP endpoints with Node.js
38. var express = require('express'); var app = express(); var server = require('http').Server(app); app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { // ... }); server.listen(8000); Declare GET route HTTP endpoints with Node.js
39. app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { return r.table('messages') .orderBy({ index: 'created'}) .coerceTo('array') .run(r.conn) .then(function (messages) { res.json(messages); }); }) Get `messages` table HTTP endpoints with Node.js
40. app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { return r.table('messages') .orderBy({ index: 'created'}) .coerceTo('array') .run(r.conn) .then(function (messages) { res.json(messages); }); }) Order by time created HTTP endpoints with Node.js
41. app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { return r.table('messages') .orderBy({ index: 'created'}) .coerceTo('array') .run(r.conn) .then(function (messages) { res.json(messages); }); }) Run the query HTTP endpoints with Node.js
42. app .post('/message', function (req, res) { // ... }) .get('/message', function (req, res) { return r.table('messages') .orderBy({ index: 'created'}) .coerceTo('array') .run(r.conn) .then(function (messages) { res.json(messages); }); }) Return the results of the query HTTP endpoints with Node.js
43. What we need • Add http endpoints for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
44. Message Factory (Client) angular.module('rethinkDBWorkshop.services', []) .factory('MessageFactory', MessageFactory); MessageFactory.$inject = ['$http', '$rootScope']; function MessageFactory ($http, $rootScope) { var messageCollection = []; var factory = { insertMessage: insertMessage, getMessageCollection: getMessageCollection, }; factory.getMessageCollection(); return factory; } Creating factory for messages
45. Message Factory (Client) angular.module('rethinkDBWorkshop.services', []) .factory('MessageFactory', MessageFactory); MessageFactory.$inject = ['$http', '$rootScope']; function MessageFactory ($http, $rootScope) { var messageCollection = []; var factory = { insertMessage: insertMessage, getMessageCollection: getMessageCollection, }; factory.getMessageCollection(); return factory; } Declare factory
46. Message Factory (Client) angular.module('rethinkDBWorkshop.services', []) .factory('MessageFactory', MessageFactory); MessageFactory.$inject = ['$http', '$rootScope']; function MessageFactory ($http, $rootScope) { var messageCollection = []; var factory = { insertMessage: insertMessage, getMessageCollection: getMessageCollection, }; factory.getMessageCollection(); return factory; } Inject our dependencies
47. Message Factory (Client) angular.module('rethinkDBWorkshop.services', []) .factory('MessageFactory', MessageFactory); MessageFactory.$inject = ['$http', '$rootScope']; function MessageFactory ($http, $rootScope) { var messageCollection = []; var factory = { insertMessage: insertMessage, getMessageCollection: getMessageCollection, }; factory.getMessageCollection(); return factory; } Declare our messages array
48. Message Factory (Client) angular.module('rethinkDBWorkshop.services', []) .factory('MessageFactory', MessageFactory); MessageFactory.$inject = ['$http', '$rootScope']; function MessageFactory ($http, $rootScope) { var messageCollection = []; var factory = { insertMessage: insertMessage, getMessageCollection: getMessageCollection, }; factory.getMessageCollection(); return factory; } Add method for adding messages
49. Message Factory (Client) angular.module('rethinkDBWorkshop.services', []) .factory('MessageFactory', MessageFactory); MessageFactory.$inject = ['$http', '$rootScope']; function MessageFactory ($http, $rootScope) { var messageCollection = []; var factory = { insertMessage: insertMessage, getMessageCollection: getMessageCollection, }; factory.getMessageCollection(); return factory; } Add method for getting messages
50. Message Factory (Client) var factory = { insertMessage: function (text) { return $http.post('/message', { text: text, email: config.email }); }, getMessageCollection: function () {} }; Send POST http request
51. Message Factory (Client) var factory = { insertMessage: function (text) { return $http.post('/message', { text: text, email: config.email }); }, getMessageCollection: function () {} }; Send object to be inserted
52. Message Factory (Client) var factory = { insertMessage: function (text) { }, getMessageCollection: function () { return $http.get('/message') .then(function (res) { messageCollection.splice(0, Infinity); res.data.forEach(function (row) { messageCollection.push(row); }); return messageCollection; }); } }; GET messages from server
53. Message Factory (Client) var factory = { insertMessage: function (text) { }, getMessageCollection: function () { return $http.get('/message') .then(function (res) { messageCollection.splice(0, Infinity); res.data.forEach(function (row) { messageCollection.push(row); }); return messageCollection; }); } }; Remove all messages from array
54. Message Factory (Client) var factory = { insertMessage: function (text) { }, getMessageCollection: function () { return $http.get('/message') .then(function (res) { messageCollection.splice(0, Infinity); res.data.forEach(function (row) { messageCollection.push(row); }); return messageCollection; }); } }; Add all messages to array
55. What we need • Add http endpoint for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
56. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Setup socket handler
57. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Create Socket.io instance
58. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Listen for new socket connections
59. Node.js Server Create a new database connection var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); });
60. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Get `messages` table
61. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Listen to changes in our messages
62. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Run the query
63. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Pass a callback to our cursor
64. Node.js Server var io = require('socket.io')(server); io.on('connection', function (socket) { r.connect(config.get('rethinkdb')) .then(function (conn) { r.table('messages') .changes().run(conn) .then(function (cursor) { cursor.each(function (err, row) { socket.emit('message', row.new_val); }); }); }); }); Send new message to the client
65. What we need • Add http endpoints for getting and adding messages • Create an Angular factory for messages • Setup changefeed in Node.js app • Add realtime listener in factory
66. Message Factory with Changefeeds function MessageFactory ($http, $rootScope) { var socket = io.connect('http://' + config.url); var messageCollection = []; socket.on('message', function (message) { $rootScope.$apply(function () { messageCollection.push(message); }); }); var factory = { ... }; return factory; } Add new message handler
67. Message Factory with Changefeeds function MessageFactory ($http, $rootScope) { var socket = io.connect('http://' + config.url); var messageCollection = []; socket.on('message', function (message) { $rootScope.$apply(function () { messageCollection.push(message); }); }); var factory = { ... }; return factory; } Connection to Socket.io server
68. Message Factory with Changefeeds function MessageFactory ($http, $rootScope) { var socket = io.connect('http://' + config.url); var messageCollection = []; socket.on('message', function (message) { $rootScope.$apply(function () { messageCollection.push(message); }); }); var factory = { ... }; return factory; } Listen to new messages on socket
69. Message Factory with Changefeeds function MessageFactory ($http, $rootScope) { var socket = io.connect('http://' + config.url); var messageCollection = []; socket.on('message', function (message) { $rootScope.$apply(function () { messageCollection.push(message); }); }); var factory = { ... }; return factory; } Perform proper scope life cycle
70. Message Factory with Changefeeds function MessageFactory ($http, $rootScope) { var socket = io.connect('http://' + config.url); var messageCollection = []; socket.on('message', function (message) { $rootScope.$apply(function () { messageCollection.push(message); }); }); var factory = { ... }; return factory; } Push message into collection
71. Demo: Realtime Chat
72. Additional Resources • RethinkDB website:
 http://rethinkdb.com • RethinkDB cookbook:
 http://rethinkdb.com/docs/cookbook • RethinkDB installation:
 http://rethinkdb.com/docs/install/
73. Questions?