Download - Kraken.js Lab Primer
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Kraken.JS Training
Aeshan Wijetunge
March/ 27/ 2015 NTU IEEE
© 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
© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.
Kraken modules
Makara - Internationalization
Lusca - Security
Adaro - dustJS
Kappa - NPM Proxy
3
© 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
© 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
© 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
© 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
© 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
© 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
© 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/
© 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 controllerexample
Add a simple form to index.dust for task creation
example
Start the app
npm start
View the page
localhost:8000/tasks/
© 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/
© 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
© 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!