Alexander J. Salas B.

@ajsb85

Preguntas

Preguntas vía twitter @ajsb85

Presentación en vivo

http://slides.com/alexandersalas/hybrid/live

¿Hybrid Apps?

Una aplicación híbrida es una aplicación móvil o de escritorio que se ejecuta dentro de un contenedor nativo y aprovecha el navegador web del contenedor o del dispositivo para mostrar localmente archivos de Hipertexto. 

¿Hybrid Apps?

Las aplicaciones híbridas están compuestas principalmente de Tecnología Web como HTML, JavaScript y CSS. 

¿Hybrid Apps?

Contiene funcionalidades específicas del dispositivo, como acceso a la cámara, geolocalización, y lecturas del acelerómetro, que están expuestas a través de una API en JavaScript.

híbrido, da. 

Se dice de todo lo que es producto de elementos de distinta naturaleza.

Híbrida

• Está alojada localmente.
• Acceso a todas las funciones del equipo vía JavaScript con la API del contenedor y plugins.

Web

• Está alojada en un servidor.
• Acceso a todas las funciones del equipo vía NPAPI (descontinuado).
• Actualizaciones inmediatas.

Híbrida

• Multiplataforma.
• No se compila. El contenedor interpreta el script en texto plano.

Nativa

• El desarrollo depende del sistema operativo.
• Se generan archivos binario, son programas compilados.

Hipertexto 
&
Contenedor

Front-end 
&
Back-end

Interfaz
&
Motor

Script
&
Shell

XULRunner

Es un paquete de ejecución de Mozilla que puede ser usado para crear aplicaciones XUL+XPCOM tan valiosas como Firefox y Thunderbird. Ofrecerá mecanismos para instalar, actualizar y desinstalar esas aplicaciones. XULRunner ofrecerá también libxul, una solución que permite la integración de las tecnologías de Mozilla en otros proyectos y productos.

+ myapp/
|
+-+ chrome/
| |
| +-+ content/
| | |
| | +-- main.xul
| | |
| | +-- main.js
| |
| +-- chrome.manifest
|
+-+ defaults/
| |
| +-+ preferences/
|   |
|   +-- prefs.js
|
+-- application.ini
|
+-- chrome.manifest

XULRunner

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Otros elementos irán aquí --> 
</window>

Un archivo XUL puede tener cualquier nombre, pero debería tener una extensión .xul. El archivo XUL más simple tiene la siguiente estructura:

La primera cliente de los cazafantasmas es Dana Barret (Sigourney Weaver), chelista que tiene una extraña visión en su apartamento y que se convierte en el interés amoroso de Peter. Tanto Dana como su vecino, Louis Tulley (Rick Moranis), son poseídos y convertidos en los avatares que darán entrada a una entidad destructora en nuestra realidad. Los cazafantasmas descubren que el edificio en el que residían, fue construido por un arquitecto que practicaba ocultismo y es una puerta dimensional que permitirá el paso -vía ritual de el Maestro de las llaves (Keymaster) (Tulley) y la Guardiana de la puerta (Gatekeeper) (Barret)- a Gozer el Gozeriano, un destructor interdimensional que amenaza con destruir Nueva York y a todo el mundo.

Relación con la película cazafantasmas

Mozilla Firefox

Una Aplicación Híbrida

Acceso nativo (Windows)

Components.utils.import("resource://gre/modules/ctypes.jsm");

var lib = ctypes.open("C:\\WINDOWS\\system32\\user32.dll");

/* Declare the signature of the function we are going to call */
var msgBox = lib.declare("MessageBoxW",
                         ctypes.winapi_abi,
                         ctypes.int32_t,
                         ctypes.int32_t,
                         ctypes.jschar.ptr,
                         ctypes.jschar.ptr,
                         ctypes.int32_t);
var MB_OK = 0;

var ret = msgBox(0, "Hello world", "title", MB_OK);

lib.close();

Acceso nativo (Mac OS X)

/* build a Str255 ("Pascal style") string from the passed-in string */

function makeStr(str) {
  return String.fromCharCode(str.length) + str;
}

Components.utils.import("resource://gre/modules/ctypes.jsm");

var carbon = ctypes.open("/System/Library/Frameworks/Carbon.framework/Carbon");

