Creando Rich Internet Applications en la nueva Web 2.0

Juan CabreraDirector Cubikajcabrera@cubika.com

Acerca de Cubika

• Cubika es una de las principales empresas argentinas dedicada aldesarrollo de soluciones de software basadas en nuevas tecnologías para el sector corporativo.

• Primera compañía argentina que se especializó en el desarrollo de aplicaciones e-business sobre tecnologías Java (J2EE) y Servicios Web así como en integración de aplicaciones y Arquitecturas Orientadas a Servicios (SOA).

• Alcanza actualmente un plantel profesional de 150 personas y crece a una tasa promedio del 100% anual.

Agenda

La siguiente gran cosa (NBT): Web 2.0

Rich Internet Applicaitons (RIAs).

Escenarios para las RIAs

Qué es Flex?.

Demostraciones

Conclusiones

Preguntas y Respuestas

La siguiente gran cosa : Web 2.0

Web 2.0

PosicionamientoPosicionamientoEstratEstratéégicogico

La web La web comocomo plataformaplataforma de de aplicacionesaplicaciones

PosicionamientoPosicionamientode los de los usuariosusuarios

Control de Control de sussus propiapropiainformaciinformacióónn

CaracterCaracteríísticassticasDestacadasDestacadas

•• ServiciosServicios, no software , no software empaquetadoempaquetado•• ArquitecturaArquitectura de de participaciparticipacióónn•• EscalabilidadEscalabilidad efectivaefectiva en en costoscostos•• InteligenciaInteligencia colectivacolectiva

Fuente: Web 2.0, Tim O’Reilly

Web 2.0 Cont.

•• BloggingBlogging•• BitTorrentBitTorrent•• Google Google AdSenseAdSense•• Web servicesWeb services•• ParticipacionParticipacion•• WikisWikis

•• Personal sitesPersonal sites•• AkamaiAkamai•• DoubleClickDoubleClick•• Screen scrapScreen scrap•• PublicacionPublicacion•• AdministradoresAdministradores de de ContenidoContenido

Web 1.0Web 1.0 Web 2.0Web 2.0

Web 2.0 - La Internet Rica

% de usuarios

de Internet

100%

0%1970 1980 1990 2001

Transf. de archivos

Term.remotos(telnet)

E-mail Web Internet Rica

“ Las Rich Interactive Applications (RIA*) estánen el centro de unatendencia que harán la experiencia del usuariocon el software algo cadavez más importante.”

Ovum

Cuál es el tendencia?

“Hacia el 2010, al menos el 60 % de los nuevos proyectos de desarrollo incluirántecnología RIA.”

Gartner

Rich Internet Applications

The Evolution of Rich Internet Applications

CLIENT/SERVERMAINFRAME

WEB APPLICATIONS

REA

CH

Local

Global

RICHText UI Integrated media GUI

1992

1998

2004

Deficiencias HTML• Metáfora de “página”• Sólo 6 controles de UI• Inconsistencias cross-

browser• Impresión Press n’ pray• Request-only data• Sin operación offline• Bitmaps desde el

servidor• Infierno de plugins A/V

Deficiencias HTML• Metáfora de “página”• Sólo 6 controles de UI• Inconsistencias cross-

browser• Impresión Press n’ pray• Request-only data• Sin operación offline• Bitmaps desde el

servidor• Infierno de plugins A/V

Los tesoros perdidos de C/S• Metáfora de “pantalla”• Librerias de componentes

extensibles• Online/offline + sync• Impresión WYSIWYG• Visualizacion de datos• Conectividad a datos en tiempo real• Bitmap/vector graphics• A/V Integrado

Los tesoros perdidos de C/S• Metáfora de “pantalla”• Librerias de componentes

extensibles• Online/offline + sync• Impresión WYSIWYG• Visualizacion de datos• Conectividad a datos en tiempo real• Bitmap/vector graphics• A/V Integrado

RICH INTERNETAPPLICATIONS

Web 2.0

Tendencias en aplicaciones Internet Corporativas

TENDENCIAIMPACTO EN LA ARQUITECTURA

J2EE y .NET dominantes

Emerge una arquitecturaorientada a servicios

Estable, capas de acceso de datos y

lógica de negociosflexibles.

HTML limitadopara aplicaciones

Complicada, capade presentación

no intuitiva

IMPACTO EN EL NEGOCIO

Desafioscrónicos de usabilidad

ROIno realizado

Que son las RIAs?

Rich• Provee al usuario de una mejor experiencia, experiencia

cinemática o UI del tipo DMMT.• Feedback y validacion en contexto.

Internet• Mejor utilizacion de red.• Los datos están en un servidor central o varios.• Múltiples usuarios acceden a los datos y colaboran.• La plataforma de acceso es un browser.

Application• Permite al usuario realizar varias tareas o ejecutar un

proceso de negocio.• No es un juego el usuario tiene que hacerlo rápida y

eficientemente.

Entendiendo las RIAs

Las RIAs incluyen las siguientes características

• Cada interacción del usuario no necesita de unainteracción con el servidor

• Los datos pueden ser obtenidos desde el servidorsin necesidad de actualizar toda la pantalla.

Los mejores aspectos de la web están presentes en las RIAs

• Facilidad de deployment

• Facilidad de administración

• Facilidad de desarrollo

Tendencias en aplicaciones Internet Corporativas

TENDENCIAIMPACTO EN LA ARQUITECTURA

J2EE y .NET dominantes

Emerge una arquitecturaorientada a servicios

Estable, capas de acceso de datos y

lógica de negociosflexibles.

HTML limitadopara aplicaciones

