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+.


emberjs workshop 2 visual engineering

WORKSHOP: EMBERJS PARTE II

EmberJS es un framework que constantemente ha ido cambiando. Hace poco más de dos años que se lanzó y desde entonces ha evolucionado muchísimo: Después de más de 20 lanzamientos y 6000 confirmaciones, en la actualidad se encuentra en su versión 2.x.

Una de las principales razones por la que consideramos que vale la pena probar EmberJS, es el ecosistema alrededor de desarrollo de aplicaciones que ofrece y que ha madurado bastanteIncluye un marco de prueba completo, una recarga en vivo del servidor de desarrollo, soporte ES2015+ a través de Babel, y Ember Addons.

Otra gran parte de Ember es la comunidad, que sigue creciendo y evolucionando en la actualidad. Para apoyar esto, el equipo central de Ember ha adoptado el proceso de Solicitud de Comentarios (RFC) para ofrecer y discutir ideas y direcciones que pueden impactar significativamente en las aplicaciones existentes o futuras.

Consultores, nuevas empresas, compañías de Fortune 500 y organizaciones gubernamentales están reconociendo y adoptando Ember como su marco de elección, citando la longevidad de Ember, su comunidad, su apoyo y su mejora constante.

Así nosotros, después de hacer el workshop de EmberJS y sus características básicas, quisimos ir a un paso más allá e hicimos el segundo workshop de EmberJS en el que nuestros ingenieros Mario García y Marc Torrent nos enseñaron conceptos más avanzados de ese framework.

Presentación para descargar: EmberJS Parte II.


emberjs workshop visual engineering

WORKSHOP: EMBERJS PARTE I

EmberJS es un framework open-source de JavaScript basado en el patrón MVVM (Model-View-ViewModel).

Permite crear aplicaciones web ambiciosas, es decir, está diseñado precisamente para eso: implementar proyectos grandes. Por eso se dice que la curva de aprendizaje es algo alta.

Aunque es reconocido como un framework para web, también se permite hacer aplicaciones de escritorio y de móvil.

Ember se utiliza en muchos sitios web populares, como Discourse, GrouponVine, Live Nation, Nordstrom y Chipotle.

Dado que Ember es un framework muy interesante, decidimos dedicar dos workshops a él, siendo el primero "EmberJS Parte I" impartido por nuestros ingenieros Raúl Delgado y Andrés Lamilla, y dedicado a las características básicas de Ember.

Presentación para descargar: EmberJS 2.5 - Parte I 


ionic-framework-workshop visual engineering

WORKSHOP: APLICACIONES HÍBRIDAS CON IONIC

Ionic es un framework open source gratuito que permite crear aplicaciones híbridas basadas en HTML5 optimizado para móvil, CSS3, y JavaScript. Para instalar ionic necesitamos tener instalado nodejs.

Las aplicaciones híbridas son aplicaciones multiplataforma, es decir, aplicaciones que se pueden ejecutar en Android, iOS, Windows Phone,... sin la necesidad de desarrollarla 2 o 3 veces como te tocaría hacer si tuvieras que hacerlo con el correspondiente lenguaje nativo de cada plataforma.

El framework esta construido con Angular y SASS básicamente, que permite trabajar con elementos CSS de una forma muy cómoda y de ese modo permite asegurar aplicaciones altamente interactivas, robustas, rápidas y escalables.

Ionic trabaja con cordova y en conjunto nos proporcionan herramientas realmente potentes y sencillas de utilizar para crear aplicaciones impresionantes en un período relativamente corto si lo comparamos a realizar la aplicación con cualquiera de los lenguajes nativos.

Dado que Ionic 2 esta cerca de salir de la clase beta, nuestro ingeniero Enrique Oriol nos impartió un workshop de "Aplicaciones híbridas con Ionic" para refrescar conceptos de cara a trabajar con la nueva versión.

Presentación para descargar: Aplicaciones híbridas con IONIC 


angularjs workshop 3 visual engineering

WORKSHOP: ANGULARJS PARTE III

Si la semana pasada hablamos de las nuevas funcionalidades custom y la anterior de sus funcionalidades de fábrica, en esta hablaremos de AngularJS y su testing.

Angular está diseñado pensando también en cómo testear nuestras aplicaciones. La opción de testing puede ser un factor crítico a la hora de elegir un framework y en este caso, angular cuenta con un buen soporte.

Con Angular podemos escribir fácilmente tests unitarios y tests extremo a extremo. Los unitarios nos permiten definir y comprobar el funcionamiento de los componentes de la aplicación por separado y los de extremo a extremo, usando Karma, podemos ejecutarlos levantando un servidor web e interactuar con nuestra aplicación desde un browser como si fuéramos un usuario.

Estos últimos son más lentos de ejecutar que los unitarios y más costosos de implementar, así que normalmente se crean muchos menos.  Aun así, los tests de extremo a extremo son indispensables para garantizar el buen comportamiento del sistema.

Como habéis visto, el testing es tan indispensable que quisimos que nuestros ingenieros Héctor Canto, Juan Luís Marí y Pablo Balduz nos impartieran un workshop de "AngularJS Parte III", dedicada especialmente a los tests.

Presentación para descargar: AngularJS - Parte III


angularjs workshop 2 visual engineering

WORKSHOP: ANGULARJS PARTE II

