react native componentes blog visual engineering

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 


react native introducción blog visual engineering

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.


aplicaciones web isomorficas reactjs blog visual engineering

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 


Testing en React y Redux visual engineering

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.


reactathon visual engineering

Nuestro primer Reactathon

Una de las iniciativas que estamos implementando este año han sido los Workshops, los cuales hemos ya mencionado en varias de nuestras entradas 😜. Comenzamos con Workshops enfocados a nuestros desarrolladores de FrontEnd y nuestro objetivo es el implementar ReactJS en nuevos proyectos.

Para culminar este periodo de aprendizaje decidimos lanzar nuestro primer Hackathon bautizándolo como nuestro Reactathon (seguir #Reactathon en twitter).  El tema de nuestro Reactathon trata de crear una app de la que podamos hacer uso en nuestra oficina para mejorar algún proceso. Otros requisitos quisimos agregar lo siguiente:

  • El Reactathon trendrá lugar en las oficina de Napptilus Tech Labs el Lunes 25 de Julio del 2016 de 9h a 19h.
  • Los equipos deberán estar integrados al menos por tres (3) personas, idealmente que cada persona lidere una parte del proyecto (Diseño, Android, iOS, Backend & FrontEnd).
  • La arquitectura de la app se deberá desarrollar con Redux, middlewares y patrones reactivos propios de ReactJS, componentes de React Native. (FrontEnd).
  • La API Rest se puede desarrollar en cualquier lenguaje y frameworks web, pero puntos se valorará el uso de ReactJS y Firebase.
  • Una vez finalizado el tiempo, se deberá subir el proyecto al repositorio creado específicamente para el evento por los jueces. Deberá tener incluida las instrucciones de compilación y ejecución.

El miércoles 27 de Julio se realizará la presentación de cada uno de los proyectos, esto dará una mejor perspectiva a los jueces para seleccionar al equipo ganador. Los resultados se harán públicos en la mañana del 28 de Julio que ¡celebraremos con la cena de verano de nuestro equipo! 🎉

¡Si queréis seguir nuestro evento podéis seguirnos en Twitter o en Facebook!


middleware workshop visual engineering

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


react router blog visual engineering

WORKSHOP: ReactJS y React Router

Hace semanas que hemos explicado ReactJS y React Redux y vimos que no es un framework con “todo incluido”, sino más bien una librería que se limita a la generación de vistas.

En muchas aplicaciones web actuales se acaban usando el “client-side routing“, que es una de las cosas que ReactJs no incluye pero que, gracias a React Router, se puede incluir.

React Router es una librería inspirada en el sistema de enrutado de EmberJS y su forma de manejar las rutas es un poco diferente de lo que podemos ver en otros sistemas, como el de AngularJS.

React Router nos permite definir una estructura de rutas y navegar entre ellas; siendo su característica más interesante que las rutas pueden estar anidadas. ¿Quieres saber más?, te invitamos a leer la presentación que nuestro ingeniero Mario García nos presentó en el workshop de “ReactJS React Router“.

Presentación para descargar: ReactJS – React Router


react-redux patrón flux workshop visual engineering

WORKSHOP: El patrón Flux. Introducción de React-Redux

Redux es una librería para controlar el estado de nuestras aplicaciones web fácilmente, de una forma consistente entre cliente y servidor, testeable y con una gran experiencia de desarrollo.

Flux es la arquitectura de aplicaciones que Facebook utiliza para crear aplicaciones web del lado del cliente.

Redux está en gran parte influenciado por la arquitectura Flux propuesta por Facebook para las aplicaciones de ReactJS y por el lenguaje Elm, esta muy pensado para ReactJS, pero también se puede usar con AngularJSBackboneJS.

En este workshop de “El patrón flux. Introducción de React-ReduxJordi Serra y Cristina Hernández nos enseñaron cómo implementar el framework de Redux en un proyecto de ReactJS.

Presentación para descargar: ReactJS – Flux Pattern & Redux


reactjs introduccion workshop visual engineering

WORKSHOP: Programación reactiva. Introducción a ReactJS

ReactJS es una librería de JavaScript de código abierto desarrollada por Facebook para facilitar la creación de componentes interactivos, reutilizables, para desarrollos de interfaces de usuario. Siendo una librería enfocada en la visualización, les ha beneficiado en el desarrollo de algunas de sus plataformas, como la de Instagram que ha sido programada toda con este código.

Se caracteriza por ser muy rápido y principalmente porque tiene un DOM virtual, el cual contribuye a mejorar la velocidad de carga de la información web ya que sólo se cargan los cambios en la página. ReactJS fue creado para resolver el problema de construir aplicaciones con grandes bases de datos que requieran cambios constantes.

De ese modo, ofrece grandes beneficios en performance, modularidad y promueve un flujo muy claro de datos y eventos, facilitando la planificación y el desarrollo de aplicaciones complejas.

Además, maneja un lenguaje llamado JSX, básicamente es una mezcla entre HTML, XML y JavaSript, el cual facilita mucho la programación debido a que tiene una sintaxis más corta y fácil de usar.

React cada vez está más en auge, llegando a ser uno de las soluciones más usadas, y por eso que decidimos tomar la iniciativa de probar ReactJs. El siguiente workshop es el primero de una serie de workshops que nos ayudaron en nuestro aprendizaje y esperamos que sean de tanta utilidad para nuestro público como lo son para nuestro equipo de desarrolladores. Nuestros ingenieros Marc Torrent y Raúl Delgado nos presentaron el workshop de “Programación reactiva. Introducción a ReactJS“, el cual nos dio una vista general de lo que es React.

Presentación para descargar: ReactJS – Introduction


diseñar efectos parallax otros blog visual engineering

WORKSHOP: Diseñar efectos "cool" (Parallax y otros)

El efecto Parallax es la nueva tendencia entre los diseñadores web, una tendencia cada vez más extendida en el mundo del diseño. Aunque su nombre parezca complejo, su concepto es sencillo. Básicamente, la imagen o la textura que se encuentra como fondo de pantalla se desplaza más lento que el resto del sitio web.

Aunque podamos creer que no, lo hemos visto mil veces: entras en una web, haces scroll y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías.

El efecto Parallax empezó a ser muy útil ante la caída en desuso de Flash y el auge del diseño plano, en el que permitía dotar a las web de cierto dinamismo y contrarrestar la planitud. Además, los dispositivos móviles fomentan la verticalidad del diseño web por lo que el efecto de Parallax es más que interesante para aportar valor al tedioso scroll y sorprender al usuario con algo que no se espera. Y encima aumenta la usabilidad.

Aunque este efecto parece que es muy novedoso, el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera sensación de tridimensionalidad, intentando lograr con ello un mayor realismo.

Por otro lado, las animaciones CSS3 permiten darle movimiento a cualquier elemento en pantalla, permitiéndote crear loops o efectos de transición que hacen que la web se vea bastante elegante.

Tan importante es el diseño y la usabilidad que queríamos estar al día de las nuevas tendencias y novedades y por eso quisimos hacer el workshop de “Diseñar efectos cool (parallax y otros)” que nuestros diseñadores Toni Camí y Jorge López nos enseñaron.

Presentación para descargar: DISEÑAR EFECTOS COOL PARALLAX Y OTROS

Con HTML5 de CSS3 es suficiente para crear la ilusión de profundidad que proporciona un Parallax. Si te gusta ese código existen tutoriales online como el de Pixel Acres o el de Tuts+.