intro to node.js web apps
Post on 18-Oct-2014
354 views
DESCRIPTION
An introduction to node.js web applications, best suited for people just entering the world of node.jsTRANSCRIPT
![Page 1: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/1.jpg)
Intro to node.js Web Apps#SKGNode
![Page 2: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/2.jpg)
#SKGNode
Core Concepts
![Page 3: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/3.jpg)
#SKGNode
Why Node?
● Asynchronous● Robust● Blazingly FAST● Javascript / Browserify● Largest growth year over year● Largest frontend tool belt
![Page 4: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/4.jpg)
#SKGNode
Philosophy
● No Frameworks
● Small reusable libraries
● NPM
● Open Source
![Page 5: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/5.jpg)
#SKGNode
A Typical Node Web App
Your AppCore HTTP ExpressJS
![Page 6: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/6.jpg)
#SKGNode
Quick Start
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('Hello World');
});
app.listen(3000);
![Page 7: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/7.jpg)
#SKGNodeEvery Callback is a Middleware
Middleware
![Page 8: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/8.jpg)
#SKGNode
Anatomy of a Middleware
app.get(‘/’, function(req, res, next) {/*..*/});
Request Object
Response Object
PassControl
![Page 9: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/9.jpg)
#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)
![Page 10: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/10.jpg)
#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
![Page 11: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/11.jpg)
#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)
![Page 12: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/12.jpg)
#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
![Page 13: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/13.jpg)
#SKGNode
Working with Middleware
![Page 14: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/14.jpg)
#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();
});
});
![Page 15: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/15.jpg)
#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
![Page 16: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/16.jpg)
#SKGNode
Express maintained Middleware
● body-parser● compression● cookie-parser● csurf (CSRF)● errorhandler● express-session
https://github.com/senchalabs/connect#middleware
![Page 17: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/17.jpg)
#SKGNode
Routing
![Page 18: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/18.jpg)
#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)
![Page 19: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/19.jpg)
#SKGNode
app.get([string|Regex], [Function|Array], ...args)
app.get(‘/’, showFrontPage);app.get(‘/’, fn1, fn2);app.get(‘/’, [fn1, fn2]);
HTTP Verb Syntax
![Page 20: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/20.jpg)
#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/”
![Page 21: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/21.jpg)
#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
![Page 22: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/22.jpg)
#SKGNode
Views
![Page 23: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/23.jpg)
#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
![Page 24: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/24.jpg)
#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}
![Page 25: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/25.jpg)
Thank you!Thanasis Polychronakis@[email protected] #SKGNode
![Page 26: Intro to node.js web apps](https://reader034.vdocuments.site/reader034/viewer/2022051322/544286a7afaf9f0e118b468d/html5/thumbnails/26.jpg)
Questions?Thanasis Polychronakis@[email protected] #SKGNode