Haciendo TDD en frontend

Que no te den envidia tus amigos de backend

Con los gemelos “fullstack”: Javier hace frontend y David hace backend

En el mundo del desarrollo solemos encontrar especialistas centrados en frontend como Javier y especialistas en backend como David pero también podemos encontrar perfiles mixtos como en nuestro caso. Sabemos que Javier sigue buenas prácticas y hace tests en frontend pero, ¿que pasaría si ponemos a David en un proyecto front? Quizás le costaría un poco al principio como nos pasó a nosotros.

En el backend, es relativamente común encontrar software bien cubierto de tests, y tanto el tooling de desarrollo, como el conocimiento general de diferentes patrones de diseño y arquitectura, permite que esté bastante extendido el uso de TDD para conseguir software fácilmente mantenible y evolucionable. Sin embargo, por diversos motivos que no vamos a analizar aquí, en el mundo del desarrollo frontend esto es menos frecuente.

Todos los miembros de Coding Stones habíamos tocado frontend antes de formar el equipo pero, hasta nuestro primer proyecto juntos, no nos habíamos enfrentado a una aplicación SPA rica que nos exigió ponernos las pilas para poder aplicar las mismas prácticas que ya veníamos aplicando hace muchos años en backend.

En la última Software Craftsmanship Barcelona contamos cómo había sido nuestro doloroso camino y en la última Codemotion enseñamos cómo hemos conseguido aplicar una serie de prácticas, patrones y herramientas independientes del framework elegido para cada proyecto web. Aquí tenéis el video:

Anarchy.js en Codemotion 2017

¿Es realmente tan importante el framework/librería elegido?

Es evidente que no todos los frameworks nos dan la misma experiencia de desarrollo pero, a veces le damos demasiada importancia a las herramientas y nos olvidamos de incidir en los principios base que estarán con nosotros muchos más años que el brillante framework de turno.

En la última charla tratamos de transmitir esta idea y por eso comparamos ejemplos de tests de una misma aplicación implementada con diferentes frameworks: React (usando SemanticUI para hacerla responsive), Ionic2 (que usa Angular2/4 por debajo) y Quasar (que usa VueJs por debajo).

Acabamos de publicar los repos de la app en Ionic2 y React para que podáis ver en detalle el código que comentábamos en las charlas:

Por otro lado, se acaban de publicar en CodelyTvPro los primeros videos de nuestro curso “Crea una app con VueJs y Jest”, en el que mostramos y explicamos en detalle las herramientas y buenas prácticas que nos han permitido trabajar en frontend con la misma soltura que en el backend.

Intro al curso de CodelyTv

Tanto si usas VueJS como si no, pensamos que el curso te puede resultar interesante porque hemos contado lo que a nosotros nos hubiera gustado saber cuando empezamos a pelearnos con los frameworks web y pensamos que puede ahorrarte algo de frustración y tiempo.

David lo tiene fácil para aprender a hacerlo bien en frontend porque puede apoyarse en su hermano gemelo. Si tu no tienes un gemelo quizás te pueden interesar algunas cosas que contamos en el curso ☺️☺️.


En los Coding Stones ayudamos a compañías desarrollando software, además de impartir formación y mentoring a equipos. Si crees que podemos ayudarte en la implantación del uso o mejora de este tipo de prácticas, péganos un toque y vemos si podemos tocar juntos.