Ribe Software con pasión

Enero 17, 2008

Tecnologías para crear ‘Rich Internet Applications’

Hoy en día RIA, Rich Internet Application, es un término bien conocido. ¿Qué significa? El término RIA se refiere a aplicaciones web con una experiencia rica de usuario (como las aplicaciones de escritorio).

En el comienzo en la WWW todo era HTML (HyperText Markup Language) sin más. Teníamos una tecnología orientada al documento. Con HTML tienes texto, imágenes, tablas, formularios, y lo más importante: hiperenlaces. Cuando haces click en un hiperenlace eres dirigido a otra página web. En el navegador todo el contenido se reemplaza por el nuevo documento HTML: el contenido anterior desaparece. Además los formularios HTML son muy simples. ¿Qué haces si quieres que el usuario inserte una fecha en un campo del formulario? La única solución es dejar al usuario que envíe el formulario y entonces si el valor no es correcto redirigir al usuario de nuevo al formulario indicando los errores que debe corregir. ¿Y si el usuario quiere enviar un archivo muy grande? Sí, hay un componente HTML para enviar ficheros, pero ¿qué ocurre si el fichero es muy grande? El navegador no le dice al usuario cúanto tiempo tardará en enviarse o qué porcentaje se ha enviado ya. Simplemente dice “enviando petición” y eso es cualquier cosa menos algo usable. Y ¿qué ocurre si quieres que el usuario seleccione el típico “país” y “provincia” en un formulario? En una aplicación de eescritorio pondrías un combo para seleccionar el país y otro para seleccionar la provincia. Cuando el usuario selecciona el país el combo de provincias se rellena con las provincias de ese país obtenidas de una base de datos, por ejemplo. ¿Cómo puedes hacer eso sólo con HTML? Lo siento, no puedes. HTML no permite una experiencia rica de usuario.

Bien, para solucionar esta carencia se desarrolló JavaScript. Con JavaScript y el API DOM se puede cambiar cualquier cosa de una web de forma proramática. Muy útil. Puedes validar las entradas de un formulario en el cliente, puedes permitir al usuario seleccionar una fecha en un calendario,… Pero ¿qué ocurre cuando quieres obtener información del servidor como en el ejemplo de país-provincia? El primer truco era crear marcos internos ocultos (iframes). Con este truco puedes cargar datos en un marco separado y leerlos desde otro marco con JavaScript. Ese fue el comienzo de AJAX. Ahora tenemos XMLHttpRequest que es una manera mucho más elegante de hacer esto.

Demodo que ¡JavaScript permite construir Rich Internet Applications! Pero… ¿sabes? Hay gente a la que no le gusta JavaScript porque tiene muchas incompatibilidades entre navegadores, no soporta bien POO (programación orientada a objetos) y normalmente rompe la accesibilidad y la visibilidad (en los buscadores) de tus aplicaciones web.

Bueno, si no te gusta JavaScript hay algunas tecnologías no basadas en JavaScript para crear Rich Internet Applications:

  • Java applets. Son una tecnología que no está de moda pero durante algunos años era habitual crear applets para aplicaciones en intranets. Puedes comunicarte con el servidor a través de sockets. Probablemente tengas que firmar el applet digitalmente por razones de seguridad pero es no es un problema para aplicaciones destinadas a intranets. Y también necesitas que los usuarios tengan Java instalado pero, de nuevo, no es un problema para aplicaciones instaladas en intranets, pero sí puede serlo para aplicaciones destinadas a internet.
  • Adobe Flex. La idea es similar a los applets de Java: a través de un plugin en el navegador puedes incrustar pequeñas aplicaciones en cualquier documento HTML. En este caso se usan los lenguajes MXML y/o ActionScript para crear la interfaz de usuario y lógica de la aplicación. Entonces el código es compilado a una película Flash (.swf) que puede ser ejecutada en el Flash Player. Los beneficios son:
    • Flash está instalado en casi cualquier ordenador personal conectado a internet (todo el mundo ve vídeos en YouTube).
    • No hay problemas de compatibilidad porque sólo hay un Flash Player.
    • Facilidad de desarrollo, buena experiencia de usuario, interfaz gráfica agradable.
  • OpenLaszlo se basa en la misma idea que Flex pero con dos grandes diferencias:
    • Es OpenSource. Bueno, Flex lo será, pero por el momento no el Flash player.
    • Puedes compilar el código a Flash y también a HTML+JavaScript.
  • Microsoft Silverlight es una nueva technología que compite directamente con Adobe Flash y Flex.

¿Y si te gusta JavaScript pero no quieres reinventar la rueda o quieres usarlo lo menos posible? Puedes usar una solución JavaScript cliente o servidor.

Algunas soluciones del lado del cliente (librerías JavaScript):

  • Ext JS tiene un conjunto de componentes listos para usarse como tablas, árboles, diálogos,… Hablé de esta librería en un artículo anterior.
  • Dojo es similar a Ext JS pero en mi opinión es más limitado. Sin embargo tiene componentes muy útiles para crear mush-ups. Por ejemplo puedes integrar fácilmente Google Maps en tu aplicación.
  • Prototype es una librería JavaScript muy popular que simplifica el uso de AJAX en tus aplicaciones.
  • Otras: script.aculo.us que está basada en prototype y ofrece facilidades para crear animaciones, drag and drop, componentes AJAX, utilidades para DOM y pruebas de unidad; mootools también ofrece utilidades para AJAX y efectos con JavaScript.

