Descubre React, 2da Edición – Javi Jimenez En la actualidad tenemos 2 formas de encararnos a un proyecto Web. Una de ellas, llamémosla la manera tradicional, solventa cualquier proyecto usando renderizaciones desde el servidor usando frameworks como Symphony (PHP), Rails (Ruby) o bien Django (Python) y jugueteando con jQuery (JavaScript) en el usuario. La otra solución, llamémosla SPA, Single Page Application, usa al servidor para renderizar objetos JSON los que van a ser tratados por un framework o bien librería JavaScript en el cliente del servicio como pueden ser Backbone, Ember, Angular o bien Atoms. Ahora probablemente te vas a poder identificar en uno de estos 2 conjuntos, o bien quizá te haya tocado estar en los dos. Con React todo cambia en tanto que su primordial premisa es “solo me preocupo de la Interfaz de Usuario”. Lo que desea decir es que no tendremos enrutadores, models, bindings, observers o bien templates y en caso de que los precises vas a poder usar cualquier otro framework o bien librería. Este es un punto clave, tras llevar más de cuatro años creando librerías como QuoJS, TukTuk o bien frameworks como LungoJS y Atoms los que son usados por miles y miles de desarrolladores y empresas por todo el planeta, puedo asegurar que quizás estaba equivocado con los frameworks. Pese a crear frameworks sumamente fáciles de usar, o bien eso creía, es posible que tu naturaleza como desarrollador sea absolutamente diferente a la mía. Todos y cada uno de los frameworks hasta la data han intentado empaquetar el mayor número de funcionalidades posibles, imponiendo de una forma la manera de desarrollar. Soy un devoto del y en mi pasado me leí los internals de jQuery, Angular o bien Ember (todos tenemos un pasado obscuro) y de ahí que que decidía crear mis soluciones. Estaba tan persuadido de que podía hacerlo mejor creando mi acercamiento, mas realmente los desarrollaba pues no estaba cómodo con el workflow de trabajo que ofrecían el resto de soluciones. Si lo piensas bien la mayor parte de los frameworks han sido creado por un equipo (o bien un desquiciado) que lo precisaba para un determinado proyecto, mas deberías saber que no existe el framework perfecto que pueda solventar cualquier proyecto, solo existe el programador pragmático que sabe decir “esta vez no vamos a usar Angular/Ember/jQuery”. De ahí que me reafirmo en decir que el equipo React ha sido muy inteligente en el momento de centrarse en una sola área, una de las más esenciales, la interfaz de usuario. Tu vas a tener la capacidad y libertad de decidir que complementos deseas emplear en tu solución web, ¿precisas ademanes táctiles? vas a poder usar QuoJS, FastClick o bien HammerJS, ¿precisas un enrutador? vas a poder usar directivo, reactrouter, SPArouter o bien crear el tuyo. Tras dedicar bastante tiempo a crear aplicaciones con React no he echado en falta nada y me ha ofrecido la suficiente autonomía de resolución para usar lo que verdaderamente necesito en todas y cada una de mis aplicaciones. Ahora te debes quedar con tres claves esenciales que React hace diferente al resto de sistemas: Renderiza todo con cada cambio React, como he dicho, no precisa de Observers, Bindings y mucho menos emplear DirtyChecking Models (un saludo Angular :)). React es funcional y todo componente creado con esta librería ha de ser capaz de autogestionarse, ha de saber cuando regresar a renderizarse así sea por cambios de estado o bien por paso de propiedades heredadas. Virtual DOMEl Virtual DOM en mi opinión es de las mejores peculiaridades que lleva consigo React. Si bien parezca increíble en mi framework Atoms, diseñé algo similar que llamé pseuDOM que no deja de ser una referencia al DOM en memoria. Mas React lo hace mucho mejor, puesto que contiene en memoria toda la estructura de datos, todo el sistema de acontecimientos sintéticos y un gestor de memoria que me hubiera agradado incorporarlo en Atoms. A fin de que te hagas una idea con cada cambio en un componente React sucede lo siguiente: Se produce un nuevo árbol Virtual DOM Se equipara con el árbol anterior Se deciden cuales son los cambios mínimos a efectuar Se mandan esos cambios a la cola Se procesan los cambios en el navegador Resumiéndolo de una forma fácil, trata el DOM tal y como si de una GPU se va a tratar. Mas además de esto el Virtual DOM trae varios ases en la manga, es muy simple crear componentes testables, puedes renderizar estos desde tu servidor y tienes soporte a elementos HTML5 como svg y canvas. Los acontecimientos sintéticos React incorpora su sistema de acontecimientos, con lo que no deberás preocuparte por tener jQuery, QuoJS o bien demás librerías de manejo de DOM. Como he comentado al principio de este capítulo, solo deberás emplearlo si verdaderamente lo precisas. React crea un solo manejador de acontecimiento nativo en el nivel superior de la estructura de cada componente. Este sistema de acontecimientos está normalizado a fin de que sea funcional en todos y cada uno de los navegadores e inclusive es capaz de distinguir entre acontecimientos desktop (clic, double clic, drag…) y acontecimientos móviles (touchstart, touchend…). Ni que decir que todos esos acontecimientos están desajustados del DOM puesto que verdaderamente tienen una referencia directa con el Virtual DOM, no volverás a ver un atributo onClic1 en ninguno de tus elementos HTML