RIA. Desarrollo con Tecnologías Open Source. Diego F. Quiroga

Transcripción

1 Desarrollo con Tecnologías Open Source Diego F. Quiroga Tecnologías de la Información Universidad Nacional de San Luis

2 Introducción Las nuevas tecnologías y estándares como AJAX, HTML5 y potentes motores JavaScript están popularizando el desarrollo de 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.

3 Introducción Rich Internet Application () JavaScript AJAX HTML5

4 (Rich Internet Application) Una 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 Tecnologías de Comunicación Aplicaciones WEB

5 (Rich Internet Application) Aplicaciones WEB Aplicaciones de Escritorio Tecnologías de Comunicación

6 Ejemplos: Gmail

7 Ejemplos

8 Ejemplos: Trello

9 Características de una 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).

10 Arquitectura tradicional vs

11 - 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.

12 - 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.

13 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 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).

14 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?

15 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?

16 jquery 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.

17 jquery (ejemplos)

18 CoffeeScript "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.

19 CoffeeScript (ejemplo POO CS vs JS)

20 Spine Simple, liviano, documentado... funciona "out of the box"

21 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.

22 Spine (estructura)

23 Spine (ejemplos) Estructura de directorios de una app Spine Controladores Modelos

24 Interface de usuario

25 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.

26 Bootstrap (ejemplo) Progressbar desde el markup: class="progress"

27 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

28 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.

29 Backend Rest + Json CakePHP (con soporte Informix) Apache

30 Un prototipo de prueba

31 Un prototipo de prueba

32 Conclusiones El desarrollo de una 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)

33 LISTOP Herramienta para estadísticas. Genera listados de datos y permite combinarlos. Permite incorporar datos externos (Excel). Consultas generales sobre SIU Guaraní (INFORMIX).

34 LISTOP Consultas y listados

35 LISTOP Combinación de listados

36 Muchas Gracias! Diego F. Quiroga Tecnologías de la Información Universidad Nacional de San Luis