stdAlert = carbon.declare("StandardAlert",       /* function name */
                          ctypes.default_abi,    /* ABI type */
                          ctypes.int16_t,        /* return type */
                          ctypes.int16_t,        /* alert type */
                          ctypes.char.ptr,       /* primary text */
                          ctypes.char.ptr,       /* secondary text */
                          ctypes.uint32_t,       /* alert param */
                          ctypes.int16_t);       /* item hit */

var hit = 0;
var msgErr = makeStr("Carbon Says...");
var msgExp = makeStr("We just called the StandardAlert Carbon function from JavaScript!");

var err = stdAlert(1, msgErr, msgExp, 0, hit);

carbon.close();

Acceso nativo (Linux/POSIX)

/* import js-ctypes */
var {Cu} = require("chrome");
var {ctypes} = Cu.import("resource://gre/modules/ctypes.jsm", null);

/* Open the library */
try {
  /* Linux */
  var libc = ctypes.open("libc.so.6");
} catch (e) {
  /* Most other Unixes */
  libc = ctypes.open("libc.so");
}

/* Import a function */
var puts = libc.declare("puts",             /* function name */
                        ctypes.default_abi, /* call ABI */
                        ctypes.int,         /* return type */
                        ctypes.char.ptr);   /* argument type */

var ret = puts("Hello World from js-ctypes!");

libc.close();

Ejecutando y Empacando

• Podemos crear un archivo .zip con los archivos de la app y lo renombramos con extensión .xulapp.
• Descargamos XULRunner del FTP de Mozilla.
• Decomprimimos el archivo en la carpeta raíz de la app.
• Dentro de la carpeta XULRunner buscamos el archivo "xulrunner-stub" y lo colocamos en la carpeta raíz de la app.
• Podemos cambiarle el icono, el nombre y firmarlo.
• Ahora podemos crear el instalador y distribuir nuestra aplicación.

Aplicaciones destacadas basadas en la Plataforma Mozilla

NW.js

NW.js le permite llamar a todos los módulos Node.js directamente desde DOM y permite una nueva forma de escribir aplicaciones con todas las tecnologías Web.

Era conocido previamente como proyecto "node-webkit".

+ app.nw
|
+-- package.json
|
+-- index.html
|
+-- node_modules/

Node.js

Node.js es un entorno de programación en la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación ECMAScript, asíncrono, con I/O de datos en una arquitectura orientada a eventos y basado en el motor V8 de Google.

Webkit

WebKit es una plataforma para aplicaciones que funciona como base para el navegador web Safari, Google Chrome, Opera,2 Epiphany, Maxthon, Midori, QupZilla entre otros. Está basado originalmente en el motor de renderizado KHTML del navegador web del proyecto KDE, Konqueror.

NW.js

<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <script>
            // get the system platform using node.js
            var os = require('os')
            document.write('Our computer is: ', os.platform())
        </script>
    </body>
</html>

Un ejemplo sencillo usando Node.js 

Native UI API

var gui = require('nw.gui');

// Create an empty menu
var menu = new gui.Menu();

// Add some items with label
menu.append(new gui.MenuItem({ label: 'Item A' }));
menu.append(new gui.MenuItem({ label: 'Item B' }));
menu.append(new gui.MenuItem({ type: 'separator' }));
menu.append(new gui.MenuItem({ label: 'Item C' }));

Hay APIs para los controles de interfaz de usuario nativos en nw.js. Usted puede utilizar éstos para el control de la ventana, menú, entre otros.

Ejecutando y Empacando

• Podemos crear un archivo .zip con los archivos de la app y lo renombramos con extensión .nw.
• Descargamos nw.js desde http://nwjs.io/
• Decomprimimos el archivo en la carpeta raíz de la app.
• Ejecutamos el archivo nw(.exe) y le pasamos como argumento la carpeta o el archivo .nw
• Al archivo nw(.exe) podemos cambiarle el icono, el nombre y firmarlo.
• Ahora podemos crear el instalador y distribuir nuestra aplicación.

Aplicaciones destacadas basadas en nw.js

Atom-Shell

El framework Atom Shell le permite escribir aplicaciones de escritorio multiplataforma utilizando JavaScript, HTML y CSS. Se basa en io.js y Chromium y se utiliza en el editor Atom.

+ example.asar
|
+-- index.html
|
+-- main.js
|
+-- package.json

io.js

