MEAN Stack Jay Urbain, PhD h6p://expressjs.com/ - - PowerPoint PPT Presentation

MEAN ¡Stack ¡

Jay ¡Urbain, ¡PhD ¡

¡

• h6p://expressjs.com/ ¡

¡

Requirements ¡for ¡a ¡modern ¡web ¡app ¡

• Low ¡latency, ¡fast ¡response ¡Ime ¡
• Minimize ¡page ¡reloads ¡
• Scalability, ¡process ¡as ¡many ¡concurrent ¡requests ¡as ¡possible ¡
• Only ¡load ¡resources ¡when ¡needed ¡(condiIonal ¡loading) ¡
• Services, ¡ReST-­‑API ¡
• Mobile ¡friendly,responsive ¡UI’s ¡
• Automated ¡build ¡for ¡backend ¡and ¡frontend ¡

What ¡is ¡MEAN ¡stack? ¡

“MEAN ¡is ¡a ¡fullstack ¡JavaScript ¡plaWorm ¡for ¡modern ¡web ¡applicaIons” ¡ ¡ – ¡Mean.io ¡ ¡

Who ¡uses ¡MEAN ¡stack? ¡

and ¡many ¡more… ¡

MEAN ¡architecture ¡ Mean.io ¡v2 ¡works ¡with ¡different ¡clients: ¡Angular, ¡React, ¡etc. ¡

Angular ¡

App’s ¡frontend ¡

• Open ¡source, ¡maintained ¡by ¡Google ¡
• Client ¡Side ¡MVC ¡(MVVM) ¡framework ¡
• Modular ¡and ¡extensible ¡component ¡

framework ¡ ¡

• Excellent ¡data ¡bindings ¡
• Mobile ¡+ ¡browser ¡1st ¡ ¡support ¡(> ¡IE8) ¡
• Well ¡documented ¡
• Easy ¡to ¡test ¡
• Started ¡as ¡a ¡side ¡project ¡of ¡Misko ¡Hevery ¡

and ¡Adam ¡Abrons ¡in ¡2009. ¡

h6p://www.youtube.com/watch?v=r1A1VR0ibIQ ¡ ¡

Node.js ¡

Lightweight ¡web ¡server ¡framework ¡

• Released ¡in ¡2009 ¡by ¡Ryan ¡Dahl ¡
• Wri6en ¡in ¡C/C++ ¡
• Built ¡on ¡Google ¡Chrome’s ¡V8 ¡JavaScript ¡engine ¡
• Extremely ¡lightweight ¡and ¡efficient ¡
• What ¡JavaScript ¡has ¡done ¡for ¡the ¡web ¡browser, ¡

Node.js ¡is ¡doing ¡for ¡backend ¡server ¡

• Does ¡module ¡loading ¡and ¡asynchronous ¡IO ¡
• Single ¡threaded, ¡one ¡node ¡process ¡per ¡CPU, ¡

spawns ¡threads ¡for ¡long ¡running ¡tasks ¡

• Easily ¡scalable ¡(just ¡create ¡a ¡cluster) ¡
• Great ¡community ¡and ¡well ¡maintained ¡
• Used ¡with ¡many ¡server-­‑side ¡JS ¡frameworks ¡

Express ¡

Create ¡routes/URL ¡paths ¡(for ¡processing ¡ requests) ¡and ¡API. ¡ ¡

• Simple ¡and ¡flexible ¡web ¡applicaIon ¡

framework ¡for ¡Node.js ¡ ¡

• Abstracts ¡away ¡a ¡lot ¡of ¡low ¡level ¡logic ¡(e.g. ¡

for ¡HTTP ¡requests, ¡SSL ¡etc.) ¡

• Helps ¡organize ¡your ¡Node ¡app ¡into ¡a ¡MVC ¡

structure ¡(server-­‑side) ¡

• Easy ¡to ¡implement ¡ReST ¡API ¡and ¡session ¡

management ¡

• Middleware, ¡rouIng, ¡templaIng, ¡staIc-­‑files, ¡

cookies, ¡mime-­‑types ¡and ¡more ¡

MongoDB ¡

Data ¡store ¡

• A ¡simple, ¡scalable ¡document-­‑oriented ¡noSQL ¡

database ¡

