Cómo usar Web Components con ReactJS y AngularJS

Una de las novedades mas excitantes de HTML5 es el uso de Web Components. Estos nos permiten definir nuestras propias etiquetas para encapsular la lógica de nuestros componentes. De esta manera, podemos declararlas muy fácilmente en nuestro HTML y reciclar nuestro código.Existen muchas formas de crear Web Components, hoy vamos a aprender a hacerlas usando directivas de AngularJS. Este framework nos permite crear aplicaciones con lógica muy avanzada; que, además, corren de forma fluida en el lado del cliente.Esto significa que podemos integrar navegación dinámica con animaciones. Nos facilita el manejo de uno o varios modelos de datos, two-way data binding y muchos otros aspectos más.AngularJS es excelente como controlador. Pero su motor de visualización no es muy eficiente para generar vistas basadas en grandes colecciones de objetos que cambian constantemente. Este es un escenario muy común en aplicaciones en tiempo real. Pero, afortunadamente, ReactJS se enfoca en ese tipo de escenarios y nos ofrece hasta un 80% más de velocidad. Esto gracias a que primero calcula los cambios necesarios en el Virtual-DOM.Para que nuestro trabajo en este ejemplo sea más fácil, vamos a usar una librería llamadangReact. Para instalarla usaremos Bower. Es decir, lo que tenemos que hacer es primero ejecutar el comando npm install ngreact y cuando haya terminado usamos el comandobower install ngReact desde nuestra consola en el directorio raíz. Bower se encargará de descargar las librerías de ReactJS y AngularJS.Hoy vamos a crear un componente llamado que recibirá los parámetros nombre y apellido para escribir en pantalla “Hola” y el nombre y apellido ingresados. En este caso, si los parámetros cambian, el cambio se reflejará instantáneamente.El compilador de JSX nos permite usar código de AngujarJS en el mismo archivo sin que esto nos genere errores. Gracias a esto, podemos guardar todo en el archivo jsx/app.jsx, y será compilado en js/app.js.Si aún no tienes instalado el compilador, puedes hacerlo con el comando npm install -g jsx. Ya instalado, ejecuta desde el directorio raíz el comando jsx -x jsx -w jsx/ js/ y esto dejará corriendo una tarea que re-compilará el archivo app.js cada vez que hagas cambios en app.jsx.Empecemos por definir nuestro elemento de ReactJS. Este debe generar un saludo basado en los valores de los “props” nombre y apellido; dentro de una etiqueta . Esto lo vamos a guardar en un objeto llamado “Usuario“.app.jsxvar Usuario = React.createClass( { propTypes: { nombre : React.PropTypes.string.isRequired, apellido : React.PropTypes.string.isRequired }, render: function() { return Hola {this.props.nombre} {this.props.apellido}; }} );Ahora vamos a declarar una aplicación de AngularJS a la que llamaremos app y le asignaremos la librería react.app.jsxvar app = angular.module( 'app', ['react'] );Usaremos un controlador de AngularJS para declarar los valores por defecto de nuestra aplicación. Estos se pueden usar fácilmente en distintas partes de nuestra aplicación; y el two-way data binding se encargará de mantener todo sincronizado en el controlador y le entregará los datos a ReactJS para mostrarlos de forma rápida y eficiente.var User_ctrl = function () { this.usuario = { nombre : 'Clark', apellido : 'Kent' }}app.controller( 'user_ctrl', User_ctrl );Para crear nuestro Web Component usaremos una directiva de AngularJS a la que llamaremos . ngReact nos permite pasar el nombre que asignamos al objeto con el componente de ReactJS, en este caso, Usuario.app.jsxapp.directive( 'usuario', function( reactDirective ) { return reactDirective( Usuario );} );En nuestro HTML vamos a crear un formulario conectado al scope de AngularJS y mostraremos los datos usando el Web Component que acabamos de crear usando el mismo scope. Esto asegurará que los datos se mantengan sincronizados.index.html ¿Como te llamas? Puedes revisar el código completo de este ejemplo en Github y también puedes probar el demo aquí.