Kraken Front-Trends
-
Upload
paypal -
Category
Technology
-
view
781 -
download
1
description
Transcript of 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