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 ¡ of ¡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(); ¡ ¡ ¡ ¡ ¡ ¡// ¡Add ¡some ¡middleware ¡ ¡ ¡app.use(connect.logger()); ¡ ¡ ¡app.use(connect.Security); ¡ ¡ ¡app.use(connect.Routing); ¡ ¡ ¡... ¡ ¡ ¡ http.createServer(app).listen(1337); ¡