Developer Tools

Building Web Apps Made Easier

Created by Carlos Santana / @csantanapr

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network application.
  • JavaScript all the way
  • Cross Operating Systems
  • Can be debug like a Web App with Node-Inspector
  • and many more goodness...

NodeJS: Hardware Hacking

NodeJS: Command Line Interfaces (CLI)

Install Node

Download and Install Node

$node -v

Install NPM

Super Easy Install: npm comes with node now.

$npm -v

For other alternatives: @isaacs/npm

Install Bower

Install bower using npm

$npm install -g bower
$bower -v

Install GruntJS

Install grunt-cli* using npm

$npm install -g grunt-cli
grunt-cli: The grunt command line interface. (v0.1.9)

Fatal error: Unable to find local grunt.
*This error message is OK, grunt-cli is a wrapper that looks and runs grunt locally

Install Cordova

Install cordova using npm

$npm install -g cordova
$cordova -v

Upgrading Software

Upgrading is as easy as installing using npm

$npm update -g bower
$npm update -g grunt-cli
$npm update -g cordova

Lets Get Started with Web App

Download the Dojox/App Boilerplate


$curl -L -o dapp-boilerplate.tar.gz \
$curl -L -o \

Done download dapp-boilerplate

Let's check what we downloaded

	$tree dapp-boilerplate
├── Gruntfile.js
├── .bowerrc
├── bower.json
├── package.json
├── profiles
│   └── app.profile.js
└── src
    ├── app/
    └── index.html

Download front-end dependencies

Let's use Bower

$bower install

$cat bower.json
  "name": "dapp-boilerplate",
  "dependencies": {
    "dojox": "dojo/dojox#1.9.1",
    "dojo" : "dojo/dojo#1.9.1",
    "dijit": "dojo/dijit#1.9.1",
    "util" : "dojo/util#1.9.1",
    "dojox_application": "dmachi/dojox_application#dojo191"
$cat .bowerrc
    "directory": "components"
$bower install

Done downloading front-end packages

Let's check what we downloaded

$tree -L 1 components/
├── dijit
├── dojo
├── dojox
├── dojox_application
└── util

Download local CLI dependencies

Let's use NPM (package.json)

$npm install

{"devDependencies": {
    "uglify-js": "~1.3.5",
    "grunt": "~0.4.1",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.3",
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-connect": "~0.3.0",
    "grunt-contrib-watch": "~0.5.2",
    "grunt-jslint": "~1.0.0",
    "grunt-htmlhint": "~0.4.0",
    "connect-livereload": "~0.2.0",
    "grunt-dojo": "~0.2.4",
    "grunt-open": "~0.2.2",
    "grunt-cordovacli": "~0.1.5",
    "time-grunt": "~0.1.1",
    "load-grunt-tasks": "~0.1.0"

Done downloading node modules

Let's check what we downloaded

$tree -L 1 node_modules/
├── connect-livereload
├── grunt
├── grunt-contrib-clean
├── grunt-contrib-connect
├── grunt-contrib-copy
├── grunt-contrib-csslint
├── grunt-contrib-jshint
├── grunt-contrib-watch
├── grunt-cordovacli
├── grunt-dojo
├── grunt-htmlhint
├── grunt-jslint
├── grunt-open
├── load-grunt-tasks
├── time-grunt
├── uglify-js

Enough with the prerequisites !

Lets see GruntJS in action

$grunt server

Running "jshint:src" (jshint) task
Running "csslint:lax" (csslint) task
Running "htmlhint:html" (htmlhint) task
Running "connect:livereload" (connect) task
Running "open:server" (open) task
Running "watch" task

GruntJS is a JavaScript Task Runner

Running Grunt

Loads a web server and watch for changes

$grunt server
  1. Lints Source Code (jshint, jslint, cssling, htmlhint)
  2. Serves Web App from src/index.html
  3. Opens Browser with LiveReload
  4. Watch any file changes in src/
  5. On file modification will lint and refresh the browser


Specify tasks, targets, leverage grunt plugins

$grunt dojo

"dojo": {
    "dist": {
        "options": {
            "profile": "profiles/app.profile.js",
            "appConfigFile": "src/app/config.json",
            "releaseDir": "src/.tmp"
    "options": {
        "dojo": "components/dojo/dojo.js",
        "load": "build"

Run more grunt tasks

$grunt lint
$grunt build
$grunt server:dist

Cordova CLI Flow

From Web to Native App

$cordova create hybrid
$cp -r dist/www hybrid/www
$cd hybrid
$cordova platform add ios
$cordova platform add android
$cordova plugin add
$cordova prepare
$cordova compile
$cordova build
$cordova emulate android
$cordova emulate ios

Cordova and GruntJS

Automate with grunt-cordovacli plugin

$grunt cordova
$grunt cordova_build
$grunt cordova_emulate

Dojox/App (dapp) Framework

Modify Boilerplate Sample App (dApp)

  • Add View html template (view.html)
  • Add View js module (view.js)
  • Update App Configuration (config.json)

dApp: View Template

$cat src/app/views/demo/view.html


  • JavaScript rocks !

dApp: View JS Module

$cat src/app/views/demo/view.js

], function () {
    'use strict';
    return {
        init: function () {
        beforeActivate: function (previousView, data) {
        afterActivate: function (previousView, data) {
        beforeDeactivate: function (nextView, data) {
        afterDeactivate: function (nextView, data) {

dApp: Configuration

$cat src/app/config.json

{"views": {
	  "template": "app/views/demo/view.html",
	  "controller" : "app/views/demo/view.js",
	  "dependencies":	[

Emulate dApp

$grunt build_all
$grunt cordovacli:emulate_android

Future dApp Boilerplate

  • Continues Integration (CI)
  • Scaffolding
  • Education resources

One More Thing

dude Yeoman Generator!

Dojo Unified Development Environment

$ npm install -g yo
$ npm install -g generator-dude

$ mkdir ~/dev/my-app && cd $_
$ yo dude
$ grunt server
$ grunt demo

Today's Picks

Fin and Gracias

BY Carlos Santana / @csantanapr