Ricotero’s Blog

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.

written by RiCoTeRo X