aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Cuando trabajamos con Javascript nos encontramos que por culpa de las diferencias entre los diferentes navegadores, tenemos que condicionar nuestro código dependiendo de estas diferencias. Para ello, y por la comodidad y claridad que aportan al código, los frameworks javascript llegan, y en masa, para hacer felices y fáciles las horas que dedicamos a este lenguaje.

Personalmente siempre que puedo, los evito. Por lo menos para hacerlo yo, aunque sea solo una vez, pero la comodidad de uso y la seguridad de que va a funcionar en la mayoría de casos, engancha.

Por eso, si estamos pensando en usar uno de ellos para nuestras aplicaciones, debemos conocer las posibles alternativas de las que podemos hacer uso.

1. Prototype (http://www.prototypejs.org/)

Pese a ser la más usada, es la que menos conozco de las más conocidas. Famosa por su peso y la integración con script.aculo.us. Muchisima documentación.

Ejemplo

//Nuevo elemento
var a = new Element('a', { 'class': 'foo', href: '/foo.html' }).update("Next page");
//Ajax
new Ajax.Request('/some_url',
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText || "no response text";
alert("Success! \n\n" + response);
},
onFailure: function(){ alert('Something went wrong...') }
});

Documentación / Descargar

2. MooTools (http://mootools.net/)

El primer framework que me enamoró, sin duda llegué atraido por la vistosidad de Moo.fx. Destinada principalmente para complementar el diseño de las aplicaciones web, con una gran cantidad de efectos. Todo ello sin descuidar las funcionalidades del día a día. Importante tener en cuenta la nueva versión 1.2 que será completamente diferente.

Ejemplos

// Crear un elemento
new Element('a', {
'styles': {
'display': 'block',
'border': '1px solid black'
},
'events': {
'click': function(){
//aaa
},
'mousedown': function(){
//aaa
}
},
'class': 'myClassSuperClass',
'href': 'http://mad4milk.net'
});
//Ajax
var myAjax = new Ajax(url, {method: 'get});
myAjax.request();

Documentación / Descargar

3. jQuery (http://jquery.com/)

Mi nuevo amor, hace cosa de un mes, que en los ratos libres voy migrando heySilver a jQuery. Intentando aprender los grandes y mejorando el código semana a semana. Sin lugar a dudas he descubierto que pese a no disponer de muchos efectos ni transiciones, dispone de todo lo necesario para hacer lo más fácil posible el trabajo diario.  La posibilidad de usar xPath y Selectores CSS para encontrar elementos de nuestro HTML es simplemente una maravilla.

// Nuevo elemento
$("#elemento span").append('<p class="clase"><a href="...">Enlace</a></p>');
// Ajax
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

Documentación / Descargar

4. MochiKit (http://www.mochikit.com/)

Nunca he tenido la oportunidad de meterle mano, quizas ha sido por falta de tiempo, quizas por falta de interes o quizas la poca claridad del código, pero si revisamos la documentación nos damos cuenta de que no es un framework que podamos desechar sin por lo menos dedicarle un par de semanas.

//Nuevo elemento
P({"class" : "clase"});
//Ajax
var url = "/src/b/bo/bob/MochiKit.Async/META.json";
var d = loadJSONDoc(url);
var gotMetadata = function (meta) {
if (MochiKit.Async.VERSION == meta.version) {
alert("You have the newest MochiKit.Async!");
} else {
alert("MochiKit.Async "
+ meta.version
+ " is available, upgrade!");
}
};
var metadataFetchFailed = function (err) {
alert("The metadata for MochiKit.Async could not be fetched :(");
};
d.addCallbacks(gotMetadata, metadataFetchFailed);

Documentación / Descargar

5. Script.aculo.us (http://script.aculo.us/)

Aunque técnicamente es un complemento de prototype, ya que sin él no funciona, es posiblemente más famoso que el propio Prototype. Con él todos los efectos, transiciones y transformaciones son mas fáciles desde que script. aculo.us apareció.

//Nuevo elemento
element = Builder.node('p',{className:'error'},'An error has occurred');
// Ajax
new Ajax.Request('/foo/bar', {method:'post', postBody:escape('thisvar=true&thatvar=Howdy')});

6. Rialto (http://rialto.improve-technologies.com/wiki/)

Otra gran desconocida de este mundillo de líneas de código, pese a no estar compuesta de una gran cantidad de funcionalidades diarias, está cargado de widgets de fácil instalación que merece la pena ver.

//Nuevo Elemento (Combo)
var comb = new rialto.widget.Combo([["value1","text1"],["value2","text2"],["value3","text3"]],"MyComb",5,10,100,CADRE2,{position:"absolute",heightItem:25,suggest:false,enable:true});
//Ajax
var remote=new rialto.io.AjaxRequest({
url:'rialtoModel.xml',
method: 'get',
callBackObjectOnSuccess:this,
withWaitWindow:false,
onSuccess: this.parseXmlForListValue
}) ;

Documentación / Descargar

7. Dojo (http://dojotoolkit.org/)

Documentación / Descargar

8. Spry Framework (http://labs.adobe.com/technologies/spry/)

Documentación / Descargar

9. ASP.NET Ajax Framework (http://asp.net/ajax/)

Documentación / Descargar

10. Clean Ajax (http://sourceforge.net/projects/clean-ajax/)

Documentación / Descargar

11. YUI (http://developer.yahoo.com/yui/)

Documentación / Descargar

12. Ext (http://extjs.com/)

Documentación / Descargar

13. Base2 (http://code.google.com/p/base2/)

Documentación / Descargar

14. DOMAssistant (http://domassistant.com/)

Documentación / Descargar

Muchos, pero muchos más.