Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The MEAN Stack
Search
Jeff Dickey
October 20, 2015
Technology
1
170
The MEAN Stack
All Things Open 2015
https://github.com/dickeyxxx/social-app
Jeff Dickey
October 20, 2015
Tweet
Share
Other Decks in Technology
See All in Technology
Cloud Friendly(?) Jenkins. How we failed to make Jenkins cloud native and what we learned?
onenashev
PRO
0
110
AWS アーキテクチャクイズ
yuu26
2
700
Challenges - Open Farming Hackdays 2024
loleg
0
560
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
生成AIの不確実性と向き合うためのオブジェクト指向設計
tkikuchi1002
2
670
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.5k
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
440
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2k
検証からプロダクトへ: シームレスなLLM開発の ためのしくみ作り
nunukim
1
170
匠MethodとRDRAとICONIXとDDDで実現する一気通貫オブジェクト指向開発
haru860
4
2k
期待しすぎずに取り組む両面 TypeScript
shozawa
2
290
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
350
Featured
See All Featured
Practical Orchestrator
shlominoach
180
9.7k
Documentation Writing (for coders)
carmenintech
59
3.8k
What the flash - Photography Introduction
edds
64
11k
Typedesign – Prime Four
hannesfritz
36
2k
Building Applications with DynamoDB
mza
88
5.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Bash Introduction
62gerente
604
210k
Ruby is Unlike a Banana
tanoku
95
10k
KATA
mclloyd
14
11k
[RailsConf 2023] Rails as a piece of cake
palkan
21
3.8k
Writing Fast Ruby
sferik
619
59k
A Tale of Four Properties
chriscoyier
150
22k
Transcript
THE MEAN STACK JEFF DICKEY
None
THE MEAN STACK @DICKEYXXX ▸ github.com/dickeyxxx ▸ twitter.com/dickeyxxx ▸ medium.com/@dickeyxxx
None
THE MEAN STACK SOCIAL NETWORKING APP CREATE POSTS SEE POSTS
BY FOLLOWED USERS
TOOLS
THE MEAN STACK NODE.JS POWERFUL V8 ENGINE EVENTED IO BACK-TO-BASICS
CULTURE ES6 FEATURES IN NODE V4.X
THE MEAN STACK NPM
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);
THE MEAN STACK MONGODB
THE MEAN STACK ANGULARJS CLIENT DOM RENDERING FRONT-END SEPARATION MODULES
DEPENDENCY INJECTION
THE MEAN STACK ANGULARJS
None
CODE
BROWSER SERVER GET /api/posts [{body: ‘foo’…}]
THE MEAN STACK DATA MODEL USERS POSTS
THE MEAN STACK DATA MODEL USERS USERNAME (STRING) PASSWORD (STRING)
AVATAR_URL (STRING) FOLLOWINGS ([]ID) POSTS USER (ID) BODY (STRING)
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;
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":"
[email protected]
", "username":"dickeyxxx", } }, {…}, {…} ]
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); }); });
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; }); });
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>
AUTHENTICATION
BROWSER SERVER POST /api/login eyJ0eXAiOiJKV… GET /api/posts [Auth-Token=‘eyJ0e…’]
None
None
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');
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(); });
None
JEFF SERVER POST /api/posts emit(‘POST’, {_id: [post_id]}) JOSE GET /api/posts/[post_id]
{id: [post_id], body: ‘…’}
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(); }); });
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); });
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); });
None
THE MEAN STACK CHAT FEATURE let event = new Event({
type: 'ChatMessage', to: user, content: {body: 'hey buddy!'} });
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); });
THE MEAN STACK FUNCTIONALITY ▸ Simple, scalable API ▸ Maintainable
front-end ▸ Push updates ▸ Geo notifications
THANKS! Jeff Dickey @dickeyxxx