Descubre React, 2da Edición – Javi Jimenez

Actualmente tenemos dos formas de enfrentarnos a un proyecto Web. Una de ellas, llamémosla la forma tradicional, soluciona cualquier proyecto utilizando renderizaciones desde el servidor utilizando frameworks como Symphony (PHP), Rails (Ruby) o Django (Python) y jugueteando con jQuery (JavaScript) en el cliente. La otra solución, llamémosla SPA, Single Page Application, utiliza al servidor para renderizar objetos JSON los cuales serán tratados por un framework o librería JavaScript en el cliente como pueden ser Backbone, Ember, Angular o Atoms. Ahora mismo seguramente te podrás identificar en uno de estos dos grupos, o tal vez te haya tocado estar en ambos.

Con React todo cambia ya que su principal premisa es “solo me preocupo de la Interfaz de Usuario”. Lo que quiere decir es que no vamos a tener routers, models, bindings, observers o templates y en el caso de que los necesites podrás utilizar cualquier otro framework o librería. Este es un punto clave, después de llevar más de 4 años creando librerías como QuoJS, TukTuk o frameworks como LungoJS y Atoms los cuales son utilizados por miles de desarrolladores y empresas por todo el mundo, puedo asegurar que tal vez estaba equivocado con los frameworks. A pesar de crear frameworks sumamente sencillos de utilizar, o eso creía, puede que tu naturaleza como desarrollador sea totalmente diferente a la mía. Todos los frameworks hasta la fecha han intentado empaquetar el mayor número de funcionalidades posibles, imponiendo de una manera la forma de desarrollar. Soy un devoto del <code/> y en mi pasado me leí los internals de jQuery, Angular o Ember (todos tenemos un pasado oscuro) y es por eso que decidía crear mis propias soluciones. Estaba tan convencido de que podía hacerlo mejor creando mi propio acercamiento, pero en realidad los desarrollaba porque no estaba cómodo con el workflow de trabajo que ofrecían el resto de soluciones. Si lo piensas bien la mayoría de los frameworks han sido creado por un equipo (o un loco) que lo necesitaba para un determinado proyecto, pero deberías saber que no existe el framework perfecto que pueda solucionar cualquier proyecto, solo existe el programador pragmático que sabe decir “esta vez no vamos a utilizar Angular/Ember/jQuery”.

Por eso me reafirmo en decir que el equipo React ha sido muy inteligente a la hora de centrarse en una única area, una de las más importantes, la interfaz de usuario. Tu tendrás la capacidad y libertad de decidir que complementos quieres utilizar en tu solución web, ¿necesitas gestos táctiles? podrás utilizar QuoJS, FastClick o HammerJS, ¿necesitas un enrutador? podrás utilizar director, react-router, SPArouter o crear el tuyo propio. Después de dedicar mucho tiempo a crear aplicaciones con React no he echado en falta absolutamente nada y me ha ofrecido la suficiente autonomía de decisión para utilizar lo que realmente necesito en cada una de mis aplicaciones.

Ahora te tienes que quedar con 3 claves fundamentales que React hace diferente al resto de sistemas:

  • Renderiza todo con cada cambio
    React, como he dicho, no necesita de Observers, Bindings y mucho menos usar Dirty-Checking Models (un saludo Angular :)). React es funcional y todo componente creado con esta librería debe ser capaz de autogestionarse, debe saber cuando volver a renderizarse ya sea por cambios de estado o por paso de propiedades heredadas.
  • Virtual DOMEl Virtual DOM a mi parecer es una de las mejores características que trae consigo React. Aunque parezca increíble en mi framework Atoms, diseñé algo parecido que llamé pseuDOM que no deja de ser una referencia al DOM en memoria. Pero React lo hace mucho mejor, ya que contiene en memoria toda la estructura de datos, todo el sistema de eventos sintéticos y un gestor de memoria que ya me hubiese gustado implementarlo en Atoms. Para que te hagas una idea con cada cambio en un componente React sucede lo siguiente:
    • Se genera un nuevo árbol Virtual DOM
    • Se compara con el árbol previo
    • Se deciden cuales son los cambios mínimos a realizar
    • Se mandan esos cambios a la cola
    • Se procesan los cambios en el navegador

    Resumiéndolo de una manera sencilla, trata el DOM como si de una GPU se tratará. Pero además el Virtual DOM trae unos cuantos ases en la manga, es muy fácil crear componentes testables, puedes renderizar estos desde tu servidor y tienes soporte a elementos HTML5 como svg y canvas.

  • Los eventos sintéticos
    React implementa su propio sistema de eventos, por lo que no tendrás que preocuparte por tener jQuery, QuoJS o demás librerías de manejo de DOM. Como he comentado al comienzo de este capítulo, solo tendrás que utilizarlo si realmente lo necesitas. React crea un único manejador de evento nativo en el nivel superior de la estructura de cada componente. Este sistema de eventos está normalizado para que sea funcional en todos los navegadores e incluso es capaz de diferenciar entre eventos desktop (click, double click, drag…) y eventos móviles (touchstart, touchend…). Ni que decir que todos esos eventos están desacoplados del DOM ya que realmente tienen una referencia directa con el Virtual DOM, no volverás a ver un atributo onClick en ninguno de tus elementos HTML.
Formato:  pdf Comprimido:  Sí Peso:  6.82 MB Lenguaje:  Español

Sin comentarios.

Deja tu Comentario