Una de las principales premisas que debe conocer quien se inicie en el mundo de la programación es que, en el estado actual en el que se encuentra la industria, la mayoría de las compañías realizan sus desarrollos utilizando algún framework o librería, o incluso varios. Independientemente del lenguaje de programación al que se recurra, sea PHP, Node.js o Java, se suelen utilizar este tipo de herramientas que ofrecen a los programadores una arquitectura predefinida y una serie de recursos que facilitan el trabajo en equipo.
Javascript se ha convertido en el lenguaje más popular y extendido entre programadores gracias a su versatilidad y su amplia variedad de frameworks y bibliotecas. Hoy veremos una de las más utilizadas en el mundo front-end: React.
Como ya comentamos en un post anterior, uno de los perfiles más demandados en las empresas de hoy en día es el programador full-stack. Un desarrollador que debe dominar diversos frameworks y librerías tanto de front-end como de back-end.
Dentro de las tecnologías de front-end destacan frameworks como Angular, Vue y el protagonista de hoy, React. Gracias a cualquiera de estos frameworks de programación, el programador que se preste puede complacer a los diseñadores más creativos, creando cualquier tipo de animación compleja en la interfaz.
¿Qué es React.js?
React.js fue diseñada por Jordan Walke, un programador de Facebook, que trató de solucionar con ella los problemas que presentaba esta red social al incorporar los anuncios. Aunque la labor de Walke comenzó allá por 2010, no fue hasta el mes de mayo de 2013 cuando la compañía de Mark Zuckerberg lanzó al mercado React como una solución de código abierto. Desde ese momento, han sido y son muchos los entusiastas de esta librería que han contribuido a su mejora.
Gracias a la labor de Walke, de Facebook y de todos los programadores que han contribuido a su optimización, ahora contamos con una herramienta que permite desarrollar aplicaciones web en las que las vistas, es decir, el front-end, se encuentran asociadas a los datos que reciben, esto es, a aquello que se encuentra en el back-end. Al contrario de otras alternativas para manipular los elementos del DOM, como pueda ser JQuery o incluso Javascript puro, que acaban dando lugar a un código maś confuso y difícil de mantener.
Para evitar esto, React propone una arquitectura basada en componentes, que son piezas de código en las que se utiliza HTML, CSS y Javascript, de modo que contienen tanto la lógica como la presentación.
De este modo, estos componentes se pueden replicar y utilizar en distintas partes de la aplicación y en diversas interfaces, para así tener un control de flujo más ordenado, comprensible y bien orquestado. Es por ello que React es una de las mejores alternativas a la hora de construir ‘Single Page Applications” o SPA, que como ocurre con la interfaz de Facebook, cargan distintas visualizaciones en una sola interfaz, sin necesidad de recargar la página.
Si tienes curiosidad sobre cómo se programan las SPAs, aquí te dejamos la grabación del webinar.
React Vs Angular Vs Vue.js
Otra de las premisas que no debe olvidar nunca quien se inicia en el mundo de la programación es que en función del desarrollo que vaya a realizar tendrá que recurrir a unas herramientas u otras. Aunque todas sirven para construir ‘software’, no todas ofrecen las mismas posibilidades ni son igualmente ágiles, ni permiten una escalabilidad similar… Por lo tanto, si planeas crear una aplicación web o piensas formarte de cara a acceder a una mejor posición en el mercado, tendrás que tener en cuenta diversos factores a la hora de decantarte por React, Vue o Angular. Repasemos entonces las principales diferencias y similitudes que existen entre estos frameworks y librerías, para que así nuestra decisión sea lo más acertada posible.
Respecto al mercado y la influencia que tienen estas herramientas en el mismo, es importante tener en cuenta cuál está más extendido y, por lo tanto, cuál te dará más oportunidades para acceder a un puesto de trabajo. En un estudio realizado por la firma TechMagic, analizaron hasta 60000 ofertas de trabajo y comprobaron que, con mucha diferencia, React es la librería más demandada por las empresas tecnológicas en todo el mundo.
Fuente - TechMagic
Este dato viene a demostrar las enormes posibilidades que ofrece React respecto a sus competidores. Aunque haya quien ponga en duda la fiabilidad de esta biblioteca a la hora de, por ejemplo, construir grandes aplicaciones, lo cierto es que es sumamente fiable como viene a demostrar no solo su presencia en el mercado sino también las grande compañías tecnológicas que han apostado por ella para sus desarrollos. Desde Facebook, claro está, hasta AirBnb, Slack o Dropbox, han apostado por React. Así que, aunque hay quien ponga en tela de de juicio que sea igual o menos robusta que Angular, el framework más potente para muchos, lo cierto es que ofrece un rendimiento óptimo para cualquier tipo de aplicación, sea del tamaño que sea.
En contraposición a Angular, que es un framework, tanto Vue como React son más bien librerías (aunque este es un debate complejo en el que hay muchos puntos de vista). Esto es así porque si bien el primero, construido por Google, tiene un core más potente, los otros dos necesitan de librerías para realizar ciertas tareas. No obstante, esto no supone ningún contratiempo a la hora de trabajar con React, puesto que esta biblioteca cuenta con innumerables extensiones que ha construido la comunidad que lo utiliza alrededor de todo el mundo, y que le permite realizar cualquier tarea con total fiabilidad.
Y si bien habrá quien dirá que esto es un factor negativo, lo cierto es que presenta un importante ventaja. Mientras que la programación con Angular resultar mucho más encorsetada, con unas directrices mucho más marcadas, con React existe una mayor libertad a la hora de elegir los recursos que más nos gusten, aquellos con los que nos sintamos más cómodos realizando nuestros desarrollos y nos ofrezcan buenas soluciones. De este modo, podemos utilizar, por ejemplo, Redux, que es sumamente consistente para manejar el estado de la aplicación. Con Vue ocurre algo similar. No obstante, al ser el recién llegado al mercado (se presentó en el año 2014), no cuenta con tantas posibilidades como React y todavía tiene mucho margen de mejora.
Esta mayor libertad que presenta Vue y, sobre todo, React, también permite adquirir un mayor nivel de conocimiento en menor tiempo que en el caso de Angular. Esto se debe a que la biblioteca concebida por Jordan Walke en el entorno de Facebook fue creada con el propósito de ser sencilla de utilizar a la para que robusta y escalable. Es por ello que, entre otras cosas, a la hora de interactuar con el DOM, la propia interfaz, no se recurre al DOM real como en caso de Angular, que añade un grado más de complejidad tanto a la hora de programar como la hora de depurar posibles fallos y repercute negativamente en el rendimiento, sino que utiliza el DOM virtual, que es mucho más ágil y hace que el ‘software’ sea mucho más dinámico.
Por último, otra de las grandes diferencias de React respecto a Angular y Vue es que existen bibliotecas nativas desarrolladas por Facebook que adaptan la arquitectura a aplicaciones para iOS y Android. ¿Qué quiere decir esto? Que gracias a una librería como React Native, que permite a los programadores con los conocimientos ya adquiridos e implementados en aplicaciones de escritorio, pueden desarrollar ‘apps’ nativas para entornos móviles.
¿Por qué usar React?
Como podrás ver, el partido que puedes sacar a React es realmente asombroso. Son muchísimas las posibilidades que ofrece esta biblioteca, sin importar el tamaño del proyecto y de la aplicación que se quiera desarrollar. Además, como podrás deducir de la comparación con Angular y Vue, verás que al ser concebido con la idea de que fuera una herramienta simple de manejar, permite que la curva de aprendizaje sea muy poco pronunciada. Al contrario de lo que ocurre con un framework como Angular, podremos llegar a dominar el React Programming en poco tiempo, para así poder sacarle el máximo partido y convertirnos en auténticos expertos.
Es más, a las ventajas que ya hemos mencionado en el anterior apartado todavía podemos sumar algunas más. Por ejemplo, el hecho de que se trate de un lenguaje declarativo, hace que sea sumamente sencillo crear interfaces interactivas, puesto que es React quien se encarga de actualizar y renderizar los componentes cuando los datos en la parte del servidor sufran alguna modificación. A esto se suma poder utilizar JSX, que se utiliza de preprocesador que nos ahorra mucho código y facilita la sintaxis, y que será como escribir HTML pero en su lugar estaremos escribiendo código que se transformará a Javascript.
Si quieres zambullirte en el mundo de React, puedes hacer algunas pruebas. Lo primero que tendrás que hacer será instalarlo en tu ordenador. Para ello tendrás dos opciones. La forma más habitual, ejecutando en la consola npm i react como nos indican en las instrucciones de la librería npm. Después tendrás que cerciorarte de requerirlo en tu fichero app.js, para que así lo puedas utilizar. El segundo modo de hacerlo, el más sofisticado, óptimo y que mejor resultados ofrece, es hacerlo con el paquete npx diseñado por Facebook, que nos permite ejecutar directamente la aplicación de una forma mucho más sencilla. Además, puedes recurrir a ejecutar el paquete npx create-react-app nombre-app y así verás cómo se genera toda la arquitectura de la misma, de formo que ejecutarla será tan sencillo como teclear npm start en tu consola.
Pero, como decíamos al comienzo, una importante premisa en programación es elegir la herramienta que mejor se adecue a aquello que vamos a realizar. No obstante, a la hora de iniciarte en el mundo de la programación y comenzar a formarte es recomendable elegir una herramienta versátil y que te permita realizar aplicaciones web, e incluso para plataformas móviles, en poco tiempo. De ahí que podamos decir sin temor a equivocarnos que, en el mercado actual, React es la mejor alternativa. Es por ello que, en lugar de Angular o Vue, en el bootcamp de Desarrollo Web de Ironhack podrás asentar las bases para programar con React y realizar tus primeros desarrollos con esta biblioteca.