• Open ¡Source, ¡maintained ¡by ¡MongoDB ¡
• JSON ¡like ¡syntax ¡and ¡model ¡persistence ¡
• Key-­‑value ¡stores ¡
• ReplicaIon ¡for ¡high-­‑availability ¡
• Flexible ¡schemas, ¡full ¡Index ¡support, ¡query ¡

selectors, ¡sharding, ¡etc. ¡

MEAN ¡Stack ¡Language ¡and ¡Format ¡ Usage ¡

MEAN ¡Stack ¡Concepts ¡

MEAN ¡Advantages/Disadvantages ¡

• Advantages ¡

– Open ¡Source ¡and ¡Web ¡Standards ¡ – Consistent ¡models ¡across ¡stack ¡(backend ¡to ¡frontend) ¡

• JSON ¡(the ¡data ¡format ¡of ¡the ¡web). ¡

– Use ¡a ¡uniform ¡language ¡throughout ¡your ¡stack ¡

• JavaScript ¡(the ¡language ¡of ¡the ¡web), ¡No ¡conversion ¡needed ¡for ¡

the ¡database ¡ – Very ¡small ¡memory ¡footprint, ¡low ¡processing ¡overhead ¡ – Leverage ¡JavaScript’s ¡popularity ¡ – Huge ¡community ¡

• Disadvantages ¡

– Consistent ¡models ¡across ¡stack ¡increases ¡coupling, ¡reduces ¡separaIon ¡

• f ¡concerns. ¡ ¡

– Is ¡JSON ¡text ¡the ¡most ¡efficient ¡way ¡to ¡store, ¡and ¡exchange ¡data? ¡Do ¡ you ¡want ¡your ¡front ¡end ¡to ¡be ¡dependent ¡on ¡your ¡database ¡schema? ¡ Store ¡large ¡numeric ¡datasets ¡as ¡text??? ¡ – Use ¡of ¡a ¡uniform ¡language ¡throughout ¡your ¡stack ¡– ¡is ¡JS ¡opImal ¡ server-­‑side ¡sooware. ¡Best ¡for ¡relaIonal ¡database ¡queries ¡like ¡SQL? ¡ – Service ¡interfaces ¡can ¡reduce ¡performance, ¡i.e., ¡increase ¡latency ¡ – Mongo ¡really ¡does ¡not ¡support ¡transacIons ¡(record-­‑level) ¡– ¡not ¡true ¡ transacIons, ¡lacks ¡ACID ¡transacIon ¡properIes ¡

JavaScript ¡and ¡Associated ¡Frameworks ¡ increasing ¡popular ¡

Checkout ¡h6p://stackoverflow.com/research/developer-­‑survey-­‑2016 ¡for ¡latest ¡survey ¡results ¡

Express ¡

• Express ¡is ¡a ¡minimal ¡and ¡flexible ¡Node.js ¡web ¡applicaIon ¡

framework ¡that ¡provides ¡a ¡robust ¡set ¡of ¡features ¡for ¡web ¡and ¡ mobile ¡applicaIons. ¡

• Large ¡number ¡of ¡HTTP ¡uIlity ¡methods ¡and ¡middleware ¡

available ¡for ¡creaIng ¡a ¡robust ¡API ¡for ¡your ¡web ¡app. ¡

• Quick ¡and ¡easy. ¡
• Express ¡provides ¡a ¡thin ¡layer ¡of ¡fundamental ¡web ¡applicaIon ¡

features, ¡without ¡obscuring ¡Node.js ¡features ¡that ¡you ¡know ¡ (and ¡love?) ¡

Frameworks ¡built ¡on ¡Express ¡

Several ¡popular ¡Node.js ¡frameworks ¡are ¡built ¡on ¡Express: ¡

• Feathers: ¡Build ¡prototypes ¡in ¡minutes ¡and ¡producIon ¡ready ¡real-­‑Ime ¡apps ¡in ¡days. ¡
• ItemsAPI: ¡Search ¡backend ¡for ¡web ¡and ¡mobile ¡applicaIons ¡built ¡on ¡Express ¡and ¡ElasIcsearch. ¡
• KeystoneJS: ¡Website ¡and ¡API ¡ApplicaIon ¡Framework ¡/ ¡CMS ¡with ¡an ¡auto-­‑generated ¡React.js ¡Admin ¡
• UI. ¡
• Kraken: ¡Secure ¡and ¡scalable ¡layer ¡that ¡extends ¡Express ¡by ¡providing ¡structure ¡and ¡convenIon. ¡
• LEAN-­‑STACK: ¡The ¡Pure ¡JavaScript ¡Stack. ¡
• LoopBack: ¡Highly-­‑extensible, ¡open-­‑source ¡Node.js ¡framework ¡for ¡quickly ¡creaIng ¡dynamic ¡end-­‑to-­‑

