Alumno: Aitor Osés Martín
Tutor: Marko Galarza
Fecha: 30 de Abril de 2014

Desarrollo de un framework para aplicaciones móviles con tecnologías web estándar

Objetivos



  • Estudiar las posibilidades que ofrecen las nuevas tecnologías estándar web para el desarrollo de aplicaciones. En concreto, para aplicaciones móviles.

  • Estandarizar las prácticas de desarrollo actuales con HTML5, JS y CSS3.
  
  • Crear un marco de trabajo (FRAMEWORK) eficiente, eficaz y cómodo para el desarrollo de estas aplicaciones móviles web.

Estado del arte


  • Diferentes esquemas.

  • Distintos niveles de popularidad entre plataformas.

  • Experiencia de usuario

Distintos esquemas





Web vs Nativo

Arquitectura Común

Arquitectura Propuesta

Distintas plataformas



Experiencia de usuario


Crear una buena experiencia de usuario en Web con JavaScript es complicado.

Pero el ecosistema JavaScript está mucho mas extendido y de hecho es considerado un estándar.

Necesitamos estandarizar las prácticas de desarrollo para obtener una experiencia de usuario igual a la nativa pero con mayores ventajas.



¿Qué es un framework realmente?

  

  Conjunto de :


  • Conceptos
  • Criterios
  • Prácticas




Facilitar el Desarrollo de software


- tiempo = +INGRESOS


uno más


¿POR QUÉ?


Paradigma antiguo (Página) | paradigma moderno (App)

Escalabilidad



APLICACIONES MOVÍLES

ESCALABLES

TECNOLOGÍAS WEB

¿QUIENES LO HACEN?


  1. Google
  2. Twitter
  3. LinkedIn
  4. FaceBook




EVENTED.IO


Todo empieza

con

EL BAR MÔ

 







Aplicación Móvil



Primer problema


DESPLIEGUE



Segundo Problema


EXPERIENCIA NATIVA


Resultado final



Una aplicación Web que aparenta ser nativa.


Pero insatisfacción personal con el resultado.





Desarrollo de un

FRAMEWORK


Evented.io


Proporciona una solución unificada para:

  1. Cliente
  2. servidor
  3. Protocolos de comunicación



En el cliente




Características de Angular



  • Conjunto de Librerías JavaScript.
  • Aplicaciones de una sola página (client-routing).
  • Comunicación AJAX.
  • Extender la funcionalidad de HTML en el navegador
  • Data Bindings
  • Diseño modular
  • Patrón MVC.




Código se ejecuta solo en el cliente

Patrón MVC


  • Directivas
  • Controladores
  • Servicios
  • Filtros
  • Routing


DIRECTIVAS


<tabs>
   <pane titulo="Titulo">Contenido del panel</pane>
   <pane ng-repeat="panel in paneles"
        heading="{{panel.title}}"
        active="panel.active">
      {{pane.content}}
   </pane>
</tabs>


Controladores


<div ng-controller="controladorDeEjemplo">
  <input ng-model="persona.nombre"/>
  <button ng-click="guardar()"/>
</div>

function controladorDeEjemplo($scope) {
  $scope.persona = {    name: "Aitor"  }

  $scope.guardar = function() {
    // Hacer algo
  }
}


Servicios

var app = angular.module('servicios', []);

app.service('miServicio', function(){
	return {
	   funcionEjemplo: function() {
               console.log('Hola mundo');
            }
	}
});

// El servicio puede inyectarse en cualquier sitio

function SampleController(miServicio) {
	miServicio.miFuncion();
}



FILTROS



<ul>
  <li ng-repeat="c in clientes | filter:{region: 'Madrid'}">{{c.name}</li> 
<ul>
<p>{{'propiedad_internacionalizable' | internacionalizar}}</p>

<p>{{message | pluralizar | toUpperCase}}</p>

Routing


var App = angular.module('App', [
  'ngRoute',
  'AppControladores'
]);
 
App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/ruta1', {
        templateUrl: 'plantillas/pagina1.html',
        controller: 'controlador1'
      }).
      when('/ruta2/:parámetro', {
        templateUrl: 'plantillas/página2.html',
        controller: 'controlador2'
      }).
      otherwise({
        redirectTo: '/ruta1'
      });
  }]);


Evented.io

en el 

SERVIDOR




