The MEAN Stack

All Things Open 2015
https://github.com/dickeyxxx/social-app

Transcript

1. THE MEAN STACK JEFF DICKEY
3. THE MEAN STACK @DICKEYXXX ▸ github.com/dickeyxxx ▸ twitter.com/dickeyxxx ▸ medium.com/@dickeyxxx
5. THE MEAN STACK SOCIAL NETWORKING APP CREATE POSTS SEE POSTS BY FOLLOWED USERS
6. TOOLS
7. THE MEAN STACK NODE.JS POWERFUL V8 ENGINE EVENTED IO BACK-TO-BASICS CULTURE ES6 FEATURES IN NODE V4.X
8. THE MEAN STACK NPM
9. THE MEAN STACK EXPRESS.JS let express = require('express'); let app = express(); app.get('/statuscheck', function (req, res) { res.json({status: 'success'}); }); app.listen(process.env.PORT || 3000);
10. THE MEAN STACK MONGODB
11. THE MEAN STACK ANGULARJS CLIENT DOM RENDERING FRONT-END SEPARATION MODULES DEPENDENCY INJECTION
12. THE MEAN STACK ANGULARJS
14. CODE
15. BROWSER SERVER GET /api/posts [{body: ‘foo’…}]
16. THE MEAN STACK DATA MODEL USERS POSTS
17. THE MEAN STACK DATA MODEL USERS USERNAME (STRING) PASSWORD (STRING) AVATAR_URL (STRING) FOLLOWINGS ([]ID) POSTS USER (ID) BODY (STRING)
18. THE MEAN STACK POST MONGOOSE DB SCHEMA let Post = db.model('Post', { body: {type: String, required: true}, user: {type: db.Schema.ObjectId, required: true, ref: 'User'}, }); module.exports = Post;
19. THE MEAN STACK GET /API/POSTS RESPONSE JSON [ { "_id":"56250ece393a86f3e78e516b", "body":"jeff's second post", "user": { "_id":"56250b0239c39309e6d8c7db", "avatarUrl":"//www.gravatar.com/avatar/…", "fullName":"Jeff Dickey", "email":"dickeyxxx@gmail.com", "username":"dickeyxxx", } }, {…}, {…} ]
20. THE MEAN STACK EXPRESS GET API HANDLER app.get('/api/posts', function (req, res) { Post.find() .where('user').in(req.user.followings) .sort('-_id') .populate('user') .exec(function (err, posts) { res.json(posts); }); });
21. THE MEAN STACK ANGULAR CODE angular.module('app') .service('PostSvc', function ($http) { this.fetch = function () { return $http.get('/api/posts'); }; }) .controller('FeedCtrl', function ($scope, PostSvc) { PostSvc.fetch() .then(function (posts) { $scope.posts = posts; }); });
22. THE MEAN STACK ANGULAR TEMPLATE <div ng-repeat="post in posts"> <img ng-src="{{post.user.avatarUrl}}"/> <a ng-href="#/users/{{post.user.username}}"> {{post.user.fullName}} </a> {{post.body}} </div>
23. AUTHENTICATION
24. BROWSER SERVER POST /api/login eyJ0eXAiOiJKV… GET /api/posts [Auth-Token=‘eyJ0e…’]
27. THE MEAN STACK JWT let payload = { _id: user._id, username: user.username, }; let token = jwt.sign(payload, 'mysecretkey'); token === 'eyJ0eXAiOiJKV1QiLCJhbG…'; jwt.verify(token, 'mysecretkey')._id === user._id; let jwt = require('jsonwebtoken');
28. THE MEAN STACK JWT WITH EXPRESS app.post('/api/login', function (req, res) { // get user, validate password with bcrypt res.send(jwt.sign(user, 'mysecretkey')); }); app.use(function (req, res, next) { let token = req.headers['Auth-Token']; req.user = jwt.verify(token, 'mysecretkey'); next(); });
30. JEFF SERVER POST /api/posts emit(‘POST’, {_id: [post_id]}) JOSE GET /api/posts/[post_id] {id: [post_id], body: ‘…’}
31. THE MEAN STACK EVENTS CAPPED COLLECTION r.post('/api/posts', function (req, res) { // ... post.save(function (err, post) { let event = new Event({ type: 'Post', of: post._id, by: post.user }); event.save(); }); });
32. THE MEAN STACK TAILING CAPPED COLLECTION TO WEB SOCKET let io = require('socket.io')(server); io.on('connection', function (socket) { }); let eventStream = Event.where(…) .tailable() .stream(); eventStream.on('data', function (event) { socket.emit(event.type, event); });
33. THE MEAN STACK RESPONDING TO WEBSOCKET EVENT IN ANGULAR .controller('FeedCtrl', function (…) { WebSocketSvc.on('Post', function (post) { }); PostSvc.find(post.of) .then(function (post) { $scope.posts.push(post); });
35. THE MEAN STACK CHAT FEATURE let event = new Event({ type: 'ChatMessage', to: user, content: {body: 'hey buddy!'} });
36. THE MEAN STACK GEO NOTIFICATION // get gps coords in browser let pos = navigator .geolocation.getCurrentPosition(); // in server let eventStream = Event .where('pos').near({ center: pos, maxDistance: 5, }).tailable().stream(); eventStream.on('data', function (event) { socket.emit(event.type, event); });
37. THE MEAN STACK FUNCTIONALITY ▸ Simple, scalable API ▸ Maintainable front-end ▸ Push updates ▸ Geo notifications
38. THANKS! Jeff Dickey @dickeyxxx