equipo desarrollo 
Alrededor de las 9:30 del pasado sábado 9 de febrero, con nuestra acreditación colgando ya del cuello, nos hicimos sitio en la sala de congresos de La Nave de Madrid. Pocos minutos después comenzó el acto con el discurso de bienvenida por parte de la organización.
FrontFest es un evento centrado en el desarrollo Front-End que ha cumplido con ésta su tercera edición. Se diferencia de la mayoría de los grandes eventos de desarrollo en que los asistentes no necesitan planificar su hoja de ruta para asistir a una u otra charla, ya que, gracias a estar centrada en un público concreto, solamente cuenta con un track; así que en esta ocasión nos dejamos llevar.
Como novedades, este año contó con una app para hacer preguntas a los ponentes; se trata de una adaptación del sistema que ya se utilizó un par de semanas antes en la BilboStack, y que tuvo mucho éxito. El procedimiento es sencillo: a través de una url, los asistentes accedían a una sala virtual para lanzar sus cuestiones al ponente, lo que evita las pérdidas de tiempo pasando el micrófono en las rondas de preguntas durante el evento.
Otra de las flamantes novedades es que este año el evento fue más accesible gracias a que contaron con dos intérpretes de lengua de signos que hicieron un gran trabajo, haciendo posible que personas sordas pudieran seguir el evento. Sin duda fue un golpe en la cara para todos, que tanto presumimos a veces de accesibilidad en nuestros desarrollos, pero habitualmente no nos paramos a pensar en con qué barreras se puede encontrar la persona que trabaja a nuestro lado. Por eso, y aunque aún nos queda mucho que mejorar en el tema de accesibilidad e igualdad de oportunidades a todos, sin duda es un gran paso y una gran iniciativa que seguro que no se queda ahí. ¡Esperamos que así sea en más eventos!
Este año el escenario fue inaugurado por Paqui Calabria e Ismael Navarro con su charla titulada Duendecillos en tu navegador: service workers. Comenzaron explicando qué es un Web Worker y las diferencias entre cada uno de ellos, para finalmente centrarse en los Service Workers: características, limitaciones y ciclo de vida. Para hacérnoslo más fácil, nos trajeron ejemplos prácticos de cómo es trabajar con y sin service workers.
A ellos les siguió Cristina Ponce –Road to Web Components(slides)- que nos dio una clase magistral sobre web components, el uso de shadow DOM y los HTML templates. Comenzó explicando la evolución que han llevado los WC desde que surgieron allá por 2010 y continuó con ejemplos prácticos de su librería propia Awesome Web Components, componentes agnósticos a cualquier framework.
Seguimos con Eduardo San Martín, con su charla «¿Cómo funciona un router SPA? Caso práctico con Vue Router (slides). Eduardo es un experto en VueJS; tanto que trabaja en el core de este Framework. Comenzó nombrando algunas librerías que sirven de enrutador para otros frameworks (page.js, Reach Router), para finalmente centrarse en Vue Router. Con una demo en un ágil live coding nos mostró cómo hacer rutas dinámicas (con un id de usuario, por ejemplo) o proteger nuestras rutas con guardas globales o de componente.
Un año más la organización reservó un espacio para analizarnos más allá del ámbito de la programación. Este año fue el turno de La igualdad en los espacios laborales: retos y beneficios, a cargo de José Antonio Vela, sociólogo especializado en género. Sin duda, fue una charla muy constructiva y muy necesaria que nos planteó si realmente vivimos y trabajamos en un ambiente integrador con todos.
Tras la comida llegó la que sería la charla que más risas desató: Cómo te la ‘colamos’ los diseñadores todos los días. James Heda Weng señaló la línea que separa a diseñadores y desarrolladores para finalmente advertir que tenemos muchas cosas en común. Nos planteó la cuestión: ¿Hay que seguir las modas? Realmente, ¿si algo es tendencia hay que adaptarse a ésto a cualquier precio? Pero, sobre todo, nos dio algunas ideas de cómo podemos hacernos más fácil el trabajo unos a los otros y favorecer la comunicación entre dos equipos que a día de hoy tienen que trabajar mano a mano.
Vicente Lucendo repetía en el FrontFest este año para darnos una clase magistral sobre Cómo programar un motor de animaciones cuidando el rendimiento (slides). Nos presentó dos librerías de programación gráfica con las que él suele trabajar, con sus pros y sus contras: TweenMax y Anime.js.
Nos enseñó a implementar nuestra propia librería de animaciones dándonos unos conceptos básicos: qué es un ticker, la importancia de elegir un buen ease, control de reproducción, actualización de las animaciones con delta time, etc…
Finalizó con un test de rendimiento «tramposo», dado que nuestra librería siempre mostraba un mejor rendimiento que las mencionadas anteriormente, debido, como muy bien explicó, a que nuestra librería tiene muy pocas funcionalidades comparándolo con las otras dos.
Jesús Olazagoitia nos puso al día de una de las novedades de CSS con su charla Las reglas han cambiado: Custom Properties – slides.
Éstas son variables nativas del procesador, que pueden ser declaradas a nivel global (:root), o a niveles más específicos. La sintaxis para declararlas es la siguiente
:root {
--color: #ffffff; //declaro mi variable a nivel global
}
p {
color: var(--color); //la utilizo para asignar el valor
}Si la variable, no está definida, podemos pasarle a var() un segundo parámetro que será el valor por defecto, pero si definimos un valor inválido en la variable para esa propiedad, tomará «inherit» y no el valor por defecto. Ejemplo:
// si --color no está declarada, toma #556B2F:
p {
color: var(--color, #556B2F);
}
// --color está definido pero no es un valor válido
// para esa propiedad, por lo que tomará "inherit"
// en lugar del valor por defecto que le hemos pasado
:root {
--color: 1%;
}
p {
color: var(--color, #556B2F); //output -> color: inherit;
}
Ya que las custom properties son dinámicas, podemos reasignarle valores para cambiar el contenido: por ejemplo, es muy útil a la hora de hacer theming o con esquemas de colores definidos por el usuario (dark mode de OSx).
Las custom properties también pueden ser usadas en svgs, pero no pueden ser animadas con @keyframes.
Para poner la guinda al pastel, Sergio Arbeo nos trajo el Testing sin dogmas (slides).
Tras explicar conceptos básicos de testing, como qué es una aserción, un test y una suite o módulo, así como las diferencias entre un test de integración, de aceptación (E2E) o unitario, nos contó cómo implementa él los tests tras su experiencia profesional. Sergio utiliza el patrón Arrange-Act-Assert (AAA) para sus test; cada uno de los métodos del test debe tener estas secciones.
Los tests Hooks se ejecutan antes o después de nuestros test y sirven, por ejemplo, para inicializar librerías, internacionalización, etc.
Para clausurar el evento, nos propusieron a todos los asistentes un juego de preguntas sobre el mundo front en tiempo real a través de una app; los ganadores se repartieron los premios que estaban bajo sorteo. Tras entregarlos, la organización del evento dio un emotivo discurso en el que agradeció a todos los asistentes el poder hacer realidad un año más el FrontFest.
Desde aquí queremos dar la enhorabuena a todo el equipo* que organiza Front Fest, por superarse cada año y las gracias por dedicar una buena parte de su tiempo libre para hacer un regalo a la comunidad. Así es como se consiguen eventos de 10.
*Ignacio Villanueva, Juan del Río, Luis Calvo, Luis de Dios, Marina López, Noemi Medina, Rubén Valseca y Vanessa Medina.
