Kraken

krakenjs
Tim Messerschmidt
@SeraAndroid
Front-Trends Warsaw, 2014

Application stacks at PayPal
C++ Java

Environments & Lean UX
Prototyping Production

Moving away from
good old Java

Rapid deployment
and prototyping

Application stacks at PayPal
C++
XML
Java
JSP
Node
JS

Environments & Lean UX
Prototypin
g
Productio
n
node.js
Java
(Rhino)
DustDust

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

New stack at PayPal
C++ Java Node
Dust

Performance Java stack
paypal-engineering.com/2013/11/22/node-js-at-paypal

Performance Node stack
paypal-engineering.com/2013/11/22/node-js-at-paypal

Using npm at PayPal
Enables standard services like
• Monitoring
• Logging
• Security
• Analytics
• Authentication
• Packaging

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

Project structure
Opinionated about separation of logic and
presentation
• /config
• /controllers
• /models
• /public/templates
• /locales
• /tests

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');
});

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

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>

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

Lusca configuration
Configuration in middleware.json
"appsec": {
"csrf": true,
"csp": false,
"p3p": false,
"xframe": "SAMEORIGIN”
}
… or using Lusca’s function calls

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}”>

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');

Templating with Dust
Layout
<html>
<body>
{>"{_main}"/}
</body>
</html>
Content page as partial
<div>Hello!</div>
dust.render(’partial', { layout: ’template' }, ...);

Sections
{#modules}
{name}, {description}{~n}
{/modules}
View context
{
modules: [
{ name: “Makara”, description: “i18n” },
{ name: “Lusca”, description: “security settings” }
]
}

Conditionals
{#modules}
{name}, {description}{~n}
{:else}
No modules supported :(
{/modules}
{?modules}
modules exists!
{/modules}
{^modules}
No modules!
{/modules}

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

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

Getting started
sudo npm install -g generator-kraken
yo kraken
,'""`.
/ _ _
|(@)(@)| Release the Kraken!
) __ (
/,'))((`.
(( (( )) ))
` `)(' /'

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.
};

Generation
yo kraken:controller myController
Respond to JSON requests? (Y/n)
create controllers/myController.js
create test/myController.js

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);
});
};

Result with JSON
app.get('/ahoiXHR', function (req, res) {
res.format({
json: function () {
res.json(model);
},
html: function () {
res.render(’ahoiXHR', model);
}
});
});

Models
yo kraken:model unicorn
create models/unicorn.js
module.exports = function UnicornModel() {
return {
name: ‘Charlie’
};
};

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

Thanks!
Tim Messerschmidt
@SeraAndroid
tmesserschmidt@paypal.com
slideshare.com/paypal

Kraken

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (15)

Similar to Kraken

Similar to Kraken (20)

More from PayPal

More from PayPal (17)

Recently uploaded

Recently uploaded (20)

Kraken