Developing web-apps like it's 2013

Developing web-
apps like it’s
2013
a case-study of using node.js to build
entreprise applications

1

Who?
Laurent Van Basselaere
@Laurent_VB

I do stuff with code
at Arhs Developments

2

ARHS Developments

10 years, 300 people
Consulting & fixed price projects
Software (Java)
Business Intelligence

3

MS Access? SRSLY?
MS Access
Multiple copies
Single user
No remote use
Lame

7

Fatman FTW
MS Access Browser
Multiple versions Centralized
Single user Unlimited users
No remote use Everywhere
Lame Awesome

8

We wrote a web-app

9

Fatman tech stack
Bootstrap async
Knockout underscore
Express moment
Node
Mongoose
MongoDB

10

Elegant MongoDB object modeling for
Node.js

ORM seemed desirable
Clean object model to use in app code

11

Schema
var mongoose = require(‘mongoose’);
mongoose.connect(‘localhost’, ‘fatman’);

var ProjectSchema = new mongoose.Schema({
id : String
, name : String
, users : [String]
});

var Project = mongoose.model('Project', ProjectSchema);

12

CREATE/EDIT
var project = new Project({
id: ‘AKCT’
, name: ‘GOCA Newsoft AKCT’
, users: [‘vanbasla’, ‘grosjech’]
});

project.save(function (err){
//… callback after save
});

13

RETRIEVE
// find project by id
Project.where(‘id’, ‘AKCT’)
.findOne(function(err, project) {
// do something with search result
});

// find my projects
Project.find({‘users’: username})
.exec(function(err, projects){
// do something with search results
});

14

MORE Schema
function trim(value){
return value ? value.trim() : value;
}
function lessThan80chars(value){
return value.length <= 80;
}

var ProjectSchema = new mongoose.Schema({
id : {type: String, required: true, unique: true}
, name : {type: String, set: trim, validate: [
lessThan80chars,
'Value too long. Max 80 characters.']}});

15

Advanced
// statics
ProjectSchema.statics.findById = function(projectId, cb){
Project.where('id', projectId).findOne(cb);
};

// methods
ProjectSchema.methods.issueTrackerEnabled = function() {
return this.issueTracker != null;
};

// middleware
ProjectCaseSchema.pre(‘remove’, function(next) {
// do something when a Project is deleted
next();
});

16

In fatman
We use
setters
+
pre-save middleware
to keep history of edits.

17

In fatman
// creates a setter for field
function setter(field) {
return function setField(newValue) {
this._oldValues = this._oldValues || {};
this._oldValues[field] = this[field];
return newValue;
}
}

var TestCaseSchema = new Schema({
id: {type:Number,index:true},
description: {type:String, set: setter('description')},
history: [Schema.Types.Mixed]
});

18

In fatman
// Populate history before save.
TestCaseSchema.pre('save', function (next) {
var self = this
, oldValues = this._oldValues || {};

delete this._oldValues;

this.modifiedPaths.forEach(function (field) {
if (field in oldValues) {
self.history.push({
‘old': oldValues[field],
‘new’: self[field]
});
}
});

next();
});

19

Express is a minimal and flexible
node.js web application framework.

Simple and modular
Node de-facto standard

Hello Express
var express = require('express'),
consolidate = require('consolidate');

// create an express app
var app = express();

// configure view engine
app.engine('html', consolidate.handlebars);
app.set('views', __dirname + '/views');

// configure a route with an url parameter
app.get('/hello/:name', hello);

function hello(req, res, next){
res.render('hello.html', {
'name' : req.params.name
});
}

app.listen(1337);
console.log('Listening on port 1337');

controller
function list (req, res, next){
Project.findById(req.params.projectId, function(err, project){
if (err) return next(err);

TestCase.find({‘project’: project}, function(err, testcases){

res.render(‘testcases.html’, {
‘project’: project,
‘testcases’: testcases
});
});
});
}

controller
function show (req, res, next){

TestCase.findOne({‘project’:project, ‘id’:id}, function(err, tc){

res.render(‘testcase.html’, {
‘project’: project,
‘testcase’: tc
});
});
});
}

controller
function save (req, res, next){

var tc = new TestCase(req.body);
tc.project = project;
tc.save(function(err, tc){

// redirect after post
res.redirect(req.url);
});
});
}

MIDDLEWARE
function loadProject(req, res, next){

res.locals.project = project;
next();
});
}

// before all routes requiring a project
app.all('/:projectId/*', loadProject);

BETTER
function list (req, res, next){
var project = res.locals.project;
TestCase.find({‘project’:project}, function(err, testcases){

res.render(‘testcases.html’, {
‘testcases’: testcases
});
});
}

BETTer
function show (req, res, next){
var project = res.locals.project;
TestCase.findOne({‘project’:project, ‘id’:id}, function(err, tc){

res.render(‘testcase.html’, {
‘testcase’: tc
});
});
}

BETTer
function save (req, res, next){
var tc = new TestCase(req.body);
tc.project = res.locals.project;
tc.save(function(err){

res.redirect(req.url);
});
}

pyramid of doom
function search (req, res, next){
Project.findById(projectId, function(err, project){

TestPlan.findByIdentifier(project, testPlanId, function(err, testPlan) {

var tags = getTagsFromRequest(req);
TestCase.findByTag(testPlan, tags, function(err, tagQuery, testCases){

TestCase.countTags(tagQuery, function(err, tagsResult) {

res.render(‘search’, {
‘testCases’ : testCases,
‘tagsResult’ : tagsResult,
‘project’ : project,
‘testPlan’ : testPlan,
‘tags’ : tags
});
});
});
});
});
}

Async.js

Async is a utility module which provides
straight-forward, powerful functions for
working with asynchronous JavaScript

pyramid NO MOREAsync.js

function search (req, res, next){
async.waterfall([
function(cb){
Project.findById(projectId, cb);
},
function(cb, project){
res.locals.project = project;
TestPlan.findByIdentifier(project, testPlanId, cb);
},
function(cb, testPlan){
res.locals.testPlan = testPlan;
var tags = res.locals.tags = getTagsFromRequest(req);
TestCase.findByTag(testPlan, tags, cb);
},
function(cb, tagQuery, testCases){
res.locals.testCases = testCases;
TestCase.countTags(tagQuery, cb);
}
], function(err, tagsResult){
res.render(‘search’, tagsResult);
});
}

MORE async Async.js

var ids = [‘AKCT’, ‘FATMAN’];
var projects = [];

ids.forEach(function(id){
Project.findById(id, function(err, project){
projects.push(project);
});
});
res.render(‘projects’, {‘project’ : projects});

WRONG

MORE async Async.js

var ids = [‘AKCT’, ‘FATMAN’];
var projects = [];

async.each(ids, function(id, next){
Project.findById(id, function(err, project){
projects.push(project);
next();
})
}, function(err){
res.render(‘projects’, {‘projects’: projects});
});

MORE async Async.js

Collections Control flow

each series
map parallel
filter whilst
reject doWhilst
reduce until
detect doUntil
sortBy waterfall
… …

FATMAN
60 days dev
6 months prod
12 projects (2 to 10 users)

Developing web-apps like it's 2013

More Related Content

What's hot (20)

Similar to Developing web-apps like it's 2013 (20)

Recently uploaded (20)

Developing web-apps like it's 2013