Ha nacido una estrella: el Front Fest.

En plena ebullición “frontendera”, un grupo de valientes nos ha traído un nuevo evento sobre “HTML, CSS, Javascript... ¡y lo que surja!”: el Front Fest 2017.

Participantes de cuatro de las comunidades más activas dentro del mundo front-end en nuestro país (Angular Madrid, Front-end Developers Madrid, HTML5 Spain y MadridJS) se han lanzado a la aventura para organizar un evento que abarca todos los aspectos del front.

Y está claro que el interés por un evento de este tipo era alto. Las entradas del Front Fest se agotaron en menos de dos horas, a pesar de salir a la venta el 2 de enero cuando mucha gente seguramente tenía la cabeza en otros temas.

Eduardo Sada: Máxima performance (máxima paint performance)

En la primera charla del día se nos apareció “fantas-min”, que se come el rendimiento del navegador y por su culpa caemos en el mito de que hay que hacer apps nativas para lograr una interfaz fluida.

Eduardo Sada nos enseñó cómo evitar su maldición, empleándolo como hilo conductor para mostrar cómo y porqué optimizar las animaciones por CSS. El objetivo es conseguir que el navegador trabaje a 60 cuadros por segundo, lo que nos da 16 milisegundos por cuadro.

Para controlar la parte de JS disponemos de herramientas como Web Workers, que nos permite descargar de trabajo el hilo principal; o requestAnimationFrame, para repartir la ejecución de JS en varios cuadros.

Pero la parte principal de la charla se centró en que podemos optimizar mediante CSS. El objetivo es conseguir que tanto la CPU como la GPU se dediquen a lo que hacen mejor, y la segunda es la que está optimizada para pintar mucho más rápido y con un consumo de memoria drásticamente reducido.

Como al recurrir a la CPU se crea una nueva capa de renderizado, Eduardo nos mostró cómo activar la vista de capas de Google Chrome, aún experimental pero que nos permite controlar el efecto de las mejoras que nos fue enseñando.

Así pudimos ver en vivo y en directo por qué no debemos usar transform para posicionar, ya que ciertas propiedades fuerzan al navegador a crear una nueva capa sobre la marcha. Es mucho más eficiente controlar nosotros qué capas se van a crear mediante la propiedad will-change.

A base de ejemplos como este, Eduardo nos habló de las herramientas necesarias para conseguir una buena optimización, aunque el camino exacto dependerá en cada caso concreto. El interés del tema y la simpática exposición mantuvieron la atención de la audiencia, a pesar de ser la primera charla de la mañana.

Ángel Corral: Animación avanzada con CSS en HTML y SVG para mejorar la UX

La segunda charla de la mañana, de la mano de Ángel Corral, empezó con varios ejemplos de animaciones avanzadas: dar apariencia orgánica aplicando los principios de animación, utilizar easing para ahorrar keyframes, animar background-position-x e y por separado, usar animation-play-state para poder pausar la animación, entrada de elementos y técnicas para animar SVG demostradas con el logo del evento.

El propósito de estos ejemplos fue aportar técnicas e ideas que se pueden aplicar para mejorar la experiencia de usuario más allá de la mera decoración. Animaciones como estas sirven para aportar contexto en las transiciones, dar feedback ante las interacciones y dirigir la atención del usuario (algo tan sencillo y tan antiguo como un cursor parpadeante).

Pueden usarse para contar historias, describiendo procesos y guiando al usuario. Pero siempre con sutileza, las animaciones pueden ser un gran apoyo pero no deben ser protagonistas.

Fue una charla con gran cantidad de ideas útiles, aunque quizás se echó de menos hacer explícito un hilo conductor que uniera las dos partes de la presentación.

Belén Albeza: Let´s code a game in Javascript

¿Qué desarrollador no ha soñado en algún momento con crear su propio videojuego? Para mostrarnos lo sencillo que es llevarlo a cabo en Javascript entró en escena Belén Albeza.

Con una charla muy ambiciosa, creamos un juego al más puro estilo años 80 en menos de una hora. Fue una clase introductoria, pero a su vez magistral de Phaser (phaser.io), framework de HTML5 open source de alto nivel, que nos permite programar videojuegos 2D de una manera muy rápida y sencilla. Paso a paso fuimos agregando assets, aprendiendo qué es un ciclo, anchor point o física básica en 2D.

Mención aparte merece la profundización que hizo sobre el manejo del Pool de memoria, eliminando sprites marcándolos como ¨zombies¨. Y, por supuesto, muy importante el audio, como Belén dice: “Un juego sin audio es muuuuy triste”.

En resumen, una charla muy entretenida e interesante, desde luego a todos nos volvió a entrar el gusanillo de crear nuestro propio videojuego y si es en Javascript mejor que mejor.

Juanjo Montiel: Accesibilidad web: ¿Cómo hacer un Front para todos?

