The document discusses a training on the Kraken.JS framework. It introduces Kraken.JS and some of its key modules like Makara for internationalization and Lusca for security. It then provides instructions for a hands-on lab where attendees will use the Yeoman generator to build a basic task manager application with Kraken.JS. The lab walks through generating the initial project structure, adding a tasks controller, and basic functionality to create, display, and list tasks. An optional extension is provided to connect the application to a backend REST service.

1. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Kraken.JS Training
Aeshan Wijetunge
March/ 27/ 2015 NTU IEEE

2. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Introduction
2
● Kraken builds upon the expressJS framework
● includes many things out-of-the-box that enterprises
require of a modern web application
● Such as
○ Security
○ i8n
○ dustJS templates
○ … and more
● You will learn to use Yeoman to generate skeleton-code
● Lab Exercise: create a Task Manager kraken app

3. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Kraken modules
Makara - Internationalization
Lusca - Security
Adaro - dustJS
Kappa - NPM Proxy
3

4. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 4
a Javascript template engine which compiles *.dust
templates into javascript which can be rendered on either the
server or...the client
More details available here

5. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 5
Kraken separates content from dust-templates using property-files. Makara
combines these bundles with dust-templates to produce localized pages for
each locale.
This allows for:
{index.dust} + locales/US/en/index.properties = /US/en/index.js.gz
Content : Enter Makara
● Internationalization with language-specific content bundles
● template reuse: 1 template to many localized content bundles

6. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 6
● Grunt is a build tool for javascript
● Kraken uses grunt to build js-views from templates (for production)
● Makara expects en_US to be the default language of any kraken app
● if you use localised content, you must to have a content bundle in the
locale/US/en folder
This convention helps avoid grunt build failures later on.
Caveat : Grunt, {dustjs} and the makara
fallback

7. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 7
Create a simple kraken.js application to create & manage your tasks.
● Store data in a session
● You may wish to refer to these online resources while developing it
○ http://krakenjs.com/#getting-started
○ https://github.com/krakenjs/makara
○ https://github.com/krakenjs/generator-kraken
○ ...and more can be found via Google
Lab: Task Manager

8. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 8
A very useful code-generation tool for developers looking increase their productivity and not
have to copy & paste the basic structure of the app.
Yeoman : bootstrapping app development
Install yeoman via npm
[sudo] npm install -g yo generator-kraken bower grunt-cli
Why you should use it...
● Eliminates the dull & repetitive steps needed to code an app from scratch
● Allows the developer to rapidly setup the app-skeleton following conventions
● Can be used from the command-line
● We’ll be using this tool a lot in the labs

9. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 9
As we’re not going to be developing a production-grade application in this lab, we’re going to
disable certain features which might make development troublesome.
Pre-Lab setup
Disable lusca here
Why you should do so for this lab...
● HTTP POSTS will encounter _csrf missing errors
● 403 Forbidden errors may occur
Please have it enabled should you deploy it online

10. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 10
Lets try it out in creating our task-manager
Lab: Use Yeoman to generate the basics
Create the app-skeleton
yo kraken TaskManager
select the following options when prompted
● DustJS
● LESS
● RequireJS
● Bower
then
cd TaskManager
Generate a controller for handling tasks (this should generate models/dust/content)
yo kraken:controller tasks
More details here
Start the app
npm install
npm start
View the page
localhost:8000/

11. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 11
We want to add tasks to our app and do so we need to extend our app.
Lab: add some functionality
More details here
Add a new route for create on controller
example
Add a simple form to index.dust for task creation
example
Start the app
npm start
View the page
localhost:8000/tasks/

12. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 12
We want to list the newly added task:
Lab: list the added tasks
More details here
Modify the controller-route to load the tasks from req.session
example here
Modify the index.dust to loop through the tasks
example
Start the app
npm start
View the page
localhost:8000/tasks/

13. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 13
Try to extend your application to use the Restful expressJS service you
created earlier.
(Optional) Lab: use your expressJS service
Replace the task-creation controller code with a Rest-client call

14. © 2015 PayPal Inc. All rights reserved. Confidential and proprietary. 14
This is an open-source framework which extends already popular expressJS.
● Documentation & APIs are just a google away
● Big user community online
● Most answers are already on stack-overflow
● Use debuggers like node-inspector or IDEs to troubleshoot issues
Conclusion
Thanks for attending!