end ¡REST ¡APIs. ¡

• MEAN: ¡Opinionated ¡fullstack ¡JavaScript ¡framework ¡that ¡simplifies ¡and ¡accelerates ¡web ¡applicaIon ¡
• development. ¡
• Sails: ¡MVC ¡framework ¡for ¡Node.js ¡for ¡building ¡pracIcal, ¡producIon-­‑ready ¡apps. ¡
• Bo6r: ¡Framework ¡that ¡simplifies ¡building ¡chatbot ¡applicaIons. ¡
• Hydra-­‑Express: ¡Hydra-­‑Express ¡is ¡a ¡light-­‑weight ¡library ¡which ¡facilitates ¡building ¡Node.js ¡

Microservices ¡using ¡ExpressJS. ¡

• Blueprint: ¡Highly-­‑configurable ¡MVC ¡framework ¡for ¡composing ¡producIon-­‑ready ¡services ¡from ¡

reusable ¡components ¡

Express ¡Middleware ¡

Middleware ¡request ¡handler ¡

• RouIng ¡
• Controller ¡
• Models ¡
• Views ¡
• TemplaIng ¡
• Security ¡

function ¡myFunMiddleware(request, ¡response, ¡next) ¡{ ¡ ¡ ¡ ¡ ¡// ¡Do ¡stuff ¡with ¡the ¡request ¡and ¡response. ¡ ¡ ¡ ¡ ¡// ¡When ¡we're ¡all ¡done, ¡call ¡next() ¡to ¡defer ¡ ¡ ¡ ¡ ¡ ¡// ¡to ¡the ¡next ¡middleware. ¡ ¡ ¡ ¡ ¡next(); ¡ } ¡

Middleware ¡framework ¡

var ¡connect ¡= ¡require("connect"); ¡ var ¡http ¡ ¡ ¡ ¡= ¡require("http"); ¡ var ¡app ¡ ¡ ¡ ¡ ¡= ¡connect(); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ http.createServer(app).listen(1337); ¡ ¡// ¡Add ¡some ¡middleware ¡ ¡app.use(connect.logger()); ¡ ¡app.use(connect.Security); ¡ ¡app.use(connect.Routing); ¡ ¡... ¡

Node-­‑based ¡HTTP ¡Simple ¡Server ¡ (without ¡using ¡Express) ¡

// ¡Require ¡what ¡we ¡need ¡ var ¡http ¡= ¡require("http"); ¡ ¡ // ¡Build ¡the ¡server ¡ var ¡app ¡= ¡http.createServer( ¡ ¡function ¡(request, ¡response) ¡{ ¡ ¡ ¡response.writeHead(200, ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡"Content-­‑Type": ¡"text/plain" ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡response.end("Hello ¡world!"); ¡ ¡ ¡ ¡ ¡}); ¡ ¡ // ¡Start ¡that ¡server ¡ app.listen(1337, ¡"localhost"); ¡ console.log("Server ¡running ¡at ¡http://localhost:1337/"); ¡

RouIng ¡requests ¡with ¡Node ¡

var ¡http ¡= ¡require("http"); ¡ http.createServer(function ¡(req, ¡res) ¡{ ¡ ¡

¡ ¡ ¡ ¡ ¡ ¡// ¡Homepage ¡ ¡ ¡ ¡ ¡ ¡ ¡if ¡(req.url ¡== ¡"/") ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.writeHead(200, ¡{ ¡"Content-­‑Type": ¡"text/html" ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.end("Welcome ¡to ¡the ¡homepage!"); ¡ ¡ ¡ ¡ ¡ ¡ ¡}// ¡About ¡page ¡ ¡ ¡ ¡ ¡ ¡ ¡else ¡if ¡(req.url ¡== ¡"/about") ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.writeHead(200, ¡{ ¡"Content-­‑Type": ¡"text/html" ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.end("Welcome ¡to ¡the ¡about ¡page!"); ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡ ¡ ¡ ¡ ¡ ¡ ¡// ¡404'd! ¡ ¡ ¡ ¡ ¡ ¡ ¡else ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.writeHead(404, ¡{ ¡"Content-­‑Type": ¡"text/plain" ¡}); ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.end("404 ¡error! ¡File ¡not ¡found."); ¡ ¡ ¡ ¡ ¡ ¡ ¡} ¡

¡ }).listen(1337, ¡"localhost"); ¡

Basic ¡rouIng ¡

• RouIng ¡refers ¡to ¡determining ¡how ¡an ¡applicaIon ¡responds ¡to ¡a ¡client ¡

request ¡to ¡a ¡parIcular ¡endpoint, ¡which ¡is ¡a ¡URI ¡(or ¡path) ¡and ¡a ¡specific ¡ HTTP ¡request ¡method ¡(GET, ¡POST, ¡and ¡so ¡on). ¡

• Each ¡route ¡can ¡have ¡one ¡or ¡more ¡handler ¡funcIons, ¡which ¡are ¡executed ¡

when ¡the ¡route ¡is ¡matched. ¡ Route ¡definiIon ¡takes ¡the ¡following ¡structure: ¡

• app.METHOD(PATH, ¡HANDLER) ¡

Where: ¡

• app ¡is ¡an ¡instance ¡of ¡express. ¡
• METHOD ¡is ¡an ¡HTTP ¡request ¡method, ¡in ¡lowercase. ¡
• PATH ¡is ¡a ¡path ¡on ¡the ¡server. ¡
• HANDLER ¡is ¡the ¡funcIon ¡executed ¡when ¡the ¡route ¡is ¡matched. ¡

…RouIng ¡ ¡

• Respond ¡with ¡Hello ¡World! ¡on ¡the ¡homepage: ¡

app.get('/', ¡funcIon ¡(req, ¡res) ¡{ ¡ ¡ ¡res.send('Hello ¡World!') ¡ }) ¡ ¡

• Respond ¡to ¡POST ¡request ¡on ¡the ¡root ¡route ¡(/), ¡the ¡applicaIon’s ¡home ¡page: ¡

app.post('/', ¡funcIon ¡(req, ¡res) ¡{ ¡ ¡ ¡res.send('Got ¡a ¡POST ¡request') ¡ }) ¡ ¡

• Respond ¡to ¡a ¡PUT ¡request ¡to ¡the ¡/user ¡route: ¡

app.put('/user', ¡funcIon ¡(req, ¡res) ¡{ ¡ ¡ ¡res.send('Got ¡a ¡PUT ¡request ¡at ¡/user') ¡ }) ¡ ¡

• Respond ¡to ¡a ¡DELETE ¡request ¡to ¡the ¡/user ¡route: ¡

app.delete('/user', ¡funcIon ¡(req, ¡res) ¡{ ¡ ¡ ¡res.send('Got ¡a ¡DELETE ¡request ¡at ¡/user') ¡ }) ¡ h6ps://expressjs.com/en/guide/rouIng.html ¡

Express ¡RouIng ¡

app.get('/users/:id?', ¡function ¡(req, ¡res, ¡next) ¡ { ¡ ¡ ¡ ¡ ¡var ¡id ¡= ¡req.params.id; ¡ ¡ ¡ ¡ ¡if ¡(id) ¡{ ¡ ¡ ¡ ¡ ¡// ¡do ¡something ¡ ¡ ¡ ¡ ¡} ¡else ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡next(); ¡ ¡ ¡ ¡ ¡} ¡ }); ¡ { ¡ ¡ ¡ ¡ ¡ ¡path: ¡'/user/:id?', ¡ ¡ ¡ ¡ ¡method: ¡'all' ¡| ¡'get' ¡| ¡'post' ¡| ¡'put' ¡| ¡'delete', ¡ ¡ ¡ ¡ ¡callbacks: ¡[ ¡[Function] ¡], ¡ ¡ ¡ ¡ ¡keys: ¡[ ¡{ ¡name: ¡'id', ¡optional: ¡true ¡} ¡], ¡ ¡ ¡ ¡ ¡regexp: ¡/^\/user(?:\/([^\/]+?))?\/?$/i, ¡ ¡ ¡ ¡ ¡params: ¡[ ¡id: ¡'12' ¡] ¡ ¡ } ¡

RouIng ¡and ¡Module ¡

// ¡home.js ¡file ¡in ¡Routing ¡folder. ¡ module.exports ¡= ¡function ¡(app) ¡{ ¡ ¡ ¡ ¡ ¡// ¡home ¡page ¡ ¡ ¡ ¡ ¡app.get('/', ¡function ¡(req, ¡res) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.render('index', ¡{ ¡title: ¡'Home ¡Page. ¡ ¡' ¡}) ¡ ¡ ¡ ¡ ¡}); ¡ ¡ ¡ ¡ ¡// ¡about ¡page ¡ ¡ ¡ ¡ ¡app.get('/about', ¡function ¡(req, ¡res) ¡{ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡ ¡res.render('about', ¡{ ¡title: ¡'About ¡Me. ¡ ¡' ¡}) ¡ ¡ ¡ ¡ ¡}); ¡ } ¡ var ¡express ¡= ¡require("express"); ¡ var ¡http ¡ ¡ ¡ ¡= ¡require("http"); ¡ var ¡app ¡ ¡ ¡ ¡ ¡= ¡express(); ¡ ¡ // ¡Include ¡a ¡route ¡file ¡require('./ routes/home')(app); ¡ ¡ http.createServer(app).listen(1337); ¡

HTTP ¡Methods ¡+ ¡Parsing ¡

app.use( ¡express.bodyParser() ¡); ¡

app.get(), ¡app.post(), ¡app.put() ¡& ¡app.delete() ¡ ¡ By ¡default ¡Express ¡does ¡not ¡know ¡what ¡to ¡do ¡with ¡this ¡request ¡body, ¡ so ¡we ¡should ¡add ¡the ¡bodyParser ¡middleware. ¡ ¡ bodyParser ¡will ¡parse ¡applica.on/x-­‑www-­‑form-­‑urlencoded ¡and ¡ applica.on/json ¡request ¡bodies ¡and ¡place ¡the ¡variables ¡in ¡req.body ¡

Install ¡

$ ¡mkdir ¡myapp ¡ ¡ $ ¡cd ¡myapp ¡ $ ¡npm ¡init ¡ ¡ entry ¡point: ¡(index.js) ¡ ¡ ¡myapp.js ¡ $ ¡npm ¡install ¡express ¡-­‑-­‑save ¡ ¡

Basic ¡RouIng ¡

¡ ¡ // ¡app.js ¡ ¡ ¡ var ¡express ¡= ¡require('express') ¡ var ¡app ¡= ¡express() ¡ ¡ ¡ app.get('/', ¡funcIon ¡(req, ¡res) ¡{ ¡ ¡ ¡res.send('Hello ¡World!') ¡ }) ¡ ¡ ¡ app.listen(3000, ¡funcIon ¡() ¡{ ¡ ¡ ¡console.log('Example ¡app ¡listening ¡on ¡port ¡3000!') ¡ }) ¡

Express ¡applicaIon ¡generator ¡

• Use ¡the ¡applicaIon ¡generator ¡tool, ¡express-­‑generator, ¡to ¡quickly ¡create ¡an ¡

applicaIon ¡skeleton. ¡

The ¡following ¡creates ¡an ¡Express ¡app ¡named ¡myapp. ¡The ¡app ¡will ¡ be ¡created ¡in ¡a ¡folder ¡named ¡myapp ¡in ¡the ¡current ¡working ¡ directory ¡and ¡the ¡view ¡engine ¡will ¡be ¡set ¡to ¡Pug: ¡

Pug ¡is ¡a ¡template ¡engine ¡ implemented ¡with ¡JavaScript ¡for ¡ Node.js ¡and ¡browsers ¡

Install ¡dependencies ¡

• On ¡MacOS ¡or ¡Linux ¡
• On ¡Windows ¡

Load ¡h6p://localhost:3000/ ¡in ¡your ¡browser ¡to ¡access ¡the ¡app. ¡ ¡ The ¡generated ¡app ¡has ¡the ¡following ¡directory ¡structure: ¡