atSistemas XQuiD Alta productividad en AJAX

Qué es AJAX Quick UI Development

• Framework de componentes AJAX + Herramienta de productividad.

Cross Browser API

User Aplications

UI Components Library

UI System

Kernel

Browser

C.R.S Cross Browser API

Nuestra visión. Necesidad de un framework

• 1 - IDEs (Eclipse, Flex, Visual Studio, RAD, …), Frameworks Open Source (DOJO, …), estandars tecnológicos (Ajax)

• 2 – Framework corporativo

• 3 – Herramientas de productividad

• 4 – Aplicaciones de negocio

• Cada organización tiene sus necesidades CONCRETAS

1 2 3 4

Nuestra visión. Por qué XQuiD

IDEs, Frameworks AJAX (DWR, JSON, DOJO, GWT, etc etc…)

XQuiD - Framework

XQuiD - Herramientas de productividadXQuid.

Aplicaciones de Negocio

1.- Muy Alta productividad en el desarrollo de aplicaciones RIA AJAX

2.- Minimizar drásticamente los costes de mantenimiento

3.- Cualquier skill puede desarrollar AJAX con una mínima formación

4.- Aplicaciones AJAX Robustas y de Calidad

5.- Adaptar la tecnología a las necesidades concretas del cliente

• Características técnicas:

– Estandariza la forma de codificar y estructurar la programación de las UIs con AJAX y JavaScript

– Abstrae de las diferencias entre browsers– Cuenta con widgets (componentes visuales) cross-browsers– Cuenta con un editor visual integrado dentro de eclipse / RAD– Integración perfecta con otros frameworks (DWR, Struts …) – Permite desarrollar bajo el paradigma basado en componentes

visuales reutilizables– Totalmente extensible, creando componentes propios

Qué es AJAX Quick UI Development

Edición wysiwyg

• Plug-in Eclipse-RAD

• Navegador incrustado

• Editor Wysiwyg

• Paleta de componentes AJAX

Desarrollo basado en COMPONENTES

• El desarrollo de UI basado en componentes se ha demostrado el modelo más productivo a lo largo de la historia.

• Una interfaz de usuario complejo se construye ensamblando componentesmás simples.

• Con este paradigma, altamente extendido en los IDEs orientados a desktop, el desarrollo se hace mucho más productivo y el mantenimientomucho más sencillo.

• AJAX es ideal para utilizar este paradigma.

Desarrollo basado en COMPONENTES

• Un componente tiene:

– Parte Visual

– Comportamiento interno(HTML-JavaScript)

– Llamadas a código de negocio (web services, …)

– Propiedades, Métodos y Eventos privados.

– Propiedades, Métodos y Eventos públicos.

• Componente: “porción” de UI ensamblable y reutilizable para dar lugar a UIs más complejas.

Desarrollo basado en COMPONENTES

• Paleta de Componentes básicos

– Componentes básicos para construir UIs

– Ampliar los componentes básicos, creando nuevos componentes adaptados a las necesidades concretas de un cliente es MUY FÁCIL.

Desarrollo basado en COMPONENTES

• Paleta de Componentes extendida

– Cualquier UI previamente desarrollada es un componente susceptible de ser usado para construir otra UI

– Promueve la separación de responsabilidades en el desarrollo y evita el improductivo copy & paste

Alineación y ajuste rápido de componentes

• Objetivo: PRODUCTIVIDAD

Drag and Drop

• Mecanismo de Drag & Drop implementado en todoslos componentes mediante el framework

• El desarrollador puede utilizarlo muy fácilmente a través de los eventos y métodos existentes para tal fin.

Estilos y temas

Métodos

- theme- cssType- style

TextBox:DNI

<directorio>/myCss.css

listbox {background-color: white}textbox {color: rgb(0,0,255)}button {background-color: gray}. . .

background-color: gray; font-family: sans-serif

La separación entre el comportamiento de un componente y su presentación a través de estilos y temas hace muy sencillo cambiar su aspecto visual sin interferir en su funcionamiento.

Integración - coexistencia con otras tecnologías

• Totalmente integrable con otros frameworks (Struts, .NET) y utilidades AJAX (DWR, JSON, …)

• Apostamos por entornos de presentación con tecnologías heterogeneas.

– Todos pueden coexistir.

– Interoperabilidad total XQuiD – (Flex 100% y WPF/E en desarrollo).

Servicios de comunicación con servidor

• Incorpora un módulo de comunicaciones de muy sencillo uso que permite la comunicación asíncrona mediante HTTP/HTTPS utilizando:

– XML

– JSON

Desarrollo rápido lógica cliente JavaScript

• Vía Código

• Visual con Drag & Drop (skills bajos en JavaScript).

Librería de efectos

• Librería de efectos visuales

– Traslación

– Redimensionamiento

– Desvanecimiento

– …

• Librería extensible

• Los efectos pueden ser aplicados a cualquier componente (especificando los correspondientes parámetros : tiempo, coordenadas x, y …)

Código AJAX – JavaScript 100% estándar

• El uso del editor visual facilita enormemente el desarrollo, pero no es imprescindible.

• El código es 100% estándar, totalmente comprensible por cualquier desarrollador y perfectamente mantenible sin el editor visual.

• La diferencia entre usarlo o no es sólo productividad en el desarrollo.

Demos

Demos

Demos

Demos

Resumen. Por qué XQuiD

IDEs, Frameworks AJAX (DWR, JSON, DOJO, GWT, etc etc…)

XQuiD - Framework

XQuiD - Herramientas de productividadXQuid.

Aplicaciones de Negocio

1.- Muy Alta productividad en el desarrollo de aplicaciones RIA AJAX

2.- Minimizar drásticamente los costes de mantenimiento

3.- Cualquier skill puede desarrollar AJAX con una mínima formación

4.- Aplicaciones AJAX Robustas y de Calidad

5.- Adaptar la tecnología a las necesidades concretas del cliente

Resumen. Cuándo usar XQuiD

• Islas AJAX en webs “tradicionales”.

• Nuevas aplicaciones web RIA 2.0 con total filosofía AJAX.

• Portales altamente interactivos RIA – AJAX.

• Rediseño de aplicaciones - de escritorio, 3270, … - con tecnología RIA / AJAX.

• Muy buena idea comenzar con POC.

• Base para construir una arquitectura adhoc.

Resumen. atSistemas, AJAX y XQuiD

– Proveedor de referencia en proyectos de desarrollo de alto componente AJAX

– atSistemas como partner tecnológico RIA AJAX y XQuiD como base para construir o ampliar una arquitectura adhoc.

Resumen. atSistemas y la productividad

• SEA – Service Extended Architecture

GRACIAS POR SU ATENCIÓNLuís Enríquez Matas

Álvaro de Miguel

PARA MÁS INFORMACIÓN: www.atsistemas.com / e-mail: at@atsistemas.com

Preguntas?