Kraken Front-Trends

1,901 views

Published on

This talk was given at Front-Trends 2014 in Warsaw. It covers PayPal's move to NodeJs (from Java) and which issues this step solved.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,901
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
19
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Kraken Front-Trends

  1. 1. krakenjs! Tim Messerschmidt @SeraAndroid Front-Trends Warsaw, 2014
  2. 2. A story of! technical debt
  3. 3. Application stacks at PayPal C++ Java
  4. 4. Environments & Lean UX Prototyping Production
  5. 5. Moving away from good old Java
  6. 6. Rapid deployment and prototyping
  7. 7. Application stacks at PayPal C++ XML Java JSP Node JS
  8. 8. Environments & Lean UX Prototyping Production node.js Java (Rhino) Dust  Dust  
  9. 9. 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
  10. 10. New stack at PayPal C++ Java Node Dust
  11. 11. Performance Java stack paypal-engineering.com/2013/11/22/node-js-at-paypal
  12. 12. Performance Node stack paypal-engineering.com/2013/11/22/node-js-at-paypal
  13. 13. Using npm at PayPal Enables standard services like •  Monitoring •  Logging •  Security •  Analytics •  Authentication •  Packaging
  14. 14. Release the! Kraken!
  15. 15. 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
  16. 16. But why?!
  17. 17. Project structure Opinionated about separation of logic and presentation •  /config •  /controllers •  /models •  /public/templates •  /locales •  /tests
  18. 18. Lusca Kappa Adaro Makara
  19. 19. 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'); });
  20. 20. 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
  21. 21. 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>
  22. 22. 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
  23. 23. Lusca configuration Configuration in middleware.json "appsec": { "csrf": true, "csp": false, "p3p": false, "xframe": "SAMEORIGIN” } … or using Lusca’s function calls
  24. 24. 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}”>
  25. 25. 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');
  26. 26. Templating with Dust Layout <html> <body> {>"{_main}"/} </body> </html> Content page as partial <div>Hello!</div> dust.render(’partial', { layout: ’template' }, ...);
  27. 27. Templating with Dust Sections {#modules} {name}, {description}{~n} {/modules} View context { modules: [ { name: “Makara”, description: “i18n” }, { name: “Lusca”, description: “security settings” } ] }
  28. 28. Templating with Dust Conditionals {#modules} {name}, {description}{~n} {:else} No modules supported :( {/modules} {?modules} modules exists! {/modules} {^modules} No modules! {/modules}
  29. 29. 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
  30. 30. 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
  31. 31. The Generator
  32. 32. Getting started sudo npm install -g generator-kraken yo kraken ,'""`. / _ _ |(@)(@)| Release the Kraken! ) __ ( /,'))((`. (( (( )) )) ` `)(' /'
  33. 33. 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. };
  34. 34. Generation yo kraken:controller myController Respond to JSON requests? (Y/n) create controllers/myController.js create test/myController.js
  35. 35. 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); }); };
  36. 36. Result with JSON app.get('/ahoiXHR', function (req, res) { res.format({ json: function () { res.json(model); }, html: function () { res.render(’ahoiXHR', model); } }); });
  37. 37. Models yo kraken:model unicorn create models/unicorn.js module.exports = function UnicornModel() { return { name: ‘Charlie’ }; };
  38. 38. 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
  39. 39. Thanks! Tim Messerschmidt @SeraAndroid tmesserschmidt@paypal.com slideshare.com/paypal

×