Complicada, capade presentación

no intuitiva

IMPACTO EN EL NEGOCIO

Desafioscrónicos de usabilidad

ROIno realizado

Plataformas RIAs

AWT/Swing y SWT

• Java WebStart

• Eclipse RCP

• Spring Rich Client

AJAX = Asynchronous JavaScript and XML

• Es una técnica que combina:

• HTML y CSS

• DOM y Javascript

• XMLHttpRequest

Adobe Flex

RIAs con AJAX – Arquitectura

Escenarios para las RIA

SolucionesConfiguradores de ProductoSelf-service web sites

Online BankingRetail / e-Commerce

Beneficios

Reduccion de tasas de abandono

Upsell / Cross Sell

Reduccion de costo de Customer Service

Clientes

Harley Davidson, Intelligent Finance (HBOS), Vodaphone, City of Canton,

RIA para soluciones de venta guiada

RIA para Integración de Procesos

ERP CRMOrderEntry

Web Services / SOA

• Low Training Costs

• Fewer Errors• Higher

Utilization• Higher

productivity

Soluciones

Mortgage Application

Procesos de reclamos

Call Center Automation

Tax Processing

Beneficios

Más informacionen menos tiempo

Mayor entendimiento

Colaboración más eficiente

Decisiones más rápidas

Clientes

Dorado, Zones, Optimal Payments

Soluciones

Trader Desktop

Dashboard Ejecutivo

Network Monitoring

Beneficios

Más información en menostiempo.

Entendimiento profundo

Colaboración eficiente

Decisiones más rápidas

Clientes

SAP, ESRI, Yahoo Maps, Brocade, University of North Carolina

RIA para Visualización Datos

Qué es Flex ?

El Cliente Flash - Números

98%de PCs tienen

Flash Player instalado

60Segundos descarga

~500MPCs

60

Evolución Tecnología de Flash

Audio

Video

Applications

Motion Graphics

Flash Player 9 – Enterprise Class Run Time

Flash Player 9.0

Nueva Virtual Machine

ActionScript 3

• Grandes mejoras de performance

• Upgrades de un click

• API para integrar con AJAX y aplicaciones nativas

• ECMAScript for XML (E4X)ActionScript 1/2 ActionScript 3

Flash Player 8

Flash 8.0 alcanzó 76% de penetración en 5 meses

Flash Player 5 Flash Player 6 Flash Player 7 Flash Player 8 Flash Player 8 (projected)

0.0%

10.0%

20.0%

30.0%

40.0%

50.0%

60.0%

70.0%

80.0%

90.0%

100.0%

Jun-

00

Sep-

00

Dec

-00

Mar

-01

Jun-

01

Sep-

01

Dec

-01

Mar

-02

Jun-

02

Sep-

02

Dec

-02

Mar

-03

Jun-

03

Sep-

03

Dec

-03

Mar

-04

Jun-

04

Sep-

04

Dec

-04

Mar

-05

Jun-

05

Sep-

05

Dec

-05

Mar

-06

Jun-

06

Sep-

06

Dec

-06

Flash Player 5 Flash Player 6 Flash Player 7 Flash Player 8

Source: NPD, December 2006

Flash Player Penetration

FLASH

80% en ~12 meses

OTROS

Internet Explorer 6: 77% en 51 meses2

Windows XP: 65% despues de 45 meses3

Java v1.4.x: 33% despues de 49 meses4

La plataforma Flash está en todas partes Sistemas operativos

Navegadores

Plataformas

Otros dispositivos

Dispositivos móviles

Estructura de Flex 2.0

Design ViewDesign View

Flex Builder withCharting

Code HintingCode Hinting

DebuggingDebugging

Component SkinningComponent Skinning

Flex Framework MXML Compiler, Flex Libraries, Components, Containers, Layout Managers, Behaviors, and Effects

Flex Utilities Compilation, Debugging, Automated Testing

Flex Data Services 2.0

Real Time Message ServicesReal Time Message Services

Data Management ServiceData Management Service

Remote Procedure Calls (RPC Service)Remote Procedure Calls (RPC Service)

Flex Utilities Compilation, Debugging, Automated Testing

Programming Language ActionScript 3, MXML

Flex SDK

RIA c.2006-2007

RIAc.2002-2006DHTML

c.1997

Historia y futuro de RIA

REA

CH

Cross Device

RICHNESS AND CAPABILITY

Cross-Windows

Cross OS

No PageRefresh

Rich UIControls

A/VIntegration

ContextualCollaboration

Publish &Subscribe

Cross Browser

OfflineOperation

*Non-ubiquitous, heavy footprint runtime dependency that may also involve complex backend system/app upgrades.

Hi-FiPrint

.NET*

J2SE*

WindowsPresentationFoundation*

AJAXFrameworks

Flex 1.5Flex 2

Flex 3

WPF/E

AJAXPlain

InteractiveGraphics

Demos

Conclusiones

“Vivimos en tiempos interesantes”

Proverbio Chino

La infraestructura para Web 2.0 está aquí.

Es una evolución sobre conceptos existentes y se complementa con otras tendencias como SOA

Varias alternativas, mucha innovacion, mucho buzz, pero el camino está trazado.

Se pueden realizar beneficios de negocio en el uso de lasaplicaciones ricas basadas en la web .

Recursos

Flex Developer

• http://www.flex.org

• http://www.adobe.com/go/flex

Adobe Labs

• http://labs.adobe.com/

AJAX

• http://www.ajaxian.com/resources/

• http://www.ajaxhispano.com

• http://labs.adobe.com/technologies/spry/