React: divide y vencerás

Es obvio que las interfaces son cada vez más complejas, más dinámicas y se ejecutan en un mayor número de contextos distintos (web, aplicaciones nativas, gafas de realidad virtual, consolas, televisores…). En el pasado, contábamos con una simple pantalla. Ahora las posibilidades ni siquiera se reducen a las dos dimensiones.

Nuestra manera de interactuar con las aplicaciones o la forma de transmitir entre distintos dispositivos (móvil, desktop, consolas) genera una serie de retos que los modelos clásicos no resolvían de una manera adecuada, o generaban muchos problemas adicionales. En este sentido, React está sustituyendo a las arquitecturas clásicas (MVC y el flujo bidireccional de los datos), aportando una nueva visión sobre cómo construir interfaces de usuario.

En Biko llevamos ya un tiempo sumergidos en el mundo React. Para nosotros se trata de una tendencia clara en el mundo del desarrollo y podemos decir (sin lugar a dudas) que apostamos fuertemente por ella.

¿Por qué?

Pues porque básicamente, React se encarga de forma inteligente de actualizar el HTML generado por los componentes para que afecte lo mínimo posible al rendimiento del navegador. Esto permite crear componentes autocontenidos con su presentación, estilos y lógica de una manera muy eficaz en un único fichero javascript.

React es algo realmente potente por una serie de motivos (y otros muchos):

• La composición: Es la cualidad que nos permite crear grandes aplicaciones a partir de una infinidad de piezas pequeñas independientes entre sí y distribuyéndolas para solucionar el problema, aplicando aquello de: “divide y vencerás”. Gracias a esto, podemos ir creando, probando y modificando código sin necesidad de que todo el sistema esté ya en funcionamiento.
• La encapsulación: Con ella, un componente puede contener en su interior su presentación, comportamiento y su estado. Esto ofrece la posibilidad de generar componentes a los que el código exterior no les afecte en su comportamiento. Además, también facilita mucho poder probarlos de manera independiente y evitar código duplicado, reutilizándolos allá donde haga falta.
• Su estilo funcional de programación, a través del cual podemos crear componentes robustos y con un comportamiento fácil de entender.
• El multi-propósito: Gracias a esta característica, se pueden generar componentes encargados únicamente de dibujar interfaces y otros al cargo de la lógica de presentación, una idea clave para hacer una clara separación de responsabilidades.
• Polivalencia en las capacidades de presentación, que nos ofrece un control total sobre el DOM generado por nuestros componentes.

Gracias a esta serie de características, la comunidad puede crear herramientas y librerías alrededor de React que tienen la capacidad de ser incorporadas a los proyectos sin la necesidad de reescribir todo el código; o reemplazar una pieza individual sin que ello afecte al resto de la solución.

¿No lo ves claro? Netflix un buen ejemplo. La forma de construcción de su interfaz muestra la potencia del desarrollo basado en componentes. El tránsito del usuario es el eje central de la interacción en la aplicación: desde las sugerencias hasta la creación de listas; pasando por el elemento central del visionado de contenido. Todo es un proceso continuo construido con este modelo basado en componentes.

Pero no solo de Netflix vive React. Son muchas las empresas y negocios que usan esta tecnología. Facebook hace uso actualmente de más de 30.000 componentes React en su red social, HBO, Instagram, PayPal, Microsoft, WhatsApp Web, American Express, OpenBank, eBay, Airbnb, Twitter, Pinterest, Slack, Uber, Dropbox… y un largo etcétera que seguro nos mantendría ocupados leyendo un buen rato. 🙂

Algo está claro: mientras continuemos en la era de los componentes podremos seguir construyendo equipos de desarrollo polivalentes, donde gracias a una gran base tecnológica común y un cierto conocimiento específico, seremos capaces de construir aplicaciones multiplataforma.

¿Quieres una bola extra? Mira la breve charla de Rubén Bernárdez en el último Open Biko sobre por qué hemos elegido React: