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

Cbb9cafe03e785d80a9aa973c5e43c44?s=128

Thanos Polychronakis

June 12, 2014
Tweet

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