Si hay un gran olvidado, hoy en día, dentro de la comunidad Front es sin duda la accesibilidad. Para remediarlo, Juanjo Montiel nos introdujo en el mundo de la accesibilidad web desde su propia experiencia, dándole a la charla un cariz personal que consiguió la atención de todos los asistentes.

Algunos puntos destacados, que sin duda tendremos en cuenta en nuestros próximos desarrollos, son los siguientes:

• Las webs se leen de arriba a abajo y de izquierda a derecha.
• Importancia de usar headers (h1, h2, etc) de manera apropiada y jerárquica.
• Usar propiedad “alt” en las imágenes importantes que sean enlaces a otras secciones pero no a las meramente decorativas.
• En los formularios no utilizar placeholders sino labels, así como poner el foco del ratón en la lista de errores.
• Usar la propiedad “tabindex” para guiar al usuario por la página.
• No reproducir automáticamente elementos multimedia ya que interfieren con el lector de pantalla.
• El uso correcto del contraste de colores es muy importante.

Una vez superada la curva de aprendizaje inicial, la accesibilidad no supone tanto trabajo.

Con una charla muy divertida, digna del mejor monologuista del Club de la Comedia, Juanjo logró meterse a la audiencia en el bolsillo, además de concienciar sobre un tema tan importante.

Juan de la Cruz: Workflows sanos y funcionales entre equipos (UX, UI, Front)

Como no todo en la vida del “frontendero” es picar HTML, CSS, y JS, también se agradecen charlas como la de Juan de la Cruz, que desde su perspectiva como diseñador nos ayudó a mejorar nuestros flujos de trabajo. Tal como él mismo nos recordó, las metodologías ágiles se basan en la colaboración, la participación, y sobre todo la comunicación.

Para empezar es necesario identificar los síntomas de un workflow fallido:

• Diferencias diseño / implementación.
• Cuando el diseñador hace código (“me voy a poner a maquetar por ir adelantando”).
• Micro interacciones no tan “micro”.
• Corner cases ignorados.
• DocumentaWHAT?

Seguramente nos suenan algunos de estos fracasos, que en general revelan que los diferentes roles del equipo van por su lado y la comunicación es poco frecuente, asociada exclusivamente a reuniones, demos, y similares.

Mejorar la salud de nuestro flujo de trabajo implica, como nos contó Juan, dedicar tiempo a las fases de preparación previas al inicio del proyecto propiamente dicho, a ser posible implicando a todo el equipo desde lo más pronto posible.

Su propuesta incluyó las etapas concretas y las buenas prácticas que ayudan a sentar las bases de un buen workflow. Por ejemplo, además de trabajar los Definition of Ready y Definition of Done, se añade el Definition of Pride, con la idea de reflejar la satisfacción del equipo con el trabajo realizado, y buscar puntos de mejora.

Resumiendo, se trata de establecer unas bases sólidas para que, al estar todo el equipo (¡y el cliente!) enfocados en una misma dirección, las comunicaciones sean más rápidas, frecuentes y naturales. Por la confianza que transmitió Juan, se notaba que se trata de unas conclusiones a las que ha llegado a base de experiencia, y seguro que todo el mundo se pudo llevar al menos algún detalle útil.

Javier Velasco: Escribiendo estilos para componentes React

Después de un merecido descanso para comer, volvimos con fuerzas renovadas para recibir a Javier Velasco creador del famosísimo React Toolbox (conjunto de componentes para React que implementa “Material Design”).

La charla se centró sobre el siempre controvertido debate de aplicar estilos a componentes React desde Javascript. Javier señalaba los numerosos problemas de CSS en proyectos grandes, en los cuales, el aplicar estilos sin dependencias directamente a los componentes, es la mejor manera de afrontarlo.

Nos mostró que no es una tarea fácil y de ahí los numerosos frameworks que existen para abordar el problema (CSS Modules, Glamor, Aphrodite, JSS), pero el que destaca sobre todos ellos es styled-components. Javier indicó que el Core del nuevo React Toolbox 2 será refactorizado utilizando styled-components y puso algún ejemplo de lo sencillo que será crear “Temas de estilos” y no solo ceñirse a Material Design.

La charla fue muy interesante pero, sin duda, generó cierto debate y controversia.

Sergio Zamarro: Aplicaciones offline en un mundo online

Aunque pudiera parecer que la conexión a Internet es algo tan extendido como la electricidad, Sergio Zamarro nos relató cómo se vio implicado en un proyecto que requería funcionar en el navegador sin conexión.

Hoy en día esto se puede solucionar con un cache manifest y una solución de persistencia de datos. Así se consigue una aplicación en la que, además de funcionar en modo offline, el inicio y el acceso a información estática son muy rápidos.

Las desventajas están en la mantenibilidad (más código, más bugs) y la limitación de espacio de almacenamiento en el navegador. Además, hay que enfrentarse a temas que desde front no solemos tocar, como la sincronización de datos o las búsquedas. Pero aunque no sea tan sencillo como mandar una petición al servidor, poco a poco van apareciendo herramientas que nos facilitan estos aspectos, como Firebase.

