blog
Artículos Desarrollo Javascript

React.js para interfaces de usuario

Hace un par de semanas comentamos aquí sobre los frameworks MV* de JavaScript que utilizas en tus proyectos, o podrías utilizar. Por razones obvias para mí, dejamos de parte a React. Lo cierto es que esta también puede ser una biblioteca de JavaScript útil.

React es un biblioteca de JavaScript “del lado del cliente” y su misión es “desarrollar interfaces de usuario”.

React utiliza una sintaxis declarativa y una extensión con sintaxis de JavaScript, JSX que se parece a XML. Aunque se pueda utilizar React con JS, se recomienda hacerlo con JSX por cuestiones de compatibilidad. JSX sirve para describir estructuras de HTML.

React es una herramienta declarativa con varios beneficios, pues es una herramienta que permite que se desarrollen componentes reutilizables y estas se pueden compartir con otros desarrolladores, o incluso clientes.

Además, uno de los elementos que hace de React una herramienta potente es el DOM virtual que tiene en su memoria. Con esta característica, React realiza cambios solamente en la parte de DOM que necesita actualización, ahorrando memoria en las operaciones de las aplicaciones web.

Al contrario de AngularJS, por ejemplo, React no es un framework MV* y en la misma línea, no está pensada para sustituir a estos frameworks. Podemos pensar en React como una herramienta “diseñada para trabajar conjuntamente con estos frameworks y ayudar a mejorarlos a nivel de funcionalidad”. Por otro lado es una biblioteca es sencilla. Lo mismo digo de su API.

De forma a simplificar los procesos y flujos, testar y mantener la aplicación desarrollada,  React se centra en un flujo de datos unidireccional. De esta forma es más fácil saber exactamente donde se están cambiando los datos. Para ello utiliza Flux, la arquitectura de la aplicación para desarrollar interfaces de usuarios que Facebook utiliza para desarrollar sus aplicaciones web “del lado del cliente”.

Para Flux, todo se desarrolla en una dirección. Los datos circulan como resultado de acciones que llevan las vistas de React a actualizarse si es necesario.

React Native

React, o sus desarrolladores también están interesados en el desarrollo de aplicaciones hybridas.  Sus componentes pueden funcionar en diferentes clientes, nativos o web. Para ello se está desarrollando React Native, ¡que es nada más nada menos que una herramienta que permite desarrollar Aplicaciones Nativas en JavaScript!

Esto puede revolucionar el mundo de las apps. React Native se parece a React, también utiliza el enfoque declarativo, pero está respaldada por controles específicos de la plataforma nativa (componentes nativos de la UI) en vez de elementos del DOM, como React. ¡Ya te puedes imaginar los beneficios de esta herramienta!

Entre otras cosas, como el toque, el estilo, la estructura, o plantilla de la aplicación, React Native te deja acceder a los componentes UI nativos, entonces tus aplicaciones HTML5/JavaScript ya pueden tener un resultado “realmente nativo”. React Native aún no está disponible públicamente.

¿Por qué utilizar React?

  • Basado en componentes
    • Puedes crear tus propios componentes, reutilizar y combinar posteriormente en tus proyectos.
  • Eficiencia
    • Gracias a su propio DOM virtual, donde estan tus componentes, ganas en flexibilidad y rendimiento. React calcula qué cambios hay que hacer en el DOM y lo actualiza de acuerdo.
  • JSX
    • Una de las razones de ser de JSX es simplificar la escrita de JavaScript
  • React Developer Tools
    • Puedes bajarte la extensión de React.js para el Chrome que permite debugar tu aplicación de forma fácil.
  • Comunidad
    • React es de momento una biblioteca Open Source y está disponible en Github. Esto permite que la comunidad pueda contribuir para la evolución del core de la herramienta. Además React fue desarrollada y utilizada internamente por Facebook e Instagram también lo utiliza.

Proyectos que utilizan React:

Fuentes:

Alfred: mejorar la productividad

Artículo anterior

Desarrollar de aplicaciones móviles con Fabric

Siguiente artículo
I help Organizations to use Technology to improve people's lives

También te puede interesar

Matrices mágicas: transformando la web con Álgebra Lineal y CSS

¿Por qué debo mantener mi sitio web?

JavaScript: ¿Qué hay de nuevo en ES2020?

¿Qué problema hay en utilizar TDD?