El DOM, chan chan chan.
La gente le tiene miedo al DOM, de hecho esa es parte de la razon de la existencia de muchas librerias, pero deberiamos temer al DOM? En el pasado yo creo que si, desde como se renderizaba una simple div, con margin,padding,border variaba dependiendo del navegador.El mundo de hoy es distinto los estandares ya son mas estandar, si suena redundante pero antes casi ningun navegador seguia estandar, teniamos muchas cosas como propiedades de CSS con moz- webkit- y que aplicar hack por cada navegador. Pero hoy en dia los estandares son mas seguros en tanto no usemos lo mas avanzado, que como siempre (y sera asi para siempre) varia dependiendo de cada navegador, pero es bueno que experimenten los navegadores por que esas cosas que solo sirven en un navegador en unos años estan en todos.
En fin regresando al punto, React.js tiene una representacion del DOM que maneja en puro js. Que quiere decir esto realmente? Es lo opuesto totalmente a Jquery, jquery promovio el uso de las tags del DOM para todo, quieres guardar un data pegaselo a una tag, los compoenentes pegalos a un Tag, este approach no es muy bueno pues el DOM cambia en muchos casos haciendo que los compoenentes se pierdan se tengan que recrear etc..Y existe otro problema lo que vemos en pantalla es muy lento, pasa por muchos pasos para componer la que vemos en el monitor, es un procseo caro que afecta desarrollos que quieren hacer animaciones cercanas a 60 cuadros por segundo por ejemplo.
El Approach de React.
Muchos frameworks tienen funciones para renderizar ell contenido de una clases, este ejemplo es de backbone:
Código :
render: function(){
// Create the HTML
this.$el.html('<input type="checkbox" value="1" name="' + this.model.get('title') + '" /> ' + this.model.get('title') + '<span>$' + this.model.get('price') + '</span>');
this.$('input').prop('checked', this.model.get('checked'));
// Returning the object is a good practice
// that makes chaining possible
return this;
},como ven en cierto momento la funcion render coloca un string como html en un elemento, ese es un problema para el navegador, que en cada cambio tiene que deshacerse de un checkbox, un span y crear nuevos, ya sea que cambie el title, price, o checked en el modelo (pues usa un approach MVC). El problema es que esto es costoso y mas si quieres hacer esto 1000 veces.
Que hace React.js?
React al tener en puro js la representacion del DOM que quieres usar, encuentra que cambio y hace el cambio. Que maravilla ya no se destruyen tags y se crean, se reusan las que ya tenemos haciendo menos costoso y mas eficiente, el hacer un cambio en la interfaz.
Que podemos aprender de esto?
Reacts.js es todo un framework pero esto es lo que mas los distingue por encima de los demas una vez dicho esto tambien debo decir que react.js soluciona un problema que no deberia existir. Por que? Pues por que a muchos les da miedo usar el DOM,y hacerse cargo de el. En el anterior ejemplo, no se destruiirina y se crearian tags si desde un princpio nuestra clases se hiciera cargo de ellas y se hiciera cargo de actualizar los tags en el momento de llamar a render.
Código :
// Crear tag si no se ha creado
if (!this.checkbox)
{
this.checkbox = document.createElement(input);
this.checkbox.setAttribute('type', 'checkbox');
// Desconozco si this.$el sea el contenedor padre pero aqui basicamente es pegarlo al documento
this.$el.appendChild(this.checkbox);
}
this.checkbox.setAttribute('name', this.model.get('title'));
// Crear Label si no se ha creado
if (!this.label)
{
this.label = document.createElement('span');
// Desconozco si this.$el sea el contenedor padre pero aqui basicamente es pegarlo al documento
this.$el.appendChild(this.label);
}
this.label.innerHTML = '$' + this.model.get('price')Y listo asi de facil derrotamos la ventaja de React.js y podemos usar este approach en backbone, nuestra libreria de eleccion o en js puro. Es por eso que digo que react ataca un problema que hemos creado nosotros mismos, y a pesar de ser una libreria que al tener una representacion de tu DOM en puro JS y que te hace decir WOW, en realidad no me sorprende mucho. Pues como lo digo el problema que soluciona es un problema en que por nuestras practicas muchas veces nosotros mismos nos metemos. La proxima ocasion hablare de Angular y su problema de dirty checking.
pd: Muchas librerias tienen algo que enseñar es nuestra decision tomar esa leccion y usarla en lo que programemos, o cambiar de libreria
.