Cuando hablamos de AngularJS, muchos hemos oído hablar de Angular2, su nueva versión. De esta versión se destacada sus dos características más relevantes:

  • Simplicidad: lo que se ha perseguido en esta nueva versión es simplificar el framework, quedándose solo con lo bueno y mejorando o eliminando lo malo de la primera versión. Angular2 permite usar ECMAScript 6 y TypeScript, con lo que tenemos una sintaxis mucha más entendible y cercana a lenguajes de programación orientados a objetos como Java o C# y los templates definen claramente las características de la vista de un componente y sus relaciones con otros componentes. Esto hace que la curva de aprendizaje sea mucho más pequeña que hace que la productividad de los equipos aumente, permitiendo que se focalicen en la lógica de negocio y la presentación; el framework ya se encarga del resto.
  • Rendimiento: Se han detectado cambios en la vista que antes se hacía con un digest cycle que consumía muchos ciclos de CPU y ahora se implementa con un sistema reactivo que supone una muy importante mejora de rendimiento. Ahora el databinding es unidireccional. Está optimizado para móviles donde los ciclos de CPU y memoria son parámetros críticos para el correcto funcionamiento.

Ahora que Angular2 ya ha salido de la fase beta, es un buen momento para repasar los fundamentos de AngularJS, ya que aunque a nivel de sintaxis se han producido cambios importantes, algunos conceptos fundamentales como los servicios o los providers, mantienen la esencia de AngularJS.

Como ya dijimos la semana pasada quisimos repasar todo lo de AngularJS y esta semana hicimos el workshop de "AngularJS Parte II" en el que nuestros ingenieros Enrique Oriol y Héctor Canto nos enseñaron la creación de nuevas funcionalidades custom.

Presentación para descargar: AngularJS - Parte II

Y lo mejor de todo es que si tienes experiencia en AngularJS y quieres pasar a Angular2, no tienes que empezar de cero, puedes utilizar la guía de migración para actualizar tu código.


angularjs workshop introduccion visual engineering

WORKSHOP: ANGULARJS PARTE I

AngularJS es un framework MVC de JavaScript para el Desarrollo Web FrontEnd que permite crear aplicaciones SPA (Single Page Applications). Pertenece a la familia de frameworks como BackboneJSEmberJS.

Angular es una solución completa que incluye prácticamente todos los aspectos que puedes necesitar para crear una aplicación cliente en JavaScript. Esto incluye la generación de vistas, el uso de data binding, las rutas, la organización de componentes en módulos, la comunicación con el servidor…

Debemos apostar por AngularJS porque no solo podemos crear SPA, sino que también nos permite desarrollar gran variedad de aplicaciones, aprovechando herramientas como el templating, el two-way data binding, uso de módulos, dependency injection, etc. Las últimas revisiones inician el camino hacia la versión 2, que incorpora TypeScript.

Dado que es uno de los frameworks más utilizados, y que su desarrollador es Google, decidimos refrescar y profundizar bien todos los conocimientos de AngularJS. Para eso hicimos 3 workshops, siendo el primero "AngularJS Parte I" en el que nuestros ingenieros Cristina Hernández y Roger Vilà nos enseñaron todas sus funcionalidades de fábrica.

Presentación para descargar: AngularJS - Parte I

Si quieres profundizar tus conocimientos en este framework, te recomendamos visitar el enlace de su web oficial, donde tienes un portal de aprendizaje y ayuda.


tendencias diseño web y prototipado blog visual engineering

WORKSHOP: TENDENCIAS EN DISEÑO WEB Y PROTOTIPADO

Para cualquier empresa tecnológica y/o de diseño, es muy importante estar al corriente de las últimas tendencias visuales, tanto en el online como el offline.

En cada proyecto, debemos preocuparnos mucho de la estética y de que no parezca anticuada. Es más, nuestro diseño tendrá mucho peso en la primera impresión que la gente se forme de nosotros.

Por ese motivo, tenemos que encontrar un diseño que destaque de los demás y que impacte positivamente a nuestros usuarios.

Es muy importante estudiar y estar al día en las últimas tendencias en usabilidad, diseño web y de aplicaciones, tipografía, tecnología...

Dada esa gran importancia del diseño web, decidimos realizar un workshop de "Tendencias en diseño web y prototipado" que nuestros diseñadores Laura Martínez, Jorge López y Toni Camí nos impartieron.

Presentación para descargar: Workshop Trendy Web Designs & Prototyping

Y si queréis más información sobre diseño web, nuestros diseñadores también nos hicieron un previo workshop de "Herramientas de Diseño" muy interesante.


ecmascript6 workshop visual engineering

WORKSHOP: ECMASCRIPT6

ECMAScript v6 (abreviado como ES6 o ES2015) es el estándar que siguió JavaScript a partir de Junio del año 2015.

Se trata de una evolución del lenguaje JavaScript para dotarlo de características avanzadas que requería y que otros lenguajes populares sí las tenían. Características como:

  • Mejoras de sintaxis: parámetros por defecto, let, plantillas...
  • Módulos para organización de código
  • Promesas, para programación asíncrona
  • Mejoras en programación funcional: expresiones de flecha, iteradores, generadores...

ECMAScript, que también viene a ser conocido como JavaScript, está regulado por la Asociación Europea de Fabricantes de Computadoras (ECMA) quien es la encargada de regular multitud de estándares de ámbito mundial en la industria de la computación.

Los frameworks de FrontEnd más utilizados o modernos, como AngularJS y EmberJS, ya utilizan EcmaScript.

Así como éstos apostaron por él, nosotros también hemos decidido apostar y conocerlo y por ello decidimos realizar un workshop de "ECMAScript6" que nuestros ingenieros Mario García y Alex Adrià nos impartieron.

Presentación para descargar: ECMAScript 6.