WORKSHOP: REACT NATIVE Y SUS COMPONENTES
React Native, al igual que ReactJS pero enfocado a aplicaciones nativas para móviles, está orientado a un desarrollo totalmente modular, donde cada elemento de la interfaz es un componente distinto.
Eso significa que si tenemos una lista de elementos, la lista sería un componente, y cada elemento serian otros componentes distintos que a vez dentro de ellos pueden existir anidados muchos componentes más.
Facebook, la empresa que creó React, nos ofrece una serie de componentes para iOS y para Android para facilitar el trabajo a los desarrolladores. Son herramientas con mucha potencia pero a veces necesitan ser más personalizados. Gracias a la popularidad que ha tenido React entre los desarrolladores, es muy sencillo conseguir cualquier componente o solución debido a la basta comunidad que se ha creado.
React Native tiene un futuro muy prometedor, una excelente comunidad y sobre todo el respaldo de una gran compañía como Facebook.
Como nos podemos imaginar, el segundo workshop de React que hicimos fue "React Native y sus componentes" presentado por nuestros ingenieros Marc Torrent y Raúl Delgado.
Presentación para descargar: React Native- Components
WORKSHOP: React Native y sus componentes
React Native, al igual que ReactJS pero enfocado a aplicaciones nativas para móviles, está orientado a un desarrollo totalmente modular, donde cada elemento de la interfaz es un componente distinto.
Eso significa que si tenemos una lista de elementos, la lista sería un componente, y cada elemento serian otros componentes distintos que a vez dentro de ellos pueden existir anidados muchos componentes más.
Facebook, la empresa que creó React, nos ofrece una serie de componentes para iOS y para Android para facilitar el trabajo a los desarrolladores. Son herramientas con mucha potencia pero a veces necesitan ser más personalizados. Gracias a la popularidad que ha tenido React entre los desarrolladores, es muy sencillo conseguir cualquier componente o solución debido a la basta comunidad que se ha creado.
React Native tiene un futuro muy prometedor, una excelente comunidad y sobre todo el respaldo de una gran compañía como Facebook.
Como nos podemos imaginar, el segundo workshop de React que hicimos fue “React Native y sus componentes” presentado por nuestros ingenieros Marc Torrent y Raúl Delgado.
Presentación para descargar: React Native- Components
WORKSHOP: INTRODUCCIÓN A REACT NATIVE
React Native es un framework de Facebook que te permite crear aplicaciones nativas para iOS y Android con JSX (JavaScript + HTML).
Su primera versión fue lanzada en Abril de 2015 en la que sólo contaba con soporte para iOS, hasta que en Septiembre de 2015 también la sacaron para Android.
React Native fue lanzada por los desarrolladores de React a raíz de la necesidad de un framework híbrido con un buen rendimiento para su aplicación móvil de gestión de anuncios.
Ahora, con React Native permite crear aplicaciones híbridas basadas en React y compilan a código nativo, mejorando el rendimiento enormemente comparado a otros frameworks para crear apps híbridas basados en Phonegap.
React Native funciona con Node y NPM, es decir, la base de la plataforma es puro JavaScript, como hemos mencionado al principio del post. Al tener a nuestro alcance todo el ecosistema de JavaScript esto nos permite tener esta ventaja ya que éste siempre está en constante crecimiento y ahorra a los programadores mucho trabajo ya que podemos encontrar un paquete para casi cualquier funcionalidad que queramos.
Es un framework con tal potencial que nosotros decidimos dedicar tres workshops a React Native, siendo el primero "Introducción a React Native" presentado por nuestro ingeniero Jordi Serra.
Presentación para descargar: React Native - Introduction
Antes de empezar a introducirse en React Native, aunque éste tenga aspectos más específicos de aplicaciones móvil, es importante dominar bien ReactJS ya que la base es la misma y se debería empezar por el principio. Descubre aquí el workshop de ReactJS.
WORKSHOP: Introducción a React Native
React Native es un framework de Facebook que te permite crear aplicaciones nativas para iOS y Android con JSX (JavaScript + HTML).
Su primera versión fue lanzada en Abril de 2015 en la que sólo contaba con soporte para iOS, hasta que en Septiembre de 2015 también la sacaron para Android.
React Native fue lanzada por los desarrolladores de React a raíz de la necesidad de un framework híbrido con un buen rendimiento para su aplicación móvil de gestión de anuncios.
Ahora, con React Native permite crear aplicaciones híbridas basadas en React y compilan a código nativo, mejorando el rendimiento enormemente comparado a otros frameworks para crear apps híbridas basados en Phonegap.
React Native funciona con Node y NPM, es decir, la base de la plataforma es puro JavaScript, como hemos mencionado al principio del post. Al tener a nuestro alcance todo el ecosistema de JavaScript esto nos permite tener esta ventaja ya que éste siempre está en constante crecimiento y ahorra a los programadores mucho trabajo ya que podemos encontrar un paquete para casi cualquier funcionalidad que queramos.
Es un framework con tal potencial que nosotros decidimos dedicar tres workshops a React Native, siendo el primero “Introducción a React Native” presentado por nuestro ingeniero Jordi Serra.
Presentación para descargar: React Native – Introduction
Antes de empezar a introducirse en React Native, aunque éste tenga aspectos más específicos de aplicaciones móvil, es importante dominar bien ReactJS ya que la base es la misma y se debería empezar por el principio. Descubre aquí el workshop de ReactJS.
WORKSHOP: APLICACIONES WEB ISOMÓRFICAS CON REACTJS
Las páginas web han evolucionado considerablemente en los últimos 20 años. Han pasado de ser páginas estáticas a aplicaciones web cuyo contenido se actualiza automáticamente (en real-time), sin la necesidad de que el usuario interactúe. Esta tendencia ha dado origen a las Single Page Applications (SPA).
Debido al auge en la creación de este tipo de sitios, se han creado numerosos frameworks MVC orientados a su creación. Esto facilitaba mucho su desarrollo pero a la vez generaba problemas y limitaciones que se pudieron solucionar con Isomorphic JavaScript.
Una aplicación en Isomorphic JavaScript no es más que una app que se puede ejecutar una misma pieza de código JavaScript en cliente y en servidor simultaneamente. Como hemos comentado desde el principio, el objetivo fundamental de React es el de simplificar el desarrollo de aplicaciones y el concepto de aplicaciones web isomórficas nos permite perfectamente esto. Estas son alguna de sus ventajas
- Peso de archivos: Evita que se necesite mucho tiempo para descargar el código antes de utilizar la aplicación.
- SEO: Permite tener un template engine en los dos ambientes. Es importante que la librería a utilizar tenga server side rendering para el SEO.
- Performance: es posible que el cliente recupere el estado con el cual el servidor envía el HTML procesado, sin necesidad de sobreescribirlo. Si a esto le añadimos que se ha solucionado el tema del peso de los archivos, la página carga más rápido. Además, no se verán comportamiento no deseados, como por ejemplo, que se vuelva a generar el DOM mientras el usuario esté interactuando con la aplicación.
- Mantenibilidad: Al tener una pieza de código compartida en el cliente y en el servidor hace que nuestro código sea más mantenible, debido a que las modificaciones en un archivo afecta ambos ambientes (evitando la duplicación de código).
Para conocer más sobre estas aplicaciones hicimos un workshop de "Aplicaciones web isomórficas con ReactJS" que nuestro ingeniero Marc Torrent nos enseñó.
Presentación para descargar: Isomorphic Web Apps
WORKSHOP: Aplicaciones web isomórficas con ReactJS
Las páginas web han evolucionado considerablemente en los últimos 20 años. Han pasado de ser páginas estáticas a aplicaciones web cuyo contenido se actualiza automáticamente (en real-time), sin la necesidad de que el usuario interactúe. Esta tendencia ha dado origen a las Single Page Applications (SPA).
Debido al auge en la creación de este tipo de sitios, se han creado numerosos frameworks MVC orientados a su creación. Esto facilitaba mucho su desarrollo pero a la vez generaba problemas y limitaciones que se pudieron solucionar con Isomorphic JavaScript.
Una aplicación en Isomorphic JavaScript no es más que una app que se puede ejecutar una misma pieza de código JavaScript en cliente y en servidor simultaneamente. Como hemos comentado desde el principio, el objetivo fundamental de React es el de simplificar el desarrollo de aplicaciones y el concepto de aplicaciones web isomórficas nos permite perfectamente esto. Estas son alguna de sus ventajas
- Peso de archivos: Evita que se necesite mucho tiempo para descargar el código antes de utilizar la aplicación.
- SEO: Permite tener un template engine en los dos ambientes. Es importante que la librería a utilizar tenga server side rendering para el SEO.
- Performance: es posible que el cliente recupere el estado con el cual el servidor envía el HTML procesado, sin necesidad de sobreescribirlo. Si a esto le añadimos que se ha solucionado el tema del peso de los archivos, la página carga más rápido. Además, no se verán comportamiento no deseados, como por ejemplo, que se vuelva a generar el DOM mientras el usuario esté interactuando con la aplicación.
- Mantenibilidad: Al tener una pieza de código compartida en el cliente y en el servidor hace que nuestro código sea más mantenible, debido a que las modificaciones en un archivo afecta ambos ambientes (evitando la duplicación de código).
Para conocer más sobre estas aplicaciones hicimos un workshop de “Aplicaciones web isomórficas con ReactJS” que nuestro ingeniero Marc Torrent nos enseñó.
Presentación para descargar: Isomorphic Web Apps
WORKSHOP: REACTJS, TESTING EN REACT Y REDUX
Testear el código es crucial para mantener una buena base de código y asegurar que todo funciona correctamente.
Hace unos meses, Airbnb sacó un nuevo recurso, Enzyme. Se trata de una nueva librería de JavaScript útil para testear los componentes de React. Desde su creación, su recepción ha sido muy positiva, la cual ha sido altamente calificada y cuenta con más de 50 colaboradores, la gran mayoría fuera de Airbnb.
Un gran punto positivo de Enzyme es su trabajo directo con el Virtual Dom de ReactJS. Se renderizan los componentes directamente en el VDOM mediante herramientas de uso sencillo, lo cual favorece en la experiencia del testing.
Nosotros quisimos hacer un workshop de "Testing en React y Redux" para que nuestros ingenieros Cristina Hernández y Mario García nos informaran sobre Enzyme.
Presentación para descargar: ReactJS - React Testing
WORKSHOP: ReactJS, testing en React y Redux
Testear el código es crucial para mantener una buena base de código y asegurar que todo funciona correctamente.
Hace unos meses, Airbnb sacó un nuevo recurso, Enzyme. Se trata de una nueva librería de JavaScript útil para testear los componentes de React. Desde su creación, su recepción ha sido muy positiva, la cual ha sido altamente calificada y cuenta con más de 50 colaboradores, la gran mayoría fuera de Airbnb.
Un gran punto positivo de Enzyme es su trabajo directo con el Virtual Dom de ReactJS. Se renderizan los componentes directamente en el VDOM mediante herramientas de uso sencillo, lo cual favorece en la experiencia del testing.
Nosotros quisimos hacer un workshop de “Testing en React y Redux” para que nuestros ingenieros Cristina Hernández y Mario García nos informaran sobre Enzyme.
Presentación para descargar: ReactJS – React Testing.
WORKSHOP: REACT-REDUX: MIDDLEWARE / COMPONENTES DE MAYOR ORDEN
React se ha convertido por derecho un nuevo miembro de las teologías tecnológicas del momento en la escena de la UI y el desarrollo web. Como pudimos ver hace unos días, en el post del workshop de introducción a ReactJS, fue creado en el 2014 por los equipos de desarrollo de Facebook e Instagram, y presentado como un proyecto open-source en github y bajo licencia BSD. Más adelante también vimos el Patrón flux y React-Router y hoy hablaremos de Middleware.
El middleware es un software o conjunto de componentes desarrollados que sirven para integrar aplicaciones y plataformas, en el que en un ambiente heterogéneo donde interactúan distintas tecnologías, se encarga de comunicar e integrar los datos de diversa índole, haciéndolo de forma conectada o desconectada (asíncrona o síncrono).
Middleware simplifica el trabajo de los programadores en la compleja tarea de generar las conexiones y sincronizaciones que son necesarias en los sistemas distribuidos. De esta forma, se provee una solución que mejora la calidad de servicio, así como la seguridad, el envío de mensajes, la actualización del directorio de servicio, y mucho más.
Todas estas ventajas hicieron dedicar el workshop de "React-Redux: Middleware / Componentes de mayor orden" que nuestros ingenieros Enrique Oriol y Alex Adrià nos impartieron.
Presentación para descargar: ReactJS - Redux Advanced
WORKSHOP: React-Redux: Middleware / componentes de mayor orden
React se ha convertido por derecho un nuevo miembro de las teologías tecnológicas del momento en la escena de la UI y el desarrollo web. Como pudimos ver hace unos días, en el post del workshop de introducción a ReactJS, fue creado en el 2014 por los equipos de desarrollo de Facebook e Instagram, y presentado como un proyecto open-source en github y bajo licencia BSD. Más adelante también vimos el Patrón flux y React-Router y hoy hablaremos de Middleware.
El middleware es un software o conjunto de componentes desarrollados que sirven para integrar aplicaciones y plataformas, en el que en un ambiente heterogéneo donde interactúan distintas tecnologías, se encarga de comunicar e integrar los datos de diversa índole, haciéndolo de forma conectada o desconectada (asíncrona o síncrono).
Middleware simplifica el trabajo de los programadores en la compleja tarea de generar las conexiones y sincronizaciones que son necesarias en los sistemas distribuidos. De esta forma, se provee una solución que mejora la calidad de servicio, así como la seguridad, el envío de mensajes, la actualización del directorio de servicio, y mucho más.
Todas estas ventajas hicieron dedicar el workshop de “React-Redux: Middleware / Componentes de mayor orden” que nuestros ingenieros Enrique Oriol y Alex Adrià nos impartieron.
Presentación para descargar: ReactJS – Redux Advanced