Kraken Front-Trends

krakenjs! Tim Messerschmidt @SeraAndroid Front-Trends Warsaw, 2014

A story of!technical debt

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

Prototyping Production

node.js Java (Rhino)

Dust Dust

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

Release the!Kraken!

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

But why?!

Project structure Opinionated about separation of logic and presentation

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

Lusca

Kappa Adaro

Makara

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-Trendsindex.speaker=Tim Messerschmidtindex.greeting=Ahoi {attendeeName}!# A listindex.speakers[0]=Lea Verouindex.speakers[1]=Jed SchmidtIndex.speakers[2]=Gunnar Bittersmann# A mapindex.sponsors[PP]=PayPalindex.sponsors[GH]=Mozilla# And subkeysindex.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 piplinecallback(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' }, ...);

Templating with Dust Sections

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

View context

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

}

Templating with Dust 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 kappakappa -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

The Generator

Getting started sudo npm install -g generator-krakenyo 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 myControllerRespond to JSON requests? (Y/n)create controllers/myController.jscreate 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 unicorncreate models/unicorn.jsmodule.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 [email protected] slideshare.com/paypal

Kraken Front-Trends

Technology

Transcript of Kraken Front-Trends