11. Environments & Lean UX
Prototypin
g
Productio
n
node.js
Java
(Rhino)
DustDust
12. Node & JS at PayPal
Moving away from Java architecture
• CSS, HTML and even JS in Java
• Later replaced by JSP for templating
Rapid development & deployment cycles
• Open Source Stack
• Bootstrap for frontend
• JavaScript templating via Dust
• Project Delorean: V8 in PayPal’s C++ stack
• Rhino: JS for PayPal’s Java stack
19. What is Kraken?
A JS suite on top of Node.js and Express
Preconfigured with different best practices
and tools:
• Dust for templates
• LESS as CSS preprocessor
• RequireJS as JS file and module loader
• Grunt for running tasks
• Runtime updates for UI code
24. Makara
Local content bundles
Internationalization support for Node apps
var i18n = require('makara');
var provider = i18n.create(config);
provider.getBundle('index', 'en_US', function (err, bundle) {
var string = bundle.get('key');
});
25. Property files for Makara
index.title=KrakenJS at Front-Trends
index.speaker=Tim Messerschmidt
index.greeting=Ahoi {attendeeName}!
# A list
index.speakers[0]=Lea Verou
index.speakers[1]=Jed Schmidt
Index.speakers[2]=Gunnar Bittersmann
# A map
index.sponsors[PP]=PayPal
index.sponsors[GH]=Mozilla
# And subkeys
index.conference.language=JS
26. Makara in use
Defining multiple values
/locales/US/en/index.properties
• index.greeting=Hello {name}!
/locales/ES/es/index.properties
• index.greeting=Hola {name}!
Accessing keys in templates
<h1>{@pre type="content" key="index.greeting"/}</h1>
27. Lusca
Sensible security settings to prevent
common vulnerabilities
• Cross-site request forgery support
• Clickjacking / X-Frame-Options
• Output escaping against XSS via Dust
• Content Security Policy
28. Lusca configuration
Configuration in middleware.json
"appsec": {
"csrf": true,
"csp": false,
"p3p": false,
"xframe": "SAMEORIGIN”
}
… or using Lusca’s function calls
29. Lusca for CSRF protection
A token is added to the session
automatically
var express = require('express'),
appsec = require('lusca'),
server = express();
server.use(appsec.csrf());
The template needs to return the token:
<input type="hidden" name="_csrf" value="{_csrf}”>
31. Adaro
Brings Dust as default templating engine
Designed to work together with Makara
dustjs.onLoad = function (name, context, callback) {
// Custom file read/processing pipline
callback(err, str);
}
app.engine('dust', dustjs.dust({ cache: false }));
app.set('view engine', 'dust');
35. Kappa
Serves as NPM Proxy
Enables support for private npm repos
Based on npm-delegate
hapi support
Global or local installation
npm install -g kappa
kappa -c config.json
36. Configuring Kraken
Lives in /config/app.json
Development vs. Production environments
• 2nd configuration allowed:
– app-development.json
• Usage of NODE_ENV for environment
nconf for credentials and other variables
38. Getting started
sudo npm install -g generator-kraken
yo kraken
,'""`.
/ _ _
|(@)(@)| Release the Kraken!
) __ (
/,'))((`.
(( (( )) ))
` `)(' /'
39. Setting up your app
app.configure = function configure(nconf, next) {
// Async method run on startup.
next(null);
};
app.requestStart = function requestStart(server) {
// Run before most express middleware has been registered.
};
app.requestBeforeRoute = function requestBeforeRoute(server) {
// Run before any routes have been added.
};
app.requestAfterRoute = function requestAfterRoute(server) {
// Run after all routes have been added.
};
41. Result without JSON
var myModel = require('../models/model');
module.exports = function (app) {
var model = new myModel();
app.get(’/ahoi', function (req, res) {
res.render(’ahoi', model);
});
};
42. Result with JSON
app.get('/ahoiXHR', function (req, res) {
res.format({
json: function () {
res.json(model);
},
html: function () {
res.render(’ahoiXHR', model);
}
});
});
44. Summary
Results of using Node at PayPal
• Teams between 1/3 to 1/10 of Java teams
• Doubled requests per second
• 35% decrease in average response time
• Lines of code shrunk by factor 3 to 5
• Development twice as fast
• JS both on frontend and backend