Dia de lost Muertos

Building Mobile Web Apps Made Easier

Created by Carlos Santana / @csantanapr

Whow is Carlos Santana?

"musician" : false,
"company": "IBM",
"careers" : [
    "Server Engineer",
    "Mobile Developer",
    "Open Source Committer"
"dependencies": {
                  "Family":   "~1.0",
                  "Gadgets":  "~0.1",
                  "Software": "~0.2"
"ethnicity": "geek",
"languages": ["spanish","english","javascript"],
"loves what it does": true,
"In 5 years": "function () { [native code] }"

2 Problems One Road

  • Automating Web Dev Workflow
  • Automating Hybrid Dev Worklow


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
  • grunt-cordovacli (@csantanapr)
  • 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


    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

    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 Yeoman

    Install yo using npm

    $npm install -g yo
    $yo -v

    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/
    ├── 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 demo
    1. Lint
    2. Build WebApp
    3. Create Cordova Project
    4. Add Cordova Platforms and Plugins
    5. Build Native App
    6. Run Simulator

    Loving the Watch Task

    1 minutes scenario Native App

    $grunt server:cordova
    Running "build:all" task
    Running "emulate" task
    Running "watch:cordova" task

    GruntJS is a JavaScript Task Runner

    Loving the Watch Task

    15 seconds scenario Built App

    $grunt server:dist
    Running "build:dist" task
    Running "connect:dist" task
    Running "open:dist" task
    Running "watch:dist" task

    Loving the Watch Task

    1 seconds scenario Built App

    $grunt server
    Running "lint" task
    Running "connect:src" task
    Running "open:src" task
    Running "watch:src" task

    Run other grunt tasks

    $grunt lint
    $grunt build
    $grunt server:dist

    Today's Picks

    Fin and Gracias

    BY Carlos Santana / @csantanapr

    Slides: csantana.io