2 Problems One Road

• Automating Web Dev Workflow
• Automating Hybrid Dev Worklow

DON'T JUST COMPLAINT, FIX IT!

Dojox/App (dapp) Framework

Apacahe Cordova/PhoneGap

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript cordova.io

• New version 3.x CLI based using NodeJS
• Cordova Project Directory
  • Focus on Cross Platform Web Development
• Platforms:
  • Android, iOS, BB10, WP8, Win8, FFXOS*, UBUNTU*,...
• Plugins:
  • Device, File, Contacts, Media, Chromium, ...

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 Plugins

Modular System for Features

• Apache Cordova Core APIs
• Chrome Package Apps APIs
• BlackBerry WebWorks APIs

Check out more plugins.cordova.io

More Cordova Plugins

Modular System for Features

• org.chromium.identity
• org.chromium.notifications
• org.chromium.socket
• org.chromium.storage (chrome.storage.local and chrome.storage.sync)
• org.chromium.syncfilesystem

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.
		        

Install Yeoman

Install yo using npm

$npm install -g yo
$yo -v
1.0.4
		        

Install Yeoman Generator Dude

Install yo using npm

$npm install -g generator-dude
$npm list -g generator-dude
└── generator-dude@0.1.4
		        

Upgrading Software

Upgrading is as easy as installing using npm

$npm update -g bower
$npm update -g grunt-cli
$npm update -g yo
$npm update -g generator-dude
		        

Lets Run Yo Dude

$yo dude
			        

Answer a few Prompts

-
     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

[?] What do you want to name your App? (dude)
			        

You got Dude

	$tree -L 1
			        

├── Gruntfile.js
├── LICENSE
├── bower.json
├── bower_components/
├── node_modules/
├── package.json
├── profiles/
└── src
    ├── app/
    └── index.html
		        

Download front-end dependencies

Using 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"
  }
}
			        

Download local CLI dependencies

Using NPM

$npm install
			        

$cat package.json
{"devDependencies": {
    "uglify-js": "~1.3.5",
    "grunt-dojo": "~0.2.4",
    "grunt-cordovacli": "~0.2.0",

    "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-open": "~0.2.2",
    "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