Algunas soluciones del lado del servidor (frameworks del lado del servidor):

  • GWT (Google WebToolkit) es un framework Java. Con este framework puedes crear interfaces de manera muy similar a como harías con Swing y entonces, con un poco de magia, el código Java es compilado a JavaScript. En tiempo de desarrollo puedes probar tus aplicaciones en la máquina virtual de Java en un entorno simulado con los beneficios de que puedes usar cualquier herramienta de desarrollo disponible para Java. GWT hace el JavaScript transparente al programador.
  • JSF (Java Server Faces) es una tecnología Java que deriva de JSP (Java Server Pages). Se trata de escribir páginas JSP con los taglibs de JSF. Estos taglibs ‘dibujan’ comopnentes ricos. De modo que puedes escribir código Java que responde a los eventos de esos componentes (como en cualquier aplicación de escritorio). También hace el JavaScript transparente al programador. JSF está diseñado para permitir desarrollo rápido de aplicaciones (RAD, rapid application development). Hay bastantes herramientas para crear aplicaciones web basadas en JSF.
  • Ruby-on-Rails (RoR) es un framework pionero en ofrecer facilidades para aplicaciones basadas en AJAX.
  • Otros frameworks: hoy en día los frameworks más populares para cada lenguaje de programación traen facilidades para crear Rich Internet Applications. Algunos ejemplos: Symfony para PHP or TurboGears para Python.

Bien ¿hay alguna ‘experiencia rica de usuario’ más que queramos ver en nuestras aplicaciones web? Veamos. Todas las tecnologías anteriores se basan en la web (necesitan un navegador) y no puedes trabajar off-line con ellas. Si no estás conectado a internet no puedes usarlas. Para solverntar este inconveniente Google ha desarrollado una nueva tecnología: Google Gears. Con Google Gears puedes gestionar una base de datos relacional con JavaScript así que pudes almacenar grandes cantidades de datos en el cliente. De modo que puedes replicar datos en el lado del cliente permitando al usuario consultarlos cuando está desconectado. GMail soporta Google Gears así que si lo tienes intalado puedes leer tu correo aunque estés desconectado. Otros servicios de Google como Google Calendar también soportan esta tecnología.

¿Algo más? Vayamos más lejos. Ahora quieres mayor integración con el escritorio. Quieres que el usuario pueda abrir tu aplicación con doble click usando un icono personalizado y quieres que tus aplicaciones se ejecuten en una ventana independiente (no en el navegador), sin las típidas barras de herramientas: dirección, marcadores,… ¿Alguien ha pensado en esto antes?

  • Prism es un proyecto de la fundación Mozilla. Puedes ejecutar tus aplicaciones web como si fuesen aplicaciones de escritorio: con su ventana independiente sin barras de herramientas, con doble click, y de momento poco más.
  • Adobe AIR (llamado Apollo en la versión alfa) es un entorno de ejecución que permite usar muchas tecnologías como son: Flex, Flash, HTML, AJAX y PDF. Tiene un motor de renderizado web embebido (WebKit) para soportar todas estas tecnologías y ofrece algunas otras características:
    • Puedes generar un instalador para tu aplicación.
    • Icono que con doble click abre la aplicación en su propia ventana.
    • Puedes crear bases de datos relacionales locales porque viene con SQLite.
    • Soporte drag-and-drop con el sistema operativo.

Fantástico. Tenemos un gran conjunto de tecnologías. ¿Algo más? Bueno, sí. Hay otra forma de hacer Rich Internet Applications: puedes evitar cualquier lenguaje de programación basado en web y crear una aplicación de escritorio en cualquier lenguaje que obtenga los datos de web services. Por ejemplo: Google Earth, Flickr Uploader o Twitterrific. Con este método no tienes limitaciones en la experiencia de usuario. Pero pierdes una de las grandes ventajas de las aplicaciones web: la instalación y actualización en las aplicaciones web es transparente. Con Adobe AIR tienes el mismo problema. ¿Alguna solución? Desde hace unos cuantos años si desarrollas aplicaciones usando Java SE puedes distribuirlas con Java Web Start. Usando JWS (Java Web Start) defines un archivo XML en formato JNLP y con extensión .jnlp. En ese fichero defines dónde está alojada la aplicación, que versión del Java Runtime Environment se necesita y más cosas. Luego pones un hiperenlace en tu página web que enlace al fichero JNLP. Si el usuario tiene JWS asociado con esa extensión de archivo (puedes detectar con JavaScript si JWS está instalado) y hace click en el enlace Java Web Start descarga, instala y ejecuta tu aplicación. Cada vez que el usuario ejecuta la aplicación Java Web Start solicita al servidor si hay actualizaciones y las descarga si hay alguna. Por supuesto esta tecnología sólo está disponible para aplicaciones Java. Sin embargo si no usas Java o no quieres usar JWS siempre puedes programar tu propio sistema de actualizaciones a mano.

Para terminar también puedes crear un híbrido como se explica en otro artículo: Making double clickable Java EE web applications.

¿Algo más? ¡Sí! ¡No he hablado sobre tecnologías móviles! Quizá en un futuro artículo… De momento recuerda esto: las Rich Internet Applications han llegado y todas estas tecnologías de las que he hablado están cambiando la forma en cómo las aplicaciones web van a ser desarrolladas.

1 comentario »

  1. Muy buen articulo…..conciso, claro, explicativo

    Gracias.

    Comentario por Luis — Julio 17, 2008 @ 2:16 pm

Redifusión RSS de los comentarios de la entrada. URI para TrackBack.

Deja un comentario

Blog de WordPress.com.