Intro to Express 4.x

A Node.js Web Framework

Created by @ajlopez

https://github.com/ajlopez/Talks/ExpressIntro

Using reveal.js

JavaScript Everywhere, The next big thing!!

since sliced bread

http://www.toaster.org/slicingbread.html

Agenda

  • Web Development with Node.js
  • Express and Middleware
  • Express Generator
  • Router
  • Controllers
  • Views and Template Languages
  • Persistence
  • APIs and JSON
  • Examples

Node.js

http://nodejs.org/

Node.js

  • JavaScript Runtime
  • Based on Google V8 JavaScript Engine
  • One thread for JavaScript
  • Asynchronous operations via LibUv
  • Native Modules
  • Module Ecosystem
## A Web Server ```js var http = require('http'); http.createServer(function (req, res) { res.writeHeader(200, {'Content-type': 'text/plain'}); res.write('Hello '); res.end('World'); }).listen(8000); ```

NPM

https://www.npmjs.org/

NPM

  • Node Package Manager
  • Description in package.json
  • Install packages in node_modules local folder
  • Tree structure
  • Local vs Global install

Express

http://expressjs.com/

Express

  • Web Framework
  • Latests Version: 4.x
  • Minimalist
  • Middleware
  • MVC routing and views

Minimal Example

## Minimal package.json ```json { "name": "hello-world", "description": "hello world test app", "version": "0.0.1", "private": true, "dependencies": { "express": "4.x" } } ``` Then ``` npm install ```
## Server Code app.js ```js var express = require('express'); var app = express(); app.get('/hello.txt', function(req, res){ res.send('Hello World'); }); var server = app.listen(3000, function() { console.log('Listening on port %d', server.address().port); }); ``` Then ``` node app ``` Then ``` http://localhost:3000/hello.txt ```

Express Generator

## Express Generator ``` npm install -g express-generator ``` ``` Usage: express [options] Options: -h, --help output usage information -V, --version output the version number -e, --ejs add ejs engine support (defaults to jade) -H, --hogan add hogan.js engine support -c, --css add stylesheet support (less|stylus|compass) (defaults to plain css) -f, --force force on non-empty directory ``` ``` express --css stylus myapp cd myapp npm install npm start ```

Express Elements

## Middleware ```js app.use(function (req, res, next) { // ... }); ``` Example ```js app.use('/api', function(req, res, next){ var key = req.query['api-key']; // key isnt present if (!key) return next(error(400, 'api key required')); // key is invalid if (!~apiKeys.indexOf(key)) return next(error(401, 'invalid api key')); // all good, store req.key for route access req.key = key; next(); }); ```
## Router A router module sample ```js var express = require('express'); var router = express.Router(); router.get('/', controller.index); router.get('/new', controller.create); router.post('/new', controller.insert); router.get('/:id', controller.view); router.get('/:id/edit', controller.edit); router.post('/:id/edit', controller.update); router.get('/:id/remove', controller.remove); module.exports = router; ``` Usage ```js app.use('/customer', customerrouter); ```
## Action in Controller ```js function index(req, res) { repository.findAll(function (err, items) { if (err) res.render('error', { error: err }); else res.render('customerlist', { title: 'Customers', items: items }); }); } ```
## View (in ejs) ```html <% include header %> <div class="row btn-group"> <a class="btn btn-primary" href="/customers/new">New Customer...</a> </div> <div class="row"> <table class="table-striped table-bordered"> <tr> <th>&nbsp;</th> <th>Name</th> <th>Address</th> </tr> <% items.forEach(function (item) { %> <tr> <td><a href="/customers/<%= item._id %>">View...</a></td> <td><%= item.name %></td> <td><%= item.address %></td> </tr> <% }); %> </table> </div> <% include footer %> ```
## Returning JSON ```js function getTeam(req, res) { var id = getId(req.params.id); service.getTeam(id, function (err, items) { res.send(items); }); } ```

Resources

Examples

https://github.com/strongloop/express https://github.com/ajlopez/ExpressSamples https://github.com/liquid-co-ops/liqueed https://github.com/ccoenraets/nodecellar RESTful services with jQuery, PHP and the Slim Framework https://github.com/ccoenraets/wine-cellar-php

Boilerplates

https://github.com/Traackr/chuck-node http://kroltech.com/2013/12/boilerplate-web-app-using-backbone-js-expressjs-node-js-mongodb/

To Explore

http://geddyjs.org/ http://krakenjs.com/ https://github.com/node-red/node-red IBM Node Red KoaJS

The End

BY Angel 'Java' Lopez / www.ajlopez.com / @ajlopez