Este proyecto comenzó como una bifurcación de Node.js de Joyent ™.

Este proyecto tiene como objetivo continuar con el desarrollo de io.js en virtud de un "modelo de gobierno abierto", en contraposición con el liderazgo empresarial.

Chromium 

Chromium es un proyecto de navegador Web de código abierto, a partir del cual se basa el código fuente de Google Chrome.

Atom-Shell

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

// This method will be called when atom-shell has done everything
// initialization and ready for creating browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

El archivo main.js debe crear ventanas y manejar los eventos del sistema

Atom-Shell

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>
    and atom-shell <script>document.write(process.versions['atom-shell'])</script>.
  </body>
</html>

Finalmente el index.html es la página Web que usted desea mostrar:

Ejecutando y Empacando

• Podemos crear un archivo .tar con los archivos de la app y lo renombramos con extensión .asar.
• Descargamos Atom-Shell desde GitHub o lo instalamos vía npm.
• Decomprimimos el archivo en la carpeta raíz de la app.
• Ejecutamos el archivo atom(.exe) y le pasamos como argumento la carpeta o ubicamos el archivo .asar dentro de la carpeta resources de Atom-Shell.
• Al archivo atom(.exe) podemos cambiarle el icono y firmarlo, el nombre solo se lo podemos cambiar si no usamos módulos nativos de Node.js.
• Ahora podemos crear el instalador y distribuir nuestra aplicación.

Aplicación destacada

Apache Cordova

Permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas genéricas tales como JavaScript, HTML5 y CSS3. Tiene APIs que conectan al sistema operativo usando el código nativo del sistema huésped a través de una Interfaz de funciones foráneas en Javascript.

+ www/ 
|
+-- index.html
|
+-- js/
|
+-- img/
|
+-- css/

WebViews

Las Aplicaciones en Cordova se implementan normalmente como WebView basada en el navegador de la plataforma móvil nativa. 

• Amazon Fire OS WebViews
• Android WebViews
• iOS WebViews
• Windows Phone 8.0 WebViews

Interfaz Nativa

• Amazon Fire OS Plugins
• Android Plugins
• iOS Plugins
• BlackBerry 10 Plugins
• Windows Phone 8 Plugins
• Windows Plugins
• Tizen no soporta Plugins

Apache Cordova

<!DOCTYPE html>
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

El archivo HTML debe incluir cordova.js o phonegap.js

Apache Cordova

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

El evento DeviceReady es fundamental para cualquier aplicación. Señala que las API del dispositivo de Cordova han cargado y están lista para acceder.

Apache Cordova Facebook Plugin

var fbLoginSuccess = function (userData) {
    alert("UserInfo: " + JSON.stringify(userData));
}

facebookConnectPlugin.login(["public_profile"],
    fbLoginSuccess,
    function (error) { alert("" + error) }
);

Código ejemplo para iniciar sesión 

Obtener la aplicación lista para el Store sin el dolor de cabeza de mantener el SDK nativo. PhoneGap hace el trabajo para usted en la nube y su aplicación siempre estará construida con el SDK más actualizado para la plataforma que esté requiriendo.

Adobe® PhoneGap Build ™

Framework7

Framework completo HTML para construir iOS Apps.

• Requiere de un servidor Web local para las consultas Ajax.
• No requiere PhoneGap
• Es rápido y ligero.
• Libre y abierto.
• 100% temas personalizables.

Ionic

Libre y abierto, Ionic ofrece una librería móvil optimizada para componentes HTML, CSS y JS, gestos, y herramientas de construcción de aplicaciones altamente interactivas. Construido con Sass y optimizado para AngularJS.

WinJS

La librería de Windows para JavaScript.

• Se distribuye bajo la licencia Apache 2.0 como un proyecto Open Source de Microsoft Open Technologies.
• Soporta controles de Windows 8.1 así como también ListView, FlipView, y Semantic Zoom.

Polymer

• Construir una App Híbrida = Jugar con Bloques de Lego
• Componentes Web que marcan el comienzo de una nueva era de desarrollo web basado en elementos personalizados encapsulados e interoperables que se extienden HTML en sí.
• Construido sobre estas nuevas normas, Polymer hace que sea más fácil y más rápido para crear cualquier cosa, desde un botón a una aplicación completa a través de escritorio, móviles y más allá.