Slide 1

Slide 1 text

Intro to node.js Web Apps #SKGNode

Slide 2

Slide 2 text

#SKGNode Core Concepts

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

#SKGNode Every Callback is a Middleware Middleware

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

#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)

Slide 10

Slide 10 text

#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

Slide 11

Slide 11 text

#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)

Slide 12

Slide 12 text

#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

Slide 13

Slide 13 text

#SKGNode Working with Middleware

Slide 14

Slide 14 text

#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(); }); });

Slide 15

Slide 15 text

#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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

#SKGNode Routing

Slide 18

Slide 18 text

#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)

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

#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/”

Slide 21

Slide 21 text

#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

Slide 22

Slide 22 text

#SKGNode Views

Slide 23

Slide 23 text

#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

Slide 24

Slide 24 text

#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}

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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