DNM+ Online
dotnetmania 2.0
Silverlight 2.0: ¡Revolución!
Silverlight 2.0 es la palabra de moda. Seguro que, aun estando en beta, ha escuchado algo acerca de esta tecnología en los últimos meses… En este artículo veremos qué hace de la versión 2.0 un producto tan esperado, cómo se desarrolla con él y cómo integrarlo en nuestras aplicaciones Web.

Introducción

Hace unos cuantos añitos que arrancó la World Wide Web, pero si miramos atrás y vemos algún pantallazo de una página Web antigua, nos podemos quedar sorprendidos… ¡Cuánto hemos evolucionado! Ahora tenemos Javascript/DHTML/DOM para modificar la página en cliente, AJAX para hacer peticiones fuera de banda sin tener que enviar el formulario completo al servidor, pero… ¿alguien se atrevería a decir que una aplicación Web puede tener mejor interfaz que una de escritorio? ¿A qué se debe esto? A un problema de raíz: HTML no fue diseñado para lo que se quiere hacer en estos momentos; se ha ido forzando y extendiendo el lenguaje para llegar más lejos, los fabricantes de software de desarrollo han intentado rebajar la complejidad a base de librerías/frameworks y lenguajes "mágicos" que ocultan gran parte de la complejidad que implica hacer una aplicación Web de última generación. ¿Acaso alguien se plantea, hoy en día, implementar una aplicación AJAX sin usar ningún tipo de ayuda? El problema que tenemos es que los usuarios seguimos pidiéndole más a la Web, y surge la duda de si podremos seguir dándole vueltas de tuerca a ese viejo amigo llamado HTML. Aquí es donde entra un nuevo concepto llamado RIA (Rich Internet Applications), es decir, aplicaciones Web que incorporan características de aplicaciones de escritorio, como por ejemplo: tener la lógica de funcionamiento/estado en cliente, comunicarse de forma ligera con el servidor, implementar características avanzadas que normalmente no están presentes en entornos Web (drag & drop, animaciones…). La apuesta de Microsoft por RIA se llama Silverlight. ¿Qué es Silverlight 2.0? Definición informal Es un plug-in que se ejecuta en un navegador Web. Podemos elegir entre usarlo como base para nuestra aplicación o como complemento a nuestro sitio Web actual (incrustado en un fragmento de nuestras páginas). Nos permite crear todo tipo de aplicaciones: basadas en formularios, con manejo de gráficos, cuadros de mando (ver figura 1), generación de diagramas, etc. Todo esto se realiza usando un nuevo lenguaje de marcas (XAML), de una forma fácil, potente, bien estructurada, ¡pudiendo desarrollar bajo .NET en la parte cliente! ¿Qué es Silverlight 2.0? Definición
formal Wikipedia nos dice algo así como: Plug-in multimedia para navegadores Web. Subconjunto de WPF (Windows Presentation Foundation) que permite ejecutar en un navegador Web animaciones, mostrar gráficos vectoriales y visualizar vídeo. Estará disponible para Windows y Mac OS-X; para Linux hay un proyecto open source paralelo llamado Moonlight, que se espera sea compatible con Silverlight.

Silverlight se presenta como la alternativa a Adobe Flash / Flex. ¿Otro Flash? ¿Qué tiene esto de revolucionario? No es solo "otro" Flash, Flex o HTML: es un plug-in que nos permite tener una interfaz de usuario avanzada, sin las restricciones y problemas que otras tecnologías nos acarrean. Algunos de los puntos fuertes de Silverlight 2.0 son: •  Podemos elegir entre un amplio abanico de lenguajes para desarrollar, tanto compilados como interpretados: C#, Visual Basic, Iron Python, Iron Ruby… •  Es posible desarrollar en un mismo lenguaje en cliente y en servidor (acceso a servicios). Gracias a esto la curva de aprendizaje se reduce, y tenemos un mismo entorno de desarrollo. •  Tenemos una versión reducida de .NET Framework disponible en cliente. Por ejemplo: ¿qué le parece disponer de LINQ to XML en cliente? ¿Y enlace a datos? •  Al recaer más lógica de la aplicación en la parte cliente descargamos la parte servidora, siendo nuestros sistemas más escalables. •  HTML es un lenguaje de marcas que se ha ido forzando para adaptarlo a los nuevos tiempos y requerimientos del público. Desarrollar sitios avanzados con DHTML y Javascript se ha convertido en una tarea muy complicada, que requiere adquirir librerías de terceros, adaptar el código para que funcione en diferentes navegadores… XAML es un lenguaje de marcas moderno y extensible, y al correr éste sobre un plug-in tenemos una única interpretación del mismo, y no tenemos que preocuparnos de realizar adaptaciones a los diferentes exploradores. •  Si programamos en ASP.NET con Web Forms, tenemos que pasar de controles de servidor a controles HTML y viceversa. Esto hace que nuestras páginas sean difíciles de manipular en cliente vía Javascript, y podemos tener problemas de rendimiento (ViewState). Silverlight 2.0 implementa controles estándares que son manipulados directamente en el cliente.
•  Las aplicaciones Silverlight agrupan los recursos en ficheros ZIP que se envían comprimidos al cliente, teniendo un tiempo de descarga óptimo. •  Es posible editar un fichero XAML tanto con Visual Studio como con editores de texto estándares e incluso utilizando herramientas para diseñadores gráficos (Expression). Esto permite a desarrolladores y grafistas trabajar codo con codo. •  Los controles estándar que incorpora Silverlight están pensados desde el punto de vista del desarrollador. Cualquier programador de Windows Forms/ASP.NET/WPF se familiarizará rápidamente con ellos. •  Será compatible con tecnologías móviles; recientemente, Nokia ha anunciado que lo incluirá en algunos de sus modelos. Pero… alguna pega tendrá, ¿no? Nada es perfecto en este mundo, las principales desventajas que tiene este producto son:

