El equipo de ASP.NET ha publicado una nueva actualización de la Microsoft Ajax Library (Preview 6). Esta actualización incluye un montón de nuevas capacidades y mejoras en nuestra librería de AJAX, y puede ser usada en cualquier versión de ASP.NET (incluso 2.0, 3.5 y 4), y se puede usar tanto en proyectos Web Forms como en ASP.NET MVC. La release de hoy incluye las siguientes mejoras:
- Mejor sintaxis imperativa: Una nueva sintaxis simplificada para crear controles de cliente.
- Client Script Loader. Un nuevo client script loader que dinameicamente carga todos los archivos JavaScript que requiere un control cliente o una libreria, y ejecuta esos scripts en el orden correcto.
- Mejor integración de jQuery: Todos los controles de microsoft Ajax pueden exponerse como plugins de jQuery.
Además de las mejoras en la librería de cliente, también hemos publicado una herramienta grautita llamada Microsoft AJAX Minifier. Esta herramienta nos permite mojorar sustancialmente el rendimiento de nuestros sitios web reduciendo el tamaño de los archivos de javascript. Puede ejecutarse como una herramienta de linea de comandos, y también biene como una tarea de Visual Studio MSBuild que podemos integrar en nuestros proyectos para minimizar el tamaño de los archivos de javascript cuando hacemos un build.
Usando Microsoft AJAX Library (Preview 6)
Hay dos formas de empezar a crear aplicaciones con esta nueva versión:
1) Podemos visitar el sitio de CodePlex y descargar la release de la Preview 6 (que también incluye un montón de ejemplos).
2) También podemos acceder directamente a los scripts de Microsoft AJAX desde la Microsoft AJAX Content Delivery Network (CDN). podéis hacer esto añadiendo el siguiente script en vuestros .aspx o .html:
Podéis leer mi post sobre la Microsoft AJAX CDN ( o visitar http://www.asp.net/ajax/cdn)
Mejora de la sintaxis imperativa en esta release
El equipo de ASP.NET oyó el feedback de la comunidad diciendo que muchos desarrolladores preferían una aproximación de código imperativo (contraria a la sintaxis declarativa) cuando crean los controles de cliente. Con esta release estamos introduciendo una sintaxis imperativa simple para crear controles y enlazarlos a elementos HTML de una página. Esta sintaxis está totalmente soportada en el intellisense de JavaScript tanto en VS 2008 como en VS 2010
Aquí tenéis un ejemplo del código imperativo que podéis escribir en el lado cliente de un control DataView que muestra datos desde un servicio web WCF:
El código anterior instancia un control DAtaView y lo enlaza a un elemento DIV con el id “imageView”. La url del servicio WCF está especificada en la propiedad “dataProvider”, y el nombre del método a llamar en el servicio se especifica en la propiedad “fechOperation”. La propiedad “autoFech” indica que el control deb enlazarse automáticamente al servicio WCF cuando se carga.
Aquí tenéis el elemento “imageview” al que se enlaza el control DataView. Este <div> contiene una plantilla que será usada para mostrar cada elemento obtenido del servicio (nota: las plantillas fueron una mejora introducida en la versión anterior de Microsoft AJAX):
Las expresiones {{Uri}} y {{Name}} de la plantila se reemplazan con las propiedades Name y Uri de las imágenes obtenidas del servicio. El prefijo del atributo “sys:src” en el elemento <img> es usado para evitar que los navegadores cargen una imagen el path atcual {URI}. El valor del atributo sys:src se pone en el atributo src cuando se carga la plantilla.
Cuando la página se renderiza en el navegador, tenemos una galeria simple de fotos como la siguiente:
Si no queremos usar la sintaxis declarativa en la plantilla, podemos modificarla para que sea HTML puro (no más {{}}):
Ahroa podemos lanzar un manegador de eventos itemRendered cuando creamos el control DataView de la siguiente forma:
Ahora podemos implementar el evento “imageRendered” usando el JavaScript siguiente y usar el método Sys.bind() para asignar los valores a los tags <img> y <span> de la plantilla:
Esto nos permite mantener nuestras plantillas como HTML puro, mientras que sigue mostrando la misma experiencia en la galeria de fotos.
Usando el Microsoft Ajax Clien Script Loader
La librería Microsoft Ajax Client-Side está dividida en múltiples archivos Javascript – permitiéndonos descargar sólo aquellos archivos que necesitemos (reduciendo el tamaño de la descarga).
Añadir manualmente todos los archivos requeridos para los controles Ajax puede ser algo tedioso ( y poco recomendable). Para hacer esto más sencillo de usar tanto en controles cliente como en componentes individuales, hemos añadido un nuevo cargador de scripts en esta release. Este script te ayuda a cargar todos los scripts necesarios para un control y ejecuta los scripts en el order correcto cuando se carga la página.
Por ejemplo, la siguiente página usa el client script loader para cargar todos los scripts requeridos por el control “watermark” y luego lanza el control watermark a un textbox <input>:
Fijáos en la llamada al método Sys.requier(). Cuando llamamos a Sys.require(), le damos el nombre del componente cliente (o un array de componentes cliente) que queremos cargar. El sys.requier() descarga todos los scripts necesarios en paralelo (permitiendo que nuestros scripts se cargen más rápidamente y también nos evita tener que bloquear la página mientras se renderiza). Cuando están cargados todos los scripts, se llama al método Sys.onready() y se crea el watermark.
en el siguiente ejemplo estamos enlazando el control “watermark” aun <input> con el id “name”. En tiempo de ejecución el control watermark hará que el textbox tenga una marca de agua (que desaparecerá cuando el usuario ponga el foco en el textbox y empieze a escribir):
El client script loader soporta muchas características avanzadas como combinazión automática de script y lazy loading. También puede ser inteligente a la hora de descargar o las versiones de debug o las de release de las librerías. También permite registrar nuestras propias librerías y tenerlas cargadas auotmáticamente usando la sintaxis del sys.require().
Usando controles de Microsoft Ajax con jQuery
Microsoft entrega jQuery como una parte estándar del framework de ASP.NET MVC, y también la añade por defecto a los proyectos de ASP.NET Web Forms creados con Visual Studio 2010
Con esta preview hacemos más sencilla la integración de jQuery y los controles de Microsoft AJAX, permitiendo a los desarrolladores usr jQuery para usar los controles Microsoft AJAX con la sintaxis de plugin de jQuery. Básicamente, estamos exponiendo todos los controles de Microsoft AJAX como plugins de jQuery automáticamente. En otras palabras, cuando añadimos jQuery a una página, podemos usar los controles de Microsoft AJAX como si fuesen plugins de jQuery.
Por ejemplo, el siguiente script muestra cómo podemos usar jQuery para crear un DataView que muestra datos de un servicio WCF (usando un plugin jQuery ):
Fijáos que estoy cargarndo jQuery llamando al sys.require(). podemos cargar jQuery usando el nuevo client script loader, o incluyendo la librería jQuery en la página con el tag de toda la vida <script>.
Una vez que hemos añadido jQuery a la página los controles de Microsoft AJAX Library se exponen como plugings de jQuery. Esto significa que podemos crear y enlazar los controles de Microsoft AJAX usando la sintaxis de plugins de jQuery, y está totalmente integrado con la sintaxis de selección de jQuery.
Reduciendo el tamaño de los archivos JavaScript con el Microsoft Ajax Minifier
Hay dos formas de reducir el tamañao de la descarga de un archivo JavaScript: compresion y “minimización”
Cuando hosteamos nuestro sitio web en un Windows Server con IIS 7.0, podemos configurar IIS para que comprima automáticamente los archivos JavaScript con GZIP – mejora significativamente el rendimiento y el tamaño de descarga. Sin embargo, podemos obtener más mejoras si comprimimos y minimizamos nuestros archivos JavaScript. Steve Sounders describe estos beneficios en su libro High Performance Web Sites.
Además de pbulicar la Microsoft Ajax Library (Preview 6), también hemos publicado una herramienta gratuita: Microsoft Ajax Minifier utility que nos puede ayudar a reducir el tamaño de nuestros archivos Javascript considerablemente. Fué creada por Ron Logon que trabaja en el equipo MSN. Podéis descargar esta herramienta en el sitio web de CodePlex.
Las siguientes capturas de pantalla muestra el resultado de minimizar la librería jquery usando varias herramientas como Douglas Crockford’s JSMin, Dean Edwards Packer y el YUI Compressor. Las dos últimas han sido minimizadas con la Microsoft Ajax Minifier Utility. Fijaos que ha reducido el tamaño de jQuery de 125KB a 53 KB.
La Microsoft Ajax Minifier soporta dos niveles de minimización: normal y Hypercrunched. Cuando usamos la opción normal, La Microsoft Ajax Minifier elminia todos los espacioes en blanco, comentarios, llaves, punto y coma. Cuando lo hacemos con la opción de hypercrunching, es más agresivo reduciendo el tamaño de los archivos JavaScript, y minimiza los nombres de variables locales y elimina el código que no se puede alcanzar.
Aquí hay un ejemplo de un archivo javascript:
Este es el resultado después de pasarle el Microsoft Ajax Minifier (con la opción de hypercrunching):
Fijáos todos los espacios en blanco que se han eliminado. Fijaos también en los nombres de los parámetros, se han cambiado a “a” y “b”
La descarga de la Microsoft AJAX Minifier incluye los siguientes componentes:
- ajaxmin.exe – Una herramienta de linea de comandos para minimizar archivos javascript
- ajaxmintask.dll – Una tarea de MSBuild para minimizar los javaScript de un proyecto de Visual Studio
- ajaxmin.dll – uno componente que podemos usar en nuestras aplicaciones C# y VB .NET para minimizar archivos javascript.
Una vez instalada podemos usar la herramienta de linea de comandos, y añadirla tarea de MSBuild a nuestros proyectos de Visual Studio consiguiendo estos resultados cada vez que le damos a F5.
Resumen.
La release de hoy tiene unas cuantas mejoras bastante interesantes para los desarrolladores del lado cliente. la nueva sintaxis imperativa. El client script loader nos permite optimizar el tamaño de las descargas de nuestros archivos javascript. Y la integración de jQuery permite a los desarrolladores usar jquery para atacar a los controles de cliente, palntillas, y características de acceso a datos de Microsoft Ajax Library sin cambiar su forma de programar.
Finalmente, el nuevo Microsoft Ajax Minifier nos permite mejorar el rendimiento de nuestras aplicaciones Ajax reduciendo el tamaño de nuestros archivos JavaScript. podemos usar esta herramienta tanto por liena de comandos como por una tarea de MsBuild en nuestros proyectos de Visual Studio.
Leed el post de Bertrand Le Roy’s sobre la preview 6 para aprender más aún. Aquí podéis descargar tanto la Microsoft Ajax Library (Preview 6) como la Microsoft Ajax Minifier.
Espero que sirva.
Scott
Traducido por: Juan María Laó Ramos.
juanlao 