Node.js


Runtime I/O asíncrona


MOTOR v8 "JS" Google 

  • Node es un entorno de ejecución + librerías.

  • Basado en un conjunto de bibliotecas en C sobre el motor v8 de Google.

  • Utiliza un ciclo de eventos en lugar de hilos nuevos por cada conexión (Event Loop)

  • Cada operación de I/O de Node es asíncrona.

  • Centrado en la eficiencia.

  • Módulo para crear servidores HTTP eficientes.

  • Puede manejar miles de conexiones simultáneas con una sobrecarga mínima (CPU/MEMORIA) en un solo proceso.
  • Javascript del lado del servidor (SSJS)

Ciclo de eventos


Benchmark

PHP vs NODE




Base de datos


¿SQL o NoSQL?


Características de MongoDB

Es una Base de Datos NoSQL

Pensada para ser rápida y flexible

  • Se basa en colecciones en lugar de tablas
  • Puede almacenar datos complejos
  • Los documentos se mapean directamente a objetos JavaScript
  • Ausencia de transacciones
  • Escalabilidad horizontal
  • Sin esquema o con esquema
  • Indexación de documentos
  • Anidación de documentos
  • GridFS
  • Almacena JSON binario



EVENTED.IO








¿Comunicación?

Angular.JS + Node.js Server + Mongo

Cliente
Backend

La comunicación en Evented.io


Principal novedad en Evented.io

  • Comunicación basada en API's JSON
  • Comunicación basada en WebSockets


El diseño de Evented.io permite desacoplar el cliente del servidor, como ocurre en las aplicaciones nativas.



API JSON


  • Comunicación totalmente asíncrona.
  • Comunicación siempre iniciada por el cliente.
  • Puede integrarse con distintas aplicaciones.
  • API publica.
  • Fácil creación de interfaces REST JSON.




A continuación de ejemplo, una muestra de la API de usuarios.

Arranque de Evented.io

API's

GET /v1/login

Caso de Error

GET /v1/logged

Descripción de API's

GET /v1/logout

Recursos REST


OPERACIONES CRUD:
  • GET -> Obtener        -> /v1/todo
                  • v1/todo/:id
  • POST -> Añadir         -> /v1/todo
  • PUT -> Actualizar     -> /v1/todo/:id
  • DELETE -> Eliminar -> /v1/todo/:id

GET /v1/user (GET REST)




API WebSocket

Evented.io Websockets


  • Evented.io define un protocolo de eventos para las colecciones.
  • Los eventos viajan a través del protocolo estándar "websocket"
  • Evented.io implementa una abstracción de estos websockets, de manera que el desarrollador no tiene que lidiar con ellos directamente.
  • Expone una API de colecciones que interactúa directamente con la base de datos.
  • Los clientes conectados al servidor, gracias a esta API pueden manejar colecciones de base de datos directamente desde el cliente.


Protocolo de Eventos:


Eventos de entrada:


  • subscribe:Colección
  • insert:Elemento
  • update:Elemento
  • remove:Elemento

Eventos de salida:

  • publish:Colección
  • inserted:Elemento
  • updated:Elemento
  • removed:Elemento


Secuencia de un "insert"

Los clientes se actualizan en tiempo real, porque los eventos que generan actualizan la vista gracias a la reactividad del patrón MVC.




¿Cuánto esfuerzo requiere crear un servidor Evented.io?


Documentación


Repositorio de GitHub

Perfil de NPM




LINEAS FUTURAS



FAMO.US




METEOR.JS

Conclusiones


  • Las tecnologías web están preparadas para reemplazar en la mayoría de los casos a las aplicaciones nativas.
  • Evented.io es una muestra de lo que son capaces de hacer.
  • En el cliente, la aparición de nuevos estándares y librerías esta dotando al navegador de capacidades que antes eran inimaginables.
  • En el servidor, la posibilidad de desarrollar en JavaScript y tener una I/O asíncrona, reduce el tiempo y la complejidad.
  • Una base de datos NoSQL permite esquemas mas libres y mas complejos además de ofrecer un escalamiento horizontal.
  • La comunicación mediante los nuevos protocolos del WC3 como websocket es clave para lograr una interacción "Real-Time".



Desarrollo de

Evented.io


PFC

Aitor Osés Martín



¿Preguntas?

Made with Slides.com