•  Está disponible para plataformas Mac y Windows, pero no para Linux. Aunque el mismo grupo que desarrolló el proyecto Mono está realizando una adaptación, con codename Moonlight, que cuenta con el soporte de Microsoft.
•  Se encuentra actualmente en fase beta; en proyectos a muy corto plazo no podemos tomarlo como opción de desarrollo. Se espera que este verano tengamos la versión definitiva.

Arquitectura
y funcionamiento Vamos ver cómo se estructura una aplicación de este tipo, qué herramientas tenemos disponibles para desarrollar y, para abrir boca, realizaremos un pequeño ejemplo con el que iniciaremos nuestras andanzas en este nuevo mundo. ¿Cómo se estructura una
aplicación Silverlight?
Una de las mejores formas de asimilar la arquitectura de una solución Silverlight es comparándola con la de un viejo conocido nuestro, ASP.NET (ver figura 2). En ASP .NET tenemos:

En cliente: •  HTML. •  Código cliente (Javascript).

En servidor:
•  Code behind (.NET: C#, VB, etc.). •  Servicios (.NET: C#, VB.NET, etc.). En Silverlight tenemos:

En cliente: •  Contenedor (página HTML). •  XAML (dentro de la página HTML). •  Code behind (.NET: C#, VB.NET, etc.). En servidor: •  Servicios (.NET: C#, VB.NET, etc.) Todo esto es muy interesante… ¿qué herramientas tenemos disponibles? Si bien un desarrollador puede implementar una aplicación utilizando Visual Studio 2008 tanto para editar el XAML como el code behind, Microsoft nos permite que grafistas y programadores puedan cooperar en armonía, ofreciéndonos herramientas especializadas para cada rol (ver figura 3). En concreto tenemos:

Grafistas

•  Expression Design: herramienta con la que podemos crear gráficos y exportarlos a formato XAML. •  Expression Blend: con esta otra, además de poder crear gráficos, podemos también crear "formularios" (soltar en el área de diseño controles de usuario, emplear elementos para definir un layout, etc.).

Desarrolladores

•  Visual Studio 2008: El IDE está totalmente integrado con Silverlight. Por ejemplo, tenemos Intellisense para el XAML y para el code behind, etc. Ésta y otras características nos harán sentirnos como en casa desde el primer día. •  Otros editores: Si bien el compañero ideal de Silverlight para un desarrollador es Visual Studio, no siempre lo vamos a tener disponible (por ejemplo, en un servidor). Gracias a que los ficheros XAML y el code behind son ficheros de texto, podemos abrirlos con cualquier editor estándar (Notepad, UltraEdit, etc.).

En Silverlight queda claramente separado qué parte tiene que tocar un grafista (XAML) y qué parte es propiedad del programador (code behind). Como somos técnicos, elegimos Visual Studio 2008 como herramienta, y nos instalamos el plug-in de la versión 2.0 y el SDK de Silverlight 2.0 para Visual Studio. Todo este material lo podemos descargar del sitio Web oficial, www.silverlight.net. Ahora estamos listos para crear el primer proyecto. ¡Hola Mundo! Aparquemos la "teoría" y pasemos a implementar un pequeño ejemplo que nos permita comprobar cómo se desarrolla con esta nueva tecnología. Para ello, iniciamos Visual Studio 2008, elegimos crear un nuevo proyecto (previamente deberemos haber instalado el plug-in de Silverlight 2.0 y el SDK), y elegimos "Silverlight Application" (ver figura 4). A continuación se nos pregunta si queremos añadir un proyecto Web ASP.NET a la solución; diremos que sí. Esto hace muy fácil desplegar nuestra aplicación Web a un entorno de producción y nos permite, si hiciese falta, integrarlo con código ASP.NET estándar (ver figura 5). Generamos el proyecto, y analizamos la solución que ha creado Visual Studio (ver figura 6). Si ejecutamos el proyecto, veremos una página vacía. Le añadimos el código XAML necesario (ver listado 1) para crear una ventana con la apariencia de la figura 7. Ahora sí, al ejecutar el proyecto veremos cómo se muestra nuestra ventana. Solo falta un pequeño detalle: implementar la lógica que permite al usuario cambiar el texto a mostrar (tecleando en la caja de edición inferior y pulsando en el botón "Cambiar"). Para ello: •  Añadimos un manejador al evento Click del botón btnCambio en el XAML (ver listado 2). •  Lo implementamos en el code behind de la página (ver listado 3).

Ejecutamos de nuevo, ¡y ya tenemos nuestra aplicación completa! (figura 8). Hemos finalizado con el ejemplo y no hemos tocado código alguno del proyecto ASP.NET asociado ¿Para qué sirve? Nuestro proyecto necesita instanciar el plug-in de Silverlight en un navegador Web para poder ejecutarse. Visual Studio genera por nosotros el código necesario para visualizar el plug-in en una aplicación ASP.NET (fichero HolaMundoTestPage.aspx, ver listado 4), y en una página HTML (fichero HolaMundoTestPage.HTML, ver listado 5). Conclusión Como reza el titular de este artículo, Silverlight 2.0 tiene todos los visos de provocar una auténtica revolución en el mundo del desarrollo Web. Ahora que el producto ha pasado de Alfa a beta, es un buen momento para comenzar a practicar con esta tecnología. Es un candidato a evaluar para desarrollos a medio y largo plazo.

blog comments powered by Disqus
autores
referencias