El cache manifest sirve para indicar al navegador qué archivos queremos que se guarden en local, los que necesitan conexión y los fallback o alternativas para el modo offline. Sin embargo es una herramienta poco eficiente, ya que cuando actualizamos el cache manifest se vuelven a descargar todos los archivos. Según se vaya extendiendo su soporte los Service Workers serán una mejor solución.

Para la persistencia de datos, Sergio nos comentó varias alternativas con sus ventajas y desventajas: LocalStorage, WebSQL, IndexedDB, y la opción que finalmente usó, PouchDB, gracias a su compatibilidad, ligereza, curva de aprendizaje y por ser open source. Como desventaja, no tiene mucha versatilidad si no se añaden plugins, simplemente que en cada caso tendremos que incluir los que nos hagan falta.

Además, tuvo la valentía de mostrarnos una aplicación en vivo, aunque en local lógicamente no se puede ver cómo funcionan este tipo de aplicaciones y hace falta un servidor de desarrollo. Y aunque el temido efecto demo hizo su aparición, quedó claro que la charla estaba muy trabajada, con toda la experiencia de un proyecto real y de envergadura detrás. Si hubiera sido posible disponer de más tiempo podría haber sido interesante entrar algo más en profundidad.

Ramón Guijarro: Cosas increíbles que puedes hacer con una web

La presentación de Ramón Guijarro se puede resumir con un gif:

Así es, Ramón nos enseñó a hacer magia con una web.

Mediante una PWA (Progressive Web Application) de un unicornio rosa :P hizo un repaso por diferentes HTML5 Web APIs (Geolocation, Notifications, Payment Request, Web Bluetooth, Web Speech).

Desde geolocalizar nuestra posición, hasta encender una bombilla pasando por jugar con reconocimiento de voz o pagar pulsando un simple botón.

Todas estas funcionalidades las podemos encontrar en Chrome Canary, pero poco a poco estarán disponibles en todos los navegadores con lo que se nos abre un mundo de posibilidades con las que cualquier desarrollador ni siquiera ha soñado.

La exposición de Ramón fue muy divertida y amena, la temática acompañaba, pero la demostración en vivo la elevó a otro nivel. Dejó muy buenas sensaciones.

Esperamos, ansiosos, que publique en su cuenta de github la demo.

David Inga: Tecnología por el cambio climático

Para cerrar el evento, David Inga nos trajo una propuesta distinta: cómo lograr tener un impacto en el mundo desde nuestra parcela. Y, seguramente, el mayor desafío al que nos enfrentamos es el cambio climático, que nos afecta absolutamente a todos. ¿Qué podemos aportar como desarrolladores front-end?

La visualización de datos es una herramienta muy poderosa para despertar conciencias, ilustrando la magnitud del problema. Para educar podemos desarrollar aplicaciones y juegos como Survive Global Climate Change. Y por último, David nos mostró su experiencia desarrollando mapas y herramientas de visualización de datos de satélites que permiten detectar alteraciones medioambientales, incendios, cumplimiento de leyes y acuerdos, o herramientas de control de la trazabilidad.

En paralelo fuimos viendo el stack tecnológico utilizado en estos desarrollos: Google Earth Engine, Backbone.js en proyectos algo más antiguos, React y Redux más recientemente, D3... Como base para los mapas, David comentó que prefiere usar Leaflet porque es más ligero y ágil que Google Maps.

Y para terminar, una gran frase:

En las preguntas, al final de la charla, surgió la cuestión del acceso a este tipo de datos en nuestro país. La situación no es buena: los datos no están unificados ni compartidos. En muchos casos por ser competencia de las diferentes Comunidades Autónomas. Incluso se da el problema de datos generados gracias a inversiones públicas, pero que su explotación ha sido privatizada.

Y esto fue Front Fest 2017. Nueve estupendas charlas de temática variada, una organización impecable y muy buen ambiente. Por la sensación que vimos entre los asistentes, y lo que comentó la organización al cierre, ha sido todo un éxito y ya hay ganas de repetir en 2018.

Paradigma, como en otros eventos de esta envergadura, fue patrocinador y Media Partner y pronto podréis disfrutar de todas las charlas que grabamos en nuestro canal de YouTube y que iremos publicando según terminemos de editarlas.

Por mencionar algún apartado mejorable: solo una mujer entre los ponentes, a pesar de que la organización intentó que hubiera más diversidad. Es verdad que es un problema de la industria en general, pero precisamente por eso es importante mejorar. Aunque, todo hay que decirlo, las presentaciones de todas las charlas, los turnos de preguntas, el discurso de bienvenida y la emotiva despedida del evento corrieron a cargo de mujeres.

Y ya para sacar nota, habría sido genial para los que se quedaron sin entrada que hubiera sido posible ofrecer streaming del evento. Pero lo peor de todo es que todavía falta un año para el próximo Front Fest.