http://goo.gl/zhFJ7

http://goo.gl/zhFJ7
RIA
Desarrollo con Tecnologías Open
Source
Diego F. Quiroga diegoq@unsl.edu.ar
Tecnologías de la Información Universidad Nacional de San Luis
Introducción
Las nuevas tecnologías y estándares como AJAX, HTML5
y potentes motores JavaScript están popularizando el
desarrollo de RIA y resultan cada vez más atractivas,
mientras que los enfoques de desarrollo clásicos van
quedando obsoletos y en desuso. No obstante, los
beneficios de estas aplicaciones traen aparejada cierta
dificultad en su desarrollo, debido a la cantidad de
conceptos y tecnologías que involucran.
Introducción
Rich Internet Application (RIA)
•
•
•
JavaScript
AJAX
HTML5
RIA (Rich Internet Application)
•
Una RIA es una aplicación WEB que incorpora características
similares a las de las aplicaciones de escritorio.
•
Busca mejorar la experiencia y productividad del usuario,
manteniendo las ventajas de la web (despliegue,
disponibilidad, independencia de la plataforma, escalabilidad,
etc).
Aplicaciones
de Escritorio
RIA
Tecnologías de
Comunicación
Aplicaciones
WEB
RIA (Rich Internet Application)
Aplicaciones
WEB
Aplicaciones
de Escritorio
RIA
Tecnologías de
Comunicación
RIA
Ejemplos: Gmail
RIA
Ejemplos
RIA
Ejemplos: Trello
Características de una RIA
•
Interfaces rápidas (one page apps), atractivas y no
bloqueantes.
•
•
•
Comunicaciones asíncronas.
Pueden tener características real time.
Manejo de estado, lógica y presentación en el cliente
(statefull).
•
Clara distinción entre la capa cliente (frontend) y servidor
(backend).
Arquitectura tradicional vs
RIA
RIA - Desventajas
•
Aumenta la complejidad en el diseño y el desarrollo
(más capas y tecnología involucrada).
•
El asincronismo complica el flujo de la aplicación,
dificulta detectar errores y situaciones no deseadas.
•
Hay que dedicar un esfuerzo adicional a la
comunicación y entendimiento entre el backend y el
frontend.
RIA - Ventajas
•
•
•
•
•
Mejor experiencia del usuario (UX).
•
El lenguaje y la tecnología utilizada en el backend es
independiente de la del frontend.
•
El backend y el frontend se pueden desarrollar por
separado.
Menos tráfico en la red.
Menos carga y uso de recursos en el servidor.
La programación del backend es más simple.
El backend se puede convertir en un API y servir distintas
aplicaciones.
RIA
Situación previa (UNSL)
•
•
•
•
•
Experiencia en desarrollo web tradicional.
•
Mejora de algunas aplicaciones incorporando jQuery
jQueryUI y AJAX.
•
Aproximación (no muy satisfactoria) a la programacion RIA
con JavaScript y jQuery.
Manejo de Apache y PHP en entorno linux.
Desarrollo MVC con el framework CakePHP.
DB engine INFORMIX (bases mas importantes).
Implementación de algunos servicios remotos sobre XMLRPC (en PHP).
RIA
Primeras luces desde Trello
Frontend (Cliente)
Javascript - AJAX / JSON
Estructura de la aplicacion javascript
(patrón MVC)
Manejo de templates (HTML)
Persistencia de Datos
ToolKit Gráfico (layouts, controles, css)
para la interface de usuario.
Backend (Server)
HTTP Server
JSON
CakePHP?, Node.JS?
•
•
•
•
•
•
•
•
RIA
Elección de Herramientas
JQuery
Spine
framework MVC javascript
Bootstrap
fr
ontend framework
Apache + CakePHP
(REST server)
Frontend (Cliente)
Javascript - AJAX / JSON
Estructura de la aplicacion javascript
(patrón MVC)
Manejo de templates (HTML)
Persistencia de Datos
ToolKit Gráfico (layouts, controles, css)
•
•
•
•
•
Backend (Server)
HTTP Server
JSON
CakePHP?, Node.JS?
•
•
•
RIA
jQuery
http://jquery.com
Librería muy potente, versátil y ampliamente difundida que simplifica la
programación en javascript. Tiene muchas utilidades, y extensiones en
forma de plugins que la convierten en una herramienta muy potente y
extremadamente útil.
Lo más importante:
Cross-Browser: permite abstraernos de los detalles de cada
navegador.
•
•
•
•
La facilidad que da para recorrer y manipular el DOM (el HTML).
El soporte para el manejo de eventos.
El soporte para AJAX.
RIA
jQuery (ejemplos)
RIA
CoffeeScript
http://jashkenas.github.io/coffee-script
"Un pequeño lenguaje que compila a JavaScript"
•
•
•
Disponible como módulo de Node.js
Sintaxis clara, legible (similar a ruby)
Por ser "JavaScript" se puede usar cualquier librería javascript (jQuery,
etc) ... y viceversa.
•
Clarifica y simplifica significativamente la programación orientada a
objetos.
RIA
CoffeeScript (ejemplo POO CS vs JS)
RIA
Spine
http://www.spinejs.com/
Simple, liviano, documentado ... funciona "out of the box"
RIA
Spine (lo importante)
•
Incluye módulos para Node.js que nos brindan un entorno de
desarrollo y deploy integrados (Hem, SpineApp).SpineApp:
utilidades para crear controladores, modelos y modelos de
test.Hem: compila coffeescript, less, y los integra en un unico
archivo (application.js y application.css). Además arma un servidor
para desarrollo que va compilando en tiempo real.
•
"Out of the box": incluye lo necesario para integrar estructura,
persistencia, manejo de templates, sin tener que instalar extras.
•
Escrito en CoffeeScript: permite desarrollar en CoffeeScript o JS.
RIA
Spine (estructura)
RIA
Spine (ejemplos)
Estructura de directorios
de una app Spine
Controladores
Modelos
RIA
Interface de usuario
http://twitter.github.com/bootstrap
RIA
Bootstrap
Bootstrap viene equipado con una buena variedad de estilos,
componentes y plugins que cubren la mayoría de las necesidades de
una aplicación web.
•
•
•
•
•
•
•
•
•
•
•
Botones y grupos de botones
Dropdowns
Barras de navegación
Menús y submenús.
Tabs, Listas
Etiquetas, tooltips, alertas.
Accordions
Carousel
Diálogos
Barras de progreso,
etc.
Y lo más importante, se pueden empezar a
usar desde el markup sin escribir ni una
línea de JavaScript.
RIA
Bootstrap (ejemplo)
Progressbar desde el markup: class="progress"
RIA
Bootstrap (responsive)
Soporte para adaptarse al viewport de tres tipos de
dispositivos mostrando u ocultando elementos de la
pantalla.
PC de Escritorio - Tablet - Teléfono
RIA
Bootstrap (grid system)
•
•
•
•
Sistema de grillado en filas y columnas.
Layout de ancho fijo: 940 px en 12 columnas.
Ancho fijo adaptativo: 724 a 1170 px en 12 columnas.
Layout fluído: porcentajes en lugar de pixels.
RIA
Backend
• Rest + Json
• CakePHP (con soporte Informix)
• Apache
RIA
Un prototipo de prueba
RIA
Un prototipo de prueba
RIA
Conclusiones
•
•
•
•
•
El desarrollo de una RIA puede ser una tarea compleja y difícil de
abordar. Encontrar la combinación de herramientas adecuadas es un
paso sumamente importante para iniciarse en el desarrollo.
La combinación planteada (CoffeeScript + Spine + Bootstrap)
favorece un inicio relativamente rápido permitiendo obtener
resultados tempranos sin un esfuerzo desmedido.
Desarrollar este tipo de aplicaciones, incentiva el desarrollo de
servicios (backend) que se pueden extender para dar disponibilidad
de los datos a distintas aplicaciones.
Tendremos mayor disponibilidad de la información (incluso entre
aplicaciones).
Tendremos usuarios más contentos (aplicaciones mas modernas y
amigables)
LISTOP
https://bitbucket.org/unsl/listop
•
•
•
•
Herramienta para estadísticas.
Genera listados de datos y permite combinarlos.
Permite incorporar datos externos (Excel).
Consultas generales sobre SIU Guaraní (INFORMIX).
LISTOP
Consultas y listados
LISTOP
Combinación de listados
RIA
¡Muchas Gracias!
http://goo.gl/zhFJ7
Diego F. Quiroga diegoq@unsl.edu.ar
Tecnologías de la Información Universidad Nacional de San Luis