Intro to node.js Web Apps #SKGNode

#SKGNode Core Concepts

#SKGNode Why Node? ● Asynchronous ● Robust ● Blazingly FAST ● Javascript / Browserify ● Largest growth year over year ● Largest frontend tool belt

#SKGNode Philosophy ● No Frameworks ● Small reusable libraries ● NPM ● Open Source

#SKGNode A Typical Node Web App Your App Core HTTP ExpressJS

#SKGNode Quick Start var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000);

#SKGNode Every Callback is a Middleware Middleware

#SKGNode Anatomy of a Middleware app.get(‘/’, function(req, res, next) {/*.. */}); Request Object Response Object Pass Control

#SKGNode The Request Object ● Instantiates per request ● Carries all request information ○ Headers ■ Cookies ○ Request route ○ Parameters (/user/:id), Body, Query ● Propagates Information (i.e. session, auth)

#SKGNode The Response Object ● Instantiates per request ● Carries all respond methods ● Can be build iteratively (CORS, HTTP Code) ● Can terminate a Request ○ .render(), .send(), .end() ○ No ‘next()’ invocation is required

#SKGNode The Flow Control next() ● Express depends on Middleware arity ● If omitted the middleware is Synchronous ● If truthy value is passed fails the request ○ next(‘no go’); ● Invoke once -and only once- to go to next ● If middleware is Terminal do not include it (i.e. final controller call that renders)

#SKGNode The final route will never be reached! app.use(express.static(__dirname + '/public')); app.use(logger()); app.use(function(req, res){ res.send('Hello'); }); app.get(‘/’, function(req, res){ res.send('World'); }); Sequence MATTERS Static assets will get served without generating a Log

#SKGNode Working with Middleware

#SKGNode Augmenting the Request app.use(function(req, res, next) { redis.get(req.cookies.id, function(err, result) { if (err) { // bail out next(err); return; } req.user = result; // augmentation next(); }); });

#SKGNode // Protect an auth only route app.get(‘/profile’, function(req, res, next) { if (!req.user) { res.status(401).send(‘No go dude’); return; // .send() is a terminal action // no need to call next }); next(); // Client is authed, go on... }); Leveraging Augmentation

#SKGNode Express maintained Middleware ● body-parser ● compression ● cookie-parser ● csurf (CSRF) ● errorhandler ● express-session https://github.com/senchalabs/connect#middleware

#SKGNode Routing

#SKGNode HTTP Verbs ● app.use(fn) Catches all! ● app.all(route, fn) Catches all! ● app.get(route, fn) ● app.put(route, fn) ● app.post(route, fn) ● app.delete(route, fn) ● app.head(route, fn)

#SKGNode app.get([string|Regex], [Function|Array], ...args) app.get(‘/’, showFrontPage); app.get(‘/’, fn1, fn2); app.get(‘/’, [fn1, fn2]); HTTP Verb Syntax

#SKGNode Routing Options RegEx /^\/commits\/ (\w+)/ “/commits/sdjeo34” → req.params[0] === ‘sdjeo34’ Plain String ‘/’ Triggers on “/”, “/?id=12”, etc Parametric String ‘/user/:id’ Triggers on “/user/thanpolas” → req.params.id === ‘thanpolas’ Multi Parametric String ‘/user/:network/:id’ Triggers on “/user/skgNode/thanpolas” → req.params.network Catch All ‘/api/*’ Catches all routes under “/api/”

#SKGNode Routing Best Practices ● Routing is where the buck stops at ● Decouple your routes from your core app ● Study the app.route() pattern ● At the end, there can only be a 404

#SKGNode Views

#SKGNode Defining Paths & Engine app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); Check out all available template engines: https://github.com/visionmedia/express/wiki#template-engines

#SKGNode Rendering a View /* GET home page. */ router.get('/', function(req, res) { // no next required res.render('index', { title: ‘SKGNode’ }); }); extends layout block content h1= title p Welcome to #{title}

Thank you! Thanasis Polychronakis @thanpolas [email protected] #SKGNode

Questions? Thanasis Polychronakis @thanpolas [email protected] #SKGNode