Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to Node Web Apps

Intro to Node Web Apps

An introduction to building Web Applications in Node.js


Thanos Polychronakis

June 12, 2014

More Decks by Thanos Polychronakis

Other Decks in Programming


  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

  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