Alumno: Aitor Osés Martín
Tutor: Marko Galarza
Fecha: 20 de Febrero de 2014

Objetivos

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

  • Crear un marco de trabajo (FRAMEWORK) eficiente, eficaz y cómodo para el desarrollo.

  • Intentar adaptar todo el trabajo de mi PFC a este marco de trabajo.

  • Compartirlo con la comunidad OpenSource.

Desarrollo dEL 

Framework 

EVENTED.io

para aplicaciones móviles
con tecnologías web de última generación

Un framework

PARA APLICACIONES MÓVILES

CON TECNoLOGÍAS WEB ESTÁNDAR


¿QuÉ es un framework realmente?


  •  CONCEPTOS
  •  Prácticas
  •  Criterios



facilitar el desarrollo


- tiempo = +INGRESOS

¿Por quÉ no utilizar.... ¿CMS?




Tecnologías Anticuadas.

  • MUCHA INTEGRACIóN
  • MuCHA ACEPTACIón

            • POCA ESCALABILIDAD
            • POCOS AÑOS DE VIDA
            • Tecnologías desbancadas
            • Nuevos Patrones de APPS

¿COMO LE OCURRIó A FLASh?




EXACTO

FLASH vs htML5



MUCHOS FRAMEWORKS



uNo mÁS


¿PORQUE?


APLICACIONES MOVíLES

ESCALABLES 

TEcnOLOGÍAS WEB

¿QUIEnes LO HACEN?


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


¿DE dÓnde me viene esta motivación?


  • Me gusta lo que hago.


  • Tengo la necesidad de tener mejores herramientas


  • COMPARTIR




EVENTED.IO


Todo empieza

con

EL BAR MÔ

 








Aplicación Móvil


Un Año de investigación



Primer problema


DESPLIEGUE



Segundo Problema


EXPERIENCIA NATIVA


REsultado final


MI PROPIO

FRAMEWORK

HTml5 + CSS3 + JAVASCRIPT

VS


SDK's Privativos


¿FLASH?



¿PHONEGAP o cordova?



SOlución al DEspliegue



APACHE CORDOVA

(PHONEGAP)


Solución a la experiencia nativa



CSS3

  • Transiciones
  • Animaciones


Motor de física


  1. Basado en CSS 
  2. Controlado por Javascript


¡Single Page Applications!



Olvidar paradigma WEB


En las aplicaciones


CÓdigo se ejecuta solO en el cliente


Esto ocurría en flash también



FRAMEWORK JAVASCRIPT EN EL CLIENTE




PAtrón MVC



  1. Directivas
  2. CONTROLADORES
  3. SERVICIOS
  4. FILTROS
  5. routing


DIRECTIVAS


<tabs>
   <pane heading="Static title">Static content</pane>
   <pane ng-repeat="pane in panes"
        heading="{{pane.title}}"
        active="pane.active">
      {{pane.content}}
   </pane></tabs>


Controladores


<div ng-controller="SampleController">
  <input ng-model="person.name"/>
  <button ng-click="save()"/>
</div>

function SampleController($scope) {
  $scope.person = {    name: "Aitor"  }

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


Servicios

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

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

// El servicio puede inyectarse en cualquier sitio

function SampleController(myService) {
	myService.somefunc();
}



FILTROS


<ul>
  <li ng-repeat="c in customers | filter:{region: 'Madrid'}">{{c.name}</li> <ul>
<p>{{'SAMPLE_KEY' | localize}}</p>
<p>{{message | pluralize | toUpperCase}}</p

Routing


var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatControllers'
]);
 
phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html',
        controller: 'PhoneDetailCtrl'
      }).
      otherwise({
        redirectTo: '/phones'
      });
  }]);



¿Y 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.

  • Diseñado para la red. REquest y response.

  • Puede manejar miles de conexiones simultáneas con una sobrecarga Mínima (CPU/MEMORIA) en un solo Proceso.

  • Javascript del lado del servidor (SSJS)

Event loop


BENCHmaRK

PHP vs NODE


Base de datos


¿sql o nosql?




Mongo es NOSQL



No mas 'SQL'


Open-Source

Cursos



Education 10gen





Ejemplo



EVENTED.IO







Las mejores prácticas: preprocesadores, patrones de programación, testing, debugging, control de versiones

Angular.JS + Node.js Server + Mongo

Cliente
Backend




EJEMPloS




CONCLUSIONEs

Desarrollo de aplicaciones 

By Aitor Osés Martín

Desarrollo de aplicaciones 

  • 238