O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Tim Messerschmidt
@SeraAndroid
LondonJS Conf 2014
A story of!
technical debt
Application stacks at PayPal

C++

Java
Environments & Lean UX

Prototyping

Production
Application stacks at PayPal

C++
XSL

Java
JSP
Node
JS
Node & JS at PayPal
Moving away from Java architecture
•  CSS, HTML and even JS in Java
•  Originally replaced by JSP

Rap...
New stack at PayPal

Dust
C++

Java
 Node
Advantages of Node
Results of using Node at PayPal
•  Teams between 1/3 to 1/10 of Java teams
•  Doubled requests per seco...
Release the!
Kraken!
What is Kraken?
A JS suite on top of Node.js and Express
Preconfigured with different best practices
and tools:


• 
• 
• 
...
But why?!
Project structure
Opinionated about separation of logic and
presentation


• 
• 
• 
• 
• 
• 

/config
/controllers
/models
...
Makara

Lusca

Adaro

Kappa
… and many more
Makara
Local content bundles
Internationalization support for Node apps

var i18n = require('makara');	
var provider = i18...
Property files for Makara
index.title=KrakenJS at LondonJS Conf	
index.speaker=Tim Messerschmidt	
index.greeting=Ahoi {atte...
Makara in use
Defining multiple values
/locales/US/en/index.properties	
•  index.greeting=Hello {name}!	

/locales/ES/es/in...
Lusca
Security settings against various vulnerabilities


Cross-site request forgery support
Clickjacking / X-Frame-Option...
Lusca configuration
Configuration in middleware.json	


"appsec": {	
	"csrf": true,	
	"csp": false,	
	"p3p": false,	
	"xfram...
Lusca against CSRF
A token is added to the session automatically


var express = require('express'),	
	appsec = require('l...
Adaro
Brings Dust as default templating engine
Designed to work together with Makara


dustjs.onLoad = function (name, con...
Templating with Dust
Layout
	

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

Content page as partial


<div>Hello!</...
Templating with Dust
Sections


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

View context	


{ 	
	modules: [	
	
	...
Templating with Dust
Conditionals


{#modules}	
	{name}, {description}{~n}	
{:else}	
	No modules supported :(	
{/modules}	...
Kappa
Serves as NPM Proxy
Enables support for private npm repos
Based on npm-delegate
hapi support
Global or local install...
Configuring Kraken
Lives in /config/app.json	


Development vs. Production environments
•  2nd configuration allowed:
–  app...
The Generator
Getting started
sudo npm install -g generator-kraken	
	
yo kraken	
	
,'""`.	
/ _ _ 	
|(@)(@)|
Release the Kraken!	
) __ (	...
Generation
yo kraken:controller myController	
	
Respond to XHR requests? (Y/n)	
	
create controllers/myController.js	
crea...
Result without XHR
var myModel = require('../models/model');	
	
module.exports = function (app) {	
	var model = new myMode...
Result with XHR
app.get('/ahoiXHR', function (req, res) {	
	res.format({	
	 	json: function () {	
	 	 	res.json(model);	
	...
Models
yo kraken:model unicorn	
	
create models/unicorn.js	
	
module.exports = function UnicornModel() {	
	return {	
	 	na...
Summary
Thanks!


Tim Messerschmidt
@SeraAndroid
tmesserschmidt@paypal.com
slideshare.com/paypal
Próximos SlideShares
Carregando em…5
×

KrakenJS

These are the slides of Tim Messerschmidt's presentation at LondonJS Conf 2014. They provide an overview about Kraken's main features and how to use them in practice.

  • Seja o primeiro a comentar

KrakenJS

  1. 1. Tim Messerschmidt @SeraAndroid LondonJS Conf 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. Application stacks at PayPal C++ XSL Java JSP Node JS
  6. 6. Node & JS at PayPal Moving away from Java architecture •  CSS, HTML and even JS in Java •  Originally replaced by JSP Rapid development & deployment cycles •  •  •  •  Open Source Stack Bootstrap for frontend JavaScript templating via Dust V8 in PayPal’s C++ stack for legacy app UI
  7. 7. New stack at PayPal Dust C++ Java Node
  8. 8. Advantages of Node 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
  9. 9. Release the! Kraken!
  10. 10. 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
  11. 11. But why?!
  12. 12. Project structure Opinionated about separation of logic and presentation •  •  •  •  •  •  /config /controllers /models /public/templates /locales /tests
  13. 13. Makara Lusca Adaro Kappa
  14. 14. … and many more
  15. 15. 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'); });
  16. 16. Property files for Makara index.title=KrakenJS at LondonJS Conf index.speaker=Tim Messerschmidt index.greeting=Ahoi {attendeeName}! # A list index.speakers[0]=Lea Verou index.speakers[1]=Peter-Paul Koch Index.speakers[2]=Hannah Wolfe # A map index.sponsors[PP]=PayPal index.sponsors[GH]=GitHub # And subkeys index.conference.language=JS
  17. 17. 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>
  18. 18. Lusca Security settings against various vulnerabilities Cross-site request forgery support Clickjacking / X-Frame-Options Output escaping against XSS via Dust Content Security Policy
  19. 19. Lusca configuration Configuration in middleware.json "appsec": { "csrf": true, "csp": false, "p3p": false, "xframe": "SAMEORIGIN” } … or using Lusca’s methods
  20. 20. 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}”>
  21. 21. 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');
  22. 22. Templating with Dust Layout <html> <body> {>"{_main}"/} </body> </html> Content page as partial <div>Hello!</div> dust.render(’partial', { layout: ’template' }, ...);
  23. 23. Templating with Dust Sections {#modules} {name}, {description}{~n} {/modules} View context { modules: [ { name: “Makara”, description: “i18n” }, { name: “Lusca”, description: “security settings” } ] }
  24. 24. Templating with Dust Conditionals {#modules} {name}, {description}{~n} {:else} No modules supported :( {/modules} {?modules} modules exists! {/modules} {^modules} No modules! {/modules}
  25. 25. 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
  26. 26. 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
  27. 27. The Generator
  28. 28. Getting started sudo npm install -g generator-kraken yo kraken ,'""`. / _ _ |(@)(@)| Release the Kraken! ) __ ( /,'))((`. (( (( )) )) ` `)(' /'
  29. 29. Generation yo kraken:controller myController Respond to XHR requests? (Y/n) create controllers/myController.js create test/myController.js
  30. 30. Result without XHR var myModel = require('../models/model'); module.exports = function (app) { var model = new myModel(); app.get(’/ahoi', function (req, res) { res.render(’ahoi', model); }); };
  31. 31. Result with XHR app.get('/ahoiXHR', function (req, res) { res.format({ json: function () { res.json(model); }, html: function () { res.render(’ahoiXHR', model); } }); });
  32. 32. Models yo kraken:model unicorn create models/unicorn.js module.exports = function UnicornModel() { return { name: ‘Charlie’ }; };
  33. 33. Summary
  34. 34. Thanks! Tim Messerschmidt @SeraAndroid tmesserschmidt@paypal.com slideshare.com/paypal

×