kraken.js lab primer

© 2015 PayPal Inc. All rights reserved. Confidential and proprietary.

Kraken.JS Training

Aeshan Wijetunge

March/ 27/ 2015 NTU IEEE


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


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

http://akdubya.github.io/dustjs/#guide


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


● 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


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

http://krakenjs.com/#getting-started

https://github.com/krakenjs/makara

https://github.com/krakenjs/generator-kraken


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


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

https://github.com/nodeworkshop/krakenlab#disable-lusca-security


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/



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/


https://github.com/nodeworkshop/krakenlab#edit-the-controller

https://github.com/nodeworkshop/krakenlab#add-a-create-form-to-the-tasksindexdust


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/


https://github.com/

https://github.com/


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


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!

kraken.js lab primer

Software