Kraken Front-Trends
•
3 j'aime•2,631 vues
This document discusses KrakenJS, an open source JavaScript framework built on Node.js and Express. It summarizes PayPal's transition from Java to Node.js architectures to enable faster development and deployment cycles. It then describes the major components of KrakenJS, including Makara for internationalization, Lusca for security, Adaro for templating with Dust, and a generator for setting up new KrakenJS apps. The use of these components for templating, configuration, and model generation is also outlined.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à Kraken Front-Trends
Similaire à Kraken Front-Trends (20)
Plus de PayPal
Plus de PayPal (15)
Dernier
Dernier (20)
Kraken Front-Trends
- 2. A story of! technical debt
- 4. Application stacks at PayPal C++ Java
- 5. Environments & Lean UX Prototyping Production
- 8. Moving away from good old Java
- 10. Application stacks at PayPal C++ XML Java JSP Node JS
- 11. Environments & Lean UX Prototyping Production node.js Java (Rhino) Dust Dust
- 12. 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
- 13. New stack at PayPal C++ Java Node Dust
- 16. Using npm at PayPal Enables standard services like • Monitoring • Logging • Security • Analytics • Authentication • Packaging
- 19. 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
- 21. But why?!
- 22. Project structure Opinionated about separation of logic and presentation • /config • /controllers • /models • /public/templates • /locales • /tests
- 24. 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'); });
- 25. 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
- 26. 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>
- 27. 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
- 28. Lusca configuration Configuration in middleware.json "appsec": { "csrf": true, "csp": false, "p3p": false, "xframe": "SAMEORIGIN” } … or using Lusca’s function calls
- 29. 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}”>
- 31. 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');
- 32. Templating with Dust Layout <html> <body> {>"{_main}"/} </body> </html> Content page as partial <div>Hello!</div> dust.render(’partial', { layout: ’template' }, ...);
- 33. Templating with Dust Sections {#modules} {name}, {description}{~n} {/modules} View context { modules: [ { name: “Makara”, description: “i18n” }, { name: “Lusca”, description: “security settings” } ] }
- 34. Templating with Dust Conditionals {#modules} {name}, {description}{~n} {:else} No modules supported :( {/modules} {?modules} modules exists! {/modules} {^modules} No modules! {/modules}
- 35. 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
- 36. 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
- 37. The Generator
- 38. Getting started sudo npm install -g generator-kraken yo kraken ,'""`. / _ _ |(@)(@)| Release the Kraken! ) __ ( /,'))((`. (( (( )) )) ` `)(' /'
- 39. 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. };
- 40. Generation yo kraken:controller myController Respond to JSON requests? (Y/n) create controllers/myController.js create test/myController.js
- 41. 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); }); };
- 42. Result with JSON app.get('/ahoiXHR', function (req, res) { res.format({ json: function () { res.json(model); }, html: function () { res.render(’ahoiXHR', model); } }); });
- 43. Models yo kraken:model unicorn create models/unicorn.js module.exports = function UnicornModel() { return { name: ‘Charlie’ }; };
- 44. 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