An presentation on how and why KrakenJS was built, as well as an overview of many useful features of what makes Kraken different from other frameworks.

1. In the Enterprise
By Lenny Markus
@LennyMarkus

2.  Teams stopped waterfall process
 Started agile with Lean UX
 Quick iterations; experience design
early
White
Board
CodeUsers
PayPal: Circa 2012

3.  Using CSS, JavaScript and Templates
(in the wrong way…)
(Written in Java…)
Embracing the right technologies

4.  Replaced JSP with dust.js
templating
 Node.js for mock applications
Speeding up the process

5. Speeding up the process…
Idea  Prototype in hours
This combo was fast!

7. “Node.js is not enterprise”
 It’s a toy language
 Not scalable
 Insecure
 Slow
 Blah
 Blah
 Blah
 Blah

8. Project Kraken
 Bringing Node.Js into PayPal
 Focused on Web/Mobile Applications
 Emphasize developer velocity
 Replace our Java UI technology stack

9. If you're having
trouble getting
sign-off on new
technology, then
try to pilot it vs.
the old.
Pilot projects are harmless

10. • Identify Project
• Begin integrating Node with
infrastructure
January
• Initial infrastructure
offering ready
• Started development
on pilot
March
• Node Pilot surpassed Java
• Java put on hold
June
The pilot timeline

11. Pilot Results – Lines of Code
Node Java
7,403
18,68
3

12. Pilot Results – Files
Node Java
84 255

13. /**
If you’re reading this,
that means you have been
put in charge of my
previous project.
I am so, so sorry for
you. God speed.
*/
// Houston,
// we have a problem
// TODO: make this work
// Magic. Do not touch.
//Catching exceptions
// is for communists
/* ALL YOUR BASE ARE
BELONG TO US */
Pilot Results – Comments
Node Java
626
10,31
0

14. Pilot Results – Developers
Node Java
2 12

15. We proved it works!
Node Java

16. Node frameworks at scale
Needed to support thousands of
devs

17. Node frameworks at scale
190+ Countries

18. Kraken.js
Lusca
Kappa
Localizr
Internationalization
Application Framework
Application Security
NPM Proxy
Generator-Kraken
Yeoman Generator
Meddleware
Config driven
middleware

19. Kraken.js – A node.JS web application framework

20. Kraken.js
express + + +
 PayPal’s Home-grown Node.JS
framework
 Supports for globalization
 Out-of-the-box security
 Robust configuration
 Scalable

21. Generator-kraken
A yeoman
generator that
allows you to
quickly create
scaffolding for
kraken
applications.• `yo kraken`
• Application
• Pages
• Controllers
• Content Bundles
• Tests
• Models
$ yo kraken myApp
,'""`.
hh / _ _
|(@)(@)| Release the Kraken!
) __ (
/,'))((`.
(( (( )) ))
` `)(' /'
Tell me a bit about your application:
? Description: A test application
? Author: @LennyMarkus
? Template library? Dust
? Front end package manager ? Bower
? CSS preprocessor library? LESS
? JavaScript library? RequireJS

22. Nothing but express.
var express = require(‘express’),
kraken = require(‘kraken-js’);
var app = module.exports = express();
app.use(kraken());
app.on('start', function () {
console.log('Application ready to serve requests.');
});
Kraken.js

23. Chaos => Order

24. Clean, maintainable layout.
index
Content
Kraken.js

25. var dbHost;
if (process.env.NODE_ENV === ‘production’) {
dbHost = “myinstance.12.us-1.rds.amazonaws.com”;
}
else {
dbHost = “localhost”;
}
db.connect(dbHost);

26. {
"port":80,
"express":{
"views":"path:./myViews"
}
}
{
"port":8080,
"express":{
"views":"path:./experimentation"
}
}
NODE_ENV=production
Environment-aware configuration
Kraken.js
NODE_ENV=development

27. {
“port”:80,
“foo”:”bar”,
“color”:”red”,
“db”:{
“host”:”localhost”,
“port”:”3306”
}
}
config.json
{
“port”:80,
“foo”:”bar”,
“color”:”red”,
“db”:{
“host”:”myinstance.12.us-1.rds.amazonaws.com”,
“port”:”3306”
}
}
development.json
{
“db”:{
“host”:”localhost”,
}
}

28. var dbHost = config.get(“db:host”);
db.connect(dbHost);

29. Meddleware

30. Config driven middleware
 Middleware setup is not hardcoded
 External to codebase!
 Can be toggled / ordered / configured.

31. “middleware”: {
“authentication”:{
"enabled": false
}
config.json
“middleware”: {
“authentication”:{
"priority": 100,
"enabled": true,
"module": {
"name": “passport"
}
}
development.json

32. Lusca
• Enables Platform for Privacy Preferences Project (P3P)
headers.
• Enables X-FRAME-OPTIONS headers to help prevent
Clickjacking.
• Enables Content Security Policy (CSP) headers.
• Enables Cross Site Request Forgery (CSRF) headers.
Enables out-of-the-box security according to industry (and
PayPal's ) best practices. This is done as middleware, so that
all your requests/responses are automatically secured.

33. Localizr– Internationalization
(i18n)
• Load content bundles
from a specific
location
• Can localize
templates on-the-fly
• Content stored in
properties files
An extension for dust.js templates that enables localization /
internationalization data to be loaded, and decorated on top of a
template.

34. Localizr– Internationalization
(i18n)
index.title=PayPal for Merchants
index.callToAction=Enroll now!
index.greeting=Welcome {user}
# A list
index.ccList[0]=Visa
index.ccList[1]=Mastercard
index.ccList[2]=Discover
# A map
index.states[AL]=Alabama
index.states[AK]=Alaska
index.states[AZ]=Arizona
index.states[CA]=California
index.title=PayPal pour commerçants
index.callToAction= Inscrivez-vous!
index.greeting=Bonjour {user}
# A list
index.ccList[0]=Visa
index.ccList[1]=CIBC
# A map
index.states[ON]=Ontario
index.states[AB]=Alberta
index.states[MB]=Manitoba
index.states[QC]=Quebec
locales/US/en/index.properties locales/CA/fr/index.properties

35. Kappa– Your very own NPM

36. Kappa– Your very own NPM
NPMJS.or
g
npm.intranet
.company.co
m
{
"dependencies": {
"express": "~3.4.0",
“privateMod”: “1.0.0”
}
}

37. Best Practices

38. Custom Infrastructure
We all have
some.
Always aim to use
standard
conventions in your
Node.js code.

39. Culture Clash – OSS vs. Closed
 Stop "not written here" syndrome
 Versions often times aren't >= 1.0
 Collect knowledge from
community
 GitHub exposes sacred code

40. Hiccups found along the way…

41. KrakenJS. Released!
@LennyMarkus
lmarkus@paypal.com