Kraken at DevCon TLV

1. krakenjs! Tim Messerschmidt @SeraAndroid DevCon Tel Aviv, 2014

2. A story of! technical debt

3. Our Traditional Application Stacks C++ Java

4. Environments & Lean UX Prototyping Production

5. The Application Stack C++ XML Java JSP Node JS

6. Moving away from good old Java

7. A big push for using Open Source within the company

8. Rapid development and deployment

9. Environments & Lean UX Prototyping Production Node.js Java (Rhino) Dust Dust

10. Trying out Node in Production

11. New stack at PayPal C++ Java Node Dust

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

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

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

15. Release the! Kraken!

16. What is Kraken? A JS suite on top of Express Preconﬁgured with different best practices and tools: •  Dust for templates •  LESS as CSS preprocessor •  RequireJS as JS ﬁle and module loader •  Grunt for running tasks •  Runtime updates for UI code

17. But why?!

18. Project structure Opinionated about separation of logic and presentation •  /conﬁg •  /controllers •  /models •  /public/templates •  /locales •  /tests

19. Lusca Kappa Adaro Makara

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

21. Property ﬁles for Makara index.title=KrakenJS at DevCon index.speaker=Tim Messerschmidt index.greeting=Ahoi {attendeeName}! # A list index.speakers[0]=Mitchell Hashimoto index.speakers[1]=Arthur Viegers Index.speakers[2]=Johnny Miller # A map index.sponsors[PP]=PayPal index.sponsors[GH]=mongoDB # And subkeys index.conference.language=JS

22. Makara in use Deﬁning 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>

23. 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

24. Lusca conﬁguration Conﬁguration in middleware.json "appsec": { "csrf": true, "csp": false, "p3p": false, "xframe": "SAMEORIGIN” } … or using Lusca’s function calls

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

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

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

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

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

30. 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

31. Conﬁguring Kraken Lives in /config/app.json Development vs. Production environments •  2nd conﬁguration allowed: –  app-development.json •  Usage of NODE_ENV for environment nconf for credentials and other variables

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

33. The Generator

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

35. Kraken 1.x and the road ahead

36. 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

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