Developer Tools

Building Web Apps Made Easier

Created by Carlos Santana / @csantanapr

NodeJS

http://nodejs.org
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 http://nodejs.org/download


$node -v
v0.10.18
		        

Install NPM

Super Easy Install: npm comes with node now.


$npm -v
v1.3.8
		        

For other alternatives: @isaacs/npm

Install Bower

Install bower using npm


$npm install -g bower
$bower -v
1.2.6
		        

Install GruntJS

Install grunt-cli* using npm


$npm install -g grunt-cli
$grunt
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
3.0.9
		        

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

@csantanapr/dapp-boilerplate

$curl -L -o dapp-boilerplate.tar.gz \
https://api.github.com/repos/csantanapr/dapp-boilerplate/tarball
$curl -L -o dapp-boilerplate.zip \
https://api.github.com/repos/csantanapr/dapp-boilerplate/zipball
			        

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/
			      
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/
			      
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
Waiting...
		        

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

Gruntfile

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 org.apache.cordova.core.media-capture
$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
	        

Demo

  • JavaScript rocks !

dApp: View JS Module


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

define([
    'dojo/text!app/views/demo/view.html',
    'dojox/mobile/Heading',
    'dojox/mobile/EdgeToEdgeList',
    'dojox/mobile/ListItem'
], 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": {
	"demo":{
	  "template": "app/views/demo/view.html",
	  "controller" : "app/views/demo/view.js",
	  "dependencies":	[
	    "dojox/mobile/Heading",
	    "dojox/mobile/EdgeToEdgeList",
	    "dojox/mobile/ListItem"
		]
	}
}}
	        

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

Slides: csantana.io