Cinco frameworks a tener en cuenta para desarrollo web

Soy evangelista de jQuery, lo sabéis, estoy enamorado, tando de jQuery (sobre todo para frontend), jQueryUI (este mejor para backend) o jQueryMobile. Es fácil de usar, productivo y libre, por lo que merece la pena usarlo. Pero no todo en esta vida es jQuery, por lo que hoy voy a hablar de cinco frameworks que os pueden interesar:

  • backbone.js: Con una documentación muy completa, este proyecto está siendo una de las estrellas de los frameworks javascript de los últimos dos años. Además de un catálogo de eventos y un API bastante entendible, el atractivo de backbone.js es que nos permite implementar el patrón Model-View-Controller en nuestra apliación de javascript. Sí, MVC en el lado del cliente. Piensa todo el código que se aprovechará, y la independencia que ganarás sobre el marcado.
  • Image Mapster:: En este caso nos encontramos con un plugin de jQuery para crear interacción con las imágenes. ¿Quieres un mapa donde haya un enlace sobre cada provincias? ¿quieres unas siluetas en negro que al sobrevolarlas con el ratón muestren la foto de la persona? Echa un ojo a la página de demos y hazte una idea de las posibilidades de este framework.
  • QUnit: Y si arriba hablábamos de implementar el patrón MVC en Javascript ¿por qué no hacer tests unitarios? QUnit es un proyecto de los creadores de jQuery, en principio pensado para testear su propio código, y que han liberado para uso y disfrute de la comunidad.
  • Canvas Query: Usar el elemento Canvas de HTML5 con sintaxis de jQuery. Eso es lo que nos ofrece Canvas Query, una herramienta que facilitará la vida del desarrollador que se lance a trastear con Canvas. Principalmente está pensado para el desarrollo de juegos en HTML5, donde puede tornarse una enorme ayuda a la hora de manipular sprites, jugar con paletas de colores…
  • Junior: Y termino con un framework para la creación de apps móbiles en HTML5. He de decir que ayer me encontré uno que me gustaba más, trasteando por la web, pero que no apunté el nombre… por lo que le he perdido la pista. En todo caso, este Junior puede ser una buena alternativa a jQueryMobile, dándonos una presentación diferente, más atractiva. Implementa varias librerías, como la antes citada backbone.js.

Y una cosa que me pregunto ¿realmente hacen falta tantos frameworks de maquetaciones tipo grid y metro? Los hay a patadas en los últimos tiempos.

Anuncios

Introduciendo Prototype // Combinar jQuery con Prototype

Aunque me había planteado llevar mi debate de Twitter con mi colega Jumnper sobre el “Rock the Rebel, Metal the Devil” de Volbeat a este blog (a él le encanta, a mi me recuerda terriblemente al Load de Metallica), creo que mejor seguiré un poco más con entradas centradas en informática, por “comercialidad” porque son las más leídas (curiosamente tengo un montón de visitas desde México en este tipo de entradas)

Más de una vez he hablado de jQuery aquí, un gran facebook que nos da gran productividad en javascript, pero que no es la única opción. Prototype desde un primer momento ha protagonizado una encarnizada batalla con jQuery por la corona de “framework más usado”. Podéis descargarlo en este enlace para trastear con él.

Al igual que en jQuery existe una función $, que en Prototype nos permite seleccionar los elementos por su ID. Dirás “en jQuery es mejor porque permite cualquier selector CSS”, cierto, pero también existe una función para eso, que es $$

Otros métodos intersantes son $F, que accede al valor de un campo de un formulario, $A, que convierte listas de nodos o colecciones HTML en arrays, $H, que permite crear arrays asociativos o $R, que permite crear rangos de valores.

A la hora de trabajar con cadenas tenemos el método escapeHTML(), que permite transformar los caracteres problemáticos en su entidad HTML. También puedes usar toArray(), que convierte la cadena en un array de caracteres, y dispones de camelize(), que convierte una cadena separada por guiones a notación CamelCase.

Los métodos .show() y .hide() son lo que parecen ser, ocultan o muestran el elemento seleccionado (como sus homónimas en jQuery). En cambio .toogle() lo que hace es cambiar el estado entre show y hide dependiendo de en cual esté el elemento.

En cuanto a métodos para campos de formulario lo más interesante me parece .clear(), que vacía el valor de un campo, y .present(), que es cojonudo para validar campos, dado que devuelve false si el campo está vacío. Y si aplicas .disable() a un formulario lograrás desactivar todos sus campos.

Pero es con Ajax con lo que Prototype realmente te facilita la vida. Tienes Ajax.Updater(), que recibe tres parámetros: el ID del elemento a recargar por ajax, la página php que generará el código y varias opciones, y con Ajax.PeriodicalUpdater sólo tendréis que pasarle el parámetro frecuency seguido de un número ({frecuency:30}) para que realice una recarga automática por cada intervalo de ese número de segundos.

Y trabajando con DOM tampoco os dejará tirados este framework. El método .insert(), por ejemplo, os dejará elegir si queréis ponerlo detrás de, delante de, antes o encima de, y después o debajo de un elemento en concreto.

¿Mejor jQuery o Prototype? Bueno, cada uno tiene sus debilidades y sus potenciales. Yo uso más jQuery, por conocerlo mejor, pero incluso los podéis usar a la vez. Pero cuidado, tenéis que hacer un apañito antes para evitar conflictos, dado que ambos tienen un método $. La forma de evitar el conflicto es usando el método .noConflict() como en el ejemplo:

var $jQ = jQuery.noConflict();

A partir de ese momento la abreviatura de jQuery (que por defecto es $) pasar a ser la que tú has definido en la variable (en este caso $jQ), permitiéndote usar ambos frameworks sin conflicto entre ellos.

De todas formas, no suele ser práctico utilizar dos frameworks, aunque evites los conflictos siempre estás metiendo más carga a la web (aunque por otra parte, pesan bastante más muchas imágenes que los archivos .js de estos frameworks).