Intro to node.js web apps

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 AppCore HTTP ExpressJS

#SKGNode

Quick Start

var express = require('express');

var app = express();

app.get('/', function(req, res){

res.send('Hello World');

});

app.listen(3000);

#SKGNodeEvery Callback is a Middleware

Middleware

#SKGNode

Anatomy of a Middleware

app.get(‘/’, function(req, res, next) {/*..*/});

Request Object

Response Object

PassControl

#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@[email protected] #SKGNode

Questions?Thanasis Polychronakis@[email protected] #SKGNode