Kraken js at paypal

14,933 views

Published on

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.

Published in: Technology
0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,933
On SlideShare
0
From Embeds
0
Number of Embeds
812
Actions
Shares
0
Downloads
156
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide
  • Good morning everyone!
  • PayPal was bad. But then it got better.
  • This is the glue to your open source. It sits on top of grunt and express, but offers you a more robust feature set in a web application framework. The benefits include support for externalized content, localization, compile-on-the-fly editing, environment-based configuration, baked-in application security and more.
  • Kraken js at paypal

    1. 1. In the Enterprise By Lenny Markus @LennyMarkus
    2. 2.  Teams stopped waterfall process  Started agile with Lean UX  Quick iterations; experience design early White Board CodeUsers PayPal: Circa 2012
    3. 3.  Using CSS, JavaScript and Templates (in the wrong way…) (Written in Java…) Embracing the right technologies
    4. 4.  Replaced JSP with dust.js templating  Node.js for mock applications Speeding up the process
    5. 5. Speeding up the process… Idea  Prototype in hours This combo was fast!
    6. 6. “Node.js is not enterprise”  It’s a toy language  Not scalable  Insecure  Slow  Blah  Blah  Blah  Blah
    7. 7. Project Kraken  Bringing Node.Js into PayPal  Focused on Web/Mobile Applications  Emphasize developer velocity  Replace our Java UI technology stack
    8. 8. If you're having trouble getting sign-off on new technology, then try to pilot it vs. the old. Pilot projects are harmless
    9. 9. • 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
    10. 10. Pilot Results – Lines of Code Node Java 7,403 18,68 3
    11. 11. Pilot Results – Files Node Java 84 255
    12. 12. /** 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
    13. 13. Pilot Results – Developers Node Java 2 12
    14. 14. We proved it works! Node Java
    15. 15. Node frameworks at scale Needed to support thousands of devs
    16. 16. Node frameworks at scale 190+ Countries
    17. 17. Kraken.js Lusca Kappa Localizr Internationalization Application Framework Application Security NPM Proxy Generator-Kraken Yeoman Generator Meddleware Config driven middleware
    18. 18. Kraken.js – A node.JS web application framework
    19. 19. Kraken.js express + + +  PayPal’s Home-grown Node.JS framework  Supports for globalization  Out-of-the-box security  Robust configuration  Scalable
    20. 20. 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
    21. 21. 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
    22. 22. Chaos => Order
    23. 23. Clean, maintainable layout. index Content Kraken.js
    24. 24. var dbHost; if (process.env.NODE_ENV === ‘production’) { dbHost = “myinstance.12.us-1.rds.amazonaws.com”; } else { dbHost = “localhost”; } db.connect(dbHost);
    25. 25. { "port":80, "express":{ "views":"path:./myViews" } } { "port":8080, "express":{ "views":"path:./experimentation" } } NODE_ENV=production Environment-aware configuration Kraken.js NODE_ENV=development
    26. 26. { “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”, } }
    27. 27. var dbHost = config.get(“db:host”); db.connect(dbHost);
    28. 28. Meddleware
    29. 29. Config driven middleware  Middleware setup is not hardcoded  External to codebase!  Can be toggled / ordered / configured.
    30. 30. “middleware”: { “authentication”:{ "enabled": false } config.json “middleware”: { “authentication”:{ "priority": 100, "enabled": true, "module": { "name": “passport" } } development.json
    31. 31. 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.
    32. 32. 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.
    33. 33. 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
    34. 34. Kappa– Your very own NPM
    35. 35. Kappa– Your very own NPM NPMJS.or g npm.intranet .company.co m { "dependencies": { "express": "~3.4.0", “privateMod”: “1.0.0” } }
    36. 36. Best Practices
    37. 37. Custom Infrastructure We all have some. Always aim to use standard conventions in your Node.js code.
    38. 38. 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
    39. 39. Hiccups found along the way…
    40. 40. KrakenJS. Released! @LennyMarkus lmarkus@paypal.com

    ×