Intro to Node Web Apps

An introduction to building Web Applications in Node.js

Transcript

1. Intro to node.js Web Apps #SKGNode
2. #SKGNode Core Concepts
3. #SKGNode Why Node? • Asynchronous • Robust • Blazingly FAST • Javascript / Browserify • Largest growth year over year • Largest frontend tool belt
4. #SKGNode Philosophy • No Frameworks • Small reusable libraries • NPM • Open Source
5. #SKGNode A Typical Node Web App Your App Core HTTP ExpressJS
6. #SKGNode Quick Start var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('Hello World'); }); app.listen(3000);
7. #SKGNode Every Callback is a Middleware Middleware
8. #SKGNode Anatomy of a Middleware app.get(‘/’, function(req, res, next) {/*.. */}); Request Object Response Object Pass Control
9. #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)
10. #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
11. #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)
12. #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
13. #SKGNode Working with Middleware
14. #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(); }); });
15. #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
16. #SKGNode Express maintained Middleware • body-parser • compression • cookie-parser • csurf (CSRF) • errorhandler • express-session https://github.com/senchalabs/connect#middleware
17. #SKGNode Routing
18. #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)
19. #SKGNode app.get([string|Regex], [Function|Array], ...args) app.get(‘/’, showFrontPage); app.get(‘/’, fn1, fn2); app.get(‘/’, [fn1, fn2]); HTTP Verb Syntax
20. #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/”
21. #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
22. #SKGNode Views
23. #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
24. #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}
25. Thank you! Thanasis Polychronakis @thanpolas thanpolas@gmail.com #SKGNode
26. Questions? Thanasis Polychronakis @thanpolas thanpolas@gmail.com #SKGNode