Kraken at DevCon TLV

40
krakenjs Tim Messerschmidt @SeraAndroid DevCon Tel Aviv, 2014

description

This presentation was being held at DevCon TLV 2014. It covers PayPal's recent move to NodeJS and it's Open Source suite called krakenJS.

Transcript of Kraken at DevCon TLV

Page 1: Kraken at DevCon TLV

krakenjs! Tim Messerschmidt @SeraAndroid DevCon Tel Aviv, 2014

Page 2: Kraken at DevCon TLV

A story of!technical debt

Page 3: Kraken at DevCon TLV

Our Traditional Application Stacks

C++ Java

Page 4: Kraken at DevCon TLV
Page 5: Kraken at DevCon TLV
Page 6: Kraken at DevCon TLV

Environments & Lean UX

Prototyping Production

Page 7: Kraken at DevCon TLV

The Application Stack

C++ XML

Java JSP

Node JS

Page 8: Kraken at DevCon TLV

Moving away from good old Java

Page 9: Kraken at DevCon TLV

A big push for using Open Source within the company

Page 10: Kraken at DevCon TLV

Rapid development and deployment

Page 11: Kraken at DevCon TLV

Environments & Lean UX

Prototyping Production

Node.js Java (Rhino)

Dust  Dust  

Page 12: Kraken at DevCon TLV

Trying out Node in Production

Page 13: Kraken at DevCon TLV

New stack at PayPal

C++ Java Node

Dust

Page 14: Kraken at DevCon TLV

Performance Java stack

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

Page 15: Kraken at DevCon TLV

Performance Node stack

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

Page 16: Kraken at DevCon TLV

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

Page 17: Kraken at DevCon TLV

Release the!Kraken!

Page 18: Kraken at DevCon TLV

What is Kraken? A JS suite on top of 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

Page 19: Kraken at DevCon TLV

But why?!

Page 20: Kraken at DevCon TLV

Project structure Opinionated about separation of logic and presentation

•  /config •  /controllers •  /models •  /public/templates •  /locales •  /tests

Page 21: Kraken at DevCon TLV

Lusca

Kappa Adaro

Makara

Page 22: Kraken at DevCon TLV

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

Page 23: Kraken at DevCon TLV

Property files for Makara index.title=KrakenJS at DevConindex.speaker=Tim Messerschmidtindex.greeting=Ahoi {attendeeName}!# A listindex.speakers[0]=Mitchell Hashimotoindex.speakers[1]=Arthur ViegersIndex.speakers[2]=Johnny Miller# A mapindex.sponsors[PP]=PayPalindex.sponsors[GH]=mongoDB# And subkeysindex.conference.language=JS

Page 24: Kraken at DevCon TLV

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>

Page 25: Kraken at DevCon TLV

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

Page 26: Kraken at DevCon TLV

Lusca configuration Configuration in middleware.json

"appsec": {"csrf": true,"csp": false,"p3p": false,"xframe": "SAMEORIGIN”

}

… or using Lusca’s function calls

Page 27: Kraken at DevCon TLV

Lusca against CSRF 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}”>

Page 28: Kraken at DevCon TLV
Page 29: Kraken at DevCon TLV

Adaro Brings Dust as default templating engine Designed to work together with Makara

dustjs.onLoad = function (name, context, callback) {// Custom file read/processing piplinecallback(err, str);

}app.engine('dust', dustjs.dust({ cache: false }));app.set('view engine', 'dust');

Page 30: Kraken at DevCon TLV

Templating with Dust Layout

<html> <body> {>"{_main}"/} </body></html>

Content page as partial

<div>Hello!</div>dust.render(’partial', { layout: ’template' }, ...);

Page 31: Kraken at DevCon TLV

Templating with Dust Sections

{#modules} {name}, {description}{~n}{/modules}

View context

{ modules: [ { name: “Makara”, description: “i18n” }, { name: “Lusca”, description: “security settings” }]

}

Page 32: Kraken at DevCon TLV

Templating with Dust Conditionals

{#modules}{name}, {description}{~n}

{:else}No modules supported :(

{/modules}{?modules}

modules exists!{/modules}{^modules}

No modules!{/modules}

Page 33: Kraken at DevCon TLV

Kappa Serves as NPM Proxy Enables support for private npm repos Based on npm-delegate hapi support Global or local installation

npm install -g kappakappa -c config.json

Page 34: Kraken at DevCon TLV

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

Page 35: Kraken at DevCon TLV

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

Page 36: Kraken at DevCon TLV

The Generator

Page 37: Kraken at DevCon TLV

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

Page 38: Kraken at DevCon TLV

Kraken 1.x and the road ahead

Page 39: Kraken at DevCon TLV

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

Page 40: Kraken at DevCon TLV

Thanks! Tim Messerschmidt @SeraAndroid [email protected] slideshare.com/paypal