La librería jQuery tiene una comunidad muy apasionada de desarrolladores, y es la librería de JavaScript más usada en la web.
Hace dos años anuncié que Microsoft ofrecería soporte para jQuery, y que ibamos a incluirla en nuevas versiones de Visual Studio. Por defecto, cuando creáis proyectos ASP.NET Web Forms o ASP.NET MVC con VS 2010 encontraréis la librería jQuery incluida en vuestro proyecto.
Hace unas semenas en mi seguna presentación en el MIX 2010 anuncié que Microsoft iba a contribuir al proyecto jQuery. Durante la charla, John Resig — el creador de la librería jQuery y lider del equipo de desarrollo de jQuery – habló un poco sobre nuestra participación y habló sobre un prototipo de una nueva API de plantillas para jQuery.
En este post, voy a hablar un poco sobre cómo mi equipo está comenzando a contribuir al equipo de jQuery, y hablaremos sobre algunas características específicas en las que estamos trabajando como las plantillas de cliente y el data linking (data-binding).
Contribución a jQuery
jQuery tiene una comunidad de desarrolladores fantástica, y una forma muy abierta de proponer y hacer contribuciones. Microsoft está siguiendo el mismo proceso de contribución a jQuery como cualquier otro miembro de la comunidad.
Como ejemplo, cuando hemos estado trabajando con la comunidad jQuery para mejorar el soporte de plantillas mi equipo ha seguido los siguientes pasos:
- Creamos una propuesta para plantillas y la posteamos en el foro de desarrollo de jQuery (http://forum.jquery.com/topic/jquery-templates-proposal y http://forum.jquery.com/topic/templating-syntax ).
- Tras recivir el feedback en los foros, el equipo de jQuery creó un prototipo para las plantillas y posteó el prototipo en el repositorio Github (http://github.com/jquery/jquery-tmpl ).
- Iteramos en el prototipo, creando un nuevo fork en Github para sugerir mejoras de diseño. Varios miembros de la comunidad también han contribuido en el diseño creando otros forks.
Ha habido una participación impresionante de la comunidad jQuery en respuesta a la propuesta original (sobre unos 100 post en los foros de jQuery), y el diseño ha evolucionado significativamente basándose en el feedback de la comunidad.
El equipo de jQuery es el último que decide qué ocurrirá con esta propuesta – pueden incluirlo en el core de jQuery, o hacerlo un plugin oficial, o rechazarlo por completo. Mi equipo está muy contento de poder participar en el proceso open source, y hacer sugerencias y contribuir de lamisma manera que cualquier otro miembro de la comunidad.
Soporte de plantillas de jQuery
Las plantillas del lado del cliente permiten a los desarrolladores generar y renderizar HTML en el cliente muy fácilmente. Las plantillas soportan una sintaxis simple que permite tanto a diseñadores como desarrolladores declarar el HTML específico que quieren generar. Los desarrolladores pueden invocar a las plantillas en el cliente y pasar objetos JavaScript para hacer que el contenido se renderize totalmente guiado por datos. Estos objetos JavaScript pueden basarse opcionalmente en datos obtenidos de un servidor.
Como la propuesta de plantillas jQuery sigue evolucionando, la versión final puede resultar muy diferente de la propuesta inicial. Este post os muestra cómo podeis usar y probar estas plantillas tal y como está hecho ahora (podéis descargar el prototipo del equipo de jQuery en: http://github.com/jquery/jquery-tmpl o la última subida de mi equipo en : http://github.com/nje/jquery-tmpl).
Plantillas cliente de jQuery
Podéis crear las plantillas de jQuery del lado del cliente embebiendo el contenido en el tag <script type=”texthtml”>. Por ejemplo, el siguiente HTML contiene un <div>, y la plantilla de jQuery “contactTemplate” (dentro del elemento <script type=”text/html”> que podéis usar para mostrar dinámicamente una lista de contactos.
Las expresiones {{=name}} y {{=phone}} se usan en la plantilla par amostrar los nombres y los teléfonos de los objetos “contact” que se le pasen a la plantilla.
Podemos usar esta plantilla tanto para mostrar un array de objetos JavaScript como uno solo. El código JavaScript siguiente muestra cómo podemos renderizar un array de objetos “contact” con la plantilla anterior. El método render() renderiza los datos en un string y lo añade al string del elemento DIV “contactContainer”:
Cuando se carga la página, se renderiza la lista de contactos por la plantilla. Todo el renderizado de esta plantilla ocurre en el cliente, el navegador:
Comandos de plantilla y logica condicional de presentación
La propuesta actual de plantillas soporta un pequeño conjunto de comandos – incluyendo el if, else y each. El número de comandos se quería mantener pequeño para evitar que se ponga lógica más compleja fuera de las plantillas.
Incluso con ese pequeño conjunto de comandos son muy útiles, por ejemplo, que un contacto pueda tener cero o más teléfonos. Los contactos pueden representarse de la siguiente manera:
La siguiente plantilla muestra cómo podemos usar los comandos if y each para mostrar los contactos de cada contacto:
Si un contacto tiene uno o más número de teléfono entonces se muestra cada uno iterando sobre los números con el comando each:
El equipo de jQuery diseñó los comandos de plantilla de forma que fuesen extensibles. Si tenéis la necesidad de un nuevo comando podéis añadir uno nuevo de manera fácil al conjuto predeterminado de comandos.
Soporte para enlace a datos de cliente
El equipo de ASP.NET a mandado otra proppuesta al prototipo en los foros de jQuery (http://forum.jquery.com/topic/proposal-for-adding-data-linking-to-jquery). Esta propuesta describe la característica llamada data linking. El Data Linking permite enlazar a la propiedad de un objeto la propiedad de otro – de manera que cuando una cambia la otra también. El Data Linking nos permite mantener los datos de nuestra interfaz de usuario sincronizada fácilmente.
Si os resulta familiar el concepto de data-binding entonces también os será familiar el data linking (en la propuesta, llamamos a esta propuesta data linking ya que jQuery ya incluye ún método bind() que no tiene nada que ver con data-binding).
Imaginemos, por ejemplo, que tenemos una página con los siguientes elementos <input>:
El siguiente código JavaScript enlaza los dos elementos a las propiedades del objeto “contact” con las propiedades “name” y “phone”:
Cuando ejecutamos este código, el valor del primer elemento (#name) se pone en la propiedad name del objeto contact, y el segundo elemento en la propiedad (#phone) en la propiedad phone. De manera que los cambios que se produzcan en los elementos de INPUT se producirán en el objeto contact.
Como el objeto contact está enlazado al elemento INPUT, cuando pedimos la página, los valores se muestran:
Fijáos que hemos actualizado los datos del objeto contact usando el método de jQuery attr(). Para que el datalinking funciones, debemos usar métodos jQuery para modificar los valores de la propiedad.
Enlace en ambas direcciones
El método linkBoth() permite el enlace en ambas direccionres. El objeto contact y los elementos INPUT están enlazados en ambas direcciones. Cuando modificamos un valor del elemento INPUT se actualizan los valores del objeto contact.
Por ejemplo, el siguiente código añade un manejador del lado del cliente para el evento clic de un elemento button de HTML. Cuando hacemos clic en el botón, se muestran los valores del objeto contact en un diálogo usando un alert():
Esto demuestra qué ocurre cuando cambiamos el valor de un elemento INPUT y le damos al botón. Fijáos que la propiedad name del objeto “contact” que está enlazada al objeto INPUT se actualiza automáticamente:
El ejemplo anterior es muy simple. En lugar de mostrar nuevos valores del objeto contact con un alert(), podemos imaginar llamar un servicio web para guardar el objeto en una base de datos. Los beneficios del data linking es que nos permiten centrarnos en nuestros datos y de cómo queremos mantener la interfaz de usuario actualizada y sincronizada.
Conversores
La propuesta actual también soporta la característica que llamamos conversores. Un convertidor te permite convertir fácilmente el valor de una propiedad durante el data linking.
Por ejemplo, imaginemos que queremos representar los número de teléfonos de foma estándar con la propiedad phone del objeto contact. En conreto, no queremos incluir caracteres especiales como ()- en el teléfono – sino que tan sólo queremos dígitos y nada mas. En ese caso, podéis lanzar un convertidor para que transforme el valor del elemento INPUT a ese formato con el código siguiente:
Fijaos cómo se pasa una función conversora al método linkForm() usada para enlazar la propiedad phone con el elemento INPUT. Esta función conversora elimina cualquier caracter que no sea numérico del elemento INPUT ántes de actualizar la propiedad phone. Ahora, si escribimos el teléfono (206)555-9999 el valor que se asigna es 2065559999:
Podemos usar los conversores en sentido contrario también. Por ejemplo, podemos aplicar un formato estándar cuando vamos a mostrar el teléfono de la propiedad phone.
Convinando plantillas y Data Linking.
El objetivo de estas dos propuestas de plantillas y data linking es conseguir una forma de trabajar con datos cuando creamos sitios y aplicaciones web con jQuery. Las plantillas hacen muy sencillo mostrar registros de una base de datos a través de Ajax. Data Linking permite mantener los datos y la interfaz de usuario sincronizada.
Actualmente estamos trabajando en una extensión de la propuesta de datalinking para que soporte data linking declarativo. Queremos que sea sencillo aprovechar el datalinking cuando usamos una plantilla para mostrar datos.
Por ejemplo, imaginad que estamos usando la siguiente plantilla para mostrar un array de productos:
Fijáos en las expresioens {{link name}} y {{link price}}. Estas expresiones permiten un datalinking declarativo entre los elementos SPAN y las propiedades de los productos. El prototipo actual de jQuery de plantillas permite extender su sintaxis con comandos personalizados. En este caso, estamos extendiendo la sintaxis de plantillas con el comando personalizado “link”.
Los beneficios de usar un data linking como el anterior es que los elementos SPAN se actualizarán cuando los datos del producto sean acutalizados. El data linking declarativo también hace más sencillo crear formularios de edición e inserción. Por ejemplo, podemos crear un formulario de edición de productos usando un data linking declarativo como este:
Cuando se cambie el valor de los elementos INPUT en una plantilla que use data linking declarativo, el objeto de datos de JavaScript subyacente se actualiza automáticamente. En lugar de exribir código para que el formulario HTML obtenda de nuevo los datos actualizados, podemos trabajar con el objeto subyacente directamente – haciendo el código de cliente mucho más limpio y simple.
Descargar los ejemplos de los escenarios anteriores.
Podéis descargar este arhivo zip con los ejemplos anteriores. El archivo zip incluye 4 pagínas de HTML estáticas:
Podéis descomprimir este arhcivo y ejecutar las páginas para verlo en acción.
Resúmen
Estamos muy contentos de poder participara en el proyecto Open Source de jQuery. Hemos recibido un montón de feedback en nuestras dos primeras propuestas, y continuaremos contribuyendo. Esperamos que estas contribuciones hagan más sencillo la vida de los desarrolladores (incluyendo a los de ASP.NET) para crear aplicaciones más expectaculares.
Espero que sirva.
Scott.
P/D: [Además del blog podéis seguir a Scott en twitter: twitter.com/scottgu]
Traducido por: Juan María Laó Ramos
juanlao 
2 thoughts on “Plantillas jQuery y Data Linking (y la contribución de Microsoft a jQuery)”